kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 11:50:00 +00:00
Code Issues Projects Releases Wiki Activity

Method to hide/show modules.

Browse Source
This commit is contained in:
Michael Teeuw 2016-03-31 19:15:58 +02:00
parent d601919dc4
commit 584a12e1f5
2 changed files with 141 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
js/main.js
View File

@ -95,35 +95,100 @@ var MM = (function() {
* argument speed Number - The number of microseconds for the animation. (optional) * argument speed Number - The number of microseconds for the animation. (optional)
*/ */
var updateDom = function(module, speed) { var updateDom = function(module, speed) {
var moduleWrapper = document.getElementById(module.identifier);
var contentWrapper = moduleWrapper.getElementsByClassName('module-content')[0];
var newContent = module.getDom(); var newContent = module.getDom();
var tempWrapper = document.createElement('div'); if (!module.hidden) {
tempWrapper.appendChild(newContent);
if (tempWrapper.innerHTML === contentWrapper.innerHTML) {
// Content did not change. Abort update. if (!moduleNeedsUpdate(module, newContent)) {
return; return;
} }
if (!speed) { if (!speed) {
contentWrapper.innerHTML = null; updateModuleContent(module, newContent);
contentWrapper.appendChild(newContent);
return; return;
} }
moduleWrapper.style.opacity = 1; hideModule(module, speed / 2, function() {
moduleWrapper.style.transition = "opacity " + speed / 2 / 1000 + "s"; updateModuleContent(module, newContent);
if (!module.hidden) {
showModule(module, speed / 2);
}
});
} else {
updateModuleContent(module, newContent);
}
};
/* moduleNeedsUpdate(module, newContent)
* Check if the content has changed.
*
* argument module Module - The module to check.
* argument newContent Domobject - The new content that is generated.
*
* return bool - Does the module need an update?
*/
var moduleNeedsUpdate = function(module, newContent) {
var moduleWrapper = document.getElementById(module.identifier);
var contentWrapper = moduleWrapper.getElementsByClassName('module-content')[0];
var tempWrapper = document.createElement('div');
tempWrapper.appendChild(newContent);
return tempWrapper.innerHTML !== contentWrapper.innerHTML;
};
/* moduleNeedsUpdate(module, newContent)
* Update the content of a module on screen.
*
* argument module Module - The module to check.
* argument newContent Domobject - The new content that is generated.
*/
var updateModuleContent = function(module, content) {
var moduleWrapper = document.getElementById(module.identifier);
var contentWrapper = moduleWrapper.getElementsByClassName('module-content')[0];
contentWrapper.innerHTML = null;
contentWrapper.appendChild(content);
};
/* hideModule(module, speed, callback)
* Hide the module.
*
* argument module Module - The module to hide.
* argument speed Number - The speed of the hide animation.
* argument callback function - Called when the animation is done.
*/
var hideModule = function(module, speed, callback) {
var moduleWrapper = document.getElementById(module.identifier);
if (moduleWrapper !== null) {
moduleWrapper.style.transition = "opacity " + speed / 1000 + "s";
moduleWrapper.style.opacity = 0; moduleWrapper.style.opacity = 0;
setTimeout(function() { setTimeout(function() {
contentWrapper.innerHTML = null; if (typeof callback === 'function') { callback(); }
contentWrapper.appendChild(newContent); }, speed);
}
};
/* showModule(module, speed, callback)
* Show the module.
*
* argument module Module - The module to show.
* argument speed Number - The speed of the show animation.
* argument callback function - Called when the animation is done.
*/
var showModule = function(module, speed, callback) {
var moduleWrapper = document.getElementById(module.identifier);
if (moduleWrapper !== null) {
moduleWrapper.style.transition = "opacity " + speed / 1000 + "s";
moduleWrapper.style.opacity = 1; moduleWrapper.style.opacity = 1;
}, speed / 2);
setTimeout(function() {
if (typeof callback === 'function') { callback(); }
}, speed);
}
}; };
/* loadConfig() /* loadConfig()
@ -245,12 +310,17 @@ var MM = (function() {
} }
}; };
Object.defineProperty(modules, 'withClass', {value: withClass, enumerable: false});
Object.defineProperty(modules, 'exceptWithClass', {value: exceptWithClass, enumerable: false});
Object.defineProperty(modules, 'exceptModule', {value: exceptModule, enumerable: false}); if (typeof modules.withClass === 'undefined') { Object.defineProperty(modules, 'withClass', {value: withClass, enumerable: false}); }
Object.defineProperty(modules, 'enumerate', {value: enumerate, enumerable: false}); if (typeof modules.exceptWithClass === 'undefined') { Object.defineProperty(modules, 'exceptWithClass', {value: exceptWithClass, enumerable: false}); }
if (typeof modules.exceptModule === 'undefined') { Object.defineProperty(modules, 'exceptModule', {value: exceptModule, enumerable: false}); }
if (typeof modules.enumerate === 'undefined') { Object.defineProperty(modules, 'enumerate', {value: enumerate, enumerable: false}); }
}; };
return { return {
/* Public Methods */ /* Public Methods */
@ -332,6 +402,32 @@ var MM = (function() {
getModules: function() { getModules: function() {
setSelectionMethodsForModules(modules); setSelectionMethodsForModules(modules);
return modules; return modules;
},
/* hideModule(module, speed, callback)
* Hide the module.
*
* argument module Module - The module hide.
* argument speed Number - The speed of the hide animation.
* argument callback function - Called when the animation is done.
*/
hideModule: function(module, speed, callback) {
hideModule(module, speed, function() {
module.hidden = true;
callback();
});
},
/* showModule(module, speed, callback)
* Show the module.
*
* argument module Module - The module show.
* argument speed Number - The speed of the show animation.
* argument callback function - Called when the animation is done.
*/
showModule: function(module, speed, callback) {
module.hidden = false;
showModule(module, speed, callback);
} }
}; };

21
js/module.js
View File

@ -113,6 +113,7 @@ var Module = Class.extend({
this.data = data; this.data = data;
this.name = data.name; this.name = data.name;
this.identifier = data.identifier; this.identifier = data.identifier;
this.hidden = false;
this.setConfig(data.config); this.setConfig(data.config);
}, },
@ -229,6 +230,26 @@ var Module = Class.extend({
*/ */
sendSocketNotification: function(notification, payload) { sendSocketNotification: function(notification, payload) {
this.socket().sendNotification(notification, payload); this.socket().sendNotification(notification, payload);
},
/* hideModule(module, speed, callback)
* Hide this module.
*
* argument speed Number - The speed of the hide animation.
* argument callback function - Called when the animation is done.
*/
hide: function(speed, callback) {
MM.hideModule(this, speed, callback);
},
/* showModule(module, speed, callback)
* Show this module.
*
* argument speed Number - The speed of the show animation.
* argument callback function - Called when the animation is done.
*/
show: function(speed, callback) {
MM.showModule(this, speed, callback);
} }
}); });