From b649d66d5fd5e09ec5b91a5f7b9e63b2dedc35d7 Mon Sep 17 00:00:00 2001
From: Halfmoon UI <67643916+halfmoonui@users.noreply.github.com>
Date: Wed, 16 Sep 2020 22:04:47 +0600
Subject: [PATCH] Version 1.1.0 released
---
CONTRIBUTING.md | 8 +-
README.md | 30 +-
css/halfmoon-variables.css | 11122 ++++++++++++++++++-------------
css/halfmoon-variables.min.css | 11 +
css/halfmoon.css | 3427 +++++++---
css/halfmoon.min.css | 18 +-
index.js | 3 +
js/halfmoon-module.js | 513 ++
js/halfmoon.js | 46 +-
js/halfmoon.min.js | 4 +-
package.json | 31 +
starter-template.html | 9 +-
12 files changed, 9780 insertions(+), 5442 deletions(-)
create mode 100644 css/halfmoon-variables.min.css
create mode 100644 index.js
create mode 100644 js/halfmoon-module.js
create mode 100644 package.json
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4227dc3..2aa0774 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,19 +6,19 @@ Please read this short document if you want to contribute to Halfmoon.
Before getting to the issues and pull requests, it is important to understand what the framework is trying to do.
-Halfmoon's stated goal is really simple - create a customizable frontend framework, with a built-in dark mode, that is brilliant for building dashboards and tools. However, our other goals are more implicit:
+Halfmoon's stated goal is really simple - create a customizable frontend framework, with a built-in dark mode, that is great for building dashboards and tools. However, our other goals are more implicit:
- Everything has to be **super functional and snappy**. Ideally, that means no performance issues and just consistently good execution.
-- Everything has to **look good** as well, and have a **single consistent style**.
+- Everything has to **look good** as well, and have a **single, consistent style**.
-The most important thing here is building a **really good (looking) framework that works very well**, and that should always be the top priority.
+The most important thing here is building a **really good (looking) framework that also works very well**, and that should always be the top priority.
## Issues
Please keep the following things in mind when raising issues:
- Feature requests are welcome. However, please make sure that the feature you are requesting falls under the scope of the project.
-- **Do not** post personal support questions as issues. For those, use this [tag in Stack Overflow](https://stackoverflow.com/questions/tagged/halfmoon).
+- **Do not** post personal support questions as issues. For those, use this [tag on Stack Overflow](https://stackoverflow.com/questions/tagged/halfmoon).
- When raising an issue, please be as thorough as possible. For possible bugs, reproducible code is always a great sign.
## Pull requests
diff --git a/README.md b/README.md
index 7e4e6e6..14f0580 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,13 @@
# [Halfmoon](https://www.gethalfmoon.com)
-> Front-end framework with a built-in dark mode, designed for rapidly building beautiful dashboards and product pages.
+> Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.
-- **Designed specifically for building dashboards**—This means that a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc.
-- **Built-in dark mode**—Now all of your websites will automatically come with a dark mode.
+- **Built-in dark mode**—Halfmoon comes with a built-in, toggleable dark mode, which is one of its most important and defining features.
+- **Fully customizable using CSS variables**—The framework is built entirely using CSS variables (also known as CSS custom properties). There are close to *1,500 CSS variables*, which means that almost everything can be customized by overriding a property, making it very easy to theme Halfmoon to fit your brand. [Learn more about customization](https://www.gethalfmoon.com/docs/customize/).
+- **Great for building dashboards and tools**—The components have a very standard look and feel to them, making them suitable for dashboards and tools. Moreover, a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. and there are also *tons of utilities* available.
- **Optional JS library**—Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies, such as jQuery.
- **Bootstrap like classes**—The class names should be instantly familiar to anyone who has used Bootstrap.
- **Cross-browser compatibility**—Fully supports almost all the browsers under the sun, including really old ones like Internet Explorer 11.
-- **Easily customizable**—The repo also contains a variables file (`halfmoon-variables.css`) where custom CSS properties (variables) are used in the code for things like colors, layout properties, etc. This makes it extremely easy to customize Halfmoon to your liking, as the use of modern CSS variables means that things like pre-processors are not needed.
To learn more, go to [the documentation](https://www.gethalfmoon.com/docs/introduction/).
@@ -17,12 +17,19 @@ The quickest way to get started with Halfmoon is by using the CDN to include the
```html
-n;n++)t=arguments[n],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:n.call(this,t)}}"replace"in document.createElement("_").classList||(DOMTokenList.prototype.replace=function(t,e){var n=this.toString().split(" "),i=n.indexOf(t+"");~i&&(n=n.slice(i),this.remove.apply(this,n),this.add(e),this.add.apply(this,n.slice(1)))}),t=null}());
+
+/* End polyfills */
+
+
+/* Halfmoon JS core */
+
+var halfmoon = {
+ // Getting the required elements
+ // Re-initialized once the DOM is loaded (to avoid issues with virtual DOM)
+ pageWrapper: document.getElementsByClassName("page-wrapper")[0],
+ stickyAlerts: document.getElementsByClassName("sticky-alerts")[0],
+
+ darkModeOn: false, // Also re-initialized once the DOM is loaded (see below)
+
+ // Create cookie
+ createCookie: function(name, value, days) {
+ var expires;
+ if (days) {
+ var date = new Date();
+ date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+ expires = "; expires=" + date.toGMTString();
+ }
+ else {
+ expires = "";
+ }
+ document.cookie = name + "=" + value + expires + "; path=/";
+ },
+
+ // Read cookie
+ readCookie: function(name) {
+ var nameEQ = name + "=";
+ var ca = document.cookie.split(";");
+ for(var i=0; i < ca.length; i++) {
+ var c = ca[i];
+ while (c.charAt(0) === " ") {
+ c = c.substring(1, c.length);
+ }
+ if (c.indexOf(nameEQ) === 0) {
+ return c.substring(nameEQ.length,c.length);
+ }
+ }
+ return null;
+ },
+
+ // Erase cookie
+ eraseCookie: function(name) {
+ this.createCookie(name, "", -1);
+ },
+
+ // Toggle light/dark mode
+ toggleDarkMode: function() {
+ if (document.body.classList.contains("dark-mode")) {
+ document.body.classList.remove("dark-mode");
+ this.darkModeOn = false;
+ this.createCookie("halfmoon_preferredMode", "light-mode", 365);
+ } else {
+ document.body.classList.add("dark-mode");
+ this.darkModeOn = true;
+ this.createCookie("halfmoon_preferredMode", "dark-mode", 365);
+ }
+ },
+
+ // Get preferred mode
+ getPreferredMode: function() {
+ if (this.readCookie("halfmoon_preferredMode")) {
+ return this.readCookie("halfmoon_preferredMode");
+ } else {
+ return "not-set";
+ }
+ },
+
+ // Toggles sidebar
+ toggleSidebar: function() {
+ if (this.pageWrapper) {
+ if (this.pageWrapper.getAttribute("data-sidebar-hidden")) {
+ this.pageWrapper.removeAttribute("data-sidebar-hidden");
+ } else {
+ this.pageWrapper.setAttribute("data-sidebar-hidden", "hidden");
+ }
+ }
+ },
+
+ // Deactivate all the dropdown toggles when another one is active
+ deactivateAllDropdownToggles: function() {
+ var activeDropdownToggles = document.querySelectorAll("[data-toggle='dropdown'].active");
+ for (var i = 0; i < activeDropdownToggles.length; i++) {
+ activeDropdownToggles[i].classList.remove("active");
+ activeDropdownToggles[i].closest(".dropdown").classList.remove("show");
+ }
+ },
+
+ // Toggle modal (using Javascript)
+ toggleModal: function(modalId) {
+ var modal = document.getElementById(modalId);
+
+ if (modal) {
+ modal.classList.toggle("show");
+ }
+ },
+
+ /* Code block for handling sticky alerts */
+
+ // Make an ID for an element
+ makeId: function(length) {
+ var result = "";
+ var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+ var charactersLength = characters.length;
+ for ( var i = 0; i < length; i++ ) {
+ result += characters.charAt(Math.floor(Math.random() * charactersLength));
+ }
+ return result;
+ },
+
+ // Toast an alert (show, fade, dispose)
+ toastAlert: function(alertId, timeShown) {
+ var alertElement = document.getElementById(alertId);
+
+ // Setting the default timeShown
+ if (timeShown === undefined) {
+ timeShown = 5000;
+ }
+
+ // Alert is only toasted if it does not have the .show class
+ if (!alertElement.classList.contains("show")) {
+ // Add .alert-block class if it does not exist
+ if (!alertElement.classList.contains("alert-block")) {
+ alertElement.classList.add("alert-block");
+ }
+
+ // Show the alert
+ // The 0.25 seconds delay is for the animation
+ setTimeout(function() {
+ alertElement.classList.add("show");
+ }, 250);
+
+ // Wait some time (timeShown + 250) and fade out the alert
+ var timeToFade = timeShown + 250;
+ setTimeout(function() {
+ alertElement.classList.add("fade");
+ }, timeToFade);
+
+ // Wait some more time (timeToFade + 500) and dispose the alert (by removing the .alert-block class)
+ // Again, the extra delay is for the animation
+ // Remove the .show and .fade classes (so the alert can be toasted again)
+ var timeToDestroy = timeToFade + 500;
+ setTimeout(function() {
+ alertElement.classList.remove("alert-block");
+ alertElement.classList.remove("show");
+ alertElement.classList.remove("fade");
+ }, timeToDestroy);
+ }
+ },
+
+ // Create a sticky alert, display it, and then remove it
+ initStickyAlert: function(param) {
+ // Setting the variables from the param
+ var content = ("content" in param) ? param.content: "";
+ var title = ("title" in param) ? param.title: "";
+ var alertType = ("alertType" in param) ? param.alertType: "";
+ var fillType = ("fillType" in param) ? param.fillType: "";
+ var hasDismissButton = ("hasDismissButton" in param) ? param.hasDismissButton: true;
+ var timeShown = ("timeShown" in param) ? param.timeShown: 5000;
+
+ // Create the alert element
+ var alertElement = document.createElement("div");
+
+ // Set ID to the alert element
+ alertElement.setAttribute("id", this.makeId(6));
+
+ // Add the title
+ if (title) {
+ content = "" + title + " " + content;
+ }
+
+ // Add the classes to the alert element
+ alertElement.classList.add("alert");
+ if (alertType) {
+ alertElement.classList.add(alertType);
+ }
+ if (fillType) {
+ alertElement.classList.add(fillType);
+ }
+
+ // Add the close button to the content (if required)
+ if (hasDismissButton) {
+ content = "× a;a++)e=arguments[a],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var a=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:a.call(this,e)}}"replace"in document.createElement("_").classList||(DOMTokenList.prototype.replace=function(e,t){var a=this.toString().split(" "),o=a.indexOf(e+"");~o&&(a=a.slice(o),this.remove.apply(this,a),this.add(t),this.add.apply(this,a.slice(1)))}),e=null}());var halfmoon={pageWrapper:document.getElementsByClassName("page-wrapper")[0],stickyAlerts:document.getElementsByClassName("sticky-alerts")[0],darkModeOn:"no",createCookie:function(e,t,a){var o;if(a){var s=new Date;s.setTime(s.getTime()+24*a*60*60*1e3),o="; expires="+s.toGMTString()}else o="";document.cookie=e+"="+t+o+"; path=/"},readCookie:function(e){for(var t=e+"=",a=document.cookie.split(";"),o=0;o"+a+""+t),r.classList.add("alert"),o&&r.classList.add(o),s&&r.classList.add(s),n&&(t="× 1?o.innerHTML=e.target.files.length+" files":o.innerHTML="No file chosen"})}halfmoon.pageWrapper&&halfmoon.pageWrapper.classList.add("with-transitions")}document.addEventListener("DOMContentLoaded",halfmoonOnDOMContentLoaded);
\ No newline at end of file
+Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null}),"document"in self&&("classList"in document.createElement("_")&&(!document.createElementNS||"classList"in document.createElementNS("http://www.w3.org/2000/svg","g"))||function(e){"use strict";if("Element"in e){var t="classList",o="prototype",a=e.Element[o],s=Object,n=String[o].trim||function(){return this.replace(/^\s+|\s+$/g,"")},i=Array[o].indexOf||function(e){for(var t=0,o=this.length;t"+o+""+t),r.classList.add("alert"),a&&r.classList.add(a),s&&r.classList.add(s),n&&(t="×
-
+
Starter template - Halfmoon
-