.github/ISSUE_TEMPLATE/Bug_report.md

@@ -0,0 +1,43 @@
+---
+name: Bug report
+about: Thanks for helping us out!
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+(Please paste any information on reproducing the issue, for example:)
+
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem. If you believe you
+have aptly described your issue in words, feel free to ignore/delete this section.
+
+**Please fill out the following information;**
+
+- Node version: [This can be obtained by running `node -v` in your terminal]
+- Have you updated to the latest MagicMirror core? [yes/no]
+- Please post the relevant part of your config file here:
+
+```json
+(Paste the part of the config file here)
+```
+
+- Please post any errors you see about MMM-pages in the console (Hit F12 > Console when the MagicMirror window is focused), or write **None** if there aren't any:
+
+```
+(Paste the error here)
+```
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/Feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Why do you want this feature?**
+<!-- A clear and concise description of what the problem is. Ex. "I'm always frustrated when [...]" or "It'd be cool if [...]" -->
+
+**Describe the solution you'd like**
+<!-- What would you like to see? A config option? A notification? Something else? -->
+
+**Additional context**
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -1,86 +0,0 @@
-name: Bug report
-description: Create a report to help us improve MMM-pages.
-title: "Bug: <bug-description>"
-labels: ["bug"]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is.
-    validations:
-      required: true
-
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: To Reproduce
-      description: Steps to reproduce the behavior
-      placeholder: |
-        1. Go to '...'
-        2. Click on '...'
-        3. Scroll down to '...'
-        4. See error
-    validations:
-      required: true
-
-  - type: textarea
-    id: expected
-    attributes:
-      label: Expected behavior
-      description: A clear and concise description of what you expected to happen.
-    validations:
-      required: true
-
-  - type: textarea
-    id: screenshots
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to help explain your problem.
-    validations:
-      required: false
-
-  - type: input
-    id: node-version
-    attributes:
-      label: Node Version
-      description: Run `node -v` in your terminal
-      placeholder: "e.g., v22.14.0"
-    validations:
-      required: true
-
-  - type: checkboxes
-    id: core-updated
-    attributes:
-      label: MagicMirror Core Update Status
-      description: Have you updated to the latest MagicMirror core?
-      options:
-        - label: Yes, I am using the latest version
-          required: true
-
-  - type: textarea
-    id: config
-    attributes:
-      label: Configuration
-      description: Please paste the relevant part of your config file
-      render: json
-    validations:
-      required: true
-
-  - type: textarea
-    id: console-errors
-    attributes:
-      label: Console Errors
-      description: Please paste any errors you see about MMM-pages in the console (Hit F12 > Console when the MagicMirror window is focused)
-      render: shell
-
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -1,30 +0,0 @@
-name: Feature request
-description: Suggest an idea for this project.
-title: "Feature: <feature-description>"
-labels: ["enhancement"]
-body:
-  - type: markdown
-    attributes:
-      value: "Thanks for taking the time to fill out this feature request!"
-  - type: textarea
-    id: problem
-    attributes:
-      label: Problem Description
-      description: Is your feature request related to a problem? Why do you want this feature?
-      placeholder: "I'm always frustrated when [...] or It'd be cool if [...]"
-    validations:
-      required: true
-  - type: textarea
-    id: solution
-    attributes:
-      label: Proposed Solution
-      description: What would you like to see? A config option? A notification? Something else?
-    validations:
-      required: true
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional Context
-      description: Add any other context or screenshots about the feature request here.
-    validations:
-      required: false

.github/workflows/automated-tests.yaml

@@ -18,9 +18,9 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 22
           cache: npm
       - name: Install dependencies
         run: npm ci
       - name: Check linting
-        run: node --run lint
+        run: npm run lint

CHANGELOG.md

@@ -1,45 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [1.1.2](https://github.com/edward-shen/MMM-pages/compare/v1.1.1...v1.1.2) - 2025-06-11 - Maintenance Release
-
-### Changed
-
-- chore: add "type": "module" to `package.json`
-- chore: simplify ESLint config
-- chore: switch to YAML issue templates
-- chore: update devDependencies
-- refactor: get rid of negated-conditions and add `no-negated-condition` rule to ESLint config
-
-## [1.1.1](https://github.com/edward-shen/MMM-pages/compare/v1.1.0...v1.1.1) - 2025-03-26 - Maintenance Release
-
-### Changed
-
-- chore: review ESLint config and add markdown linting
-- chore: update devDependencies
-- chore: use `node --run` instead of `npm run` to run scripts
-
-## [1.1.0](https://github.com/edward-shen/MMM-pages/compare/v1.0.1...v1.1.0) - 2025-03-25 - Feature Release
-
-### Added
-
-- feat: Add individual rotation time for each page (#88)
-- docs: Add example configuration files in directory `example_configs`
-
-## [1.0.1](https://github.com/edward-shen/MMM-pages/compare/v1.0.0...v1.0.1) - 2025-03-23 - Maintenance Release
-
-### Changed
-
-- chore: Run tests always with lts version of node
-- chore: Switch license file to Markdown for better readability
-- chore: Update devDependencies
-- chore: Review ESLint configuration
-- chore: Simplify ESLint calls in package.json
-- chore: Remove unused CSS file
-
-## [1.0.0](https://github.com/edward-shen/MMM-pages/releases/tag/v1.0.0) - 2024-12-16
-
-Since there was no CHANGELOG.md before version 1.0.0, changes are only documented from this version on.

LICENSE

@@ -1,6 +1,4 @@
-# The MIT License (MIT)
-
-Copyright © 2017 Edward Shen
+Copyright (c) 2017 Edward Shen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

MMM-pages.js

@@ -12,7 +12,6 @@ Module.register('MMM-pages', {
     hiddenPages: {},
     animationTime: 1000,
     rotationTime: 0,
-    timings: { default: 0 },
     rotationFirstPage: 0, // Keep for compatibility
     rotationHomePage: 0,
     rotationDelay: 10000,
@@ -20,6 +19,13 @@ Module.register('MMM-pages', {
     useLockString: true,
   },
 
+  /**
+   * Apply any styles, if we have any.
+   */
+  getStyles() {
+    return ['pages.css'];
+  },
+
   /**
    * Modulo that also works with negative numbers.
    *
@@ -49,17 +55,12 @@ Module.register('MMM-pages', {
     }
 
     if (this.config.rotationFirstPage) {
-      Log.warn('[MMM-pages] The config option "rotationFirstPage" is deprecated. Please use "rotationHomePage" instead.');
+      Log.warn('[MMM-pages] The config option "rotationFirstPage" is deprecated. Please used "rotationHomePage" instead.');
       this.config.rotationHomePage = this.config.rotationFirstPage;
     }
 
-    if (this.config.rotationTime) {
-      Log.warn('[MMM-pages] The config option "rotationTime" is deprecated. Please use "timings" instead.');
-      this.config.timings.default = this.config.rotationTime;
-    }
-
     // Disable rotation if an invalid input is given
-    this.config.timings.default = Math.max(this.config.timings.default, 0);
+    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);
 
@@ -172,7 +173,7 @@ Module.register('MMM-pages', {
    */
   updatePages() {
     // Update if there's at least one page.
-    if (this.config.modules.length > 0) {
+    if (this.config.modules.length !== 0) {
       this.animatePageChange();
       if (!this.rotationPaused) {
         this.resetTimerWithDelay(0);
@@ -202,10 +203,10 @@ Module.register('MMM-pages', {
 
     const self = this;
     let modulesToShow;
-    if (typeof targetPageName === 'undefined') {
-      modulesToShow = this.config.fixed.concat(this.config.modules[this.curPage]);
-    } else {
+    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;
 
@@ -227,15 +228,11 @@ Module.register('MMM-pages', {
    * @param {number} delay the delay, in milliseconds.
    */
   resetTimerWithDelay(delay) {
-    if (this.config.timings.default > 0 || Object.keys(this.config.timings).length > 1) {
+    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);
-      let currentRotationTime = this.config.timings.default;
-      if (this.config.timings[this.curPage]) {
-        currentRotationTime = this.config.timings[this.curPage];
-      }
       const self = this;
 
       this.delayTimer = setTimeout(() => {
@@ -245,7 +242,7 @@ Module.register('MMM-pages', {
           // message, so we need to trigger it for ourselves.
           self.sendNotification('PAGE_INCREMENT');
           self.notificationReceived('PAGE_INCREMENT');
-        }, currentRotationTime);
+        }, self.config.rotationTime);
       }, delay);
     } else if (this.config.rotationHomePage > 0) {
       // This timer is the auto rotate function.
@@ -280,11 +277,11 @@ Module.register('MMM-pages', {
       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) {
-        this.resetTimerWithDelay(this.rotationDelay);
-      } else {
+      if (!isRotating) {
         clearInterval(this.timer);
         clearInterval(this.delayTimer);
+      } else {
+        this.resetTimerWithDelay(this.rotationDelay);
       }
       this.rotationPaused = isRotating;
     }

README.md

@@ -59,7 +59,7 @@ To use this module, add a configuration to the modules array in the `config/conf
 
 There are two ways to configure this module: Using the module names or using class names. The module name based configuration is easier to use, but has the limitation that you can only use one instance of each module. So if you want to use multiple instances of the same module, you have to use the class based configuration.
 
-*Note*: You can find complete configuration example files for both module name and class based configurations in the [example_configs](example_configs) directory.
+*Note*: Some of the module names used in the following examples are fictitious.
 
 ### Module name based configuration
 
@@ -71,13 +71,10 @@ The first element of the array is the first page, the second element is the seco
     {
         module: "MMM-pages",
         config: {
-            timings: {
-                default: 5000,               // rotate every 5 seconds   
-                0: 20000                     // page 0 rotates every 20 seconds
-            },
+            rotationTime: 1000 * 20,         // rotate every 20 seconds
             modules: [
-                ["newsfeed"],                // page 0
-                ["calendar", "compliments"], // page 1
+                ["newsfeed"],                // page 1
+                ["calendar", "compliments"], // page 2
             ],
             fixed: [                         // modules that are always shown
                 "clock",
@@ -87,11 +84,11 @@ The first element of the array is the first page, the second element is the seco
             hiddenPages: {                   // modules that are only shown on specific pages
                 "screenSaver": [
                     "clock",
-                    "MMM-BackgroundSlideshow"
+                    "MMM-SomeBackgroundImageModule"
                 ],
                 "admin": [
-                    "MMM-SystemMonitor",
-                    "MMM-OnScreenMenu"
+                    "MMM-ShowMeSystemStatsModule",
+                    "MMM-AnOnScreenMenuModule"
                 ]
             }
         }
@@ -106,14 +103,11 @@ Instead of using the module name, you can also use a class name for each page. T
     {
         module: "MMM-pages",
         config: {
-            timings: {
-                default: 20000,      // rotate every 20 seconds
-                2: 30000             // page 2 rotates every 30 seconds
-            }, 
+            rotationTime: 1000 * 20, // rotate every 20 seconds
             modules: [
-                ["page0"],           // class name for page 0
                 ["page1"],           // class name for page 1
                 ["page2"],           // class name for page 2
+                ["page3"],           // class name for page 3
             ],
             fixed: ["fixed_page"],
             hiddenPages: {
@@ -127,23 +121,15 @@ Instead of using the module name, you can also use a class name for each page. T
 You have to add the class name to the config of the module you want to show on a specific page. You can even add more than one class name to show a module instance on multiple pages.
 
 ```js
-    {   // newsfeed on page 0
+    {   // newsfeed on page 1
         module: "newsfeed",
-        classes: "page0",
-        position: "...",
-        config: {
-            ...
-        }
-    },
-    {   // first calendar instance on page 1
-        module: "calendar",
         classes: "page1",
         position: "...",
         config: {
             ...
         }
     },
-    {   // second calendar instance on page 2
+    {   // first calendar instance on page 2
         module: "calendar",
         classes: "page2",
         position: "...",
@@ -151,9 +137,17 @@ You have to add the class name to the config of the module you want to show on a
             ...
         }
     },
-    {  // this compliments instance appears on page 0 and 2
+    {   // second calendar instance on page 3
+        module: "calendar",
+        classes: "page3",
+        position: "...",
+        config: {
+            ...
+        }
+    },
+    {  // this compliments instance appears on page 1 and 3
         module: "compliments",
-        classes: "page0 page2",
+        classes: "page1 page3",
         position: "...",
         config: {
             ...
@@ -164,15 +158,14 @@ You have to add the class name to the config of the module you want to show on a
 
 ### Configuration options
 
-| Option              | Type                       | Default Value            | Description |
-| ------------------- | -------------------------- | ------------------------ | ----------- |
+| Option | Type | Default Value | Description |
+| --- | --- | --- | --- |
 | `modules`           | `[[String...]...]`         | `[]`                     | A 2D String array of what each module should be on which page. Note that all entries must take their class name (e.g. this module's class name is `MMM-pages`, while the default modules may just have `newsfeed`, without the `MMM-` prefix. |
 | `fixed`             | `[String...]`              | `["MMM-page-indicator"]` | Which modules should show up all the time. |
 | `excludes`          | *NA*                       | *NA*                     | **Deprecated**. Use `fixed` instead. |
 | `hiddenPages`       | `{String: [String...]...}` | `{}`                     | An Object defining special `hiddenPages` which are not available on the normal page rotation and only accessible via a notification. Modules defined in `fixed` are ignored and need to be also added if you wish to have them on any hidden page. |
 | `animationTime`     | `int`                      | `1000`                   | Fading animation time. Set to `0` for instant change. Value is in milliseconds (1 second = 1000 milliseconds). |
-| `rotationTime`      | *NA*                       | *NA*                     | **Deprecated**. Use `timings` instead. |
-| `timings`           | `object`                   | `{ default: 0 }`         | An object whose keys define the rotation time of the pages in milliseconds. <br>Example, where each page is 3 seconds, except page 3 which is 20 seconds:<br>`{ default: 3000, 2: 20000 }`<br>If a page is not defined, it will use the `default` value. <br> *Note:* Remember that the numbering starts at 0, so the first page is `0`, the second page is `1`, and so forth. |
+| `rotationTime`      | `int`                      | `0`                      | Time, in milliseconds, between automatic page changes. |
 | `rotationDelay`     | `int`                      | `10000`                  | Time, in milliseconds, of how long should a manual page change linger before returning to automatic page changing. In other words, how long should the timer wait for after you manually change a page. This does include the animation time, so you may wish to increase it by a few seconds or so to account for the animation time. |
 | `rotationHomePage`  | `int`                      | `0`                      | Time, in milliseconds, before automatically returning to the home page. If a home page is not set, this returns to the leftmost page instead. |
 | `rotationFirstPage` | *NA*                       | *NA*                     | **Deprecated**. Use `rotationHomePage` instead. |
@@ -285,8 +278,8 @@ See also FAQ below.
 If you want to contribute to this project, pleases use the following commands to maintain code quality:
 
 - `npm install` - Install development dependencies for linting.
-- `node --run lint` - Run linting checks.
-- `node --run lint:fix` - Fix linting issues. Please run this before committing.
+- `npm run lint` - Run linting checks.
+- `npm run lint:fix` - Fix linting issues. Please run this before committing.
 
 [mm]: https://github.com/MagicMirrorOrg/MagicMirror
 [page indicator]: https://github.com/edward-shen/MMM-page-indicator

eslint.config.js

@@ -1,31 +0,0 @@
-import { defineConfig } from 'eslint/config';
-import globals from 'globals';
-import js from '@eslint/js';
-import markdown from '@eslint/markdown';
-import stylistic from '@stylistic/eslint-plugin';
-
-export default defineConfig([
-  {
-    files: ['**/*.js'],
-    languageOptions: {
-      ecmaVersion: 'latest',
-      globals: {
-        ...globals.browser,
-        Log: 'readonly',
-        MM: 'readonly',
-        Module: 'readonly',
-        module: 'readonly',
-      },
-    },
-    plugins: { js, stylistic },
-    extends: ['js/recommended', 'stylistic/recommended'],
-    rules: {
-      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
-      '@stylistic/comma-dangle': ['error', 'only-multiline'],
-      '@stylistic/max-statements-per-line': ['error', { max: 2 }],
-      '@stylistic/semi': ['error', 'always'],
-      'no-negated-condition': 'error'
-    }
-  },
-  { files: ['**/*.md'], plugins: { markdown }, language: 'markdown/gfm', extends: ['markdown/recommended'] },
-]);

eslint.config.mjs

@@ -0,0 +1,30 @@
+import eslintPluginJs from '@eslint/js';
+import eslintPluginStylistic from '@stylistic/eslint-plugin';
+import globals from 'globals';
+
+const config = [
+  eslintPluginJs.configs.recommended,
+  eslintPluginStylistic.configs['recommended-flat'],
+  {
+    files: ['**/*.js', '**/*.mjs'],
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        Log: 'readonly',
+        MM: 'readonly',
+        Module: 'readonly',
+      },
+    },
+    rules: {
+      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
+      '@stylistic/comma-dangle': ['error', 'only-multiline'],
+      '@stylistic/semi': ['error', 'always'],
+      'object-shorthand': ['error', 'always']
+    },
+  }
+];
+
+export default config;

example_configs/config_class-name.js

@@ -1,60 +0,0 @@
-/*
-  * This is an example configuration file for the MMM-pages module.
-  *
-  * Since it uses only default modules besides MMM-pages, it is a good starting
-  * point for your configuration. You can add more modules if you want.
-  *
-  * It shows how to configure the module with class names. Checkout the
-  * "Class based configuration" section in the README.
-  *
-*/
-
-let config = {
-  modules: [
-    {
-      module: 'MMM-pages',
-      config: {
-        timings: {
-          default: 5000,
-          2: 20000
-        },
-        modules: [
-          ['page0'],
-          ['page1'],
-          ['page2'],
-        ]
-      }
-    },
-    {
-      module: 'compliments',
-      classes: 'page0 page1 page2',
-      position: 'top_bar',
-      config: {
-        compliments: {
-          anytime: ['Test MMM-pages: Class based configuration'],
-        }
-      }
-    },
-    {
-      module: 'clock',
-      classes: 'page1',
-      position: 'bottom_bar'
-    },
-    {
-      module: 'newsfeed',
-      classes: 'page2',
-      position: 'middle_center',
-      config: {
-        feeds: [
-          {
-            title: 'New York Times',
-            url: 'https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml'
-          }
-        ]
-      }
-    },
-  ]
-};
-
-/** ************* DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== 'undefined') { module.exports = config; }

example_configs/config_module-name.js

@@ -1,57 +0,0 @@
-/*
-  * This is an example configuration file for the MMM-pages module.
-  *
-  * Since it uses only default modules besides MMM-pages, it is a good starting
-  * point for your configuration. You can add more modules if you want.
-  *
-  * It shows how to configure the module with module names. Checkout the
-  * "Module name based configuration" section in the README.
-  *
-*/
-
-let config = {
-  modules: [
-    {
-      module: 'MMM-pages',
-      config: {
-        timings: {
-          default: 5000,
-          2: 20000
-        },
-        modules: [
-          ['compliments'],
-          ['clock'],
-          ['newsfeed'],
-        ]
-      }
-    },
-    {
-      module: 'compliments',
-      position: 'top_bar',
-      config: {
-        compliments: {
-          anytime: ['Test MMM-pages: Module name based configuration'],
-        }
-      }
-    },
-    {
-      module: 'clock',
-      position: 'top_bar'
-    },
-    {
-      module: 'newsfeed',
-      position: 'middle_center',
-      config: {
-        feeds: [
-          {
-            title: 'New York Times',
-            url: 'https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml'
-          }
-        ]
-      }
-    },
-  ]
-};
-
-/** ************* DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== 'undefined') { module.exports = config; }

package.json

@@ -1,9 +1,8 @@
 {
   "name": "mmm-pages",
-  "version": "1.1.2",
+  "version": "1.0.0",
   "description": "Add pages to your MagicMirror².",
   "main": "MMM-pages.js",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edward-shen/MMM-pages.git"
@@ -20,15 +19,14 @@
   },
   "homepage": "https://github.com/edward-shen/MMM-pages#readme",
   "scripts": {
-    "lint": "eslint",
-    "lint:fix": "eslint --fix",
-    "test": "node --run lint"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "npm run lint"
   },
   "devDependencies": {
-    "@eslint/js": "^9.28.0",
-    "@eslint/markdown": "^6.5.0",
-    "@stylistic/eslint-plugin": "^4.4.1",
-    "eslint": "^9.28.0",
-    "globals": "^16.2.0"
+    "@eslint/js": "^9.16.0",
+    "@stylistic/eslint-plugin": "^2.11.0",
+    "eslint": "^9.16.0",
+    "globals": "^15.13.0"
   }
 }

pages.css

@@ -0,0 +1 @@
+/* This css page is reserved for future use. */