diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index 166a9387..692a2086 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -1094,6 +1094,13 @@ var ComunicWeb = { }, }, + + /** + * Dark Theme component + */ + darkTheme: { + //TODO : implement + } }, /** diff --git a/assets/js/components/darkTheme.js b/assets/js/components/darkTheme.js new file mode 100644 index 00000000..03ea3e7c --- /dev/null +++ b/assets/js/components/darkTheme.js @@ -0,0 +1,58 @@ +/** + * Dark theme component + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.darkTheme = { + + /** + * This variable contains the dark theme status + */ + _enabled: false, + + /** + * CSS element that contains dark theme CSS rules + */ + _cssElem: null, + + /** + * Check out whether dark theme is enabled or not + * + * @return {boolean} TRUE if enabled / FALSE else + */ + isEnabled: function(){ + return this._enabled; + }, + + /** + * Specify whether dark theme should be enabled or not + * + * @param {boolean} enable TRUE to enable / FALSE else + */ + setEnabled: function(enable){ + this._enabled = enable; + + //Check if the theme has to be disabled + if(!this._enabled){ + if(this._cssElem != null) + this._cssElem.disabled = true; + return; + } + + //Check if CSS element is already loaded + else if(this._cssElem != null) + this._cssElem.disabled = false; + + //We need to load dark theme + else { + + this._cssElem = createElem2({ + type: "link", + href: ComunicWeb.__config.assetsURL + "css/dark_theme.css" + }); + this._cssElem.setAttribute("rel", "stylesheet"); + document.head.appendChild(this._cssElem); + } + } +} \ No newline at end of file diff --git a/assets/js/components/menuBar/authenticated.js b/assets/js/components/menuBar/authenticated.js index 2a992869..1ddd5b21 100644 --- a/assets/js/components/menuBar/authenticated.js +++ b/assets/js/components/menuBar/authenticated.js @@ -121,6 +121,9 @@ ComunicWeb.components.menuBar.authenticated = { openPage("settings"); }; + //Add dark theme button + this.addDarkThemeButton(dropdownContent); + //Add logout link var logoutButton = createElem("li", dropdownContent); var logoutButtonLink = createElem("a", logoutButton); @@ -131,11 +134,54 @@ ComunicWeb.components.menuBar.authenticated = { return dropdownContent; }, + /** + * Add DarkTheme for the button + * + * @param {HTMLElement} target The target for the button + */ + addDarkThemeButton: function(target){ + + var darkThemeButton = createElem2({ + appendTo: target, + type: "li" + }); + + var darkThemeLink = createElem2({ + appendTo: darkThemeButton, + type: "a", + }); + + var darkThemeIcon = createElem2({ + appendTo: darkThemeLink, + type: "span" + }); + + createElem2({ + appendTo: darkThemeLink, + type: "span", + innerHTML: "Dark Theme" + }); + + /** + * Refresh icon states accordingly to + * dark theme status + */ + var RefreshIcon = function(){ + darkThemeIcon.className = "fa " + (ComunicWeb.components.darkTheme.isEnabled() ? "fa-moon-o" : "fa-sun-o"); + } + RefreshIcon(); + + darkThemeLink.addEventListener("click", function(){ + ComunicWeb.components.darkTheme.setEnabled(!ComunicWeb.components.darkTheme.isEnabled()); + RefreshIcon(); + }); + }, + /** * Add alternate latest posts button * (if the screen is too small to display "Comunic") * - * @param {HTMLElement} target The target for the ubutton + * @param {HTMLElement} target The target for the button */ addAlternateLatestPostsButton: function(target){ //Create button diff --git a/builder b/builder index dc3f5f86..2b5eeeaa 100755 --- a/builder +++ b/builder @@ -176,6 +176,7 @@ if(file_exists(OUTPUT_DIRECTORY)) delDir(OUTPUT_DIRECTORY); mkdir(OUTPUT_DIRECTORY, 0777, true); mkdir($path_release_assets, 0777, true); +mkdir($path_release_assets."/css", 0777, true); @@ -230,6 +231,9 @@ rcopy($path_debug_assets."img/", $path_release_assets."img/"); rcopy($path_debug_assets."templates/", $path_release_assets."templates/"); +//Copy dark theme +rcopy($path_debug_assets."css/dark_theme.css", $path_release_assets."css/dark_theme.css"); + //Create main HTML file notice("Generate PHP root file"); $page_src = '