From c9f04ff25bc2088843a242477d1e1d647a1d2ff7 Mon Sep 17 00:00:00 2001 From: Erik Pettersson Date: Fri, 2 Apr 2021 18:55:08 +0200 Subject: [PATCH] Some cleaning and added possibility to use two symbols/images/texts on each button (when hiding and showing). --- MMM-Modulebar.css | 22 ++-- MMM-Modulebar.js | 270 ++++++++++++++++++++++++++++------------------ README.md | 39 ++++--- 3 files changed, 206 insertions(+), 125 deletions(-) diff --git a/MMM-Modulebar.css b/MMM-Modulebar.css index 67efe8c..a030345 100755 --- a/MMM-Modulebar.css +++ b/MMM-Modulebar.css @@ -39,15 +39,15 @@ margin: -5px 0; } -.paint-it-black{ - position: fixed; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - display: none; - width: 100%; - height: 100%; - background-color: #000; - z-index: 999; +.paint-it-black { + position: fixed; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + display: none; + width: 100%; + height: 100%; + background-color: #000; + z-index: 999; } diff --git a/MMM-Modulebar.js b/MMM-Modulebar.js index 126f5fa..396d06d 100755 --- a/MMM-Modulebar.js +++ b/MMM-Modulebar.js @@ -15,90 +15,135 @@ Module.register("MMM-Modulebar",{ requiresVersion: "2.1.0", - defaults: { - // Allow the module to force modules to be shown (if hidden and locked by another module ex. profile-switcher). - allowForce: false, - // Determines if the border around the buttons should be shown. - showBorder: true, - // The minimum width for all the buttons. - minWidth: "0px", - // The minimum height for all the buttons. - minHeight: "0px", - // The location of the symbol relative to the text. Options: left, right, top or bottom - picturePlacement: "left", - // The direction of the bar. Options: row, column, row-reverse or column-reverse - direction: "row", + defaults: { + // Allow the module to force modules to be shown (if hidden and locked by another module ex. profile-switcher). + allowForce: false, + // Determines if the border around the buttons should be shown. + showBorder: true, + // The minimum width for all the buttons. + minWidth: "0px", + // The minimum height for all the buttons. + minHeight: "0px", + // The location of the symbol relative to the text. Options: left, right, top or bottom + picturePlacement: "left", + // The direction of the bar. Options: row, column, row-reverse or column-reverse + direction: "row", // The speed of the hide and show animation. animationSpeed: 1000, - // The default button 1. Add your buttons in the config. + // Z-Index value for the hide all plane. + zindex: 1000, + // Visibility of the "unhide all button" when all is hidden (0.0 - 1.0). + visability: 0.4, + // The default button 1. Add your buttons in the config. buttons: { - "1": { - // The modules exact name to be affected. + "1": { + // Hides and show everything (Same as MMM-HideALL). + module: "all", + // When everything is shown - Toggle-on symbol from font-awesome. + symbol: "toggle-on", + // When everything is hidden - Toggle-off symbol from font-awesome. + symbol2: "toggle-off", + }, + "2": { + // The modules exact name to be affected (clock in this case). module: "clock", - // The text to be displayed in the button. - text: "Clock", - // Then symbol from font-awesome! - symbol: "clock-o" - } + // When module is shown - Bell symbol from font-awesome. + symbol: "bell", + // When module is hidden - Bell-Slash symbol from font-awesome. + symbol2: "bell-slash", + } } - }, - + }, + // Loads the jquery library. getScripts: function() { return ["modules/MMM-Modulebar/js/jquery.js"]; }, - // Define required styles. + + // Define required styles. getStyles: function(){ return ["font-awesome.css", "MMM-Modulebar.css"]; }, - - // Override dom generator. - getDom: function() { - var overlay = document.createElement("div"); - overlay.className = "paint-it-black"; - var menu = document.createElement("span"); - menu.className = "modulebar-menu"; - menu.id = this.identifier + "_menu"; - menu.style.flexDirection = this.config.direction; + // Override dom generator. + getDom: function() { + var overlay = document.createElement("div"); + overlay.className = "paint-it-black"; + var menu = document.createElement("span"); + menu.className = "modulebar-menu"; + menu.id = this.identifier + "_menu"; + menu.style.flexDirection = this.config.direction; // Sends each button to the "createButton" function be created. for (var num in this.config.buttons) { menu.appendChild(this.createButton(this, num, this.config.buttons[num], this.config.picturePlacement, overlay)); - } + } menu.appendChild(overlay); - - return menu; - }, + return menu; + }, // Creates the buttons. - createButton: function (self, num, data, placement, overlay) { - - - var hidden = true; + createButton: function (self, num, data, placement, overlay) { + var hidden = true; // Creates the span element to contain all the buttons. var item = document.createElement("span"); - // Builds a unique identity / button. + // Builds a unique identity / button. item.id = self.identifier + "_button_" + num; - // Sets a class to all buttons. + // Sets a class to all buttons. item.className = "modulebar-button"; - // Makes sure the width and height is at least the defined minimum. + // Makes sure the width and height is at least the defined minimum. item.style.minWidth = self.config.minWidth; - item.style.minHeight = self.config.minHeight; + item.style.minHeight = self.config.minHeight; // Collects all modules loaded in MagicMirror. var modules = MM.getModules(); // When a button is clicked, the module either gets hidden or shown depending on current module status. item.addEventListener("click", function () { - + // If "all" is defined in a button, the hide all is triggered. if (data.module === "all") { - - if( hidden ){ - $(overlay).fadeIn(1000); - $(item).css("z-index","1000"); - $(item).fadeTo(1000, 0.4); - hidden = false; - }else{ - $(overlay).fadeOut(1000); - $(item).fadeTo(1000, 1); - hidden = true; + // Hiding all modules. + if (hidden) { + // Adding the black overlay. + $(overlay).fadeIn(self.config.animationSpeed); + // Set black overlay on this specific Z-Index. + $(item).css("z-index",self.config.zindex); + // Visability of the "unhide-button". + $(item).fadeTo(self.config.animationSpeed,self.config.visability); + // Sets the defined symbol for all hidden. + if (typeof data.symbol2 !== 'undefined') { + symbol.className = "modulebar-picture fa fa-" + data.symbol2; + // Sets the defined image for all hidden. + } else if (typeof data.img2 !== 'undefined') { + image.className = "modulebar-picture"; + image.src = data.img2; + } + // Sets the defined text for all hidden. + if (typeof data.text2 !== 'undefined') { + text.innerHTML = data.text2; + } + // Prints console. + console.log("Hiding all!"); + // Sets the "flip flop". + hidden = false; + // Showing all modules. + } else { + // Removing the black overlay. + $(overlay).fadeOut(self.config.animationSpeed); + // Show the button fully again. + $(item).fadeTo(self.config.animationSpeed, 1); + // Sets the defined symbol for all shown. + if (typeof data.symbol !== 'undefined') { + symbol.className = "modulebar-picture fa fa-" + data.symbol; + // Sets the defined image for all shown. + } else if (typeof data.img !== 'undefined') { + image.className = "modulebar-picture"; + image.src = data.img; + } + // Sets the defined text for all shown. + if (typeof data.text !== 'undefined') { + text.innerHTML = data.text; + } + // Prints console. + console.log("Showing all!"); + // Sets the "flip flop". + hidden = true; } } else { // Lists through all modules for testing. @@ -132,11 +177,35 @@ Module.register("MMM-Modulebar",{ } // Shows the module. modules[i].show(self.config.animationSpeed, {force: self.config.allowForce}); + // Sets the defined symbol for shown module. + if (typeof data.symbol !== 'undefined') { + symbol.className = "modulebar-picture fa fa-" + data.symbol; + // Sets the defined image for shown module. + } else if (typeof data.img !== 'undefined') { + image.className = "modulebar-picture"; + image.src = data.img; + } + // Sets the defined text for shown module. + if (typeof data.text !== 'undefined') { + text.innerHTML = data.text; + } // Prints in the console what just happened (adding the ID). console.log("Showing "+modules[i].name+" ID: "+idnr[1]); - }else{ + } else { // Hides the module. modules[i].hide(self.config.animationSpeed, {force: self.config.allowForce}); + // Sets the defined symbol for hidden module. + if (typeof data.symbol2 !== 'undefined') { + symbol.className = "modulebar-picture fa fa-" + data.symbol2; + // Sets the defined image for hidden module. + } else if (typeof data.img2 !== 'undefined') { + image.className = "modulebar-picture"; + image.src = data.img2; + } + // Sets the defined text for hidden module. + if (typeof data.text2 !== 'undefined') { + text.innerHTML = data.text2; + } // Prints in the console what just happened (adding the ID). console.log("Hiding "+modules[i].name+" ID: "+idnr[1]); // Check if there is a "hideURL" defined. @@ -153,62 +222,59 @@ Module.register("MMM-Modulebar",{ } }); // Fixes the aligning. - item.style.flexDirection = { - "right" : "row-reverse", - "left" : "row", - "top" : "column", - "bottom" : "column-reverse" - }[placement]; + item.style.flexDirection = { + "right" : "row-reverse", + "left" : "row", + "top" : "column", + "bottom" : "column-reverse" + }[placement]; // Sets the border around the symbol/picture/text to black. - if (!self.config.showBorder) { - item.style.borderColor = "black"; - } + if (!self.config.showBorder) { + item.style.borderColor = "black"; + } // Adds the Font-Awesome symbol if specified. - if (data.symbol) { - var symbol = document.createElement("span"); - symbol.className = "modulebar-picture fa fa-" + data.symbol; + if (data.symbol) { + var symbol = document.createElement("span"); + symbol.className = "modulebar-picture fa fa-" + data.symbol; // Sets the size on the symbol if specified. - if (data.size) { - symbol.className += " fa-" + data.size; - symbol.className += data.size == 1 ? "g" : "x"; - } + if (data.size) { + symbol.className += " fa-" + data.size; + symbol.className += data.size == 1 ? "g" : "x"; + } // Align the symbol with a margin. - if (data.text && placement === "left") { - symbol.style.marginRight = "4px"; - } + if (data.text && placement === "left") { + symbol.style.marginRight = "4px"; + } // Adds the symbol to the item. - item.appendChild(symbol); - + item.appendChild(symbol); // Adds a picture if specified. } else if (data.img) { - var image = document.createElement("img"); - image.className = "modulebar-picture"; - image.src = data.img; + var image = document.createElement("img"); + image.className = "modulebar-picture"; + image.src = data.img; // Sets the size of the picture if specified. - if (data.width) image.width = data.width; - if (data.height) image.height = data.height; + if (data.width) image.width = data.width; + if (data.height) image.height = data.height; // Align the picture with a margin. - if (data.text && placement === "left") { - image.style.marginRight = "4px"; - } + if (data.text && placement === "left") { + image.style.marginRight = "4px"; + } // Adds the picture to the item. - item.appendChild(image); - } + item.appendChild(image); + } // Adds the text if specified. - if (data.text) { - var text = document.createElement("span"); - text.className = "modulebar-text"; - text.innerHTML = data.text; + if (data.text) { + var text = document.createElement("span"); + text.className = "modulebar-text"; + text.innerHTML = data.text; // Align the text with a margin. - if ((data.symbol || data.img) && placement === "right") { - text.style.marginRight = "4px"; - } + if ((data.symbol || data.img) && placement === "right") { + text.style.marginRight = "4px"; + } // Adds the text to the item. - item.appendChild(text); - } + item.appendChild(text); + } // All done. :) - return item; - } -}); - - + return item; + } +}); diff --git a/README.md b/README.md index 686a15f..0d1a3f0 100755 --- a/README.md +++ b/README.md @@ -62,11 +62,14 @@ The following properties can be configured: | Option | Default | Description | ------------------ | ------- | ----------- | `allowForce` | `false` | Allow the module to force modules to be shown (if hidden and locked by ex. profile-switcher).

**Possible values:** `true` or `false` -| `showBorder` | `true` | Determines if the border around the buttons should be shown.

**Possible values:** `true` or `false` -| `minWidth` | `0px` | The minimum width for all the buttons.

**Possible values:** `css length` -| `minHeight` | `0px` | The minimum height for all the buttons.

**Possible values:** `css length` -| `picturePlacement` | `left` | The location of the symbol or image relative to the text.

**Possible values:** `left`, `right`, `top` or `bottom` -| `direction` | `row` | The direction of the menu.

**Possible values:** `row`, `column`, `row-reverse` or `column-reverse` +| `showBorder` | `true` | Determines if the border around the buttons should be shown.

**Possible values:** `true` or `false` +| `minWidth` | `0px` | The minimum width for all the buttons.

**Possible values:** `css length` +| `minHeight` | `0px` | The minimum height for all the buttons.

**Possible values:** `css length` +| `picturePlacement` | `left` | The location of the symbol or image relative to the text.

**Possible values:** `left`, `right`, `top` or `bottom` +| `direction` | `row` | The direction of the menu.

**Possible values:** `row`, `column`, `row-reverse` or `column-reverse` +| `animationSpeed` | `1000` | The speed of the hide and show animation (lower is faster) **Possible values:** 0-10000. +| `zindex` | `1000` | Z-Index value for the hide all plane (this is preferably a high value for the black plane to show above everything else. **Possible values:** 0-10000. +| `visability` | `0.4` | Visibility of the "unhide all button" (if defined) when all is hidden **Possible values:** 0.0 - 1.0. | `buttons` | Clock example button | All the different buttons in the menu.

**Possible values:** a button configuration, see [Configuring Buttons](#configuring-buttons) ### Configuring Buttons @@ -77,10 +80,13 @@ Each button starts with it's own uniqe number (ex. "1"), then add the options ne | Option | Description | -------- | ----------- -| `module` | A module name. **Note:** if set to `all` , all of the modules will be hide or show.
**Possible values:** `all`,`clock`,`currentweather`,`MMM-xxx` +| `module` | A module name. **Note:** if set to `all` , all of the modules will be hidden or shown.
**Possible values:** `all`,`clock`,`currentweather`,`MMM-xxx` | `text` | A string to display in the button.

**Note:** if no value is set no text will be displayed.
**Possible values:** `string` +| `text2` | A string to display in the button when module is hidden.

**Note:** if no value is set no text will be displayed.
**Possible values:** `string` | `symbol` | A symbol to display in the button.

**Note:** if no value is set no symbol will be displayed.
**Possible values:** See [Font Awesome](http://fontawesome.io/icons) website +| `symbol2`| A secondary symbol to display in the button when module is hidden.

**Note:** if no value is set no symbol will be displayed.
**Possible values:** See [Font Awesome](http://fontawesome.io/icons) website | `img` | An image to display in the button.

**Note:** it will only be displayed if no symbol is set.
**Possible values:** A path to an image (an url or local path) +| `img2` | A secondary image to display in the button when module is hidden.

**Note:** it will only be displayed if no symbol is set.
**Possible values:** A path to an image (an url or local path) | `size` | The size of the symbol.

**Note:** will only have effect on a symbol.
**Default value:** `1`
**Possible values:** `1`, `2`, `3`, `4` or `5` | `width` | The width of the image.

**Note:** will only have effect on an image.
**Possible values:** `number` | `height` | The height of the image.

**Note:** will only have effect on an image.
**Possible values:** `number` @@ -93,11 +99,18 @@ An example: ````javascript buttons: { // A number (uniqe for each button). + "100": { + // This button hides everything and uses two symbols. + module: "all", + symbol: "toggle-on", + symbol2: "toggle-off", + }, "1": { - // This is a button with text and a symbol + // This is a button with text that changes and a symbol // The EXACT module name (case sensitive) module: "currentweather", - text: "Current Weather", + text: "Current Weather on", + text2: "Current Weather off", symbol: "cloud", }, "2": { @@ -115,9 +128,11 @@ An example: idnum: 6, }, "4": { - // A button with only text + // A button with text and a changing symbol. module: "clock", text: "Clock", + symbol: "bell", + symbol2: "bell-slash", }, "5": { // A button to show and hide for example a [MMM-MotionEye](https://github.com/CatoAntonsen/MMM-MotionEye) module. @@ -159,9 +174,9 @@ Here is my CSS settings for the module that I have added to my custom.css to giv ### Notes -* **Important:** unfortunatly positioning this module as fullscreen will result in the menu floating top left. I currently do not know how to fix this but will look into it. If you know how don't hesitate to either write me or send me a pull request! -* If the image is an local path and it does not show. Try different ways to write the local path. If this still does not work then try putting the image in a folder in your MagicMirror folder and use as local path `foldername/imagename`. -* If only heigh or width is set for an image the other size will scale to maintain it the image it's original aspect ratio. +* **Important:** unfortunately positioning this module as full screen will result in the menu floating top left. I currently do not know how to fix this but will look into it. If you know how don't hesitate to either write me or send me a pull request! +* If the image is an local path and it does not show. Try different ways to write the local path. If this still does not work then try putting the image in a folder in your MagicMirror folder and use as local path `folder name/image name`. +* If only height or width is set for an image the other size will scale to maintain it the image it's original aspect ratio. * Module name is case sensitive. * If both the `text` and `symbol` aren't set for a button then the button won't contain anything, but still show the border. * The symbols are all form the [Font Awesome](http://fontawesome.io/icons) website.