mirror of
https://github.com/edward-shen/MMM-pages.git
synced 2024-12-22 00:35:09 -08:00
303 lines
10 KiB
JavaScript
303 lines
10 KiB
JavaScript
Module.register('MMM-pages', {
|
|
|
|
/**
|
|
* By default, we have don't pseudo-paginate any modules. We also exclude
|
|
* the page indicator by default, in case people actually want to use the
|
|
* sister module. We also don't rotate out modules by default.
|
|
*/
|
|
defaults: {
|
|
modules: [],
|
|
excludes: [], // Keep for compatibility
|
|
fixed: ['MMM-page-indicator'],
|
|
hiddenPages: {},
|
|
animationTime: 1000,
|
|
rotationTime: 0,
|
|
rotationFirstPage: 0, // Keep for compatibility
|
|
rotationHomePage: 0,
|
|
rotationDelay: 10000,
|
|
homePage: 0,
|
|
useLockString: true,
|
|
},
|
|
|
|
/**
|
|
* Apply any styles, if we have any.
|
|
*/
|
|
getStyles() {
|
|
return ['pages.css'];
|
|
},
|
|
|
|
/**
|
|
* Modulo that also works with negative numbers.
|
|
*
|
|
* @param {number} x The dividend
|
|
* @param {number} n The divisor
|
|
*/
|
|
mod(x, n) {
|
|
return ((x % n) + n) % n;
|
|
},
|
|
|
|
/**
|
|
* Pseudo-constructor for our module. Makes sure that values aren't negative,
|
|
* and sets the default current page to 0.
|
|
*/
|
|
start() {
|
|
// Clamp homePage value to [0, num pages).
|
|
if (this.config.homePage >= this.config.modules.length || this.config.homePage < 0) {
|
|
this.config.homePage = 0;
|
|
}
|
|
this.curPage = this.config.homePage;
|
|
this.rotationPaused = false;
|
|
|
|
// Compatibility
|
|
if (this.config.excludes.length) {
|
|
Log.warn('[MMM-pages] The config option "excludes" is deprecated. Please use "fixed" instead.');
|
|
this.config.fixed = this.config.excludes;
|
|
}
|
|
|
|
if (this.config.rotationFirstPage) {
|
|
Log.warn('[MMM-pages] The config option "rotationFirstPage" is deprecated. Please used "rotationHomePage" instead.');
|
|
this.config.rotationHomePage = this.config.rotationFirstPage;
|
|
}
|
|
|
|
// Disable rotation if an invalid input is given
|
|
this.config.rotationTime = Math.max(this.config.rotationTime, 0);
|
|
this.config.rotationDelay = Math.max(this.config.rotationDelay, 0);
|
|
this.config.rotationHomePage = Math.max(this.config.rotationHomePage, 0);
|
|
|
|
if (!this.config.useLockString) {
|
|
Log.log('[MMM-pages] User opted to not use lock strings!');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles incoming notifications. Responds to the following:
|
|
* 'PAGE_CHANGED' - Set the page to the specified payload page.
|
|
* 'PAGE_INCREMENT' - Move to the next page.
|
|
* 'PAGE_DECREMENT' - Move to the previous page.
|
|
* 'DOM_OBJECTS_CREATED' - Starts the module.
|
|
* 'QUERY_PAGE_NUMBER' - Requests the current page number
|
|
* 'PAUSE_ROTATION' - Stops rotation
|
|
* 'RESUME_ROTATION' - Resumes rotation
|
|
* 'HOME_PAGE' - Calls PAGED_CHANGED with the default home page.
|
|
* 'SHOW_HIDDEN_PAGE' - Shows the (in the payload) specified hidden
|
|
* page by name
|
|
* 'LEAVE_HIDDEN_PAGE' - Hides the currently showing hidden page and
|
|
* resumes showing the last page
|
|
*
|
|
* @param {string} notification the notification ID
|
|
* @param {number|string} payload the page to change to/by
|
|
*/
|
|
notificationReceived(notification, payload) {
|
|
switch (notification) {
|
|
case 'PAGE_CHANGED':
|
|
Log.log(`[MMM-pages] received a notification to change to page ${payload} of type ${typeof payload}.`);
|
|
this.curPage = payload;
|
|
this.updatePages();
|
|
break;
|
|
case 'PAGE_INCREMENT':
|
|
Log.log('[MMM-pages] received a notification to increment pages!');
|
|
this.changePageBy(payload, 1);
|
|
this.updatePages();
|
|
break;
|
|
case 'PAGE_DECREMENT':
|
|
Log.log('[MMM-pages] received a notification to decrement pages!');
|
|
// We can't just pass in -payload for situations where payload is null
|
|
// JS will coerce -payload to -0.
|
|
this.changePageBy(payload ? -payload : payload, -1);
|
|
this.updatePages();
|
|
break;
|
|
case 'DOM_OBJECTS_CREATED':
|
|
Log.log('[MMM-pages] received that all objects are created; will now hide things!');
|
|
this.sendNotification('MAX_PAGES_CHANGED', this.config.modules.length);
|
|
this.sendNotification('NEW_PAGE', this.curPage);
|
|
this.animatePageChange();
|
|
this.resetTimerWithDelay(0);
|
|
break;
|
|
case 'QUERY_PAGE_NUMBER':
|
|
this.sendNotification('PAGE_NUMBER_IS', this.curPage);
|
|
break;
|
|
case 'PAUSE_ROTATION':
|
|
this.setRotation(false);
|
|
break;
|
|
case 'RESUME_ROTATION':
|
|
this.setRotation(true);
|
|
break;
|
|
case 'HOME_PAGE':
|
|
this.notificationReceived('PAGE_CHANGED', this.config.homePage);
|
|
break;
|
|
case 'SHOW_HIDDEN_PAGE':
|
|
Log.log(`[MMM-pages] received a notification to change to the hidden page "${payload}" of type "${typeof payload}".`);
|
|
this.setRotation(false);
|
|
this.showHiddenPage(payload);
|
|
break;
|
|
case 'LEAVE_HIDDEN_PAGE':
|
|
Log.log('[MMM-pages] received a notification to leave the current hidden page.');
|
|
this.animatePageChange();
|
|
this.setRotation(true);
|
|
break;
|
|
default: // Do nothing
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Changes the internal page number by the specified amount. If the provided
|
|
* amount is invalid, use the fallback amount. If the fallback amount is
|
|
* missing or invalid, do nothing.
|
|
*
|
|
* @param {number} amt the amount of pages to move forward by. Accepts
|
|
* negative numbers.
|
|
* @param {number} fallback the fallback value to use. Accepts negative
|
|
* numbers.
|
|
*/
|
|
changePageBy(amt, fallback) {
|
|
if (typeof amt !== 'number' && typeof fallback === 'undefined') {
|
|
Log.warn(`[MMM-pages] ${amt} is not a number!`);
|
|
}
|
|
|
|
if (typeof amt === 'number' && !Number.isNaN(amt)) {
|
|
this.curPage = this.mod(
|
|
this.curPage + amt,
|
|
this.config.modules.length
|
|
);
|
|
} else if (typeof fallback === 'number') {
|
|
this.curPage = this.mod(
|
|
this.curPage + fallback,
|
|
this.config.modules.length
|
|
);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles hiding the current page's elements and showing the next page's
|
|
* elements.
|
|
*/
|
|
updatePages() {
|
|
// Update if there's at least one page.
|
|
if (this.config.modules.length !== 0) {
|
|
this.animatePageChange();
|
|
if (!this.rotationPaused) {
|
|
this.resetTimerWithDelay(0);
|
|
}
|
|
this.sendNotification('NEW_PAGE', this.curPage);
|
|
} else { Log.error('[MMM-pages] Pages are not properly defined!'); }
|
|
},
|
|
|
|
/**
|
|
* Animates the page change from the previous page to the current one. This
|
|
* assumes that there is a discrepancy between the page currently being shown
|
|
* and the page that is meant to be shown.
|
|
*
|
|
* @param {string} [targetPageName] the name of the hiddenPage we want to show.
|
|
* Optional and only used when we want to switch to a hidden page
|
|
*/
|
|
animatePageChange(targetPageName) {
|
|
let lockStringObj = { lockString: this.identifier };
|
|
if (!this.config.useLockString) {
|
|
// Passing in an undefined object is equivalent to not passing it in at
|
|
// all, effectively providing only one arg to the hide and show calls
|
|
lockStringObj = undefined;
|
|
}
|
|
|
|
// Hides all modules not on the current page. This hides any module not
|
|
// meant to be shown.
|
|
|
|
const self = this;
|
|
let modulesToShow;
|
|
if (typeof targetPageName !== 'undefined') {
|
|
modulesToShow = this.config.hiddenPages[targetPageName];
|
|
} else {
|
|
modulesToShow = this.config.fixed.concat(this.config.modules[this.curPage]);
|
|
}
|
|
const animationTime = self.config.animationTime / 2;
|
|
|
|
MM.getModules()
|
|
.exceptWithClass(modulesToShow)
|
|
.enumerate(module => module.hide(animationTime, lockStringObj));
|
|
|
|
// Shows all modules meant to be on the current page, after a small delay.
|
|
setTimeout(() => {
|
|
MM.getModules()
|
|
.withClass(modulesToShow)
|
|
.enumerate(module => module.show(animationTime, lockStringObj));
|
|
}, animationTime);
|
|
},
|
|
|
|
/**
|
|
* Resets the page changing timer with a delay.
|
|
*
|
|
* @param {number} delay the delay, in milliseconds.
|
|
*/
|
|
resetTimerWithDelay(delay) {
|
|
if (this.config.rotationTime > 0) {
|
|
// This timer is the auto rotate function.
|
|
clearInterval(this.timer);
|
|
// This is delay timer after manually updating.
|
|
clearInterval(this.delayTimer);
|
|
const self = this;
|
|
|
|
this.delayTimer = setTimeout(() => {
|
|
self.timer = setInterval(() => {
|
|
// Inform other modules and page change.
|
|
// MagicMirror automatically excludes the sender from receiving the
|
|
// message, so we need to trigger it for ourselves.
|
|
self.sendNotification('PAGE_INCREMENT');
|
|
self.notificationReceived('PAGE_INCREMENT');
|
|
}, self.config.rotationTime);
|
|
}, delay);
|
|
} else if (this.config.rotationHomePage > 0) {
|
|
// This timer is the auto rotate function.
|
|
clearInterval(this.timer);
|
|
// This is delay timer after manually updating.
|
|
clearInterval(this.delayTimer);
|
|
const self = this;
|
|
|
|
this.delayTimer = setTimeout(() => {
|
|
self.timer = setInterval(() => {
|
|
// Inform other modules and page change.
|
|
// MagicMirror automatically excludes the sender from receiving the
|
|
// message, so we need to trigger it for ourselves.
|
|
self.sendNotification('PAGE_CHANGED', 0);
|
|
self.notificationReceived('PAGE_CHANGED', self.config.homePage);
|
|
}, self.config.rotationHomePage);
|
|
}, delay);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Pause or resume the page rotation. If the provided isRotating value is
|
|
* set to true, it will resume the rotation. If the requested
|
|
* state (f.e. isRotating === true) equals the current state, print a warning
|
|
* and do nothing.
|
|
*
|
|
* @param {boolean} isRotating the parameter, if you want to pause or resume.
|
|
*/
|
|
setRotation(isRotating) {
|
|
const stateBaseString = isRotating ? 'resum' : 'paus';
|
|
if (isRotating === this.rotationPaused) {
|
|
Log.warn(`[MMM-pages] was asked to ${stateBaseString}e but rotation is already ${stateBaseString}ed!`);
|
|
} else {
|
|
Log.log(`[MMM-pages] ${stateBaseString}ing rotation`);
|
|
if (!isRotating) {
|
|
clearInterval(this.timer);
|
|
clearInterval(this.delayTimer);
|
|
} else {
|
|
this.resetTimerWithDelay(this.rotationDelay);
|
|
}
|
|
this.rotationPaused = isRotating;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles hidden pages.
|
|
*
|
|
* @param {string} name the name of the hiddenPage we want to show
|
|
*/
|
|
showHiddenPage(name) {
|
|
// Only proceed if the named hidden page actually exists
|
|
if (name in this.config.hiddenPages) {
|
|
this.animatePageChange(name);
|
|
} else {
|
|
Log.error(`[MMM-pages] Hidden page "${name}" does not exist!`);
|
|
}
|
|
},
|
|
});
|