MMM-pages/MMM-pages.js

Module.register('MMM-pages', {

  // We require the older style of function declaration for compatibility
  // reasons.

  /**
   * 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'],
    animationTime: 1000,
    rotationTime: 0,
    rotationDelay: 10000,
    slideAnimation: false,
  },

  /**
   * Apply any styles, if we have any.
   */
  getStyles: function() {
    return ['pages.css'];
  },


  /**
   * Modulo that also works with negative numbers.
   *
   * @param {number} x The dividend
   * @param {number} n The divisor
   */
  mod: function(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: function() {
    this.curPage = 0;
    
    // Compatibility
    if (this.config.excludes.length) {
      Log.warn(`[Pages]: The config option "excludes" is deprecated. Please use "fixed" instead.`);
      this.config.fixed = this.config.excludes;
    }

    // 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);
  },

  /**
   * 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
   *
   * @param {string} notification the notification ID
   * @param {number} payload the page to change to/by
   */
  notificationReceived: function(notification, payload) {
    switch (notification) {
      case 'PAGE_CHANGED':
        Log.log('[Pages]: received a notification '
          + `to change to page ${payload} of type ${typeof payload}`);
        this.curPage = payload;
        this.updatePages();
        break;
      case 'PAGE_INCREMENT':
        Log.log('[Pages]: received a notification to increment pages!');
        this.changePageBy(payload, 1);
        this.updatePages();
        break;
      case 'PAGE_DECREMENT':
        Log.log('[Pages]: received a notification to decrement pages!');
        this.changePageBy(-payload, -1);
        this.updatePages();
        break;
      case 'DOM_OBJECTS_CREATED':
        Log.log('[Pages]: received that all objects are created;'
          + 'will now hide things!');
        this.sendNotification('MAX_PAGES_CHANGED', this.config.modules.length);
        this.animatePageChange();
        this.resetTimerWithDelay(0);
        break;
      case 'QUERY_PAGE_NUMBER':
        this.sendNotification('PAGE_NUMBER_IS', this.curPage);
        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: function(amt, fallback) {
    if (typeof amt !== 'number') {
      Log.warn(`[Pages]: ${amt} is not a number!`);
    }

    if (typeof amt === '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: function() {
    // Update iff there's at least one page.
    if (this.config.modules.length !== 0) {
      this.animatePageChange();
      this.resetTimerWithDelay(this.config.rotationDelay);
    } else { Log.error("[Pages]: Pages aren't 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.
   */
  animatePageChange: function() {
    const self = this;

    if (this.config.slideAnimation) {
      MM.getModules()
        .exceptWithClass(this.config.fixed)
        .exceptWithClass(this.config.modules[this.curPage])
        .enumerate(module => {
          const element = document.getElementById(module.data.identifier);
          if (element) {
            element.classList.add("mmm-pages-slide-out");
            element.classList.remove("mmm-pages-slide-in");
          }
          setTimeout(() => {
            module.hide(0, { lockString: self.identifier });
            if (element) {
              element.classList.remove("mmm-pages-slide-out");
            }
          }, self.config.animationTime);
        });

      MM.getModules()
        .withClass(self.config.modules[self.curPage])
        .enumerate((module) => {
          const element = document.getElementById(module.data.identifier);
          if (element) {
            element.classList.add("mmm-pages-slide-in");
          }
          module.show(0, { lockString: self.identifier } );
        });
        
    } else {
      // Hides all modules not on the current page. This hides any module not
      // meant to be shown.
      MM.getModules()
        .exceptWithClass(this.config.fixed)
        .exceptWithClass(this.config.modules[this.curPage])
        .enumerate(module => module.hide(
          self.config.animationTime / 2,
          { lockString: self.identifier }
        ));

      // Shows all modules meant to be on the current page, after a small delay.
      setTimeout(() => {
        MM.getModules()
          .withClass(self.config.modules[self.curPage])
          .enumerate((module) => {
            module.show(
              self.config.animationTime / 2,
              { lockString: self.identifier }
            );
          });
      }, this.config.animationTime / 2);
    }
  },

  /**
   * Resets the page changing timer with a delay.
   *
   * @param {number} delay the delay, in milliseconds.
   */
  resetTimerWithDelay: function(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(() => {
          self.sendNotification('PAGE_INCREMENT');
          self.changePageBy(1);
          self.updatePages();
        }, self.config.rotationTime);
      }, delay);
    }
  },
});