mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-06-27 19:53:36 +00:00
Add getHeader functionlity..
This commit is contained in:
parent
c916472b22
commit
b2a7d3584b
@ -2,6 +2,12 @@
|
|||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
This project adheres to [Semantic Versioning](http://semver.org/).
|
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
|
## [2.0.5] - 2016-09-20
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
44
js/main.js
44
js/main.js
@ -40,6 +40,7 @@ var MM = (function() {
|
|||||||
if (typeof module.data.header !== "undefined" && module.data.header !== "") {
|
if (typeof module.data.header !== "undefined" && module.data.header !== "") {
|
||||||
var moduleHeader = document.createElement("header");
|
var moduleHeader = document.createElement("header");
|
||||||
moduleHeader.innerHTML = module.data.header;
|
moduleHeader.innerHTML = module.data.header;
|
||||||
|
moduleHeader.className = "module-header";
|
||||||
dom.appendChild(moduleHeader);
|
dom.appendChild(moduleHeader);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -94,26 +95,27 @@ var MM = (function() {
|
|||||||
*/
|
*/
|
||||||
var updateDom = function(module, speed) {
|
var updateDom = function(module, speed) {
|
||||||
var newContent = module.getDom();
|
var newContent = module.getDom();
|
||||||
|
var newHeader = module.getHeader();
|
||||||
|
|
||||||
if (!module.hidden) {
|
if (!module.hidden) {
|
||||||
|
|
||||||
if (!moduleNeedsUpdate(module, newContent)) {
|
if (!moduleNeedsUpdate(module, newHeader, newContent)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!speed) {
|
if (!speed) {
|
||||||
updateModuleContent(module, newContent);
|
updateModuleContent(module, newHeader, newContent);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
hideModule(module, speed / 2, function() {
|
hideModule(module, speed / 2, function() {
|
||||||
updateModuleContent(module, newContent);
|
updateModuleContent(module, newHeader, newContent);
|
||||||
if (!module.hidden) {
|
if (!module.hidden) {
|
||||||
showModule(module, speed / 2);
|
showModule(module, speed / 2);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
updateModuleContent(module, newContent);
|
updateModuleContent(module, newHeader, newContent);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -125,14 +127,23 @@ var MM = (function() {
|
|||||||
*
|
*
|
||||||
* return bool - Does the module need an update?
|
* 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 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");
|
var headerNeedsUpdate = false;
|
||||||
tempWrapper.appendChild(newContent);
|
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)
|
/* moduleNeedsUpdate(module, newContent)
|
||||||
@ -141,12 +152,19 @@ var MM = (function() {
|
|||||||
* argument module Module - The module to check.
|
* argument module Module - The module to check.
|
||||||
* argument newContent Domobject - The new content that is generated.
|
* 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 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)
|
/* hideModule(module, speed, callback)
|
||||||
|
11
js/module.js
11
js/module.js
@ -84,6 +84,17 @@ var Module = Class.extend({
|
|||||||
return div;
|
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)
|
/* notificationReceived(notification, payload, sender)
|
||||||
* This method is called when a notification arrives.
|
* This method is called when a notification arrives.
|
||||||
* This method is called by the Magic Mirror core.
|
* This method is called by the Magic Mirror core.
|
||||||
|
@ -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)`
|
####`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:
|
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:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user