diff --git a/CHANGELOG.md b/CHANGELOG.md index 20f95c84..859ca30d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,13 +2,19 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). + +## [2.1.0] - Unreleased + +### Added +- Method to overwrite the module's header. [See documentation.](https://github.com/MichMich/MagicMirror/tree/develop/modules#getheader) + ## [2.0.5] - 2016-09-20 ### Added - Added ability to remove tags from the beginning or end of newsfeed items in 'newsfeed.js'. - Added ability to define "the day after tomorrow" for calendar events (Definition for German and Dutch already included). - Added CII Badge (we are compliant with the CII Best Practices) -- Add support for doing http basic auth when loading calendars +- Add support for doing http basic auth when loading calendars - Add the abilty to turn off and on the date display in the Clock Module ### Fixed diff --git a/js/main.js b/js/main.js index abd93e40..c0c63006 100644 --- a/js/main.js +++ b/js/main.js @@ -40,6 +40,7 @@ var MM = (function() { if (typeof module.data.header !== "undefined" && module.data.header !== "") { var moduleHeader = document.createElement("header"); moduleHeader.innerHTML = module.data.header; + moduleHeader.className = "module-header"; dom.appendChild(moduleHeader); } @@ -94,26 +95,27 @@ var MM = (function() { */ var updateDom = function(module, speed) { var newContent = module.getDom(); + var newHeader = module.getHeader(); if (!module.hidden) { - if (!moduleNeedsUpdate(module, newContent)) { + if (!moduleNeedsUpdate(module, newHeader, newContent)) { return; } if (!speed) { - updateModuleContent(module, newContent); + updateModuleContent(module, newHeader, newContent); return; } hideModule(module, speed / 2, function() { - updateModuleContent(module, newContent); + updateModuleContent(module, newHeader, newContent); if (!module.hidden) { showModule(module, speed / 2); } }); } else { - updateModuleContent(module, newContent); + updateModuleContent(module, newHeader, newContent); } }; @@ -125,14 +127,23 @@ var MM = (function() { * * return bool - Does the module need an update? */ - var moduleNeedsUpdate = function(module, newContent) { + var moduleNeedsUpdate = function(module, newHeader, newContent) { var moduleWrapper = document.getElementById(module.identifier); - var contentWrapper = moduleWrapper.getElementsByClassName("module-content")[0]; + var contentWrapper = moduleWrapper.getElementsByClassName("module-content"); + var headerWrapper = moduleWrapper.getElementsByClassName("module-header"); - var tempWrapper = document.createElement("div"); - tempWrapper.appendChild(newContent); + var headerNeedsUpdate = false; + var contentNeedsUpdate = false; - return tempWrapper.innerHTML !== contentWrapper.innerHTML; + if (headerWrapper.length > 0) { + headerNeedsUpdate = newHeader !== headerWrapper.innerHTML; + } + + var tempContentWrapper = document.createElement("div"); + tempContentWrapper.appendChild(newContent); + contentNeedsUpdate = tempContentWrapper.innerHTML !== contentWrapper[0].innerHTML; + + return headerNeedsUpdate || contentNeedsUpdate; }; /* moduleNeedsUpdate(module, newContent) @@ -141,12 +152,19 @@ var MM = (function() { * argument module Module - The module to check. * argument newContent Domobject - The new content that is generated. */ - var updateModuleContent = function(module, content) { + var updateModuleContent = function(module, newHeader, newContent) { var moduleWrapper = document.getElementById(module.identifier); - var contentWrapper = moduleWrapper.getElementsByClassName("module-content")[0]; + var headerWrapper = moduleWrapper.getElementsByClassName("module-header"); + var contentWrapper = moduleWrapper.getElementsByClassName("module-content"); + + contentWrapper[0].innerHTML = ""; + contentWrapper[0].appendChild(newContent); + + if( headerWrapper.length > 0 && newHeader) { + headerWrapper[0].innerHTML = newHeader; + } + - contentWrapper.innerHTML = ""; - contentWrapper.appendChild(content); }; /* hideModule(module, speed, callback) diff --git a/js/module.js b/js/module.js index 293d00b5..9c26bc7b 100644 --- a/js/module.js +++ b/js/module.js @@ -84,6 +84,17 @@ var Module = Class.extend({ return div; }, + /* getHeader() + * This method generates the header string which needs to be displayed if a user has a header configured for this module. + * This method is called by the Magic Mirror core, but only if the user has configured a default header for the module. + * This method needs to be subclassed if the module wants to display modified headers on the mirror. + * + * return string - The header to display above the header. + */ + getHeader: function() { + return this.data.header; + }, + /* notificationReceived(notification, payload, sender) * This method is called when a notification arrives. * This method is called by the Magic Mirror core. diff --git a/modules/README.md b/modules/README.md index f4a8debd..61989a93 100644 --- a/modules/README.md +++ b/modules/README.md @@ -166,6 +166,23 @@ getDom: function() { ```` +####`getHeader()` +**Should return:** String + +Whenever the MagicMirror needs to update the information on screen (because it starts, or because your module asked a refresh using `this.updateDom()`), the system calls the getHeader method to retrieve the module's header. This method should therefor return a string. If this method is not subclassed, this function will return the user's configured header. + +If you want to use the original user's configured header, reference `this.data.header`. + +**NOTE:** If the user did not confiugure a default header, no header will be displayed and thus this method will not be called. + +**Example:** +````javascript +getHeader: function() { + return this.data.header + ' Foo Bar'; +} + +```` + ####`notificationReceived(notification, payload, sender)` That MagicMirror core has the ability to send notifications to modules. Or even better: the modules have the possibility to send notifications to other modules. When this module is called, it has 3 arguments: