Some ideas on API

probably not going to continue, as there is nowhere near enough need for
it

.eslintrc.js

@@ -1,296 +1,300 @@
 module.exports = {
-    "env": {
+    'env': {
-        "browser": true,
+        'browser': true,
-        "es6": true
+        'es6': true
     },
-    "extends": "eslint:recommended",
+    'extends': [
-    "globals": {
+        'eslint:recommended',
-        "Atomics": "readonly",
+        'plugin:@typescript-eslint/recommended'
-        "SharedArrayBuffer": "readonly"
+    ],
+    'globals': {
+        'Atomics': 'readonly',
+        'SharedArrayBuffer': 'readonly'
     },
-    "parserOptions": {
+    'parserOptions': {
-        "ecmaVersion": 2018
+        'ecmaVersion': 2022
     },
-    "rules": {
+    'parser': '@typescript-eslint/parser',
-        "accessor-pairs": "error",
+    'plugins': ['@typescript-eslint'],
-        "array-bracket-newline": "error",
+    'rules': {
-        "array-bracket-spacing": "error",
+        'accessor-pairs': 'error',
-        "array-callback-return": "error",
+        'array-bracket-newline': 'error',
-        "array-element-newline": "error",
+        'array-bracket-spacing': 'error',
-        "arrow-body-style": "error",
+        'array-callback-return': 'error',
-        "arrow-parens": "error",
+        'array-element-newline': 'error',
-        "arrow-spacing": "error",
+        'arrow-body-style': 'error',
-        "block-scoped-var": "off",
+        'arrow-parens': 'error',
-        "block-spacing": [
+        'arrow-spacing': 'error',
-            "error",
+        'block-scoped-var': 'off',
-            "always"
+        'block-spacing': [
+            'error',
+            'always'
         ],
-        "brace-style": [
+        'brace-style': [
-            "error",
+            'error',
-            "1tbs",
+            '1tbs',
             {
-                "allowSingleLine": true
+                'allowSingleLine': true
             }
         ],
-        "callback-return": "error",
+        'callback-return': 'error',
-        "camelcase": "error",
+        'camelcase': 'error',
-        "capitalized-comments": "off",
+        'capitalized-comments': 'off',
-        "class-methods-use-this": "error",
+        'class-methods-use-this': 'off',
-        "comma-dangle": "error",
+        'comma-dangle': 'error',
-        "comma-spacing": [
+        'comma-spacing': [
-            "error",
+            'error',
             {
-                "after": true,
+                'after': true,
-                "before": false
+                'before': false
             }
         ],
-        "comma-style": [
+        'comma-style': [
-            "error",
+            'error',
-            "last"
+            'last'
         ],
-        "complexity": "error",
+        'complexity': 'error',
-        "computed-property-spacing": [
+        'computed-property-spacing': [
-            "error",
+            'error',
-            "always"
+            'always'
         ],
-        "consistent-return": "error",
+        'consistent-return': 'error',
-        "consistent-this": "off",
+        'consistent-this': 'off',
-        "curly": "error",
+        'curly': 'error',
-        "default-case": "error",
+        'default-case': 'error',
-        "dot-location": "error",
+        'dot-location': 'error',
-        "dot-notation": "error",
+        'dot-notation': 'error',
-        "eol-last": "error",
+        'eol-last': 'error',
-        "eqeqeq": "error",
+        'eqeqeq': 'error',
-        "func-call-spacing": "error",
+        'func-call-spacing': 'error',
-        "func-name-matching": "error",
+        'func-name-matching': 'error',
-        "func-names": "off",
+        'func-names': 'off',
-        "func-style": [
+        'func-style': [
-            "error",
+            'error',
-            "expression"
+            'expression'
         ],
-        "function-paren-newline": "error",
+        'function-paren-newline': 'error',
-        "generator-star-spacing": "error",
+        'generator-star-spacing': 'error',
-        "global-require": "error",
+        'global-require': 'error',
-        "guard-for-in": "error",
+        'guard-for-in': 'error',
-        "handle-callback-err": "error",
+        'handle-callback-err': 'error',
-        "id-blacklist": "error",
+        'id-blacklist': 'error',
-        "id-length": "off",
+        'id-length': 'off',
-        "id-match": "error",
+        'id-match': 'error',
-        "implicit-arrow-linebreak": "error",
+        'implicit-arrow-linebreak': 'error',
-        "indent": "error",
+        'indent': 'error',
-        "indent-legacy": "error",
+        'indent-legacy': 'error',
-        "init-declarations": "off",
+        'init-declarations': 'off',
-        "jsx-quotes": "error",
+        'jsx-quotes': 'error',
-        "key-spacing": "off",
+        'key-spacing': 'off',
-        "keyword-spacing": [
+        'keyword-spacing': [
-            "error",
+            'error',
             {
-                "after": true,
+                'after': true,
-                "before": true
+                'before': true
             }
         ],
-        "line-comment-position": "off",
+        'line-comment-position': 'off',
-        "linebreak-style": [
+        'linebreak-style': [
-            "error",
+            'error',
-            "unix"
+            'unix'
         ],
-        "lines-around-comment": "error",
+        'lines-around-comment': 'error',
-        "lines-around-directive": "off",
+        'lines-around-directive': 'off',
-        "lines-between-class-members": "error",
+        'lines-between-class-members': 'error',
-        "max-classes-per-file": "error",
+        'max-depth': 'error',
-        "max-depth": "error",
+        'max-len': 'off',
-        "max-len": "off",
+        'max-lines': 'error',
-        "max-lines": "error",
+        'max-lines-per-function': 'off',
-        "max-lines-per-function": "off",
+        'max-nested-callbacks': 'error',
-        "max-nested-callbacks": "error",
+        'max-params': 'error',
-        "max-params": "error",
+        'max-statements': 'off',
-        "max-statements": "off",
+        'max-statements-per-line': 'off',
-        "max-statements-per-line": "off",
+        'multiline-comment-style': [
-        "multiline-comment-style": [
+            'error',
-            "error",
+            'separate-lines'
-            "separate-lines"
         ],
-        "new-cap": "error",
+        'new-cap': 'error',
-        "new-parens": "error",
+        'new-parens': 'error',
-        "newline-after-var": "off",
+        'newline-after-var': 'off',
-        "newline-before-return": "off",
+        'newline-before-return': 'off',
-        "newline-per-chained-call": "error",
+        'newline-per-chained-call': 'error',
-        "no-alert": "error",
+        'no-alert': 'error',
-        "no-array-constructor": "error",
+        'no-array-constructor': 'error',
-        "no-async-promise-executor": "error",
+        'no-async-promise-executor': 'error',
-        "no-await-in-loop": "error",
+        'no-await-in-loop': 'error',
-        "no-bitwise": "error",
+        'no-bitwise': 'error',
-        "no-buffer-constructor": "error",
+        'no-buffer-constructor': 'error',
-        "no-caller": "error",
+        'no-caller': 'error',
-        "no-catch-shadow": "error",
+        'no-catch-shadow': 'error',
-        "no-confusing-arrow": "error",
+        'no-confusing-arrow': 'error',
-        "no-continue": "error",
+        'no-continue': 'error',
-        "no-div-regex": "error",
+        'no-div-regex': 'error',
-        "no-duplicate-imports": "error",
+        'no-duplicate-imports': 'error',
-        "no-else-return": "error",
+        'no-else-return': 'error',
-        "no-empty-function": "error",
+        'no-empty-function': 'error',
-        "no-eq-null": "error",
+        'no-eq-null': 'error',
-        "no-eval": "error",
+        'no-eval': 'error',
-        "no-extend-native": "error",
+        'no-extend-native': 'error',
-        "no-extra-bind": "error",
+        'no-extra-bind': 'error',
-        "no-extra-label": "error",
+        'no-extra-label': 'error',
-        "no-extra-parens": "off",
+        'no-extra-parens': 'off',
-        "no-floating-decimal": "error",
+        'no-floating-decimal': 'error',
-        "no-implicit-coercion": "error",
+        'no-implicit-coercion': 'error',
-        "no-implicit-globals": "error",
+        'no-implicit-globals': 'error',
-        "no-implied-eval": "error",
+        'no-implied-eval': 'error',
-        "no-inline-comments": "off",
+        'no-inline-comments': 'off',
-        "no-inner-declarations": [
+        'no-inner-declarations': [
-            "error",
+            'error',
-            "functions"
+            'functions'
         ],
-        "no-invalid-this": "off",
+        'no-invalid-this': 'off',
-        "no-iterator": "error",
+        'no-iterator': 'error',
-        "no-label-var": "error",
+        'no-label-var': 'error',
-        "no-labels": "error",
+        'no-labels': 'error',
-        "no-lone-blocks": "error",
+        'no-lone-blocks': 'error',
-        "no-lonely-if": "error",
+        'no-lonely-if': 'error',
-        "no-loop-func": "error",
+        'no-loop-func': 'error',
-        "no-magic-numbers": "off",
+        'no-magic-numbers': 'off',
-        "no-misleading-character-class": "error",
+        'no-misleading-character-class': 'error',
-        "no-mixed-operators": "error",
+        'no-mixed-operators': 'error',
-        "no-mixed-requires": "error",
+        'no-mixed-requires': 'error',
-        "no-multi-assign": "error",
+        'no-multi-assign': 'error',
-        "no-multi-spaces": "off",
+        'no-multi-spaces': 'off',
-        "no-multi-str": "error",
+        'no-multi-str': 'error',
-        "no-multiple-empty-lines": "error",
+        'no-multiple-empty-lines': 'error',
-        "no-native-reassign": "error",
+        'no-native-reassign': 'error',
-        "no-negated-condition": "off",
+        'no-negated-condition': 'off',
-        "no-negated-in-lhs": "error",
+        'no-negated-in-lhs': 'error',
-        "no-nested-ternary": "error",
+        'no-nested-ternary': 'error',
-        "no-new": "error",
+        'no-new': 'error',
-        "no-new-func": "error",
+        'no-new-func': 'error',
-        "no-new-object": "error",
+        'no-new-object': 'error',
-        "no-new-require": "error",
+        'no-new-require': 'error',
-        "no-new-wrappers": "error",
+        'no-new-wrappers': 'error',
-        "no-octal-escape": "error",
+        'no-octal-escape': 'error',
-        "no-param-reassign": "off",
+        'no-param-reassign': 'off',
-        "no-path-concat": "error",
+        'no-path-concat': 'error',
-        "no-plusplus": "off",
+        'no-plusplus': 'off',
-        "no-process-env": "error",
+        'no-process-env': 'error',
-        "no-process-exit": "error",
+        'no-process-exit': 'error',
-        "no-proto": "error",
+        'no-proto': 'error',
-        "no-prototype-builtins": "error",
+        'no-prototype-builtins': 'error',
-        "no-restricted-globals": "error",
+        'no-restricted-globals': 'error',
-        "no-restricted-imports": "error",
+        'no-restricted-imports': 'error',
-        "no-restricted-modules": "error",
+        'no-restricted-modules': 'error',
-        "no-restricted-properties": "error",
+        'no-restricted-properties': 'error',
-        "no-restricted-syntax": "error",
+        'no-restricted-syntax': 'error',
-        "no-return-assign": "error",
+        'no-return-assign': 'error',
-        "no-return-await": "error",
+        'no-return-await': 'error',
-        "no-script-url": "error",
+        'no-script-url': 'error',
-        "no-self-compare": "error",
+        'no-self-compare': 'error',
-        "no-sequences": "error",
+        'no-sequences': 'error',
-        "no-shadow": "off",
+        'no-shadow': 'off',
-        "no-shadow-restricted-names": "error",
+        'no-shadow-restricted-names': 'error',
-        "no-spaced-func": "error",
+        'no-spaced-func': 'error',
-        "no-sync": "error",
+        'no-sync': 'error',
-        "no-tabs": "error",
+        'no-tabs': 'error',
-        "no-template-curly-in-string": "error",
+        'no-template-curly-in-string': 'error',
-        "no-ternary": "off",
+        'no-ternary': 'off',
-        "no-throw-literal": "error",
+        'no-throw-literal': 'error',
-        "no-trailing-spaces": "error",
+        'no-trailing-spaces': 'error',
-        "no-undef-init": "error",
+        'no-undef-init': 'error',
-        "no-undefined": "off",
+        'no-undefined': 'off',
-        "no-underscore-dangle": "error",
+        'no-underscore-dangle': 'error',
-        "no-unmodified-loop-condition": "error",
+        'no-unmodified-loop-condition': 'error',
-        "no-unneeded-ternary": "error",
+        'no-unneeded-ternary': 'error',
-        "no-unused-expressions": "error",
+        'no-unused-expressions': 'error',
-        "no-use-before-define": "off",
+        'no-use-before-define': 'off',
-        "no-useless-call": "error",
+        'no-useless-call': 'error',
-        "no-useless-catch": "error",
+        'no-useless-catch': 'error',
-        "no-useless-computed-key": "error",
+        'no-useless-computed-key': 'error',
-        "no-useless-concat": "error",
+        'no-useless-concat': 'error',
-        "no-useless-constructor": "error",
+        'no-useless-constructor': 'error',
-        "no-useless-rename": "error",
+        'no-useless-rename': 'error',
-        "no-useless-return": "error",
+        'no-useless-return': 'error',
-        "no-var": "off",
+        'no-var': 'off',
-        "no-void": "error",
+        'no-void': 'error',
-        "no-warning-comments": "error",
+        'no-warning-comments': 'error',
-        "no-whitespace-before-property": "error",
+        'no-whitespace-before-property': 'error',
-        "no-with": "error",
+        'no-with': 'error',
-        "nonblock-statement-body-position": "error",
+        'nonblock-statement-body-position': 'error',
-        "object-curly-newline": "error",
+        'object-curly-newline': 'error',
-        "object-curly-spacing": [
+        'object-curly-spacing': [
-            "error",
+            'error',
-            "always"
+            'always'
         ],
-        "object-shorthand": "off",
+        'object-shorthand': 'off',
-        "one-var": "off",
+        'one-var': 'off',
-        "one-var-declaration-per-line": "off",
+        'one-var-declaration-per-line': 'off',
-        "operator-assignment": "error",
+        'operator-assignment': 'error',
-        "operator-linebreak": "error",
+        'operator-linebreak': 'error',
-        "padded-blocks": "off",
+        'padded-blocks': 'off',
-        "padding-line-between-statements": "error",
+        'padding-line-between-statements': 'error',
-        "prefer-arrow-callback": "off",
+        'prefer-arrow-callback': 'off',
-        "prefer-const": "error",
+        'prefer-const': 'error',
-        "prefer-destructuring": "off",
+        'prefer-destructuring': 'off',
-        "prefer-numeric-literals": "error",
+        'prefer-numeric-literals': 'error',
-        "prefer-object-spread": "error",
+        'prefer-object-spread': 'error',
-        "prefer-promise-reject-errors": "error",
+        'prefer-promise-reject-errors': 'error',
-        "prefer-reflect": "off",
+        'prefer-reflect': 'off',
-        "prefer-rest-params": "off",
+        'prefer-rest-params': 'off',
-        "prefer-spread": "error",
+        'prefer-spread': 'error',
-        "prefer-template": "off",
+        'prefer-template': 'off',
-        "quote-props": "off",
+        'quote-props': 'off',
-        "quotes": [
+        'quotes': [
-            "error",
+            'error',
-            "double"
+            'single'
         ],
-        "radix": "error",
+        'radix': 'error',
-        "require-atomic-updates": "error",
+        'require-atomic-updates': 'error',
-        "require-await": "error",
+        'require-await': 'error',
-        "require-jsdoc": "error",
+        'require-jsdoc': 'error',
-        "require-unicode-regexp": "off",
+        'require-unicode-regexp': 'off',
-        "rest-spread-spacing": "error",
+        'rest-spread-spacing': 'error',
-        "semi": "error",
+        'semi': 'error',
-        "semi-spacing": [
+        'semi-spacing': [
-            "error",
+            'error',
             {
-                "after": true,
+                'after': true,
-                "before": false
+                'before': false
             }
         ],
-        "semi-style": [
+        'semi-style': [
-            "error",
+            'error',
-            "last"
+            'last'
         ],
-        "sort-imports": "error",
+        'sort-imports': 'error',
-        "sort-keys": "off",
+        'sort-keys': 'off',
-        "sort-vars": "off",
+        'sort-vars': 'off',
-        "space-before-blocks": "error",
+        'space-before-blocks': 'error',
-        "space-before-function-paren": "off",
+        'space-before-function-paren': 'off',
-        "space-in-parens": [
+        'space-in-parens': [
-            "error",
+            'error',
-            "always"
+            'always'
         ],
-        "space-infix-ops": "error",
+        'space-infix-ops': 'error',
-        "space-unary-ops": "error",
+        'space-unary-ops': 'error',
-        "spaced-comment": [
+        'spaced-comment': [
-            "error",
+            'error',
-            "always"
+            'always'
         ],
-        "strict": "error",
+        'strict': 'error',
-        "switch-colon-spacing": "error",
+        'switch-colon-spacing': 'error',
-        "symbol-description": "error",
+        'symbol-description': 'error',
-        "template-curly-spacing": "error",
+        'template-curly-spacing': 'error',
-        "template-tag-spacing": "error",
+        'template-tag-spacing': 'error',
-        "unicode-bom": [
+        'unicode-bom': [
-            "error",
+            'error',
-            "never"
+            'never'
         ],
-        "valid-jsdoc": "error",
+        'valid-jsdoc': 'error',
-        "vars-on-top": "off",
+        'vars-on-top': 'off',
-        "wrap-regex": "error",
+        'wrap-regex': 'error',
-        "yield-star-spacing": "error",
+        'yield-star-spacing': 'error',
-        "yoda": [
+        'yoda': [
-            "error",
+            'error',
-            "never"
+            'never'
         ]
     }
 };

.gitignore

@@ -1,8 +1,9 @@
 /js/impress.min.js.map
-# /js/impress.min.js
+/js/impress.min.js
 /node_modules
 /npm-debug.log
 /*.tgz
+/built
 
 # Files for editors and other tools
 /.brackets.json

.jscsrc

@@ -1,5 +0,0 @@
-{
-	"preset": "jquery",
-        // Since we check quotemarks already in jshint, this can be turned off
-        "validateQuoteMarks": false
-}

.jshintrc

@@ -1,17 +0,0 @@
-{
-	"globals": {
-		"module": true
-	},
-	"boss": true,
-	"browser": true,
-	"curly": true,
-        "esversion": 6,
-	"eqeqeq": true,
-	"eqnull": true,
-	"expr": true,
-	"immed": true,
-	"noarg": true,
-	"quotmark": "double",
-	"undef": true,
-	"unused": true
-}

.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "typescript",
+			"tsconfig": "tsconfig.json",
+			"problemMatcher": [
+				"$tsc"
+			],
+			"group": "build",
+			"label": "tsc: build - tsconfig.json"
+		}
+	]
+}

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2011-2016 Bartek Szopka
+Copyright (c) 2011-2016 Bartek Szopka, 2016-2024 Henrik Ingo, 2024 Janis Hutz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,77 +1,128 @@
-impress.js
+<div id="title" align="center">
-============
+    <img src="./logo.jpg" width="300">
+    <h1>impress.js</h1>
+</div>
 
-[![CircleCI](https://circleci.com/gh/impress/impress.js.svg?style=svg)](https://circleci.com/gh/impress/impress.js)
+<div id="badges" align="center">
+    <img alt="Project License" src="https://img.shields.io/github/license/impress/impress.js.svg">
+    <img alt="GitHub Repo size" src="https://img.shields.io/github/repo-size/impress/impress.js.svg">
+    <img alt="GitHub Repo issues" src="https://img.shields.io/github/issues-pr-raw/impress/impress.js">
+    <a href="https://circleci.com/gh/impress/impress.js"><img alt="CircleCI" src="https://circleci.com/gh/impress/impress.js.svg?style=svg"></a>
+    <br>
+    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/impress/impress.js">
+    <img alt="GitHub watchers" src="https://img.shields.io/github/watchers/impress/impress.js">
+    <img alt="GitHub forks" src="https://img.shields.io/github/forks/impress/impress.js">
+    <br>
+    <img alt="GitHub all releases" src="https://img.shields.io/github/downloads/impress/impress.js/total?label=Downloads (total)">
+    <img alt="GitHub release (latest by date)" src="https://img.shields.io/github/downloads/impress/impress.js/latest/total?label=Downloads (latest)">
+    <img alt="Latest release" src="https://img.shields.io/github/release/impress/impress.js.svg">
+</div>
 
-It's a presentation framework based on the power of CSS3 transforms and
+impress.js is a presentation framework written in JavaScript that uses the power of CSS3 transitions and transforms. It is inspired by the idea behind prezi.com
-transitions in modern browsers and inspired by the idea behind prezi.com.
 
 **WARNING**
 
 impress.js may not help you if you have nothing interesting to say ;)
 
 
-HOW TO USE IT
+***THIS VERSION IS UNSTABLE AND INCOMPLETE. Please use the [upstream version](https://github.com/impress/impress.js) (V2.0.0)!***
----------------
-### Getting Started Guide
-Check out our new [Getting Started](GettingStarted.md) guide if you want a quick introduction to the project!
 
-### Direct download link to only impress.js
+We are switching to TS as the main impress development language, but you can still develop plugins in JS, if you wish!
-You can include this link directly inside of your HTML file in its header. If you want to learn how to do this, you can find a how-to in the [Getting Started](GettingStarted.md) guide.
-- V2.0.0: https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js
-- V1.1.0: https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js
-- Source: https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js
 
-### Getting Started Guide
+# Getting Started with impress.js
-Check out our new [Getting Started](GettingStarted.md) guide if you want a quick introduction to the project!
+Welcome to impress.js, the impressive JavaScript framework, that allows you to build presentations for web browsers. 
 
-### Checking out and initializing the git repository
+## Browser support
+Since impress.js is designed to show off the power of modern CSS, we cannot guarantee that it will run in older browser. Whilst we try not to intentionally break support for certain browsers, some features might not work well on all browsers, especially with V3.x. For example, Internet Explorer is known to not work with V3.x, so if you really NEED to use that browser, please use V2.x. impress.js works best with the latest versions of Chrome, Firefox and most likely also with the latest versions of Safari.
+
+## Quick Start
+You can visit our website at [https://impress.js.org](https://impress.js.org) to learn more about the project, where you can also find helpful resources for getting started, like the [Getting Started Guide](/docs/GettingStarted.md) and [Documentation](/docs/DOCUMENTATION.md), but rendered as HTML instead of MarkDown, as it is here on GitHub.
+
+
+## A very quick "quick start"
+Copy one of the code snippets below to the header of your impress.js presentation's HTML file.
+- V3.0.0:
+```
+<script src="https://cdn.jsdelivr.net/gh/impress/impress.js@3.0.0/dist/impress.min.js"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/impress/impress.js@3.0.0/dist/impress.min.css">
+```
+- V2.0.0: 
+```
+<script src="https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js"/>
+```
+- V1.1.0:
+```
+<script src="https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js"/>
+```
+- Upstream:
+```
+<script src="https://cdn.jsdelivr.net/gh/impress/impress.js/dist/impress.min.js"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/impress/impress.js/dist/impress.min.css">
+```
+
+We do not recommend using the Upstream version, as there might be breaking changes coming or features might be temporarily broken due to only partially finished feature updates. Whilst this shouldn't happen normally, please be aware of that risk when using Upstream.
+
+### Using a self-hosted version of impress.js
+You can download impress.js from the releases tab. Some older versions might not have the `impress.js` file in the releases, you will be required to extract it from the source code archive. You can find the file in the `js` folder. New versions include the `impress.js`, `impress.min.js`, `impress.css` and `impress.min.css` files in the assets.
+
+
+# Documentation
+
+You can find the entire documentation of impress.js on our [website](https://impress.js.org/docs) or in the [DOCUMENTATION.md](/docs/DOCUMENTATION.md) file
+
+The [HTML source code](index.html) of the official [impress.js demo](https://impress.js.org/) serves as a good example usage and contains comments explaining various features of impress.js. For more information about styling you can look into [CSS code](css/impress-demo.css) which shows how classes provided by impress.js can be used. Last but not least [JavaScript code of impress.js](js/impress.js) has some useful comments if you are interested in how everything works. Feel free to explore!
+
+# Official demo
+
+[impress.js demo](https://impress.js.org/) by [@bartaz](https://twitter.com/bartaz)
+
+## Examples and demos
+
+The [Classic Slides](https://impress.js.org/examples/classic-slides/) demo is targeted towards beginners, or can be used as a template for presentations that look like the traditional PowerPoint slide deck. Over time, it also grew into the example presentation that uses most of the features and addons available.
+
+More examples and demos can be found on [Examples and demos wiki page](https://github.com/impress/impress.js/wiki/Examples-and-demos).
+
+Feel free to add your own example presentations (or websites) there.
+
+## Other tutorials and learning resources
+
+If you want to learn even more there is a [list of tutorials and other learning resources](https://github.com/impress/impress.js/wiki/impress.js-tutorials-and-other-learning-resources)
+on the wiki, too.
+
+There is also a book available about [Building impressive presentations with impress.js](https://www.packtpub.com/building-impressive-presentations-with-impressjs/book) by Rakhitha Nimesh Ratnayake.
+
+You may want to check out the sibling project [Impressionist](https://github.com/henrikingo/impressionist): a 3D GUI editor that can help you in creating impress.js presentations.
+
+## Mailing list
+
+You're welcome to ask impress.js related questions on the [impressionist-presentations](https://groups.google.com/forum/#!forum/impressionist-presentations) mailing list.
+
+TODO: We should migrate to a different kind of mailing list
+
+# Contributing
+## Cloning impress.js locally
 
     git clone --recursive https://github.com/impress/impress.js.git
     cd impress.js
 
 Note: For a minimal checkout, omit the `--recursive` option. This will leave out extra plugins.
 
-**Stable releases**
+## Details
+For developers, once you've made changes to the code, you should run these commands for testing:
 
-New features and fixes are continuously merged into the master branch, which is what the above command will check out. For the latest stable release, see the [Github Releases page](https://github.com/impress/impress.js/releases).
+    npm install
+    npm run all
 
+Note that running `firefox qunit_test_runner.html` is usually more informative than running `karma` with `npm run test`. They both run the same tests.
 
-### Documentation
+More info about the [src/](src/) directory can be found in [src/plugins/README.md](src/plugins/README.md).
 
+## Requirements
+TODO: Check that these requirements are still ok
+* &gt;= node 7.6
+* npm
 
-Reference documentation of core impress.js features and API you can find it in [DOCUMENTATION.md](DOCUMENTATION.md).
+# REPOSITORY STRUCTURE
-
-The [HTML source code](index.html) of the official [impress.js demo](http://impress.github.io/impress.js/) serves as a good example usage and contains comments explaining various features of impress.js. For more information about styling you can look into [CSS code](css/impress-demo.css) which shows how classes provided by impress.js can be used. Last but not least [JavaScript code of impress.js](js/impress.js) has some useful comments if you are interested in how everything works. Feel free to explore!
-
-### Official demo
-
-[impress.js demo](http://impress.github.io/impress.js/) by [@bartaz](http://twitter.com/bartaz)
-
-### Examples and demos
-
-The [Classic Slides](http://impress.github.io/impress.js/examples/classic-slides/) demo is targeted towards beginners, or can be used as a template for presentations that look like the traditional PowerPoint slide deck. Over time, it also grew into the example presentation that uses most of the features and addons available.
-
-More examples and demos can be found on [Examples and demos wiki page](http://github.com/impress/impress.js/wiki/Examples-and-demos).
-
-Feel free to add your own example presentations (or websites) there.
-
-### Other tutorials and learning resources
-
-If you want to learn even more there is a [list of tutorials and other learning resources](https://github.com/impress/impress.js/wiki/impress.js-tutorials-and-other-learning-resources)
-on the wiki, too.
-
-There is also a book available about [Building impressive presentations with impress.js](http://www.packtpub.com/building-impressive-presentations-with-impressjs/book) by Rakhitha Nimesh Ratnayake.
-
-You may want to check out the sibling project [Impressionist](https://github.com/henrikingo/impressionist): a 3D GUI editor that can help you in creating impress.js presentations.
-
-### Mailing list
-
-You're welcome to ask impress.js related questions on the [impressionist-presentations](https://groups.google.com/forum/#!forum/impressionist-presentations) mailing list.
-
-
-REPOSITORY STRUCTURE
---------------------
 
 * [index.html](index.html): This is the official impress.js demo, showcasing all of the features of the original impress.js, as well as some new plugins as we add them.
   * As already mentioned, this file is well commented and acts as the official tutorial.
@@ -86,53 +137,35 @@ REPOSITORY STRUCTURE
 * [build.js](build.js): Simple build file that creates `js/impress.js`. It also creates a minified version `impress.min.js`, but that one is not included in the github repository.
 * [package.json](build.js): An NPM package specification. This was mainly added so you can easily install [buildify](https://www.npmjs.com/package/buildify) and run `node build.js`. Other than the build process, which is really just doing roughly `cat src/impress.js src/plugins/*/*.js > js/impress.js`, and testing, `impress.js` itself doesn't depend on Node or any NPM modules.
 
-WANT TO CONTRIBUTE?
+TODO: Update repo structure once updating is complete
----------------------
 
-For developers, once you've made changes to the code, you should run these commands for testing:
+# About impress.js
+## ABOUT THE NAME
 
-    npm install
+impress.js name is [courtesy of @skuzniak](https://twitter.com/skuzniak/status/143627215165333504).
-    npm run all
 
-Note that running `firefox qunit_test_runner.html` is usually more informative than running `karma` with `npm run test`. They both run the same tests.
+It's an (un)fortunate coincidence that an Open/LibreOffice presentation tool is called Impress ;)
 
-More info about the [src/](src/) directory can be found in [src/plugins/README.md](src/plugins/README.md).
+## Reference API
 
-### Requirements
+See the [Reference API](/docs/DOCUMENTATION.md)
 
-* &gt;= node 7.6
+TODO: Will be updated once full release of V3 is ready
-* npm
+
+## Browser support (again, but for devs)
+
+impress.js uses the following CSS and JavaScript features
+
+TODO: Update list below
+
+* [DataSet API](https://caniuse.com/#search=dataset)
+* [ClassList API](https://caniuse.com/#search=classlist)
+* [CSS 3D Transforms](https://caniuse.com/#search=css%203d)
+* [CSS Transitions](https://caniuse.com/#search=css%20transition)
 
 
-ABOUT THE NAME
+# Copyright and License
-----------------
 
-impress.js name is [courtesy of @skuzniak](http://twitter.com/skuzniak/status/143627215165333504).
+Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-2023 Henrik Ingo (@henrikingo) and [85+ other contributors](https://github.com/impress/impress.js/graphs/contributors)
-
-It's an (un)fortunate coincidence that a Open/LibreOffice presentation tool is called Impress ;)
-
-Reference API
---------------
-
-See the [Reference API](DOCUMENTATION.md)
-
-BROWSER SUPPORT
------------------
-
-The design goal for impress.js has been to showcase awesome CSS3 features as found in modern browser versions. We also use some new DOM functionality, and specifically do not use jQuery or any other JavaScript libraries, nor our own functions, to support older browsers. In general, recent versions of Firefox and Chrome are known to work well. Reportedly IE now works too.
-
-The typical use case for impress.js is to create presentations that you present from your own laptop, with a browser version you know works well. Some people also use impress.js successfully to embed animations or presentations in a web page, however, be aware that in this some of your visitors may not see the presentation correctly, or at all.
-
-In particular, impress.js makes use of the following JS and CSS features:
-
-* [DataSet API](http://caniuse.com/#search=dataset)
-* [ClassList API](http://caniuse.com/#search=classlist)
-* [CSS 3D Transforms](http://caniuse.com/#search=css%203d)
-* [CSS Transitions](http://caniuse.com/#search=css%20transition)
-
-COPYRIGHT AND LICENSE
----------------------
-
-Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-2023 Henrik Ingo (@henrikingo) and [70+ other contributors](https://github.com/impress/impress.js/graphs/contributors)
 
 Released under the MIT [License](LICENSE)

build.js

@@ -1,56 +0,0 @@
-const fs = require( 'fs' );
-var Terser = require("terser");
-
-var files = [ 'src/impress.js' ];
-// Libraries from src/lib
-files.push( 'src/lib/gc.js', 'src/lib/util.js', 'src/lib/rotation.js' );
-// Plugins from src/plugins
-files.push( 'src/plugins/autoplay/autoplay.js',
-           'src/plugins/blackout/blackout.js',
-           'src/plugins/extras/extras.js',
-           'src/plugins/form/form.js',
-           'src/plugins/fullscreen/fullscreen.js',
-           'src/plugins/goto/goto.js',
-           'src/plugins/help/help.js',
-           'src/plugins/impressConsole/impressConsole.js',
-           'src/plugins/media/media.js',
-           'src/plugins/mobile/mobile.js',
-           'src/plugins/mouse-timeout/mouse-timeout.js',
-           'src/plugins/navigation/navigation.js',
-           'src/plugins/navigation-ui/navigation-ui.js',
-           'src/plugins/progress/progress.js',
-           'src/plugins/rel/rel.js',
-           'src/plugins/resize/resize.js',
-           'src/plugins/skip/skip.js',
-           'src/plugins/stop/stop.js',
-           'src/plugins/substep/substep.js',
-           'src/plugins/touch/touch.js',
-           'src/plugins/toolbar/toolbar.js' );
-var output = files.map( ( f )=>{
-  return fs.readFileSync( f ).toString();
-}).join( '\n' );
-
-var filename = 'js/impress.js';
-fs.writeFileSync( filename, '// This file was automatically generated from files in src/ directory.\n\n' + output );
-console.log( filename );
-
-// terser --compress --mangle --comments '/^!/' --source-map --output js/impress.min.js js/impress.js
-var code = fs.readFileSync( 'js/impress.js' ).toString();
-var options = {
-  sourceMap: {
-   filename: 'js/impress.js',
-   url: 'js/impress.min.js.map'
-  },
-  output: {
-    comments: /^!/
-  }
-};
-var result = Terser.minify( {'js/impress.js': code}, options );
-
-filename = 'js/impress.min.js';
-fs.writeFileSync( filename, result.code );
-console.log( filename );
-filename = 'js/impress.min.js.map';
-fs.writeFileSync( filename, result.map );
-console.log( filename );
-

docs/DOCUMENTATION.md

@@ -319,7 +319,7 @@ impress().tear();
 
 #### .next()
 
-Navigates to the next step of the presentation using the [`goto()` function](#-goto-stepindex--stepelementid--stepelement---duration--).
+Navigates to the next step of the presentation using the [`goto()` function](#impressgotostepindexstepelementidstepelement-duration).
 
 **Example:**
 
@@ -331,7 +331,7 @@ api.next();
 
 #### .prev()
 
-Navigates to the previous step of the presentation using the [`goto()` function](#-goto-stepindex--stepelementid--stepelement---duration--).
+Navigates to the previous step of the presentation using the [`goto()` function](#impressgotostepindexstepelementidstepelement-duration).
 
 **Example:**
 

docs/GettingStarted.md

@@ -12,9 +12,9 @@ First of all, you need to know, if you are going to have WiFi connection when yo
 Loading the script from the cdn is quite straight forward. If you copy the below example code, you need to do nothing else, impress will be loaded automatically.
 
 **Direct links to different versions of the impress.js file**
-- [V2.0.0](https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js)
+- V2.0.0: https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js
-- [V1.1.0](https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js)
+- V1.1.0: https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js
-- [Source](https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js)
+- Source: https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js
 
 ### Download the file to your PC
 Head to the releases tab and download the source code as zip or as a tarball. Go ahead and unzip / untar it. You need to copy the folder */js/* into the folder you are working in. Optionally, if you want to make your life a bit easier, you can copy also copy the folder */css/* in there.

docs/core/addElements.md

@@ -0,0 +1,2 @@
+# Adding Elements to impress
+You can add elements to impress by calling the `impress.addElement` function. 

examples/2D-navigation/index.html

@@ -28,21 +28,42 @@
 
         <ul>
         <li>Impress.js allows you to layout your presentation in a 3D space</li>
-        <li>Now <a href="https://github.com/impress/impress.js/tree/master/src/plugins/goto">the
+        <li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/goto">The
-           goto plugin</a> also allows you to specify
+           goto plugin</a> allows you to specify
            non-linear navigation!</li>
         <li>This demo can be navigated by
             <ul>
+            <li>continuously pressing Space</li>
             <li>continuously pressing Right Arrow</li>
             <li>continuously pressing Down Arrow</li>
             <li>(or freely, pressing Up, Down, Right, Left as you choose)</li>
             </ul>
+        <li>It's up to you to decide which is the better structure</li>
+        </li>
+    </div>
+
+    <div id="bm0" class="step" data-scale="1" data-rel-x="1500" data-rel-y="0"
+	 data-bookmark-key-list="0">
+        <h1>Using bookmark hotkeys</h1>
+        <ul>
+        <li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/bookmark">The
+           bookmark plugin</a> also allows you to specify
+           non-linear navigation, in a different way.</li>
+        <li>This demo can <em>also</em> be navigated by
+            <ul>
+            <li>pressing 1 2 3 4 5 6 7 8 9 to fast travel directly</li>
+            <li>pressing J J J, K K K, L L L to cycle vertically</li>
+            <li>pressing U U U, I I I, O O O to cycle horizontally</li>
+            <li>pressing Z or [ to zoom out to the full view</li>
+            <li>pressing 0 to come back to this text</li>
+            </ul>
         </li>
         <li>It's up to you to decide which is the better structure</li>
         </ul>
     </div>
 
-    <div id="contents" class="step" data-rel-x="1500" data-rel-y="1500" data-scale="1">
+    <div id="contents" class="step" data-rel-x="0" data-rel-y="1500" data-scale="1"
+	 data-bookmark-key-list="w" >
         <h1>Choosing a treat</h1>
 
         <ul>
@@ -60,7 +81,8 @@
     <!-- Ice cream slides (3) -->
     <div id="icecream" class="step" data-x="2000" data-y="2000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="contents icecream-pro contents crisps">
+         data-goto-next-list="contents icecream-pro contents crisps"
+	 data-bookmark-key-list="7 u j" >
         <h1>Ice cream</h1>
 
         <ul>
@@ -73,7 +95,8 @@
 
     <div id="icecream-pro" class="step" data-rel-x="0" data-rel-y="1000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="icecream icecream-con applepie crisps-pro">
+         data-goto-next-list="icecream icecream-con applepie crisps-pro"
+	 data-bookmark-key-list="4 i j" >
         <h1>Ice cream: Pro's</h1>
 
         <ul>
@@ -85,7 +108,8 @@
 
     <div id="icecream-con" class="step" data-rel-x="0" data-rel-y="1000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="icecream-pro crisps applepie-pro crisps-con">
+         data-goto-next-list="icecream-pro crisps applepie-pro crisps-con"
+	 data-bookmark-key-list="1 o j" >
         <h1>Ice cream: Con's</h1>
 
         <ul>
@@ -99,7 +123,8 @@
     <!-- Crisps slides (3) -->
     <div id="crisps" class="step" data-x="3500" data-y="2000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="icecream-con crisps-pro icecream applepie">
+         data-goto-next-list="icecream-con crisps-pro icecream applepie"
+	 data-bookmark-key-list="8 u k" >
         <h1>Crisps</h1>
 
         <ul>
@@ -112,7 +137,8 @@
 
     <div id="crisps-pro" class="step" data-rel-x="0" data-rel-y="1000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="crisps crisps-con icecream-pro applepie-pro">
+         data-goto-next-list="crisps crisps-con icecream-pro applepie-pro"
+	 data-bookmark-key-list="5 i k" >
         <h1>Crisps: Pro's</h1>
 
         <ul>
@@ -127,7 +153,8 @@
 
     <div id="crisps-con" class="step" data-rel-x="0" data-rel-y="1000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="crisps-pro applepie icecream-con applepie-con">
+         data-goto-next-list="crisps-pro applepie icecream-con applepie-con"
+	 data-bookmark-key-list="2 o k" >
         <h1>Crisps: Con's</h1>
 
         <ul>
@@ -140,7 +167,8 @@
     <!-- Apple pie slides (3) -->
     <div id="applepie" class="step" data-x="5000" data-y="2000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="crisps-con applepie-pro crisps icecream-pro">
+         data-goto-next-list="crisps-con applepie-pro crisps icecream-pro"
+	 data-bookmark-key-list="9 u l" >
         <h1>Apple pie</h1>
 
         <ul>
@@ -152,7 +180,8 @@
 
     <div id="applepie-pro" class="step" data-rel-x="0" data-rel-y="1000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="applepie applepie-con crisps-pro icecream-con">
+         data-goto-next-list="applepie applepie-con crisps-pro icecream-con"
+	 data-bookmark-key-list="6 i l" >
         <h1>Apple pie: Pro's</h1>
 
         <ul>
@@ -165,7 +194,8 @@
 
     <div id="applepie-con" class="step" data-rel-x="0" data-rel-y="1000"
          data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
-         data-goto-next-list="applepie-pro conclusion crisps-con conclusion">
+         data-goto-next-list="applepie-pro conclusion crisps-con conclusion"
+	 data-bookmark-key-list="3 o l" >
         <h1>Apple pie: Con's</h1>
 
         <ul>
@@ -175,7 +205,8 @@
     </div>
 
 
-    <div id="conclusion" class="step" data-rel-x="1000" data-rel-y="1000">
+    <div id="conclusion" class="step" data-rel-x="1000" data-rel-y="1000"
+	 data-bookmark-key-list="q" >
         <h1>Conclusion</h1>
 
         <p>Can I choose all three ;-)</p>
@@ -186,7 +217,8 @@
                         <a href="https://www.flickr.com/photos/stevepj2009/6296334551">stevepj2009@Flickr</a> </p>
     </div>
 
-    <div id="overview" class="step" data-x="3000" data-y="2000" data-scale="9" style="pointer-events: none;">
+    <div id="overview" class="step" data-x="3000" data-y="2000" data-scale="9" style="pointer-events: none;"
+	 data-bookmark-key-list="z [" >
     </div>
 </div>
 

examples/index.html

@@ -0,0 +1,15 @@
+<html>
+<head>
+<title>Example presentations</title>
+</head>
+<body><h1>Example presentations</h1>
+<ul><br />
+  <li><a href="2D-navigation/">2D-navigation</a></li>
+  <li><a href="3D-positions/">3D-positions</a></li>
+  <li><a href="3D-rotations/">3D-rotations</a></li>
+  <li><a href="classic-slides/">classic-slides</a></li>
+  <li><a href="cube/">cube</a></li>
+  <li><a href="markdown/">markdown</a></li>
+</ul>
+</body>
+</html>

js/impress.js

@@ -4709,6 +4709,11 @@
                 currentSubstepOrder = el.dataset.substepOrder;
                 el.classList.add( "substep-visible" );
                 el.classList.add( "substep-active" );
+                if ( currentSubstepOrder === undefined ) {
+
+                    // Stop after one substep as default order
+                    break;
+                }
             }
 
             return el;
@@ -4741,6 +4746,7 @@
 
             // Continue if there is another substep with the same substepOrder
             if ( current > 0 &&
+                visible[ current ].dataset.substepOrder !== undefined &&
                 visible[ current - 1 ].dataset.substepOrder ===
                 visible[ current ].dataset.substepOrder ) {
                 visible.pop();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "impress.js",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.",
   "main": "js/impress.js",
   "repository": {
@@ -22,27 +22,27 @@
     "url": "https://github.com/impress/impress.js/issues"
   },
   "scripts": {
-    "all": "npm run build && npm run test && npm run lint && npm run build-website",
+    "all": "npm run build && npm run test && npm run lint",
     "build": "node build.js",
-    "lint": "npm exec -- jshint src test/*.js && npm exec -- jscs src test/*.js",
+    "lint": "npm exec -- eslint src test",
-    "new-lint": "npm exec -- eslint src test",
+    "test": "npm exec -- karma start --log-level debug --single-run=true"
-    "test": "npm exec -- karma start --log-level debug --single-run=true",
-    "build-website": "node website/docs/src/build.js"
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
+    "eslint": "^8.56.0",
     "jscs": "^2.1.1",
     "jshint": "^2.11.0",
-    "karma": "^6.4.1",
+    "karma": "^6.4.2",
     "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^1.3.0",
     "karma-qunit": "^4.0.0",
-    "markdown-it": "^13.0.1",
+    "ls": "^0.2.1",
     "puppeteer": "^2.1.1",
     "qunit": "^2.9.3",
     "qunit-assert-close": "^2.1.2",
     "syn": "^0.14.1",
     "terser": "^4.6.7",
-    "prompt-sync": "^4.2.0"
+    "typescript": "^5.3.3"
   }
 }

src/build.js

@@ -0,0 +1,75 @@
+const fs = require( 'fs' );
+var ls = require( 'ls' );
+var path = require( 'path' );
+var Terser = require( 'terser' );
+
+var files = ['src/impress.js'];
+// Libraries from src/lib
+files.push( 'src/lib/gc.js', 'src/lib/util.js', 'src/lib/rotation.js' );
+// Plugins from src/plugins
+files.push(
+    'src/plugins/autoplay/autoplay.js',
+    'src/plugins/blackout/blackout.js',
+    'src/plugins/extras/extras.js',
+    'src/plugins/form/form.js',
+    'src/plugins/fullscreen/fullscreen.js',
+    'src/plugins/goto/goto.js',
+    'src/plugins/bookmark/bookmark.js',
+    'src/plugins/help/help.js',
+    'src/plugins/impressConsole/impressConsole.js',
+    'src/plugins/media/media.js',
+    'src/plugins/mobile/mobile.js',
+    'src/plugins/mouse-timeout/mouse-timeout.js',
+    'src/plugins/navigation/navigation.js',
+    'src/plugins/navigation-ui/navigation-ui.js',
+    'src/plugins/progress/progress.js',
+    'src/plugins/rel/rel.js',
+    'src/plugins/resize/resize.js',
+    'src/plugins/skip/skip.js',
+    'src/plugins/stop/stop.js',
+    'src/plugins/substep/substep.js',
+    'src/plugins/touch/touch.js',
+    'src/plugins/toolbar/toolbar.js'
+);
+var output = files.map( ( f ) => fs.readFileSync( f ).toString() ).join( '\n' );
+
+var filename = 'js/impress.js';
+fs.writeFileSync( filename, '// This file was automatically generated from files in src/ directory.\n\n' + output );
+console.log( filename );
+
+// terser --compress --mangle --comments '/^!/' --source-map --output js/impress.min.js js/impress.js
+var code = fs.readFileSync( 'js/impress.js' ).toString();
+var options = {
+    sourceMap: {
+        filename: 'js/impress.js',
+        url: 'js/impress.min.js.map'
+    },
+    output: {
+        comments: /^!/
+    }
+};
+var result = Terser.minify( { 'js/impress.js': code }, options );
+
+filename = 'js/impress.min.js';
+fs.writeFileSync( filename, result.code );
+console.log( filename );
+filename = 'js/impress.min.js.map';
+fs.writeFileSync( filename, result.map );
+console.log( filename );
+
+// Auto generate an index.html that lists all the directories under examples/
+// This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
+//
+var html_list = '<ul><br />\n';
+ls( 'examples/*', { type: 'dir' } ).forEach( function( dir ) {
+    html_list += '  <li><a href="' + dir.file + '/">' + dir.name + '</a></li>\n';
+} );
+html_list += '</ul>\n';
+
+var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>';
+html += '<h1>Example presentations</h1>\n' + html_list;
+html += '</body>\n</html>';
+
+filename = path.resolve( __dirname, 'examples', 'index.html' );
+fs.writeFileSync( filename, html );
+console.log( filename );

src/impress.old.js

@@ -0,0 +1,925 @@
+/*! Licensed under MIT License - http://github.com/impress/impress.js */
+/**
+ * impress.js
+ *
+ * impress.js is a presentation tool based on the power of CSS3 transforms and transitions
+ * in modern browsers and inspired by the idea behind prezi.com.
+ *
+ *
+ * Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-2023 Henrik Ingo (@henrikingo)
+ * and 70+ other contributors
+ *
+ * Released under the MIT License.
+ *
+ * ------------------------------------------------
+ *  author:  Bartek Szopka, Henrik Ingo
+ *  version: 2.0.0
+ *  url:     http://impress.js.org
+ *  source:  http://github.com/impress/impress.js/
+ */
+
+// You are one of those who like to know how things work inside?
+// Let me show you the cogs that make impress.js run...
+( function( document, window ) {
+    "use strict";
+    var lib;
+
+    // HELPER FUNCTIONS
+
+    // `pfx` is a function that takes a standard CSS property name as a parameter
+    // and returns it's prefixed version valid for current browser it runs in.
+    // The code is heavily inspired by Modernizr http://www.modernizr.com/
+    var pfx = ( function() {
+
+        var style = document.createElement( "dummy" ).style,
+            prefixes = "Webkit Moz O ms Khtml".split( " " ),
+            memory = {};
+
+        return function( prop ) {
+            if ( typeof memory[ prop ] === "undefined" ) {
+
+                var ucProp  = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
+                    props   = ( prop + " " + prefixes.join( ucProp + " " ) + ucProp ).split( " " );
+
+                memory[ prop ] = null;
+                for ( var i in props ) {
+                    if ( style[ props[ i ] ] !== undefined ) {
+                        memory[ prop ] = props[ i ];
+                        break;
+                    }
+                }
+
+            }
+
+            return memory[ prop ];
+        };
+
+    } )();
+
+    var validateOrder = function( order, fallback ) {
+        var validChars = "xyz";
+        var returnStr = "";
+        if ( typeof order === "string" ) {
+            for ( var i in order.split( "" ) ) {
+                if ( validChars.indexOf( order[ i ] ) >= 0 ) {
+                    returnStr += order[ i ];
+
+                    // Each of x,y,z can be used only once.
+                    validChars = validChars.split( order[ i ] ).join( "" );
+                }
+            }
+        }
+        if ( returnStr ) {
+            return returnStr;
+        } else if ( fallback !== undefined ) {
+            return fallback;
+        } else {
+            return "xyz";
+        }
+    };
+
+    // `css` function applies the styles given in `props` object to the element
+    // given as `el`. It runs all property names through `pfx` function to make
+    // sure proper prefixed version of the property is used.
+    var css = function( el, props ) {
+        var key, pkey;
+        for ( key in props ) {
+            if ( props.hasOwnProperty( key ) ) {
+                pkey = pfx( key );
+                if ( pkey !== null ) {
+                    el.style[ pkey ] = props[ key ];
+                }
+            }
+        }
+        return el;
+    };
+
+    // `translate` builds a translate transform string for given data.
+    var translate = function( t ) {
+        return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) ";
+    };
+
+    // `rotate` builds a rotate transform string for given data.
+    // By default the rotations are in X Y Z order that can be reverted by passing `true`
+    // as second parameter.
+    var rotate = function( r, revert ) {
+        var order = r.order ? r.order : "xyz";
+        var css = "";
+        var axes = order.split( "" );
+        if ( revert ) {
+            axes = axes.reverse();
+        }
+
+        for ( var i = 0; i < axes.length; i++ ) {
+            css += " rotate" + axes[ i ].toUpperCase() + "(" + r[ axes[ i ] ] + "deg)";
+        }
+        return css;
+    };
+
+    // `scale` builds a scale transform string for given data.
+    var scale = function( s ) {
+        return " scale(" + s + ") ";
+    };
+
+    // `computeWindowScale` counts the scale factor between window size and size
+    // defined for the presentation in the config.
+    var computeWindowScale = function( config ) {
+        var hScale = window.innerHeight / config.height,
+            wScale = window.innerWidth / config.width,
+            scale = hScale > wScale ? wScale : hScale;
+
+        if ( config.maxScale && scale > config.maxScale ) {
+            scale = config.maxScale;
+        }
+
+        if ( config.minScale && scale < config.minScale ) {
+            scale = config.minScale;
+        }
+
+        return scale;
+    };
+
+    // CHECK SUPPORT
+    var body = document.body;
+    var impressSupported =
+
+                          // Browser should support CSS 3D transtorms
+                           ( pfx( "perspective" ) !== null ) &&
+
+                          // And `classList` and `dataset` APIs
+                           ( body.classList ) &&
+                           ( body.dataset );
+
+    if ( !impressSupported ) {
+
+        // We can't be sure that `classList` is supported
+        body.className += " impress-not-supported ";
+    }
+
+    // GLOBALS AND DEFAULTS
+
+    // This is where the root elements of all impress.js instances will be kept.
+    // Yes, this means you can have more than one instance on a page, but I'm not
+    // sure if it makes any sense in practice ;)
+    var roots = {};
+
+    var preInitPlugins = [];
+    var preStepLeavePlugins = [];
+
+    // Some default config values.
+    var defaults = {
+        width: 1920,
+        height: 1080,
+        maxScale: 3,
+        minScale: 0,
+
+        perspective: 1000,
+
+        transitionDuration: 1000
+    };
+
+    // Configuration options
+    var config = null;
+
+    // It's just an empty function ... and a useless comment.
+    var empty = function() { return false; };
+
+    // IMPRESS.JS API
+
+    // And that's where interesting things will start to happen.
+    // It's the core `impress` function that returns the impress.js API
+    // for a presentation based on the element with given id ("impress"
+    // by default).
+    var impress = window.impress = function( rootId ) {
+        // If impress.js is not supported by the browser return a dummy API
+        // it may not be a perfect solution but we return early and avoid
+        // running code that may use features not implemented in the browser.
+        if ( !impressSupported ) {
+            return {
+                init: empty,
+                goto: empty,
+                prev: empty,
+                next: empty,
+                swipe: empty,
+                tear: empty,
+                lib: {}
+            };
+        }
+
+        rootId = rootId || "impress";
+
+        // If given root is already initialized just return the API
+        if ( roots[ "impress-root-" + rootId ] ) {
+            return roots[ "impress-root-" + rootId ];
+        }
+
+        // The gc library depends on being initialized before we do any changes to DOM.
+        lib = initLibraries( rootId );
+
+        body.classList.remove( "impress-not-supported" );
+        body.classList.add( "impress-supported" );
+
+        // Data of all presentation steps
+        var stepsData = {};
+
+        // Element of currently active step
+        var activeStep = null;
+
+        // Current state (position, rotation and scale) of the presentation
+        var currentState = null;
+
+        // Array of step elements
+        var steps = null;
+
+        // Scale factor of the browser window
+        var windowScale = null;
+
+        // Root presentation elements
+        var root = lib.util.byId( rootId );
+        var canvas = document.createElement( "div" );
+
+        var initialized = false;
+
+        // STEP EVENTS
+        //
+        // There are currently two step events triggered by impress.js
+        // `impress:stepenter` is triggered when the step is shown on the
+        // screen (the transition from the previous one is finished) and
+        // `impress:stepleave` is triggered when the step is left (the
+        // transition to next step just starts).
+
+        // Reference to last entered step
+        var lastEntered = null;
+
+        // `onStepEnter` is called whenever the step element is entered
+        // but the event is triggered only if the step is different than
+        // last entered step.
+        // We sometimes call `goto`, and therefore `onStepEnter`, just to redraw a step, such as
+        // after screen resize. In this case - more precisely, in any case - we trigger a
+        // `impress:steprefresh` event.
+        var onStepEnter = function( step ) {
+            if ( lastEntered !== step ) {
+                lib.util.triggerEvent( step, "impress:stepenter" );
+                lastEntered = step;
+            }
+            lib.util.triggerEvent( step, "impress:steprefresh" );
+        };
+
+        // `onStepLeave` is called whenever the currentStep element is left
+        // but the event is triggered only if the currentStep is the same as
+        // lastEntered step.
+        var onStepLeave = function( currentStep, nextStep ) {
+            if ( lastEntered === currentStep ) {
+                lib.util.triggerEvent( currentStep, "impress:stepleave", { next: nextStep } );
+                lastEntered = null;
+            }
+        };
+
+        // `initStep` initializes given step element by reading data from its
+        // data attributes and setting correct styles.
+        var initStep = function( el, idx ) {
+            var data = el.dataset,
+                step = {
+                    translate: {
+                        x: lib.util.toNumberAdvanced( data.x ),
+                        y: lib.util.toNumberAdvanced( data.y ),
+                        z: lib.util.toNumberAdvanced( data.z )
+                    },
+                    rotate: {
+                        x: lib.util.toNumber( data.rotateX ),
+                        y: lib.util.toNumber( data.rotateY ),
+                        z: lib.util.toNumber( data.rotateZ || data.rotate ),
+                        order: validateOrder( data.rotateOrder )
+                    },
+                    scale: lib.util.toNumber( data.scale, 1 ),
+                    transitionDuration: lib.util.toNumber(
+                        data.transitionDuration, config.transitionDuration
+                    ),
+                    el: el
+                };
+
+            if ( !el.id ) {
+                el.id = "step-" + ( idx + 1 );
+            }
+
+            stepsData[ "impress-" + el.id ] = step;
+
+            css( el, {
+                position: "absolute",
+                transform: "translate(-50%,-50%)" +
+                           translate( step.translate ) +
+                           rotate( step.rotate ) +
+                           scale( step.scale ),
+                transformStyle: "preserve-3d"
+            } );
+        };
+
+        // Initialize all steps.
+        // Read the data-* attributes, store in internal stepsData, and render with CSS.
+        var initAllSteps = function() {
+            steps = lib.util.$$( ".step", root );
+            steps.forEach( initStep );
+        };
+
+        // Build configuration from root and defaults
+        var buildConfig = function() {
+            var rootData = root.dataset;
+            return {
+                width: lib.util.toNumber( rootData.width, defaults.width ),
+                height: lib.util.toNumber( rootData.height, defaults.height ),
+                maxScale: lib.util.toNumber( rootData.maxScale, defaults.maxScale ),
+                minScale: lib.util.toNumber( rootData.minScale, defaults.minScale ),
+                perspective: lib.util.toNumber( rootData.perspective, defaults.perspective ),
+                transitionDuration: lib.util.toNumber(
+                    rootData.transitionDuration, defaults.transitionDuration
+                )
+            };
+        };
+
+        // `init` API function that initializes (and runs) the presentation.
+        var init = function() {
+            if ( initialized ) { return; }
+
+            // Initialize the configuration object, so it can be used by pre-init plugins.
+            config = buildConfig();
+            execPreInitPlugins( root );
+
+            // First we set up the viewport for mobile devices.
+            // For some reason iPad goes nuts when it is not done properly.
+            var meta = lib.util.$( "meta[name='viewport']" ) || document.createElement( "meta" );
+            meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";
+            if ( meta.parentNode !== document.head ) {
+                meta.name = "viewport";
+                document.head.appendChild( meta );
+            }
+
+            windowScale = computeWindowScale( config );
+
+            // Wrap steps with "canvas" element
+            lib.util.arrayify( root.childNodes ).forEach( function( el ) {
+                canvas.appendChild( el );
+            } );
+            root.appendChild( canvas );
+
+            // Set initial styles
+            document.documentElement.style.height = "100%";
+
+            css( body, {
+                height: "100%",
+                overflow: "hidden"
+            } );
+
+            var rootStyles = {
+                position: "absolute",
+                transformOrigin: "top left",
+                transition: "all 0s ease-in-out",
+                transformStyle: "preserve-3d"
+            };
+
+            css( root, rootStyles );
+            css( root, {
+                top: "50%",
+                left: "50%",
+                perspective: ( config.perspective / windowScale ) + "px",
+                transform: scale( windowScale )
+            } );
+            css( canvas, rootStyles );
+
+            body.classList.remove( "impress-disabled" );
+            body.classList.add( "impress-enabled" );
+
+            // Get and init steps
+            initAllSteps();
+
+            // Set a default initial state of the canvas
+            currentState = {
+                translate: { x: 0, y: 0, z: 0 },
+                rotate:    { x: 0, y: 0, z: 0, order: "xyz" },
+                scale:     1
+            };
+
+            initialized = true;
+
+            lib.util.triggerEvent( root, "impress:init",
+                                   { api: roots[ "impress-root-" + rootId ] } );
+        };
+
+        // `getStep` is a helper function that returns a step element defined by parameter.
+        // If a number is given, step with index given by the number is returned, if a string
+        // is given step element with such id is returned, if DOM element is given it is returned
+        // if it is a correct step element.
+        var getStep = function( step ) {
+            if ( typeof step === "number" ) {
+                step = step < 0 ? steps[ steps.length + step ] : steps[ step ];
+            } else if ( typeof step === "string" ) {
+                step = lib.util.byId( step );
+            }
+            return ( step && step.id && stepsData[ "impress-" + step.id ] ) ? step : null;
+        };
+
+        // Used to reset timeout for `impress:stepenter` event
+        var stepEnterTimeout = null;
+
+        // `goto` API function that moves to step given as `el` parameter (by index, id or element).
+        // `duration` optionally given as second parameter, is the transition duration in css.
+        // `reason` is the string "next", "prev" or "goto" (default) and will be made available to
+        // preStepLeave plugins.
+        // `origEvent` may contain event that caused the call to goto, such as a key press event
+        var goto = function( el, duration, reason, origEvent ) {
+            reason = reason || "goto";
+            origEvent = origEvent || null;
+
+            if ( !initialized ) {
+                return false;
+            }
+
+            // Re-execute initAllSteps for each transition. This allows to edit step attributes
+            // dynamically, such as change their coordinates, or even remove or add steps, and have
+            // that change apply when goto() is called.
+            initAllSteps();
+
+            if ( !( el = getStep( el ) ) ) {
+                return false;
+            }
+
+            // Sometimes it's possible to trigger focus on first link with some keyboard action.
+            // Browser in such a case tries to scroll the page to make this element visible
+            // (even that body overflow is set to hidden) and it breaks our careful positioning.
+            //
+            // So, as a lousy (and lazy) workaround we will make the page scroll back to the top
+            // whenever slide is selected
+            //
+            // If you are reading this and know any better way to handle it, I'll be glad to hear
+            // about it!
+            window.scrollTo( 0, 0 );
+
+            var step = stepsData[ "impress-" + el.id ];
+            duration = ( duration !== undefined ? duration : step.transitionDuration );
+
+            // If we are in fact moving to another step, start with executing the registered
+            // preStepLeave plugins.
+            if ( activeStep && activeStep !== el ) {
+                var event = { target: activeStep, detail: {} };
+                event.detail.next = el;
+                event.detail.transitionDuration = duration;
+                event.detail.reason = reason;
+                if ( origEvent ) {
+                    event.origEvent = origEvent;
+                }
+
+                if ( execPreStepLeavePlugins( event ) === false ) {
+
+                    // PreStepLeave plugins are allowed to abort the transition altogether, by
+                    // returning false.
+                    // see stop and substep plugins for an example of doing just that
+                    return false;
+                }
+
+                // Plugins are allowed to change the detail values
+                el = event.detail.next;
+                step = stepsData[ "impress-" + el.id ];
+                duration = event.detail.transitionDuration;
+            }
+
+            if ( activeStep ) {
+                activeStep.classList.remove( "active" );
+                body.classList.remove( "impress-on-" + activeStep.id );
+            }
+            el.classList.add( "active" );
+
+            body.classList.add( "impress-on-" + el.id );
+
+            // Compute target state of the canvas based on given step
+            var target = {
+                rotate: {
+                    x: -step.rotate.x,
+                    y: -step.rotate.y,
+                    z: -step.rotate.z,
+                    order: step.rotate.order
+                },
+                translate: {
+                    x: -step.translate.x,
+                    y: -step.translate.y,
+                    z: -step.translate.z
+                },
+                scale: 1 / step.scale
+            };
+
+            // Check if the transition is zooming in or not.
+            //
+            // This information is used to alter the transition style:
+            // when we are zooming in - we start with move and rotate transition
+            // and the scaling is delayed, but when we are zooming out we start
+            // with scaling down and move and rotation are delayed.
+            var zoomin = target.scale >= currentState.scale;
+
+            duration = lib.util.toNumber( duration, config.transitionDuration );
+            var delay = ( duration / 2 );
+
+            // If the same step is re-selected, force computing window scaling,
+            // because it is likely to be caused by window resize
+            if ( el === activeStep ) {
+                windowScale = computeWindowScale( config );
+            }
+
+            var targetScale = target.scale * windowScale;
+
+            // Trigger leave of currently active element (if it's not the same step again)
+            if ( activeStep && activeStep !== el ) {
+                onStepLeave( activeStep, el );
+            }
+
+            // Now we alter transforms of `root` and `canvas` to trigger transitions.
+            //
+            // And here is why there are two elements: `root` and `canvas` - they are
+            // being animated separately:
+            // `root` is used for scaling and `canvas` for translate and rotations.
+            // Transitions on them are triggered with different delays (to make
+            // visually nice and "natural" looking transitions), so we need to know
+            // that both of them are finished.
+            css( root, {
+
+                // To keep the perspective look similar for different scales
+                // we need to "scale" the perspective, too
+                // For IE 11 support we must specify perspective independent
+                // of transform.
+                perspective: ( config.perspective / targetScale ) + "px",
+                transform: scale( targetScale ),
+                transitionDuration: duration + "ms",
+                transitionDelay: ( zoomin ? delay : 0 ) + "ms"
+            } );
+
+            css( canvas, {
+                transform: rotate( target.rotate, true ) + translate( target.translate ),
+                transitionDuration: duration + "ms",
+                transitionDelay: ( zoomin ? 0 : delay ) + "ms"
+            } );
+
+            // Here is a tricky part...
+            //
+            // If there is no change in scale or no change in rotation and translation, it means
+            // there was actually no delay - because there was no transition on `root` or `canvas`
+            // elements. We want to trigger `impress:stepenter` event in the correct moment, so
+            // here we compare the current and target values to check if delay should be taken into
+            // account.
+            //
+            // I know that this `if` statement looks scary, but it's pretty simple when you know
+            // what is going on - it's simply comparing all the values.
+            if ( currentState.scale === target.scale ||
+                ( currentState.rotate.x === target.rotate.x &&
+                  currentState.rotate.y === target.rotate.y &&
+                  currentState.rotate.z === target.rotate.z &&
+                  currentState.translate.x === target.translate.x &&
+                  currentState.translate.y === target.translate.y &&
+                  currentState.translate.z === target.translate.z ) ) {
+                delay = 0;
+            }
+
+            // Store current state
+            currentState = target;
+            activeStep = el;
+
+            // And here is where we trigger `impress:stepenter` event.
+            // We simply set up a timeout to fire it taking transition duration (and possible delay)
+            // into account.
+            //
+            // I really wanted to make it in more elegant way. The `transitionend` event seemed to
+            // be the best way to do it, but the fact that I'm using transitions on two separate
+            // elements and that the `transitionend` event is only triggered when there was a
+            // transition (change in the values) caused some bugs and made the code really
+            // complicated, cause I had to handle all the conditions separately. And it still
+            // needed a `setTimeout` fallback for the situations when there is no transition at all.
+            // So I decided that I'd rather make the code simpler than use shiny new
+            // `transitionend`.
+            //
+            // If you want learn something interesting and see how it was done with `transitionend`
+            // go back to version 0.5.2 of impress.js:
+            // http://github.com/bartaz/impress.js/blob/0.5.2/js/impress.js
+            window.clearTimeout( stepEnterTimeout );
+            stepEnterTimeout = window.setTimeout( function() {
+                onStepEnter( activeStep );
+            }, duration + delay );
+
+            return el;
+        };
+
+        // `prev` API function goes to previous step (in document order)
+        // `event` is optional, may contain the event that caused the need to call prev()
+        var prev = function( origEvent ) {
+            var prev = steps.indexOf( activeStep ) - 1;
+            prev = prev >= 0 ? steps[ prev ] : steps[ steps.length - 1 ];
+
+            return goto( prev, undefined, "prev", origEvent );
+        };
+
+        // `next` API function goes to next step (in document order)
+        // `event` is optional, may contain the event that caused the need to call next()
+        var next = function( origEvent ) {
+            var next = steps.indexOf( activeStep ) + 1;
+            next = next < steps.length ? steps[ next ] : steps[ 0 ];
+
+            return goto( next, undefined, "next", origEvent );
+        };
+
+        // Swipe for touch devices by @and3rson.
+        // Below we extend the api to control the animation between the currently
+        // active step and a presumed next/prev step. See touch plugin for
+        // an example of using this api.
+
+        // Helper function
+        var interpolate = function( a, b, k ) {
+            return a + ( b - a ) * k;
+        };
+
+        // Animate a swipe.
+        //
+        // Pct is a value between -1.0 and +1.0, designating the current length
+        // of the swipe.
+        //
+        // If pct is negative, swipe towards the next() step, if positive,
+        // towards the prev() step.
+        //
+        // Note that pre-stepleave plugins such as goto can mess with what is a
+        // next() and prev() step, so we need to trigger the pre-stepleave event
+        // here, even if a swipe doesn't guarantee that the transition will
+        // actually happen.
+        //
+        // Calling swipe(), with any value of pct, won't in itself cause a
+        // transition to happen, this is just to animate the swipe. Once the
+        // transition is committed - such as at a touchend event - caller is
+        // responsible for also calling prev()/next() as appropriate.
+        //
+        // Note: For now, this function is made available to be used by the swipe plugin (which
+        // is the UI counterpart to this). It is a semi-internal API and intentionally not
+        // documented in DOCUMENTATION.md.
+        var swipe = function( pct ) {
+            if ( Math.abs( pct ) > 1 ) {
+                return;
+            }
+
+            // Prepare & execute the preStepLeave event
+            var event = { target: activeStep, detail: {} };
+            event.detail.swipe = pct;
+
+            // Will be ignored within swipe animation, but just in case a plugin wants to read this,
+            // humor them
+            event.detail.transitionDuration = config.transitionDuration;
+            var idx; // Needed by jshint
+            if ( pct < 0 ) {
+                idx = steps.indexOf( activeStep ) + 1;
+                event.detail.next = idx < steps.length ? steps[ idx ] : steps[ 0 ];
+                event.detail.reason = "next";
+            } else if ( pct > 0 ) {
+                idx = steps.indexOf( activeStep ) - 1;
+                event.detail.next = idx >= 0 ? steps[ idx ] : steps[ steps.length - 1 ];
+                event.detail.reason = "prev";
+            } else {
+
+                // No move
+                return;
+            }
+            if ( execPreStepLeavePlugins( event ) === false ) {
+
+                // If a preStepLeave plugin wants to abort the transition, don't animate a swipe
+                // For stop, this is probably ok. For substep, the plugin it self might want to do
+                // some animation, but that's not the current implementation.
+                return false;
+            }
+            var nextElement = event.detail.next;
+
+            var nextStep = stepsData[ "impress-" + nextElement.id ];
+
+            // If the same step is re-selected, force computing window scaling,
+            var nextScale = nextStep.scale * windowScale;
+            var k = Math.abs( pct );
+
+            var interpolatedStep = {
+                translate: {
+                    x: interpolate( currentState.translate.x, -nextStep.translate.x, k ),
+                    y: interpolate( currentState.translate.y, -nextStep.translate.y, k ),
+                    z: interpolate( currentState.translate.z, -nextStep.translate.z, k )
+                },
+                rotate: {
+                    x: interpolate( currentState.rotate.x, -nextStep.rotate.x, k ),
+                    y: interpolate( currentState.rotate.y, -nextStep.rotate.y, k ),
+                    z: interpolate( currentState.rotate.z, -nextStep.rotate.z, k ),
+
+                    // Unfortunately there's a discontinuity if rotation order changes. Nothing I
+                    // can do about it?
+                    order: k < 0.7 ? currentState.rotate.order : nextStep.rotate.order
+                },
+                scale: interpolate( currentState.scale * windowScale, nextScale, k )
+            };
+
+            css( root, {
+
+                // To keep the perspective look similar for different scales
+                // we need to 'scale' the perspective, too
+                perspective: config.perspective / interpolatedStep.scale + "px",
+                transform: scale( interpolatedStep.scale ),
+                transitionDuration: "0ms",
+                transitionDelay: "0ms"
+            } );
+
+            css( canvas, {
+                transform: rotate( interpolatedStep.rotate, true ) +
+                           translate( interpolatedStep.translate ),
+                transitionDuration: "0ms",
+                transitionDelay: "0ms"
+            } );
+        };
+
+        // Teardown impress
+        // Resets the DOM to the state it was before impress().init() was called.
+        // (If you called impress(rootId).init() for multiple different rootId's, then you must
+        // also call tear() once for each of them.)
+        var tear = function() {
+            lib.gc.teardown();
+            delete roots[ "impress-root-" + rootId ];
+        };
+
+        // Adding some useful classes to step elements.
+        //
+        // All the steps that have not been shown yet are given `future` class.
+        // When the step is entered the `future` class is removed and the `present`
+        // class is given. When the step is left `present` class is replaced with
+        // `past` class.
+        //
+        // So every step element is always in one of three possible states:
+        // `future`, `present` and `past`.
+        //
+        // There classes can be used in CSS to style different types of steps.
+        // For example the `present` class can be used to trigger some custom
+        // animations when step is shown.
+        lib.gc.addEventListener( root, "impress:init", function() {
+
+            // STEP CLASSES
+            steps.forEach( function( step ) {
+                step.classList.add( "future" );
+            } );
+
+            lib.gc.addEventListener( root, "impress:stepenter", function( event ) {
+                event.target.classList.remove( "past" );
+                event.target.classList.remove( "future" );
+                event.target.classList.add( "present" );
+            }, false );
+
+            lib.gc.addEventListener( root, "impress:stepleave", function( event ) {
+                event.target.classList.remove( "present" );
+                event.target.classList.add( "past" );
+            }, false );
+
+        }, false );
+
+        // Adding hash change support.
+        lib.gc.addEventListener( root, "impress:init", function() {
+
+            // Last hash detected
+            var lastHash = "";
+
+            // `#/step-id` is used instead of `#step-id` to prevent default browser
+            // scrolling to element in hash.
+            //
+            // And it has to be set after animation finishes, because in Chrome it
+            // makes transition laggy.
+            // BUG: http://code.google.com/p/chromium/issues/detail?id=62820
+            lib.gc.addEventListener( root, "impress:stepenter", function( event ) {
+                window.location.hash = lastHash = "#/" + event.target.id;
+            }, false );
+
+            lib.gc.addEventListener( window, "hashchange", function() {
+
+                // When the step is entered hash in the location is updated
+                // (just few lines above from here), so the hash change is
+                // triggered and we would call `goto` again on the same element.
+                //
+                // To avoid this we store last entered hash and compare.
+                if ( window.location.hash !== lastHash ) {
+                    goto( lib.util.getElementFromHash() );
+                }
+            }, false );
+
+            // START
+            // by selecting step defined in url or first step of the presentation
+            goto( lib.util.getElementFromHash() || steps[ 0 ], 0 );
+        }, false );
+
+        body.classList.add( "impress-disabled" );
+
+        // Store and return API for given impress.js root element
+        return ( roots[ "impress-root-" + rootId ] = {
+            init: init,
+            goto: goto,
+            next: next,
+            prev: prev,
+            swipe: swipe,
+            tear: tear,
+            lib: lib
+        } );
+
+    };
+
+    // Flag that can be used in JS to check if browser have passed the support test
+    impress.supported = impressSupported;
+
+    // ADD and INIT LIBRARIES
+    // Library factories are defined in src/lib/*.js, and register themselves by calling
+    // impress.addLibraryFactory(libraryFactoryObject). They're stored here, and used to augment
+    // the API with library functions when client calls impress(rootId).
+    // See src/lib/README.md for clearer example.
+    // (Advanced usage: For different values of rootId, a different instance of the libaries are
+    // generated, in case they need to hold different state for different root elements.)
+    var libraryFactories = {};
+    impress.addLibraryFactory = function( obj ) {
+        for ( var libname in obj ) {
+            if ( obj.hasOwnProperty( libname ) ) {
+                libraryFactories[ libname ] = obj[ libname ];
+            }
+        }
+    };
+
+    // Call each library factory, and return the lib object that is added to the api.
+    var initLibraries = function( rootId ) { //jshint ignore:line
+        var lib = {};
+        for ( var libname in libraryFactories ) {
+            if ( libraryFactories.hasOwnProperty( libname ) ) {
+                if ( lib[ libname ] !== undefined ) {
+                    throw "impress.js ERROR: Two libraries both tried to use libname: " +  libname;
+                }
+                lib[ libname ] = libraryFactories[ libname ]( rootId );
+            }
+        }
+        return lib;
+    };
+
+    // `addPreInitPlugin` allows plugins to register a function that should
+    // be run (synchronously) at the beginning of init, before
+    // impress().init() itself executes.
+    impress.addPreInitPlugin = function( plugin, weight ) {
+        weight = parseInt( weight ) || 10;
+        if ( weight <= 0 ) {
+            throw "addPreInitPlugin: weight must be a positive integer";
+        }
+
+        if ( preInitPlugins[ weight ] === undefined ) {
+            preInitPlugins[ weight ] = [];
+        }
+        preInitPlugins[ weight ].push( plugin );
+    };
+
+    // Called at beginning of init, to execute all pre-init plugins.
+    var execPreInitPlugins = function( root ) { //jshint ignore:line
+        for ( var i = 0; i < preInitPlugins.length; i++ ) {
+            var thisLevel = preInitPlugins[ i ];
+            if ( thisLevel !== undefined ) {
+                for ( var j = 0; j < thisLevel.length; j++ ) {
+                    thisLevel[ j ]( root, roots[ "impress-root-" + root.id ] );
+                }
+            }
+        }
+    };
+
+    // `addPreStepLeavePlugin` allows plugins to register a function that should
+    // be run (synchronously) at the beginning of goto()
+    impress.addPreStepLeavePlugin = function( plugin, weight ) { //jshint ignore:line
+        weight = parseInt( weight ) || 10;
+        if ( weight <= 0 ) {
+            throw "addPreStepLeavePlugin: weight must be a positive integer";
+        }
+
+        if ( preStepLeavePlugins[ weight ] === undefined ) {
+            preStepLeavePlugins[ weight ] = [];
+        }
+        preStepLeavePlugins[ weight ].push( plugin );
+    };
+
+    impress.getConfig = function() {
+        return config;
+    };
+
+    // Called at beginning of goto(), to execute all preStepLeave plugins.
+    var execPreStepLeavePlugins = function( event ) { //jshint ignore:line
+        for ( var i = 0; i < preStepLeavePlugins.length; i++ ) {
+            var thisLevel = preStepLeavePlugins[ i ];
+            if ( thisLevel !== undefined ) {
+                for ( var j = 0; j < thisLevel.length; j++ ) {
+                    if ( thisLevel[ j ]( event ) === false ) {
+
+                        // If a plugin returns false, the stepleave event (and related transition)
+                        // is aborted
+                        return false;
+                    }
+                }
+            }
+        }
+    };
+
+} )( document, window );
+
+// THAT'S ALL FOLKS!
+//
+// Thanks for reading it all.
+// Or thanks for scrolling down and reading the last part.
+//
+// I've learnt a lot when building impress.js and I hope this code and comments
+// will help somebody learn at least some part of it.

src/index.html

@@ -0,0 +1,39 @@
+<!--
+*				impress.js - index.html
+*
+*       This is just a test file for development of impress.js V3
+*
+*	Created by Janis Hutz 01/08/2024, Licensed under the MIT License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <style>
+            .impress-supported .fallback-message {
+                display: none;
+            }
+        </style>
+    </head>
+    <body class="impress-not-supported">
+        <div class="fallback-message">
+            <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
+            <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
+        </div>
+
+        <div id="impress" data-width="1920" data-height="1080">
+            <div id="title" class="step">
+                <h1>Test</h1>
+            </div>
+        </div>
+
+        <script src="/impress.js"></script>
+        <script>
+            impress().init();
+        </script>
+    </body>
+</html>

src/lib-old/rotation.js

@@ -0,0 +1,429 @@
+/**
+ * Helper functions for rotation.
+ *
+ * Tommy Tam (c) 2021
+ * MIT License
+ */
+( function( document, window ) {
+    "use strict";
+
+    // Singleton library variables
+    var roots = [];
+
+    var libraryFactory = function( rootId ) {
+        if ( roots[ "impress-root-" + rootId ] ) {
+            return roots[ "impress-root-" + rootId ];
+        }
+
+        /**
+         * Round the number to 2 decimals, it's enough for use
+         */
+        var roundNumber = function( num ) {
+            return Math.round( ( num + Number.EPSILON ) * 100 ) / 100;
+        };
+
+        /**
+         * Get the length/norm of a vector.
+         *
+         * https://en.wikipedia.org/wiki/Norm_(mathematics)
+         */
+        var vectorLength = function( vec ) {
+            return Math.sqrt( vec.x * vec.x + vec.y * vec.y + vec.z * vec.z );
+        };
+
+        /**
+         * Dot product of two vectors.
+         *
+         * https://en.wikipedia.org/wiki/Dot_product
+         */
+        var vectorDotProd = function( vec1, vec2 ) {
+            return vec1.x * vec2.x + vec1.y * vec2.y + vec1.z * vec2.z;
+        };
+
+        /**
+         * Cross product of two vectors.
+         *
+         * https://en.wikipedia.org/wiki/Cross_product
+         */
+        var vectorCrossProd = function( vec1, vec2 ) {
+            return {
+                x: vec1.y * vec2.z - vec1.z * vec2.y,
+                y: vec1.z * vec2.x - vec1.x * vec2.z,
+                z: vec1.x * vec2.y - vec1.y * vec2.x
+            };
+        };
+
+        /**
+         * Determine wheter a vector is a zero vector
+         */
+        var isZeroVector = function( vec ) {
+            return !roundNumber( vec.x ) && !roundNumber( vec.y ) && !roundNumber( vec.z );
+        };
+
+        /**
+         * Scalar triple product of three vectors.
+         *
+         * It can be used to determine the handness of vectors.
+         *
+         * https://en.wikipedia.org/wiki/Triple_product#Scalar_triple_product
+         */
+        var tripleProduct = function( vec1, vec2, vec3 ) {
+            return vectorDotProd( vectorCrossProd( vec1, vec2 ), vec3 );
+        };
+
+        /**
+         * The world/absolute unit coordinates.
+         *
+         * This coordinate is used by browser to position objects.
+         * It will not be affected by object rotations.
+         * All relative positions will finally be converted to this
+         * coordinate to be used.
+         */
+        var worldUnitCoordinate = {
+            x: { x:1, y:0, z:0 },
+            y: { x:0, y:1, z:0 },
+            z: { x:0, y:0, z:1 }
+        };
+
+        /**
+         * Make quaternion from rotation axis and angle.
+         *
+         * q = [ cos(½θ), sin(½θ) axis ]
+         *
+         * If the angle is zero, returns the corresponded quaternion
+         * of axis.
+         *
+         * If the angle is not zero, returns the rotating quaternion
+         * which corresponds to rotation about the axis, by the angle θ.
+         *
+         * https://en.wikipedia.org/wiki/Quaternion
+         * https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation
+         */
+        var makeQuaternion = function( axis, theta = 0 ) {
+            var r = 0;
+            var t = 1;
+
+            if ( theta ) {
+                var radians = theta * Math.PI / 180;
+                r = Math.cos( radians / 2 );
+                t = Math.sin( radians / 2 ) / vectorLength( axis );
+            }
+
+            var q = [ r, axis.x * t, axis.y * t, axis.z * t ];
+
+            return q;
+        };
+
+        /**
+         * Extract vector from quaternion
+         */
+        var quaternionToVector = function( quaternion ) {
+            return {
+                x: roundNumber( quaternion[ 1 ] ),
+                y: roundNumber( quaternion[ 2 ] ),
+                z: roundNumber( quaternion[ 3 ] )
+            };
+        };
+
+        /**
+         * Returns the conjugate quaternion of a quaternion
+         *
+         * https://en.wikipedia.org/wiki/Quaternion#Conjugation,_the_norm,_and_reciprocal
+         */
+        var conjugateQuaternion = function( quaternion ) {
+            return [ quaternion[ 0 ], -quaternion[ 1 ], -quaternion[ 2 ], -quaternion[ 3 ] ];
+        };
+
+        /**
+         * Left multiple two quaternion.
+         *
+         * Is's used to combine two rotating quaternion into one.
+         */
+        var leftMulQuaternion = function( q1, q2 ) {
+            return [
+                ( q1[ 0 ] * q2[ 0 ] - q1[ 1 ] * q2[ 1 ] - q1[ 2 ] * q2[ 2 ] - q1[ 3 ] * q2[ 3 ] ),
+                ( q1[ 1 ] * q2[ 0 ] + q1[ 0 ] * q2[ 1 ] - q1[ 3 ] * q2[ 2 ] + q1[ 2 ] * q2[ 3 ] ),
+                ( q1[ 2 ] * q2[ 0 ] + q1[ 3 ] * q2[ 1 ] + q1[ 0 ] * q2[ 2 ] - q1[ 1 ] * q2[ 3 ] ),
+                ( q1[ 3 ] * q2[ 0 ] - q1[ 2 ] * q2[ 1 ] + q1[ 1 ] * q2[ 2 ] + q1[ 0 ] * q2[ 3 ] )
+            ];
+        };
+
+        /**
+         * Convert a rotation into a quaternion
+         */
+        var rotationToQuaternion = function( baseCoordinate, rotation ) {
+            var order = rotation.order ? rotation.order : "xyz";
+            var axes = order.split( "" );
+            var result = [ 1, 0, 0, 0 ];
+
+            for ( var i = 0; i < axes.length; i++ ) {
+                var deg = rotation[ axes[ i ] ];
+                if ( !deg || ( Math.abs( deg ) < 0.0001 ) ) {
+                    continue;
+                }
+
+                // All CSS rotation is based on the rotated coordinate
+                // So we need to calculate the rotated coordinate first
+                var coordinate = baseCoordinate;
+                if ( i > 0 ) {
+                    coordinate = {
+                        x: rotateByQuaternion( baseCoordinate.x, result ),
+                        y: rotateByQuaternion( baseCoordinate.y, result ),
+                        z: rotateByQuaternion( baseCoordinate.z, result )
+                    };
+                }
+
+                result = leftMulQuaternion(
+                    makeQuaternion( coordinate[ axes[ i ] ], deg ),
+                    result );
+
+            }
+
+            return result;
+        };
+
+        /**
+         * Rotate a vector by a quaternion.
+         */
+        var rotateByQuaternion = function( vec, quaternion ) {
+            var q = makeQuaternion( vec );
+
+            q = leftMulQuaternion(
+                leftMulQuaternion( quaternion, q ),
+                conjugateQuaternion( quaternion ) );
+
+            return quaternionToVector( q );
+        };
+
+        /**
+         * Rotate a vector by rotaion sequence.
+         */
+        var rotateVector = function( baseCoordinate, vec, rotation ) {
+            var quaternion = rotationToQuaternion( baseCoordinate, rotation );
+
+            return rotateByQuaternion( vec, quaternion );
+        };
+
+        /**
+         * Given a rotation, return the rotationed coordinate
+         */
+        var rotateCoordinate = function( coordinate, rotation ) {
+            var quaternion = rotationToQuaternion( coordinate, rotation );
+
+            return {
+                x: rotateByQuaternion( coordinate.x, quaternion ),
+                y: rotateByQuaternion( coordinate.y, quaternion ),
+                z: rotateByQuaternion( coordinate.z, quaternion )
+            };
+        };
+
+        /**
+         * Return the angle between two vector.
+         *
+         * The axis is used to determine the rotation direction.
+         */
+        var angleBetweenTwoVector = function( axis, vec1, vec2 ) {
+            var vecLen1 = vectorLength( vec1 );
+            var vecLen2 = vectorLength( vec2 );
+
+            if ( !vecLen1 || !vecLen2 ) {
+                return 0;
+            }
+
+            var cos = vectorDotProd( vec1, vec2 ) / vecLen1 / vecLen2 ;
+            var angle = Math.acos( cos ) * 180 / Math.PI;
+
+            if ( tripleProduct( vec1, vec2, axis ) > 0 ) {
+                return angle;
+            } else {
+                return -angle;
+            }
+        };
+
+        /**
+         * Return the angle between a vector and a plane.
+         *
+         * The plane is determined by an axis and a vector on the plane.
+         */
+        var angleBetweenPlaneAndVector = function( axis, planeVec, rotatedVec ) {
+            var norm = vectorCrossProd( axis, planeVec );
+
+            if ( isZeroVector( norm ) ) {
+                return 0;
+            }
+
+            return 90 - angleBetweenTwoVector( axis, rotatedVec, norm );
+        };
+
+        /**
+         * Calculated a order specified rotation sequence to
+         * transform from the world coordinate to required coordinate.
+         */
+        var coordinateToOrderedRotation = function( coordinate, order ) {
+            var axis0 = order[ 0 ];
+            var axis1 = order[ 1 ];
+            var axis2 = order[ 2 ];
+            var reversedOrder = order.split( "" ).reverse().join( "" );
+
+            var rotate2 = angleBetweenPlaneAndVector(
+                coordinate[ axis2 ],
+                worldUnitCoordinate[ axis0 ],
+                coordinate[ axis0 ] );
+
+            // The r2 is the reverse of rotate for axis2
+            // The coordinate1 is the coordinate before rotate of axis2
+            var r2 = { order: reversedOrder };
+            r2[ axis2 ] = -rotate2;
+
+            var coordinate1 = rotateCoordinate( coordinate, r2 );
+
+            // Calculate the rotation for axis1
+            var rotate1 = angleBetweenTwoVector(
+                coordinate1[ axis1 ],
+                worldUnitCoordinate[ axis0 ],
+                coordinate1[ axis0 ] );
+
+            // Calculate the rotation for axis0
+            var rotate0 = angleBetweenTwoVector(
+                worldUnitCoordinate[ axis0 ],
+                worldUnitCoordinate[ axis1 ],
+                coordinate1[ axis1 ] );
+
+            var rotation = { };
+            rotation.order = order;
+            rotation[ axis0 ] = roundNumber( rotate0 );
+            rotation[ axis1 ] = roundNumber( rotate1 );
+            rotation[ axis2 ] = roundNumber( rotate2 );
+
+            return rotation;
+        };
+
+        /**
+         * Returns the possible rotations from unit coordinate
+         * to specified coordinate.
+         */
+        var possibleRotations = function( coordinate ) {
+            var orders = [ "xyz", "xzy", "yxz", "yzx", "zxy", "zyx" ];
+            var rotations = [ ];
+
+            for ( var i = 0; i < orders.length; ++i ) {
+                rotations.push(
+                    coordinateToOrderedRotation( coordinate, orders[ i ] )
+                );
+            }
+
+            return rotations;
+        };
+
+        /**
+         * Calculate a degree which in range (-180, 180] of baseDeg
+         */
+        var nearestAngle = function( baseDeg, deg ) {
+            while ( deg > baseDeg + 180 ) {
+                deg -= 360;
+            }
+
+            while ( deg < baseDeg - 180 ) {
+                deg += 360;
+            }
+
+            return deg;
+        };
+
+        /**
+         * Given a base rotation and multiple rotations, return the best one.
+         *
+         * The best one is the one has least rotate from base.
+         */
+        var bestRotation = function( baseRotate, rotations ) {
+            var bestScore;
+            var bestRotation;
+
+            for ( var i = 0; i < rotations.length; ++i ) {
+                var rotation = {
+                    order: rotations[ i ].order,
+                    x: nearestAngle( baseRotate.x, rotations[ i ].x ),
+                    y: nearestAngle( baseRotate.y, rotations[ i ].y ),
+                    z: nearestAngle( baseRotate.z, rotations[ i ].z )
+                };
+
+                var score = Math.abs( rotation.x - baseRotate.x ) +
+                    Math.abs( rotation.y - baseRotate.y ) +
+                    Math.abs( rotation.z - baseRotate.z );
+
+                if ( !i || ( score < bestScore ) ) {
+                    bestScore = score;
+                    bestRotation = rotation;
+                }
+            }
+
+            return bestRotation;
+        };
+
+        /**
+         * Given a coordinate, return the best rotation to achieve it.
+         *
+         * The baseRotate is used to select the near rotation from it.
+         */
+        var coordinateToRotation = function( baseRotate, coordinate ) {
+            var rotations = possibleRotations( coordinate );
+
+            return bestRotation( baseRotate, rotations );
+        };
+
+        /**
+         * Apply a relative rotation to the base rotation.
+         *
+         * Calculate the coordinate after the rotation on each axis,
+         * and finally find out a one step rotation has the effect
+         * of two rotation.
+         *
+         * If there're multiple way to accomplish, select the one
+         * that is nearest to the base.
+         *
+         * Return one rotation has the same effect.
+         */
+        var combineRotations = function( rotations ) {
+
+            // No rotation
+            if ( rotations.length <= 0 ) {
+                return { x:0, y:0, z:0, order:"xyz" };
+            }
+
+            // Find out the base coordinate
+            var coordinate = worldUnitCoordinate;
+
+            // One by one apply rotations in order
+            for ( var i = 0; i < rotations.length; i++ ) {
+                coordinate = rotateCoordinate( coordinate, rotations[ i ] );
+            }
+
+            // Calculate one rotation from unit coordinate to rotated
+            // coordinate.  Because there're multiple possibles,
+            // select the one nearest to the base
+            var rotate = coordinateToRotation( rotations[ 0 ], coordinate );
+
+            return rotate;
+        };
+
+        var translateRelative = function( relative, prevRotation ) {
+            var result = rotateVector(
+                worldUnitCoordinate, relative, prevRotation );
+            result.rotate = combineRotations(
+                [ prevRotation, relative.rotate ] );
+
+            return result;
+        };
+
+        var lib = {
+            translateRelative: translateRelative
+        };
+
+        roots[ "impress-root-" + rootId ] = lib;
+        return lib;
+    };
+
+    // Let impress core know about the existence of this library
+    window.impress.addLibraryFactory( { rotation: libraryFactory } );
+
+} )( document, window );

src/lib/position.js

@@ -0,0 +1,7 @@
+// File name: position.js
+// Author: Janis Hutz
+// Date created: 2025-10-24 13:54:52
+// Date modified: 2025-10-24 13:54:53
+// ------
+
+

src/lib/render.js

@@ -0,0 +1,85 @@
+// File name: render.js
+// Author: Janis Hutz
+// Date created: 2025-10-24 14:04:37
+// Date modified: 2025-10-24 14:26:50
+// ------
+
+class ImpressCamera {
+    constructor () {
+        this.position = {
+            'x': 0,
+            'y': 0,
+            'z': 0
+        };
+
+        this.rotation = {
+            'x': 0,
+            'y': 0,
+            'z': 0
+        };
+    }
+
+    setPosition ( x, y, z ) {
+        this.position.x = x;
+        this.position.y = y;
+        this.position.z = z;
+    }
+
+    setRotation ( x, y, z ) {
+        this.rotation.x = x;
+        this.rotation.y = y;
+        this.rotation.z = z;
+    }
+
+    getState () {
+        return {
+            'position': this.position,
+            'rotation': this.rotation
+        };
+    }
+}
+
+class ImpressElement {
+    // eslint-disable-next-line max-params
+    constructor ( element, x, y, z, rotationX, rotationY, rotationZ ) {
+        this.element = element;
+        this.position = {
+            'x': x,
+            'y': y,
+            'z': z
+        };
+
+        this.rotation = {
+            'x': rotationX,
+            'y': rotationY,
+            'z': rotationZ
+        };
+    }
+}
+
+
+const renderer = () => {
+    const camera = new ImpressCamera();
+
+    const addElement = ( HTMLElement ) => {
+        // Element will need data-x, data-y, data-z, etc dataset
+    };
+
+    const removeElement = ( HTMLElement ) => {
+
+    };
+
+    const render = () => {
+
+    };
+
+    const moveTo = ( x, y, z, rotationX, rotationY, rotationZ ) => {
+
+    };
+
+    return {
+        addElement,
+        removeElement,
+        moveTo
+    };
+};

src/lib/rotation.js

@@ -1,429 +1,7 @@
-/**
+// File name: rotation.js
- * Helper functions for rotation.
+// Author: Janis Hutz
- *
+// Date created: 2025-10-24 13:54:49
- * Tommy Tam (c) 2021
+// Date modified: 2025-10-24 13:54:50
- * MIT License
+// ------
- */
-( function( document, window ) {
-    "use strict";
 
-    // Singleton library variables
-    var roots = [];
 
-    var libraryFactory = function( rootId ) {
-        if ( roots[ "impress-root-" + rootId ] ) {
-            return roots[ "impress-root-" + rootId ];
-        }
-
-        /**
-         * Round the number to 2 decimals, it's enough for use
-         */
-        var roundNumber = function( num ) {
-            return Math.round( ( num + Number.EPSILON ) * 100 ) / 100;
-        };
-
-        /**
-         * Get the length/norm of a vector.
-         *
-         * https://en.wikipedia.org/wiki/Norm_(mathematics)
-         */
-        var vectorLength = function( vec ) {
-            return Math.sqrt( vec.x * vec.x + vec.y * vec.y + vec.z * vec.z );
-        };
-
-        /**
-         * Dot product of two vectors.
-         *
-         * https://en.wikipedia.org/wiki/Dot_product
-         */
-        var vectorDotProd = function( vec1, vec2 ) {
-            return vec1.x * vec2.x + vec1.y * vec2.y + vec1.z * vec2.z;
-        };
-
-        /**
-         * Cross product of two vectors.
-         *
-         * https://en.wikipedia.org/wiki/Cross_product
-         */
-        var vectorCrossProd = function( vec1, vec2 ) {
-            return {
-                x: vec1.y * vec2.z - vec1.z * vec2.y,
-                y: vec1.z * vec2.x - vec1.x * vec2.z,
-                z: vec1.x * vec2.y - vec1.y * vec2.x
-            };
-        };
-
-        /**
-         * Determine wheter a vector is a zero vector
-         */
-        var isZeroVector = function( vec ) {
-            return !roundNumber( vec.x ) && !roundNumber( vec.y ) && !roundNumber( vec.z );
-        };
-
-        /**
-         * Scalar triple product of three vectors.
-         *
-         * It can be used to determine the handness of vectors.
-         *
-         * https://en.wikipedia.org/wiki/Triple_product#Scalar_triple_product
-         */
-        var tripleProduct = function( vec1, vec2, vec3 ) {
-            return vectorDotProd( vectorCrossProd( vec1, vec2 ), vec3 );
-        };
-
-        /**
-         * The world/absolute unit coordinates.
-         *
-         * This coordinate is used by browser to position objects.
-         * It will not be affected by object rotations.
-         * All relative positions will finally be converted to this
-         * coordinate to be used.
-         */
-        var worldUnitCoordinate = {
-            x: { x:1, y:0, z:0 },
-            y: { x:0, y:1, z:0 },
-            z: { x:0, y:0, z:1 }
-        };
-
-        /**
-         * Make quaternion from rotation axis and angle.
-         *
-         * q = [ cos(½θ), sin(½θ) axis ]
-         *
-         * If the angle is zero, returns the corresponded quaternion
-         * of axis.
-         *
-         * If the angle is not zero, returns the rotating quaternion
-         * which corresponds to rotation about the axis, by the angle θ.
-         *
-         * https://en.wikipedia.org/wiki/Quaternion
-         * https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation
-         */
-        var makeQuaternion = function( axis, theta = 0 ) {
-            var r = 0;
-            var t = 1;
-
-            if ( theta ) {
-                var radians = theta * Math.PI / 180;
-                r = Math.cos( radians / 2 );
-                t = Math.sin( radians / 2 ) / vectorLength( axis );
-            }
-
-            var q = [ r, axis.x * t, axis.y * t, axis.z * t ];
-
-            return q;
-        };
-
-        /**
-         * Extract vector from quaternion
-         */
-        var quaternionToVector = function( quaternion ) {
-            return {
-                x: roundNumber( quaternion[ 1 ] ),
-                y: roundNumber( quaternion[ 2 ] ),
-                z: roundNumber( quaternion[ 3 ] )
-            };
-        };
-
-        /**
-         * Returns the conjugate quaternion of a quaternion
-         *
-         * https://en.wikipedia.org/wiki/Quaternion#Conjugation,_the_norm,_and_reciprocal
-         */
-        var conjugateQuaternion = function( quaternion ) {
-            return [ quaternion[ 0 ], -quaternion[ 1 ], -quaternion[ 2 ], -quaternion[ 3 ] ];
-        };
-
-        /**
-         * Left multiple two quaternion.
-         *
-         * Is's used to combine two rotating quaternion into one.
-         */
-        var leftMulQuaternion = function( q1, q2 ) {
-            return [
-                ( q1[ 0 ] * q2[ 0 ] - q1[ 1 ] * q2[ 1 ] - q1[ 2 ] * q2[ 2 ] - q1[ 3 ] * q2[ 3 ] ),
-                ( q1[ 1 ] * q2[ 0 ] + q1[ 0 ] * q2[ 1 ] - q1[ 3 ] * q2[ 2 ] + q1[ 2 ] * q2[ 3 ] ),
-                ( q1[ 2 ] * q2[ 0 ] + q1[ 3 ] * q2[ 1 ] + q1[ 0 ] * q2[ 2 ] - q1[ 1 ] * q2[ 3 ] ),
-                ( q1[ 3 ] * q2[ 0 ] - q1[ 2 ] * q2[ 1 ] + q1[ 1 ] * q2[ 2 ] + q1[ 0 ] * q2[ 3 ] )
-            ];
-        };
-
-        /**
-         * Convert a rotation into a quaternion
-         */
-        var rotationToQuaternion = function( baseCoordinate, rotation ) {
-            var order = rotation.order ? rotation.order : "xyz";
-            var axes = order.split( "" );
-            var result = [ 1, 0, 0, 0 ];
-
-            for ( var i = 0; i < axes.length; i++ ) {
-                var deg = rotation[ axes[ i ] ];
-                if ( !deg || ( Math.abs( deg ) < 0.0001 ) ) {
-                    continue;
-                }
-
-                // All CSS rotation is based on the rotated coordinate
-                // So we need to calculate the rotated coordinate first
-                var coordinate = baseCoordinate;
-                if ( i > 0 ) {
-                    coordinate = {
-                        x: rotateByQuaternion( baseCoordinate.x, result ),
-                        y: rotateByQuaternion( baseCoordinate.y, result ),
-                        z: rotateByQuaternion( baseCoordinate.z, result )
-                    };
-                }
-
-                result = leftMulQuaternion(
-                    makeQuaternion( coordinate[ axes[ i ] ], deg ),
-                    result );
-
-            }
-
-            return result;
-        };
-
-        /**
-         * Rotate a vector by a quaternion.
-         */
-        var rotateByQuaternion = function( vec, quaternion ) {
-            var q = makeQuaternion( vec );
-
-            q = leftMulQuaternion(
-                leftMulQuaternion( quaternion, q ),
-                conjugateQuaternion( quaternion ) );
-
-            return quaternionToVector( q );
-        };
-
-        /**
-         * Rotate a vector by rotaion sequence.
-         */
-        var rotateVector = function( baseCoordinate, vec, rotation ) {
-            var quaternion = rotationToQuaternion( baseCoordinate, rotation );
-
-            return rotateByQuaternion( vec, quaternion );
-        };
-
-        /**
-         * Given a rotation, return the rotationed coordinate
-         */
-        var rotateCoordinate = function( coordinate, rotation ) {
-            var quaternion = rotationToQuaternion( coordinate, rotation );
-
-            return {
-                x: rotateByQuaternion( coordinate.x, quaternion ),
-                y: rotateByQuaternion( coordinate.y, quaternion ),
-                z: rotateByQuaternion( coordinate.z, quaternion )
-            };
-        };
-
-        /**
-         * Return the angle between two vector.
-         *
-         * The axis is used to determine the rotation direction.
-         */
-        var angleBetweenTwoVector = function( axis, vec1, vec2 ) {
-            var vecLen1 = vectorLength( vec1 );
-            var vecLen2 = vectorLength( vec2 );
-
-            if ( !vecLen1 || !vecLen2 ) {
-                return 0;
-            }
-
-            var cos = vectorDotProd( vec1, vec2 ) / vecLen1 / vecLen2 ;
-            var angle = Math.acos( cos ) * 180 / Math.PI;
-
-            if ( tripleProduct( vec1, vec2, axis ) > 0 ) {
-                return angle;
-            } else {
-                return -angle;
-            }
-        };
-
-        /**
-         * Return the angle between a vector and a plane.
-         *
-         * The plane is determined by an axis and a vector on the plane.
-         */
-        var angleBetweenPlaneAndVector = function( axis, planeVec, rotatedVec ) {
-            var norm = vectorCrossProd( axis, planeVec );
-
-            if ( isZeroVector( norm ) ) {
-                return 0;
-            }
-
-            return 90 - angleBetweenTwoVector( axis, rotatedVec, norm );
-        };
-
-        /**
-         * Calculated a order specified rotation sequence to
-         * transform from the world coordinate to required coordinate.
-         */
-        var coordinateToOrderedRotation = function( coordinate, order ) {
-            var axis0 = order[ 0 ];
-            var axis1 = order[ 1 ];
-            var axis2 = order[ 2 ];
-            var reversedOrder = order.split( "" ).reverse().join( "" );
-
-            var rotate2 = angleBetweenPlaneAndVector(
-                coordinate[ axis2 ],
-                worldUnitCoordinate[ axis0 ],
-                coordinate[ axis0 ] );
-
-            // The r2 is the reverse of rotate for axis2
-            // The coordinate1 is the coordinate before rotate of axis2
-            var r2 = { order: reversedOrder };
-            r2[ axis2 ] = -rotate2;
-
-            var coordinate1 = rotateCoordinate( coordinate, r2 );
-
-            // Calculate the rotation for axis1
-            var rotate1 = angleBetweenTwoVector(
-                coordinate1[ axis1 ],
-                worldUnitCoordinate[ axis0 ],
-                coordinate1[ axis0 ] );
-
-            // Calculate the rotation for axis0
-            var rotate0 = angleBetweenTwoVector(
-                worldUnitCoordinate[ axis0 ],
-                worldUnitCoordinate[ axis1 ],
-                coordinate1[ axis1 ] );
-
-            var rotation = { };
-            rotation.order = order;
-            rotation[ axis0 ] = roundNumber( rotate0 );
-            rotation[ axis1 ] = roundNumber( rotate1 );
-            rotation[ axis2 ] = roundNumber( rotate2 );
-
-            return rotation;
-        };
-
-        /**
-         * Returns the possible rotations from unit coordinate
-         * to specified coordinate.
-         */
-        var possibleRotations = function( coordinate ) {
-            var orders = [ "xyz", "xzy", "yxz", "yzx", "zxy", "zyx" ];
-            var rotations = [ ];
-
-            for ( var i = 0; i < orders.length; ++i ) {
-                rotations.push(
-                    coordinateToOrderedRotation( coordinate, orders[ i ] )
-                );
-            }
-
-            return rotations;
-        };
-
-        /**
-         * Calculate a degree which in range (-180, 180] of baseDeg
-         */
-        var nearestAngle = function( baseDeg, deg ) {
-            while ( deg > baseDeg + 180 ) {
-                deg -= 360;
-            }
-
-            while ( deg < baseDeg - 180 ) {
-                deg += 360;
-            }
-
-            return deg;
-        };
-
-        /**
-         * Given a base rotation and multiple rotations, return the best one.
-         *
-         * The best one is the one has least rotate from base.
-         */
-        var bestRotation = function( baseRotate, rotations ) {
-            var bestScore;
-            var bestRotation;
-
-            for ( var i = 0; i < rotations.length; ++i ) {
-                var rotation = {
-                    order: rotations[ i ].order,
-                    x: nearestAngle( baseRotate.x, rotations[ i ].x ),
-                    y: nearestAngle( baseRotate.y, rotations[ i ].y ),
-                    z: nearestAngle( baseRotate.z, rotations[ i ].z )
-                };
-
-                var score = Math.abs( rotation.x - baseRotate.x ) +
-                    Math.abs( rotation.y - baseRotate.y ) +
-                    Math.abs( rotation.z - baseRotate.z );
-
-                if ( !i || ( score < bestScore ) ) {
-                    bestScore = score;
-                    bestRotation = rotation;
-                }
-            }
-
-            return bestRotation;
-        };
-
-        /**
-         * Given a coordinate, return the best rotation to achieve it.
-         *
-         * The baseRotate is used to select the near rotation from it.
-         */
-        var coordinateToRotation = function( baseRotate, coordinate ) {
-            var rotations = possibleRotations( coordinate );
-
-            return bestRotation( baseRotate, rotations );
-        };
-
-        /**
-         * Apply a relative rotation to the base rotation.
-         *
-         * Calculate the coordinate after the rotation on each axis,
-         * and finally find out a one step rotation has the effect
-         * of two rotation.
-         *
-         * If there're multiple way to accomplish, select the one
-         * that is nearest to the base.
-         *
-         * Return one rotation has the same effect.
-         */
-        var combineRotations = function( rotations ) {
-
-            // No rotation
-            if ( rotations.length <= 0 ) {
-                return { x:0, y:0, z:0, order:"xyz" };
-            }
-
-            // Find out the base coordinate
-            var coordinate = worldUnitCoordinate;
-
-            // One by one apply rotations in order
-            for ( var i = 0; i < rotations.length; i++ ) {
-                coordinate = rotateCoordinate( coordinate, rotations[ i ] );
-            }
-
-            // Calculate one rotation from unit coordinate to rotated
-            // coordinate.  Because there're multiple possibles,
-            // select the one nearest to the base
-            var rotate = coordinateToRotation( rotations[ 0 ], coordinate );
-
-            return rotate;
-        };
-
-        var translateRelative = function( relative, prevRotation ) {
-            var result = rotateVector(
-                worldUnitCoordinate, relative, prevRotation );
-            result.rotate = combineRotations(
-                [ prevRotation, relative.rotate ] );
-
-            return result;
-        };
-
-        var lib = {
-            translateRelative: translateRelative
-        };
-
-        roots[ "impress-root-" + rootId ] = lib;
-        return lib;
-    };
-
-    // Let impress core know about the existence of this library
-    window.impress.addLibraryFactory( { rotation: libraryFactory } );
-
-} )( document, window );

src/lib/vectorUtil.js

@@ -0,0 +1,76 @@
+/* ! Licensed under MIT License - https://github.com/impress/impress.js/blob/master/LICENSE */
+/**
+ * impress.js
+ *
+ * impress.js is a presentation tool based on the power of CSS3 transforms and transitions
+ * in modern browsers and inspired by the idea behind prezi.com.
+ *
+ *
+ * Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-present Henrik Ingo (@henrikingo), 2025-present Janis Hutz
+ * and 70+ other contributors
+ *
+ * Released under the MIT License.
+ *
+ * ------------------------------------------------
+ *  authors:  Bartek Szopka, Henrik Ingo, Janis Hutz
+ *  version: 3.0.0
+ *  url:     http://impress.js.org
+ *  source:  http://github.com/impress/impress.js/
+ */
+
+// Welcome to the vectorUtil.js file. This file exposes various functions for use in calculating with vectors
+
+class Vector {
+
+    /**
+     * Description
+     * @param {number} x The x-coordinate
+     * @param {number} y The y-coordinate
+     * @param {number} z The z-coordinate
+     * @returns {undefined} Returns nothing
+     */
+    constructor ( x, y, z ) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+}
+
+window.impressVectorUtil = () => {
+
+    /**
+     * Get the cross product of two vectors (https://en.wikipedia.org/wiki/Cross_product)
+     * @param {Vector} vec1 The first vector
+     * @param {Vector} vec2 The second vector
+     * @returns {Vector} Returns a vector object
+     */
+    const vectorProduct = ( vec1, vec2 ) => new Vector(
+        ( vec1.y * vec2.z ) - ( vec1.z * vec2.y ),
+        ( vec1.z * vec2.x ) - ( vec1.x * vec2.z ),
+        ( vec1.x * vec2.y ) - ( vec1.y * vec2.x )
+    );
+
+    /**
+     * Get the dot product of two vectors (https://en.wikipedia.org/wiki/Dot_product)
+     * @param {Vector} vec1 The first vector
+     * @param {Vector} vec2 The second vector
+     * @returns {number} Returns the calculated value of the dot product
+     */
+    const dotProduct = ( vec1, vec2 ) => ( vec1.x * vec2.x ) + ( vec1.y * vec2.y ) + ( vec1.z * vec2.z );
+
+    /**
+     * Get the norm of a vector (https://en.wikipedia.org/wiki/Norm_(mathematics))
+     * @param {Vector} vec The vector of which to calculate the norm
+     * @returns {number} Returns the norm
+     */
+    const norm = ( vec ) => Math.sqrt( ( vec.x * vec.x ) + ( vec.y * vec.y ) + ( vec.z * vec.z ) );
+
+
+    const baseChange = ( angle ) => {};
+
+    return {
+        norm,
+        dotProduct,
+        vectorProduct
+    };
+};

src/plugins/bookmark/README.md

@@ -0,0 +1,27 @@
+# Bookmark
+
+Nonlinear navigation similar to the Goto plugin.
+
+Goto supports nonlinear navigation by *locally* defining *out-links*, accessible via the arrow keys.
+
+Bookmark supports nonlinear navigation by *globally* defining *in-links*, accessible via normal keys like 1,2,3,A,B,C.
+
+Example:
+
+```html
+<!-- data-bookmark-key-list allows an "inbound"-oriented style of non-linear navigation. -->
+<div id="..." class="step" data-bookmark-key-list="Digit1 KeyA 1 2 3 a b c">
+```
+
+An `id` is required on the `div`.
+
+If you assign the same key to multiple steps, that hotkey will cycle among them.
+
+WARNING: It's up to you to avoid reserved hotkeys H, B, P, ?, etc.
+
+Author
+------
+
+Copyright 2023 Wong Meng Weng (@mengwong)
+Released under the MIT license.
+

src/plugins/bookmark/bookmark.js

@@ -0,0 +1,72 @@
+/**
+ * Bookmark Plugin
+ *
+ * The bookmark plugin consists of
+ *   a pre-init plugin,
+ *   a keyup listener, and
+ *   a pre-stepleave plugin.
+ *
+ * The pre-init plugin surveys all step divs to set up bookmark keybindings.
+ * The pre-stepleave plugin alters the destination when a bookmark hotkey is pressed.
+ *
+ * Example:
+ *
+ *       <!-- data-bookmark-key-list allows an "inbound" style of non-linear navigation. -->
+ *       <div id="..." class="step" data-bookmark-key-list="Digit1 KeyA 1 2 3 a b c">
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values for a table
+ * of what strings to use for each key. Both .key and .code styles are recognized.
+ *
+ * It's up to the HTML author to avoid reserved hotkeys H, B, P, ? etc.
+ *
+ * Copyright 2016-2017 Henrik Ingo (@henrikingo)
+ * Released under the MIT license.
+ */
+/* global document, impress */
+
+( function( document ) {
+    "use strict";
+    var hotkeys = {};
+    function hotkeyDest( event ) {
+	return ( hotkeys.hasOwnProperty( event.key )  ? hotkeys[ event.key ] :
+		 hotkeys.hasOwnProperty( event.code ) ? hotkeys[ event.code ] : null ); }
+
+    // In pre-init phase, build a map of bookmark hotkey to div id, by reviewing all steps
+    impress.addPreInitPlugin( function( root, api ) {
+	root.querySelectorAll( ".step" ).forEach( function( div ) {
+            if ( div.dataset.bookmarkKeyList !== undefined && div.id !== undefined ) {
+		div.dataset.bookmarkKeyList.split( " " ).forEach( ( k ) => {
+		    if ( hotkeys.hasOwnProperty( k ) ) {
+			hotkeys[ k ].push( div.id );
+		    } else { hotkeys[ k ] = [ div.id ]; } } ); } } );
+
+	api.lib.gc.addEventListener( document, "keyup", function( event ) {
+	    if ( hotkeyDest( event ) !== null ) {
+		event.stopImmediatePropagation();
+		api.next( event );
+
+		// Event.preventDefault();
+	    }
+	} );
+    } );
+
+    // In pre-stepleave phase, match a hotkey and reset destination accordingly.
+    impress.addPreStepLeavePlugin( function( event ) {
+
+	// Window.console.log(`bookmark: running as PreStepLeavePlugin; event=`);
+	// window.console.log(event)
+        if ( ( !event || !event.origEvent ) ) { return; }
+	var dest = hotkeyDest( event.origEvent );
+        if ( dest ) {
+
+	    // Window.console.log(`bookmark: recognizing hotkey ${event.code} goes to ${dest}`)
+            var newTarget = document.getElementById( dest[ 0 ] ); // jshint ignore:line
+            if ( newTarget ) {
+                event.detail.next = newTarget;
+		dest.push( dest.shift() ); // Repeated hotkey presses cycle through each dest.
+            }
+        }
+    } );
+
+} )( document );
+

src/plugins/substep/substep.js

@@ -104,6 +104,11 @@
                 currentSubstepOrder = el.dataset.substepOrder;
                 el.classList.add( "substep-visible" );
                 el.classList.add( "substep-active" );
+                if ( currentSubstepOrder === undefined ) {
+
+                    // Stop after one substep as default order
+                    break;
+                }
             }
 
             return el;
@@ -136,6 +141,7 @@
 
             // Continue if there is another substep with the same substepOrder
             if ( current > 0 &&
+                visible[ current ].dataset.substepOrder !== undefined &&
                 visible[ current - 1 ].dataset.substepOrder ===
                 visible[ current ].dataset.substepOrder ) {
                 visible.pop();

test/helpers.js

@@ -26,18 +26,23 @@ var loadIframe = function( src, assert, callback ) {
     var iframe = document.getElementById( 'presentation-iframe' );
 
     var onLoad = function() {
-    assert.ok( true,
+        assert.ok(
-               'Presentation loaded. iframe.src = ' + iframe.src );
+            true,
+            'Presentation loaded. iframe.src = ' + iframe.src
+        );
         try {
-      assert.ok( iframe.contentDocument,
+            assert.ok(
+                iframe.contentDocument,
                 'Verifying that tests can access the presentation inside the iframe. ' +
-                 'Note: On Firefox this fails when using paths with "../" parts for the iframe.' );
+                 'Note: On Firefox this fails when using paths with "../" parts for the iframe.'
-    }
+            );
-    catch ( err ) {
+        } catch ( err ) {
-      assert.ok( false,
+            assert.ok(
+                false,
                 'Error when trying to access presentation in iframe. Note: When using Chrome with ' +
                'local files (file:///) this will fail with SecurityError. ' +
-               'You can however use Chrome over Karma.' );
+               'You can however use Chrome over Karma.'
+            );
         }
         console.log( 'End loadIframe' );
         callback();
@@ -45,8 +50,10 @@ var loadIframe = function( src, assert, callback ) {
 
     iframe.addEventListener( 'load', onLoad );
 
-  assert.ok( iframe.src = src,
+    assert.ok(
-             'Setting iframe.src = ' + src );
+        iframe.src = src,
+        'Setting iframe.src = ' + src
+    );
 };
 
 var initPresentation = function( assert, callback, rootId ) {
@@ -104,4 +111,3 @@ var _impressSupported = function() {
            ( document.body.dataset ) &&
            ( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 );
 };
-

tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "outDir": "./built",
+      "allowJs": true,
+      "target": "ES6",
+      "skipLibCheck": true
+    },
+    "include": [ "./src/**/*" ],
+}

website/README.md

@@ -1,13 +0,0 @@
-# impress.js.org website
-This folder contains all the code for the [impress.js.org](https://impress.js.org) website. You can find the source code for the demo presentation and the other examples in the folder *demo*.
-
-## Structure
-The also contains a folder for the docs (Documentation) for the project.
-
-## Roadmap
-What needs to be done:
-- Add code samples to main page
-
-# DOCS
-## Contributing Documentation
-You may find more documentation for contributing documentation in ./docs/Contributing.md

website/css/docs/navstyle.css

@@ -1,49 +0,0 @@
-.nav-container {
-    background-color: var( --accent-background );
-    width: 100%;
-    height: 100vh;
-}
-
-.nav-list {
-    display: flex;
-    flex-direction: column;
-    overflow: scroll;
-}
-
-.dropdown {
-    display: none;
-    font-size: 0.8rem;
-    height: 100%;
-    background-color: var( --dropdown-color );
-}
-
-.navitem {
-    cursor: pointer;
-    text-decoration: none;
-    color: white;
-    padding: 5%;
-    width: 90%;
-    background-color: var( --nav-buttons );
-    font-size: 1rem;
-    transition: all 0.5s;
-}
-
-.nav-subitem {
-    display: block;
-    text-decoration: none;
-    color: white;
-    font-size: 0.8rem;
-    width: 70%;
-    padding: 5%;
-    padding-left: 25%;
-    background-color: var( --dropdown-color );
-    transition: all 0.5s;
-}
-
-.nav-subitem:hover {
-    background-color: black;
-}
-
-.navitem:hover, .active {
-    background-color: black;
-}

website/css/docs/style.css

@@ -1,114 +0,0 @@
-/*
-*
-*   impress.js - documentation stylesheet
-*
-*       Created 2023 by Janis Hutz
-*
-*/
-
-html, body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    font-size: calc(16pt + 0.4vw);
-    font-family: sans-serif;
-}
-
-:root, :root.light {
-    --primary-color: black;
-    --accent-background: rgb(25, 25, 148);
-    --accent-color: white;
-    --background-color: white;
-    --accent-background-hover: rgb(124, 140, 236);
-    --top-background: rgb(211, 211, 211);
-    --nav-buttons: rgb(1, 1, 109);
-    --dropdown-color: rgb(0, 0, 156);
-}
-
-:root.dark {
-    --primary-color: white;
-    --accent-background: rgb(0, 0, 88);
-    --accent-color: white;
-    --background-color: rgb(32, 32, 32);
-    --accent-background-hover: #4380a8;
-    --top-background: rgb(77, 77, 77);
-    --nav-buttons: rgb(0, 0, 36);
-    --dropdown-color: rgb(0, 0, 116);
-}
-
-@media ( prefers-color-scheme: dark ) {
-    :root {
-        --primary-color: white;
-        --accent-background: rgb(56, 56, 112);
-        --accent-color: white;
-        --background-color: rgb(46, 46, 46);
-        --accent-background-hover: #4380a8;
-        --top-background: rgb(77, 77, 77);
-        --nav-buttons: rgb(0, 0, 41);
-        --dropdown-color: rgb(0, 0, 116);
-    }
-}
-
-.content {
-    transition: all 0.5s;
-    background-color: var( --background-color );
-    color: var( --primary-color );
-    display: grid;
-    grid-template-areas:
-        'menu header header header header'
-        'menu main main main main'
-        'menu main main main main'
-        'menu main main main main'
-        'menu main main main main'
-        'menu main main main main'
-        'menu main main main main'
-        'menu main main main main'
-        'menu main main main main'
-        'menu footer footer footer footer';
-}
-
-#doc-container a {
-    color: var( --primary-color );
-}
-
-.logo {
-    width: 60%;
-    height: auto;
-    margin-left: 20%;
-    margin-top: 5%;
-    margin-bottom: 5%;
-}
-
-#nav {
-    grid-area: menu;
-    min-width: 20vw;
-    width: 100%;
-    height: 100%;
-    overflow: scroll;
-}
-
-#docPage {
-    max-width: 75vw;
-    margin: 0;
-    grid-area: main;
-    overflow: scroll;
-}
-
-#doc-container {
-    width: 90%;
-    margin: 5%;
-    max-height: 70vh;
-}
-
-#footer {
-    grid-area: footer;
-}
-
-#top {
-    grid-area: header;
-}
-
-code {
-    font-size: 85%;
-}

website/css/docs/topstyle.css

@@ -1,24 +0,0 @@
-.top-container {
-    background-color: var( --top-background );
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    transition: all 0.5s;
-}
-
-.top-wrapper {
-    display: flex;
-    width: 80%;
-    margin-right: 5%;
-    justify-content: flex-end;
-}
-
-#darkToggle {
-    background-color: rgba(0, 0, 0, 0);
-    border-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var( --primary-color );
-}

website/css/footerstyle.css

@@ -1,76 +0,0 @@
-/*
-*
-*   footerstyle.css - impress.js Website
-*
-*       Created 2023 by Janis Hutz
-*
-*/
-
-/* Style the footer box */
-
-.footer-container {
-    width: 100%;
-    height: 100%;
-    background-color: blue;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.footer-logo-container {
-    margin: 0.5%;
-    height: 45%;
-    display: inline-block;
-    width: fit-content;
-}
-
-.footer-logo {
-    display: block;
-    width: auto;
-    height: 100%;
-}
-
-.footer-wrapper {
-    width: 70%;
-    height: 45%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: white;
-}
-
-.footer-big {
-    font-size: 1.6rem;
-    margin: 1%;
-    font-weight: bold;
-}
-
-.footer-small {
-    margin: 1%;
-    font-size: 1.2rem
-}
-
-.credits {
-    margin-top: 2%;
-    color: gray;
-    text-decoration: none;
-    font-style: italic;
-    font-size: 0.8rem;
-}
-
-@media only screen and (min-width: 999px) {
-    .footer-container {
-        flex-direction: row;
-    }
-
-    .footer-wrapper {
-        height: 80%;
-        justify-content: flex-start;
-    }
-
-    .footer-logo-container {
-        height: 60%;
-    }
-}

website/css/menustyle.css

@@ -1,138 +0,0 @@
-/*
-*
-*   menustyle.css - impress.js Website
-*
-*       Created 2023 by Janis Hutz
-*
-*/
-
-/*
-    Default rules that are set for mobile interfaces
-*/
-.nav-container {
-    width: 100%;
-    height: 100%;
-    background-color: blue;
-}
-
-.toggle-wrapper {
-    display: inline-flex;
-    height: 100%;
-    width: 80%;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-
-/* Logo image and logo link (aka logo-container)*/
-.logo-container {
-    margin: 0.5%;
-    height: 80%;
-    display: inline-block;
-    width: fit-content;
-}
-
-.mobile-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-.logo {
-    display: block;
-    width: auto;
-    height: 100%;
-}
-
-.listtoggle {
-    text-decoration: none;
-    color: black;
-    font-size: 5vh;
-    margin-right: 7%;
-    cursor: pointer;
-}
-
-.active {
-    color: rgba(184, 214, 240, 1);
-}
-
-/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */
-.nav-menu {
-    background-color: rgba(245, 245, 245, 0.9);
-    display: none;
-    width: 100%;
-}
-
-/* This is the list actually containing the menu items */
-.nav-list {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-}
-
-.navitem {
-    text-decoration: none;
-    text-align: center;
-    color: black;
-    font-size: 1.3rem;
-    padding-top: 2%;
-    padding-bottom: 2%;
-    width: 100%;
-}
-/*
-.navitem:hover {
-    background-color: rgba(184, 214, 240, 1);
-}*/
-
-
-/* 
-    Media queries to optimise for desktop
-*/
-@media only screen and (min-width: 999px) {
-    /* Top navigation bar container */
-    .nav-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    /* div containing the nav-menu unordered list */
-    .nav-wrapper {
-        height: 100%;
-        width: 80%;
-        margin: auto;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .listtoggle, .toggle-wrapper {
-        display: none;
-    }
-
-    .nav-menu {
-        display: flex;
-        background-color: rgba(0, 0, 0, 0);
-    }
-
-    .nav-list {
-        flex-direction: row;
-    }
-
-    .mobile-wrapper {
-        width: fit-content;
-        margin-left: 3%;
-    }
-
-    .navitem {
-        font-size: 0.9rem;
-        width: fit-content;
-        padding: 1%;
-        padding-left: 2%;
-        padding-right: 2%
-    }
-}

website/css/style.css

@@ -1,211 +0,0 @@
-/*
-*
-*   impress.js Website style.css
-*   
-*   copyright 2022 Janis Hutz
-*
-*
-*/
-
-html, body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    font-size: calc(14pt + 0.4vw);
-}
-
-body {
-    background-color: #dcdcdc;
-    /*TODO: Choose better font*/
-    font-family: sans-serif;
-}
-
-::selection {
-    background-color: #0000ff;
-}
-
-
-/*
-    TITLE
-*/
-
-/* This is the tile element with the background image and the title */
-
-.title {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 120vh;
-    margin-top: -0.5vh;
-    text-align: center;
-    font-size: 2.5rem;
-    background-image: url("/assets/main_bg_cut.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
-}
-
-.title-content {
-    color: white;
-}
-
-.title-buttons {
-    margin-top: 10%;
-    font-size: 1.3rem;
-}
-
-.heading {
-    color: white !important;
-}
-
-.subheading {
-    color: white !important;
-    font-size: 1.7rem !important;
-}
-
-#navbar {
-    height: 15vh;
-    position: relative;
-    z-index: 1;
-}
-
-#footer {
-    height: 70vh;
-}
-
-/* 
-*
-*   GENERAL ITEMS
-*
-*/
-
-/* Buttons */
-.button {
-    display: inline-block;
-    background-color: rgb(0, 128, 0);
-    text-decoration: none;
-    color: white;
-    font-size: 1.2rem;
-    margin: 5px;
-    font-weight: bold;
-    padding: 30px;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    border-radius: 50px;
-    transition: all 0.5s;
-}
-
-.button:hover {
-    background-color: rgb(2, 88, 2);
-    border-radius: 5px;
-}
-
-
-
-/*
-*
-*   CONTENT BOX
-*
-*/
-
-.content {
-    width: 75vw;
-    margin-left: 12.5vw;
-}
-
-.create {
-    display: grid;
-    justify-content: center;
-    text-align: center;
-}
-
-.unstyled-html, .create {
-    width: 100%;
-}
-
-/* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/
-.create .special-style {
-    background-color: aqua;
-    border-radius: 50px;
-    font-family: cursive;
-    padding: 5%;
-    animation-name: background;
-    animation-duration: 5s;
-    animation-iteration-count: 500;
-}
-
-@keyframes background {
-    0% {
-        background-color: aqua;
-        border-radius: 50px;
-    }
-    50% {
-        background-color: rgba(0, 255, 255, 0.2);
-        border-radius: 200px;
-    }
-    100% {
-        background-color: aqua;
-        border-radius: 50px;
-    }
-}
-
-.centered {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.sidebyside {
-    display: flex;
-    flex-direction: column;
-}
-
-.sidebyside-element {
-    width: 100%;
-}
-
-
-/* GETTING STARTED BOX AND CHILDREN */
-
-.getting-started {
-    margin-top: 5%;
-    width: 100%;
-    height: 50vh;
-    text-align: center;
-}
-
-.big-text {
-    font-size: 200%;
-}
-
-@media only screen and (min-width: 999px) {
-    #footer {
-        height: 40vh;
-    }
-
-    .sidebyside {
-        width: 100%;
-        align-items: flex-start;
-        justify-content: space-between;
-        flex-direction: row;
-    }
-
-    .sidebyside-element {
-        width: 40%;
-    }
-
-}
-
-code {
-    text-align: justify;
-}
-
-code, pre {
-    max-width: 80vw;
-}

website/demo/examples/index.html

@@ -1,41 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <link rel="stylesheet" href="/css/style.css">
-        <title>Example presentations</title>
-        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script defer src="/js/index.js"></script>
-        <style>
-            .list {
-                margin-top: 10%;
-                font-size: 1.5rem;
-                list-style: none;
-            }
-            .list-element {
-                text-decoration: none;
-                color: white;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="navbar"></div>
-        <div class="title">
-            <div class="title-content">
-                <h1 class="heading">Exam&shy;ples</h1>
-            </div>
-                <ul class="list"><br>
-                  <li class="button"><a class="list-element" href="2D-navigation/">2D-navigation</a></li>
-                  <li class="button"><a class="list-element" href="3D-positions/">3D-positions</a></li>
-                  <li class="button"><a class="list-element" href="3D-rotations/">3D-rotations</a></li>
-                  <li class="button"><a class="list-element" href="classic-slides/">classic-slides</a></li>
-                  <li class="button"><a class="list-element" href="cube/">cube</a></li>
-                  <li class="button"><a class="list-element" href="markdown/">markdown</a></li>
-
-                </ul>
-            </div>
-        <div id="footer"></div>
-    </body>
-</html>

website/docs/Contributing.md

@@ -1,16 +0,0 @@
-# DOCS
-## Introduction
-The impress.js docs include all the documentation that is relevant to the user. The docs get converted from MD into HTML automatically when running ```npm run build-website```. 
-
-## Using the script
-Whenever you update Documentation in this repository, please run the following commands to update the website:
-```
-npm install
-npm run build-website
-```
- 
-## Adding new pages
-If you want to add new pages (either generated ones or normal HTML files), you need to adjust some things inside of the build.js file which you can find in [here](src/build.js). Add a new entry that should be added to the nav menu. You should always use the *template.html* file if you create a new page.
-
-## Adding documentation for a new plugin
-If you add a new Plugin to impress.js, you do only need to run the build-website script as described above.

website/docs/contributing/index.html

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Contributing :: Docs - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-    </head>
-    <body>
-        <div class="content">
-            <div id="nav"></div>
-            <div id="top"></div>
-            <div id="docPage">
-                <div id="doc-container">
-                    <h1>Getting Started - Contributing</h1>
-                    <h3>So, you'd like to contribute to this project?</h3>
-                    <p>We're excited to have you in the team! We'll give you a quick introduction on contributing to this project.</p>
-                    <p>Development happens on <a href="https://github.com/impress/impress.js">Github</a>. Fork the project and start editing! You may want to clone the repo locally. To do this, run the following commands (omit the --recursive for a minimal checkout): </p>
-                    <pre>
-                        <code>
-git clone --recursive https://github.com/impress/impress.js
-cd impress.js
-                        </code>
-                    </pre>
-                    <p>Once you have made your changes, we expect you to run the following commands for testing:</p>
-                    <pre>
-                        <code>
-npm i
-npm run all
-                        </code>
-                    </pre>
-                    <p>This will build the <b>impress.js</b> file, as well as the <b>impress.min.js</b> file which currently is not included in the repository. It will also build the website and run some tests to make sure your code follows our code guidelines.</p>
-                    <h3>Repository structure</h3>
-                    <ul>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/website">/website</a>: This folder contains all the source code for the impress.js website.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/website/demo/index.html">website/demo/index.html</a> This is the official impress.js demo, showcasing all of the features of the original impress.js, as well as some new plugins as we add them. As already mentioned, this file is well commented and acts as the official tutorial.
-                        <li><a href="https://github.com/impress/impress.js/tree/master/website/demo/examples/">website/demo/examples/</a> Contains several demos showcasing additional features available. <a href="website/demo/examples/classic-slides/index.html">Classic Slides</a> is a simple demo that you can use as template if you want to create very simple, rectangular, PowerPoint-like presentations.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/src/">src/</a> The main file is <a href="https://github.com/impress/impress.js/blob/master/src/impress.js">src/impress.js</a>. Additional functionality is implemented as plugins in <a href="https://github.com/impress/impress.js/tree/master/src/plugins/">src/plugins/</a>. See <a href="https://github.com/impress/impress.js/blob/master/src/plugins/README.md">src/plugins/README.md</a> for information about the plugin API and how to write plugins.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/test/">test/</a> Contains QUnit and Syn libraries that we use for writing tests, as well as some test coverage for core functionality. (Yes, more tests are much welcome.) Tests for plugins are in the directory of each plugin.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/js">js/</a> Contains <a href="https://github.com/impress/impress.js/blob/master/js/impress.js">js/impress.js</a>, which contains a concatenation of the core `src/impress.js` and all the plugins. Traditionally this is the file that you'll link to in a browser. In fact both the demo and test files do exactly that.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/website/demo/css/">css</a>: Contains a CSS file used by the demo. This file is <b>not required for using impress.js</b> in your own presentations. Impress.js creates the CSS it needs dynamically.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/extras/">extras/</a> contains plugins that for various reasons aren't enabled by default. You have to explicitly add them with their own `script` element to use them.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/build.js">build.js</a> Simple build file that creates `js/impress.js`. It also creates a minified version `impress.min.js`, but that one is not included in the github repository.</li>
-                        <li><a href="https://github.com/impress/impress.js/tree/master/package.json">package.js</a> An NPM package specification. This was mainly added so you can easily install <a href="https://www.npmjs.com/package/buildify">buildify</a> and run `node build.js`. Other than the build process, which is really just doing roughly `cat src/impress.js src/plugins/*/*.js > js/impress.js`, and testing, `impress.js` itself doesn't depend on Node or any NPM modules.</li>
-                    </ul>
-                </div>
-            </div>
-            <div id="footer"></div>
-        </div>
-    </body>
-</html>

website/docs/contributing/website.html

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Docs - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-    </head>
-    <body>
-        <div class="content">
-            <div id="nav"></div>
-            <div id="top"></div>
-            <div id="docPage">
-                <div id="doc-container">
-                    <h1>Contributing - Website</h1>
-                    <h3>So, you'd like to contribute to the impress.js website?</h3>
-                    <p>Do you want to contribute to the impress.js website by writing more documentation, improving existing documentation or by adding more pages, fixing some or by doing some better styling? Then let's show you how!</p>
-                    <p>You should start by cloning the impress.js repository. How to do that is explained <a href="/docs/contributing">here</a>. The impress.js website is located in the <a href="https://github.com/impress/impress.js/tree/master/website">website/</a> directory. You may find the website build script in the <a href="https://github.com/impress/impress.js/tree/master/website/docs/src">website/docs/src</a> directory together with the template which you should always use when creating new pages.</p>
-                    <p>Whenever you add a new page to the impress.js docs, you need first add a new navigation entry in the build-script and then run it to regenerate the navigation menu:</p>
-                    <pre>
-                        <code>
-npm i
-npm run build-website
-                        </code>
-                    </pre>
-                    <h4>Adding a new plugin to impress.js</h4>
-                    <p>Whenever you add a plugin to impress.js, please also provide a README.md file. Then run the build script as described above. The script will go through the plugins directory and automatically generate the HTML files from the README's</p>
-                    <h3>Ideas for what to do</h3>
-                    <ul>
-                        <li>Translate into other languages</li>
-                        <li>Guess plugin title from title of READMEs instead of filename</li>
-                        <li>Optimize dark mode recognition</li>
-                    </ul>
-                </div>
-            </div>
-            <div id="footer"></div>
-        </div>
-    </body>
-</html>

website/docs/gettingStarted.html

@@ -1,214 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>gettingStarted ::  | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Introduction</h1>
-<p>Welcome to impress.js! This presentation framework allows you to create stunning presentations with the power of CSS3 transformations.
-<strong>NOTE:</strong> This Guide is not made for you, if you have never written HTML and/or CSS before. Knowing your way around in JavaScript certainly helps, but is not a necessity. You may still continue this tutorial and try to understand what we do as you go.</p>
-<p>For more advanced and complete documentation, you might prefer the <a href="/docs/reference">DOCUMENTATION</a>.</p>
-<h1>Getting started with impress.js</h1>
-<h2>Installation / acquiring the framework</h2>
-<p>First of all, you need to know, if you are going to have WiFi connection when you hold your presentation. If you are not sure, please use the method where you download the file instead of the cdn.</p>
-<h3>Including from cdn</h3>
-<p>Loading the script from the cdn is quite straight forward. If you copy the below example code, you need to do nothing else, impress will be loaded automatically.</p>
-<p><strong>Direct links to different versions of the impress.js file</strong></p>
-<ul>
-<li><a href="https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js">V2.0.0</a></li>
-<li><a href="https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js">V1.1.0</a></li>
-<li><a href="https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js">Source</a></li>
-</ul>
-<h3>Download the file to your PC</h3>
-<p>Head to the releases tab and download the source code as zip or as a tarball. Go ahead and unzip / untar it. You need to copy the folder <em>/js/</em> into the folder you are working in. Optionally, if you want to make your life a bit easier, you can copy also copy the folder <em>/css/</em> in there.</p>
-<h2>Setting up the project</h2>
-<p>Open up your favorite text-editor / IDE, for example Visual Studio Code, Atom, Notepad ++, ...
-Now, create a new file called <em>index.html</em> and create the basic HTML structure:</p>
-<pre><code>&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-    &lt;head&gt;
-        &lt;title&gt;My first presentation&lt;/title&gt;
-        &lt;link rel=&quot;stylesheet&quot; href=&quot;./css/impress-common.css&quot;&gt;&lt;!--Leave out, if you don't use impress-common.css--&gt;
-    &lt;/head&gt;
-    &lt;body class=&quot;impress-not-supported&quot;&gt;
-        &lt;div class=&quot;fallback-message&quot;&gt;
-            &lt;p&gt;Your browser &lt;b&gt;doesn't support the features required&lt;/b&gt; by impress.js, so you are presented with a simplified version of this presentation.&lt;/p&gt;
-            &lt;p&gt;For the best experience please use the latest &lt;b&gt;Chrome&lt;/b&gt;, &lt;b&gt;Safari&lt;/b&gt; or &lt;b&gt;Firefox&lt;/b&gt; browser.&lt;/p&gt;
-        &lt;/div&gt;
-
-        &lt;div id=&quot;impress&quot;&gt;
-            &lt;div id=&quot;myFirstSlide&quot; class=&quot;step&quot;&gt;
-                &lt;h1&gt;My first Slide&lt;/h1&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;script src=&quot;js/impress.js&quot;&gt;&lt;/script&gt;
-        &lt;script&gt;window.impress || document.write('&lt;script src=&quot;https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js&quot;&gt;\x3C/script&gt;');&lt;/script&gt;
-        &lt;script&gt;impress().init()&lt;/script&gt;
-    &lt;/body&gt;
-&lt;/html&gt;
-</code></pre>
-<p>Now, head into a file-manager, navigate to the file you just created (<em>index.html</em>) and open it. You should end up in a browser where you should see &quot;My first Slide&quot; displayed. As this is not really exciting, we are not gonna change anything about that and are gonna look at what you just typed. What do these lines mean?</p>
-<p>Well, first things first, you should probably give your presentation a title. You may do this in normal HTML fashion by changing the <em>title</em> HTML tag.</p>
-<p>So now, we reached the HTML body. You can see that it already belongs to a class. This class just tells impress.js that this is the body where the &quot;fallback-message&quot; should be displayed when it detects, that your browser does not support CSS3 and therefore impress.js won't work. You can easily omit that class though, including the &quot;fallback-message&quot; div with its content, if you only intend to use the presentation for yourself and you know about the fact that some browsers might not work.</p>
-<p>Now, probably the most important part of all is the <em>div</em> that belongs to the <code>impress</code> class. This <em>div</em> should contain all the HTML code you write, as everything outside that class will not be animated by impress.js.</p>
-<p>Finally, we load the <code>impress.js</code> script from your local copy (if you have one) or from the cdn, if you do not have a local copy and execute</p>
-<pre><code>impress().init()
-</code></pre>
-<p>to initialize impress.js. Now, let's continue on to explore more and more features of this amazing tool!</p>
-<h2>Creating slides</h2>
-<p>Creating slides is fairly easy. You create a <em>div</em> that belongs to the class <code>step</code> and you are off to the races! Let me give you an example:</p>
-<pre><code>&lt;div class=&quot;step&quot;&gt;
-Hello World
-&lt;/div&gt;
-</code></pre>
-<p>Now, if you reload the presentation, you start to see a *slight* problem. All your text is stacked... How do we work around that?</p>
-<p>Obviously, impress.js has an answer to it. You can add the following additional attributes to your div, to make it work:</p>
-<table>
-<thead>
-<tr>
-<th>Attribute</th>
-<th>Explanation</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>data-x</td>
-<td>Position the element along the x-axis (from left to right)</td>
-</tr>
-<tr>
-<td>data-y</td>
-<td>Position the element along the y-axis (from top to bottom)</td>
-</tr>
-<tr>
-<td>data-z</td>
-<td>Position the element along the z-axis (3D-Effect, move the element behind another one)</td>
-</tr>
-<tr>
-<td>data-rotate</td>
-<td>Rotate the element (if not using data-z!)</td>
-</tr>
-<tr>
-<td>data-rotate-x</td>
-<td>Rotate the element along the x-axis</td>
-</tr>
-<tr>
-<td>data-rotate-y</td>
-<td>Rotate the element along the y-axis</td>
-</tr>
-<tr>
-<td>data-rotate-z</td>
-<td>Rotate the element along the z-axis</td>
-</tr>
-<tr>
-<td>data-scale</td>
-<td>Scale the element.</td>
-</tr>
-</tbody>
-</table>
-<p>These are the basic positioning options in impress.js. All of the attributes take Strings as arguments, so be aware of the fact, that you need to put quotation marks around the numbers! The <em>data-rotate</em> attributes take an angle in form of a String as argument.</p>
-<p>Now, that you have created the slides, you might want to style them. This is where CSS comes into play. Add another file to your project called, e.g., <code>style.css</code>.</p>
-<p><strong>NOTE:</strong> Whatever you do, do not mess with positioning and rotation of the div that belongs to the class <em>step</em>, but add a div inside of it, if you really have to mess with these properties. See the example below. Always position <em>steps</em> with the <em>data-</em> attribute!</p>
-<pre><code>&lt;div class=&quot;step yourClassNameHere&quot; data-x=&quot;1000&quot; data-y=&quot;1000&quot; data-z=&quot;-1000&quot; data-scale=&quot;2&quot; data-rotate-z=&quot;90&quot;&gt;
-    &lt;div class=&quot;yourSubClassNameHere&quot;&gt;
-        &lt;h1&gt;Powerful, yet still simple&lt;/h1&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</code></pre>
-<p><strong>NOTE:</strong> You may also use negative numbers for all these properties!</p>
-<h2>More advanced features</h2>
-<p>You might want to change some default settings, like the transition speed, the width &amp; height of the target screen, etc. This table is from the <a href="/docs/reference">DOCUMENTATION</a> and was slightly adapted.</p>
-<table>
-<thead>
-<tr>
-<th>Attribute</th>
-<th>Default</th>
-<th>Explanation</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>data-transition-duration</td>
-<td>1000 (ms)</td>
-<td>Speed of transition between steps.</td>
-</tr>
-<tr>
-<td>data-width</td>
-<td>1920 (px)</td>
-<td>Width of target screen size. When presentation is viewed on a larger or smaller screen, impress.js will scale all content automatically.</td>
-</tr>
-<tr>
-<td>data-height</td>
-<td>1080 (px)</td>
-<td>Height of target screen size.</td>
-</tr>
-<tr>
-<td>data-max-scale</td>
-<td>3</td>
-<td>Maximum scale factor. (Note that the default 1 will not increase content size on larger screens!)</td>
-</tr>
-<tr>
-<td>data-min-scale</td>
-<td>0</td>
-<td>Minimum scale factor.</td>
-</tr>
-<tr>
-<td>data-perspective</td>
-<td>1000</td>
-<td>Perspective for 3D rendering. See https://developer.mozilla.org/en/CSS/perspective</td>
-</tr>
-</tbody>
-</table>
-<h3><strong>Renaming Steps</strong></h3>
-<p>You can give each step an ID. The name of the ID will be displayed in the browsers navigation bar instead of the default <em>step-x</em> whereas x is replaced by the current step number. This can be especially helpful, when trying to jump between steps and go back to a previous one. If you want to know how to move to a specific slide, you should take a look at the <a href="/docs/plugins/goto.html">README</a> of the &quot;Goto&quot; plugin.</p>
-<h1>Using PLUGINS</h1>
-<p>Impress.js is limited to everything that we have discussed so far and some other details, we won't go over here. Check the <a href="/docs/reference">DOCUMENTATION</a> for that.</p>
-<p>impress.js has accumulated a lot of very useful plugins. You may find all of them <a href="/docs/plugins/.html">here</a>!</p>
-<p>Each Plugin has a README.md file which you may read to get an idea on how to use them. Some of the plugins run unnoticed in the background, like the <em>resize</em> plugin, which automatically resizes the presentation whenever the browser window changed in size. Here, I will give you an overview of some of the plugins that impress.js includes by default.</p>
-<p><strong>NOTE:</strong> As previously mentioned, if you'd like to get more info about how it works, take a look at the <a href="/docs/reference">DOCUMENTATION</a> or the README.md files of the plugins.</p>
-<h2><a href="/docs/plugins/impressConsole.html">impressConsole</a></h2>
-<p>This plugin opens up and additional browser tab which contains a speaker console. There you can see the current slide, the past slide and your notes. You add notes to your presentation by adding a <em>div</em> that belongs to the class &quot;notes&quot; to your <em>div</em> that belongs to the class &quot;step&quot;.</p>
-<h3><strong>adding notes to your presentation</strong></h3>
-<p>You may add notes to your presentation by adding a div of class <em>notes</em> into the div of class <em>step</em>, like so:</p>
-<pre><code>    &lt;div class=&quot;step&quot;&gt;
-        Some text that is being displayed on your slides
-        &lt;div class=&quot;notes&quot;&gt;
-            this won't be displayed in your presentation
-        &lt;/div&gt;
-    &lt;/div&gt;
-</code></pre>
-<p>Now that you have added the notes to your HTML, it is time to hide them. You need to add the following code to your CSS file (or in the style tag in the header):</p>
-<pre><code>    .notes {
-        display: none;
-    }
-</code></pre>
-<p>To enter it, press P.</p>
-<h2><a href="/docs/plugins/goto.html">Goto</a></h2>
-<p>This plugin allows you to directly go to a certain step, by either passing in a number or the id of the step you'd like to go to.</p>
-<h2><a href="/docs/plugins/progress.html">Progress</a></h2>
-<p>This plugin, as its name implies, displays the progress in your presentation.</p>
-<h2><a href="/docs/plugins/blackout/blackout.js.html">Blackout</a></h2>
-<p>This plugin hides the screen, if you press B, which is handy in a lot of situations.</p>
-<h2>Other plugins</h2>
-<p>You may find the other plugins <a href="/docs/plugins/.html">here</a>. It certainly helps if you familiarise yourself with the plugins.</p>
-<h1>Thank you for reading this</h1>
-<p>If you want to know more, you can always ready the <a href="/docs/reference">DOCUMENTATION</a> or, even better, read the Source Code and try to understand how it works!</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/index.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Docs - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script defer src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-    </head>
-    <body>
-        <div class="content">
-            <div id="nav"></div>
-            <div id="top"></div>
-            <div id="docPage">
-                <div id="doc-container">
-                    <h1>Welcome to the impress.js docs!</h1>
-                    <p>impress.js is a JavaScript framework to create stunning presentations. Note: impress may not help you, if you have nothing interesting to say!</p>
-                    <p>If you are new to impress and you want to learn to use it, we suggest you <a href="./gettingStarted.html" class="docs-link">start here</a>!</p>
-                </div>
-            </div>
-            <div id="footer"></div>
-        </div>
-    </body>
-</html>

website/docs/nav.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-            <meta http-equiv="X-UA-Compatible" content="IE=edge">
-            <link rel="stylesheet" href="/css/docs/navstyle.css">
-        </head>
-        <body>
-            <div class="nav-container">
-                <a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
-                <div class="nav-wrapper">
-                    <div class="nav-list">
-                    <a class="navitem" id="home" href="/docs">Home</a>
-                    <a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
-                    <a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
-                    <div class="dropdown" id="reference">
-                        <a class="nav-subitem" id="reference-home" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a><a class="nav-subitem" id="index" href="/docs/reference/index.html">index</a></div>
-                    <a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
-                    <div class="dropdown" id="plugins">
-                        <a class="nav-subitem" id="plugins-home" href="/docs/plugins">Home</a>
-                    <a class="nav-subitem" id="autoplay" href="/docs/plugins/autoplay.html">autoplay</a><a class="nav-subitem" id="blackout" href="/docs/plugins/blackout.html">blackout</a><a class="nav-subitem" id="extras" href="/docs/plugins/extras.html">extras</a><a class="nav-subitem" id="form" href="/docs/plugins/form.html">form</a><a class="nav-subitem" id="fullscreen" href="/docs/plugins/fullscreen.html">fullscreen</a><a class="nav-subitem" id="goto" href="/docs/plugins/goto.html">goto</a><a class="nav-subitem" id="help" href="/docs/plugins/help.html">help</a><a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">impressConsole</a><a class="nav-subitem" id="media" href="/docs/plugins/media.html">media</a><a class="nav-subitem" id="mobile" href="/docs/plugins/mobile.html">mobile</a><a class="nav-subitem" id="mouse-timeout" href="/docs/plugins/mouse-timeout.html">mouse-timeout</a><a class="nav-subitem" id="navigation" href="/docs/plugins/navigation.html">navigation</a><a class="nav-subitem" id="navigation-ui" href="/docs/plugins/navigation-ui.html">navigation-ui</a><a class="nav-subitem" id="progress" href="/docs/plugins/progress.html">progress</a><a class="nav-subitem" id="rel" href="/docs/plugins/rel.html">rel</a><a class="nav-subitem" id="resize" href="/docs/plugins/resize.html">resize</a><a class="nav-subitem" id="skip" href="/docs/plugins/skip.html">skip</a><a class="nav-subitem" id="stop" href="/docs/plugins/stop.html">stop</a><a class="nav-subitem" id="substep" href="/docs/plugins/substep.html">substep</a><a class="nav-subitem" id="toolbar" href="/docs/plugins/toolbar.html">toolbar</a><a class="nav-subitem" id="touch" href="/docs/plugins/touch.html">touch</a></div>
-                    <a class="navitem" id="contributingNav" onclick="toggleList( 'contributing' );">Contributing</a>
-                    <div class="dropdown" id="contributing">
-                        <a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing">Getting Started</a>
-                        <a class="nav-subitem" id="website" href="/docs/contributing/website.html">Website</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </body>
-    <script src="/js/docs/nav.js"></script>
-</html>

website/docs/navTemplate.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <link rel="stylesheet" href="/css/docs/navstyle.css">
-    </head>
-    <body>
-        <div class="nav-container">
-            <a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
-            <div class="nav-wrapper">
-                <div class="nav-list">
-                    <a class="navitem" id="home" href="/docs">Home</a>
-                    <a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
-                    <a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
-                    <div class="dropdown" id="reference">
-                        <a class="nav-subitem" id="root" href="/docs/reference">Home</a>
-                        <a class="nav-subitem" id="root" href="/docs/reference/root">Root element</a>
-                    </div>
-                    <a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
-                    <div class="dropdown" id="plugins">
-                        <a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">Impress Console</a>
-                    </div>
-                    <a class="navitem" id="contributingNav" onclick="toggleList( 'contributing' );">Contributing</a>
-                    <div class="dropdown" id="contributing">
-                        <a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing/gettingStarted.html">Getting Started</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </body>
-    <script src="/js/docs/nav.js"></script>
-</html>

website/docs/plugins/autoplay.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>autoplay :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Autoplay</h1>
-<p>The <a href="https://github.com/impress/impress.js/blob/master/src/plugins/autoplay/autoplay.js">autoplay</a> plugin automatically advances the presentation after a certain timeout expired.</p>
-<h2>USAGE</h2>
-<p>You first have to enable the plugin by setting a global <code>data-autoplay</code> value on the impress-div. Then you can change individual <code>data-autoplay</code> values on each <em>step</em> by adding <code>data-autoplay</code> to it. If this value is set to <code>0</code>, there will be no more auto-advancing on this <em>step</em>. The value you enter is time in seconds to switch to the next slide.</p>
-<h2>EXAMPLE</h2>
-<p>Note: This only shows part of the HTML. If you want to know how to set up a presentation, I highly recommend you read our <a href="/docs/gettingStarted.html">Getting Started Guide</a></p>
-<pre><code>&lt;div id=impress data-autoplay=&quot;5&quot;&gt;
-    &lt;div class=&quot;step&quot; data-autoplay=&quot;0&quot;&gt;
-        This slide will not auto-advance
-    &lt;/div&gt;
-     &lt;div class=&quot;step&quot;&gt;
-        This slide will auto-advance at the globally defined rate.
-    &lt;/div&gt;
-     &lt;div class=&quot;step&quot; data-autoplay=&quot;10&quot;&gt;
-        This slide will auto-advance after 10 seconds
-    &lt;/div&gt;
-&lt;/div&gt;
-</code></pre>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/blackout.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>blackout :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Blackout</h1>
-<p>This plugin is automatically enabled and runs whenever you start your presentation. You can press <em>B</em> or <em>.</em> on your keyboard to blank / unblank the screen.</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/extras.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>extras :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Extras Plugin</h1>
-<p>The Extras plugin will initialize the optional addon plugins from
-<a href="https://github.com/impress/impress.js/tree/master/src/plugins/extras/">extras/</a> directory, if they were loaded.</p>
-<p>Generally, for an extras plugin to have been loaded, 2 things must have happened:</p>
-<ol>
-<li>The extras plugins must be present in extras/ directory, for example after
-running <code>git submodule update</code></li>
-<li>One or more extras plugins are added to the impress.js presentation (the HTML
-file) by the author using a regular <code>&lt;script&gt;</code> tag.</li>
-</ol>
-<p>If one or more extras plugins were so added, this plugin will automatically
-discover them and perform initialization (such as calling
-<code>mermaid.initialize()</code>).</p>
-<p>If no extras plugins are added to a presentation, this plugin does nothing.</p>
-<p>Note that some extra plugins (like mathjax) initialize themselves immediately, and
-there's nothing to do here.</p>
-<h2>Author</h2>
-<p>Henrik Ingo (@henrikingo), 2016</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/form.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>form :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Form</h1>
-<p>Form support! Functionality to better support use of input, textarea, button... elements in a presentation.</p>
-<p>This plugin does two things:</p>
-<p>Set stopPropagation on any element that might take text input. This allows users to type, for example, the letter 'P' into a form field, without causing the presenter console to spring up.</p>
-<p>On impress:stepleave, de-focus any potentially active element. This is to prevent the focus from being left in a form element that is no longer visible in the window, and user therefore typing garbage into the form.</p>
-<p><em><strong>THIS PLUGIN REQUIRES FURTHER DEVELOPMENT</strong></em></p>
-<p>TODO: Currently it is not possible to use TAB to navigate between form elements. Impress.js, and
-in particular the navigation plugin, unfortunately must fully take control of the tab key,
-otherwise a user could cause the browser to scroll to a link or button that's not on the current
-step. However, it could be possible to allow tab navigation between form elements, as long as
-they are on the active step. This is a topic for further study.</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/fullscreen.html

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>fullscreen :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Fullscreen</h1>
-<p>This plugin puts your presentation into fullscreen by pressing <em>F5</em>. You can leave fullscreen again by pressing <em>Esc</em>.</p>
-<p><em>Note:</em> impress.js works just fine with the normal fullscreen offered by your browser where you would (usually) press <em>F11</em> to enter it. There are certain circumstances where you might want to use this plugin instead, as it should work with the impressConsole plugin as well.</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/goto.html

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>goto :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Goto Plugin</h1>
-<p>The goto plugin is a pre-stepleave plugin. It is executed before
-<code>impress:stepleave</code> event, and will alter the destination where to transition next.</p>
-<p>Example:</p>
-<pre><code>    &lt;!-- When leaving this step, go directly to &quot;step-5&quot; --&gt;
-    &lt;div class=&quot;step&quot; data-goto=&quot;step-5&quot;&gt;
-
-    &lt;!-- When leaving this step with next(), go directly to &quot;step-5&quot;, instead of the next step.
-         If moving backwards to previous step - e.g. prev() instead of next() - then go to &quot;step-1&quot;. --&gt;
-    &lt;div class=&quot;step&quot; data-goto-next=&quot;step-5&quot; data-goto-prev=&quot;step-1&quot;&gt;
-
-    &lt;!-- data-goto-key-list and data-goto-next-list allow you to build advanced non-linear navigation. --&gt;
-    &lt;div class=&quot;step&quot; data-goto-key-list=&quot;ArrowUp ArrowDown ArrowRight ArrowLeft&quot; data-goto-next-list=&quot;step-4 step-3 step-2 step-5&quot;&gt;
-</code></pre>
-<p>See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values for a table
-of what strings to use for each key.</p>
-<h2>Author</h2>
-<p>Copyright 2016 Henrik Ingo (@henrikingo)
-Released under the MIT license.</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/help.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>help :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Help screen plugin</h1>
-<p>Shows a help popup when a presentation is loaded, as well as when 'H' is pressed.</p>
-<p>To enable the help popup, add following div to your presentation:</p>
-<pre><code>&lt;div id=&quot;impress-help&quot;&gt;&lt;/div&gt;
-</code></pre>
-<p>Example CSS:</p>
-<pre><code>    .impress-enabled #impress-help {
-        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
-        color: #EEEEEE;
-        font-size: 80%;
-        position: fixed;
-        left: 2em;
-        bottom: 2em;
-        width: 24em;
-        border-radius: 1em;
-        padding: 1em;
-        text-align: center;
-        z-index: 100;
-        font-family: Verdana, Arial, Sans;
-    }
-    .impress-enabled #impress-help td {
-        padding-left: 1em;
-        padding-right: 1em;
-    }
-</code></pre>
-<h2>Author</h2>
-<p>Copyright Henrik Ingo (@henrikingo), 2016
-MIT License</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/impressConsole.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>impressConsole :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Impress Console Plugin</h1>
-<p>Press 'P' to show a speaker console window.</p>
-<ul>
-<li>View of current slide</li>
-<li>Preview of next slide</li>
-<li>Speaker notes (contents of a &lt;div class=&quot;notes&quot;&gt; element on current slide)</li>
-<li>Navigation</li>
-</ul>
-<p>For speaker notes, add the following anywhere inside a step</p>
-<pre><code>&lt;div class=&quot;notes&quot;&gt;Speaker notes text...&lt;/div&gt;
-</code></pre>
-<p>Example CSS:</p>
-<pre><code>/* Hide notes from the actual presentation. This will not affect the visibility of notes in the impress console window. */
-
-.notes {
-    display: none;
-}
-</code></pre>
-<h2>Credits</h2>
-<ul>
-<li>Henrik Ingo, henrik.ingo@avoinelama.fi, impress.js (plugin) integration</li>
-<li>Heiko Richler, Aico.Richler@gmx.net, major changes in rev. 1.3</li>
-<li>Lennart Regebro, regebro@gmail.com, main author of impressConsole</li>
-<li>David Souther, davidsouther@gmail.com, author of the original notes.js</li>
-</ul>
-<p>MIT License</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/index.html

@@ -1,316 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>index :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Impress.js Plugins documentation</h1>
-<h2>The default set of plugins</h2>
-<p>A lot of impress.js features are and will be implemented as plugins. Each plugin
-has user documentation in a README.md file in <a href="https://github.com/impress/impress.js/tree/master/src/plugins/./">its own directory</a>.</p>
-<p>The plugins in this directory are called default plugins, and - unsurprisingly -
-are enabled by default. However, most of them won't do anything by default,
-rather require the user to invoke them somehow. For example:</p>
-<ul>
-<li>The <em>navigation</em> plugin waits for the user to press some keys, arrows, page
-down, page up, space or tab.</li>
-<li>The <em>autoplay</em> plugin looks for the HTML attribute <code>data-autoplay</code> to see
-whether it should do its thing. It can also be triggered with a URL GET parameter
-<code>?impress-autoplay=5</code> <em>5 is the waiting duration</em>.</li>
-<li>The <em>toolbar</em> plugin looks for a <code>&lt;div&gt;</code> element to become visible.</li>
-</ul>
-<h2>Extra addons</h2>
-<p>Yet more features are available in presentations that enable
-<a href="https://github.com/impress/impress-extras">extra addons</a>. Extra addons are 3rd party plugins
-that are not part of impress.js, but that we have nevertheless collected together into the
-impress-extras repo to provide convenient and standardized access to them. To include
-the extra addons when checking out impress.js, use git clone --recursive. Even then, they
-are not activated by default in a presentation, rather each must be included with their own <code>&lt;script&gt;</code> tag.</p>
-<p>Note: The enabled extra addons are automatically initialized by the <em>extras</em>
-plugin.</p>
-<h2>Example HTML and CSS</h2>
-<p>Generally plugins will do something sane, or nothing, by default. Hence, no
-particular HTML or CSS is required. The README file of each plugin documents the
-HTML and CSS that you can use with that plugin.</p>
-<p>For your convenience, below is some sample HTML and CSS code covering all the
-plugins that you may want to use or adapt.</p>
-<h2>Additional parameters for addons</h2>
-<p>Some addons can handle additional HTML data attributes to help us in further customization:</p>
-<ul>
-<li>Markdown-JS: You can pass a specific Markdown dialect to the plugin using <code>data-markdown-dialect=&quot;Another Dialect&quot;</code>.</li>
-</ul>
-<h3>Sample HTML to enable plugins and extra addons</h3>
-<pre><code>&lt;head&gt;
-  &lt;!-- CSS files if using Highlight.js or Mermaid.js extras. --&gt;
-  &lt;link rel=&quot;stylesheet&quot; href=&quot;../../extras/highlight/styles/github.css&quot;&gt;
-  &lt;link rel=&quot;stylesheet&quot; href=&quot;../../extras/mermaid/mermaid.forest.css&quot;&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;div id=&quot;impress&quot; data-autoplay=&quot;10&quot;&gt;
-    &lt;div class=&quot;step&quot;
-         data-autoplay=&quot;15&quot;
-         data-rel-x=&quot;1000&quot;
-         data-rel-y=&quot;1000&quot;&gt;
-
-      &lt;h1&gt;Slide content&lt;/h1&gt;
-      
-      &lt;ul&gt;
-        &lt;li class=&quot;substep&quot;&gt;Point 1&lt;/li&gt;
-        &lt;li class=&quot;substep&quot;&gt;Point 2&lt;/li&gt;
-      &lt;/ul&gt;
-
-      &lt;div class=&quot;notes&quot;&gt;
-      Speaker notes are shown in the impressConsole.
-      &lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-  
-  &lt;div id=&quot;impress-toolbar&quot;&gt;&lt;/div&gt;
-  &lt;div class=&quot;impress-progressbar&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
-  &lt;div class=&quot;impress-progress&quot;&gt;&lt;/div&gt;
-  &lt;div id=&quot;impress-help&quot;&gt;&lt;/div&gt;
-
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../extras/highlight/highlight.pack.js&quot;&gt;&lt;/script&gt;
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../extras/mermaid/mermaid.min.js&quot;&gt;&lt;/script&gt;
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../extras/markdown/markdown.js&quot;&gt;&lt;/script&gt;
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../extras/mathjax/MathJax.js?config=TeX-AMS_CHTML&quot;&gt;&lt;/script&gt;
-&lt;/body&gt;
-</code></pre>
-<h3>Sample CSS related to plugins and extra addons</h3>
-<p>The sample css related to plugins and extra addons is located in <a href="https://github.com/impress/impress.js/tree/master/./css/impress-common.css">css/impress-common.css</a>.</p>
-<h1>For developers</h1>
-<p>The vision for impress.js is to provide a compact core library doing the
-actual presentations, with a collection of plugins that provide additional
-functionality. A default set of plugins are distributed together with the core
-impress.js, and are located in this directory. They are called <em>default plugins</em>
-because they are distributed and active when users use the <a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a>
-in their presentations.</p>
-<h2>Building js/impress.js</h2>
-<p>The common way to use impress.js is to link to the file
-<a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a>. This is a simple concatenation of the
-core impress.js and all plugins in this directory. If you edit or add code
-under <a href="https://github.com/impress/impress.js/tree/master/">src/</a>, you can run <code>node build.js</code> to recreate the distributable
-<code>js/impress.js</code> file. The build script also creates a minified file, but this
-is not included in the git repository.</p>
-<h3>Tip: Build errors</h3>
-<p>If your code has parse errors, the <code>build.js</code> will print a rather unhelpful
-exception like</p>
-<pre><code>/home/hingo/hacking/impress.js/js/impress.js
-
-/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:271
-    throw new JS_Parse_Error(message, line, col, pos);
-          ^
-Error
-    at new JS_Parse_Error (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:263:18)
-    at js_error (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:271:11)
-    at croak (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:733:9)
-    at token_error (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:740:9)
-    at unexpected (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:746:9)
-    at Object.semicolon [as 1] (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:766:43)
-    at prog1 (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:1314:21)
-    at simple_statement (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:906:27)
-    at /home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:814:19
-    at block_ (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:1003:20)
-</code></pre>
-<p>You will be pleased to know, that the concatenation of the unminified file
-<a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a> has already succeeded at this point. Just
-open a test in your browser, and the browser will show you the line and error.</p>
-<h3>Structure, naming and policy</h3>
-<p>Each plugin is contained within its own directory. The name of the directory
-is the name of the plugin. For example, imagine a plugin called <em>pluginA</em>:</p>
-<pre><code>src/plugins/plugina/
-</code></pre>
-<p>The main javascript file should use the directory name as its root name:</p>
-<pre><code>src/plugins/plugina/plugina.js
-</code></pre>
-<p>For most plugins, a single <code>.js</code> file is enough.</p>
-<p>Note that the plugin name is also used as a namespace for various things. For
-example, the <em>autoplay</em> plugin can be configured by setting the <code>data-autoplay=&quot;5&quot;</code>
-attribute on a <code>div</code>.</p>
-<p>As a general rule ids, classes and attributes within the <code>div#impress</code> root
-element, may use the plugin name directly (e.g. <code>data-autoplay=&quot;5&quot;</code>). However,
-outside of the root element, you should use <code>impress-pluginname</code> (e.g.
-<code>&lt;div id=&quot;impress-toolbar&quot;&gt;</code>. The latter (longer) form also applies to all
-events, they should be prefixed with <code>impress:pluginname</code>.</p>
-<p>You should use crisp and descriptive names for your plugins. But
-sometimes you might optimize for a short namespace. Hence, the
-<a href="https://github.com/impress/impress.js/tree/master/src/plugins/rel/rel.js">Relative Positioning Plugin</a> is called <code>rel</code> to keep html attributes
-short. You should not overuse this idea!</p>
-<p>Note that for default plugins, which is all plugins in this directory,
-<strong>NO css, html or image files</strong> are allowed.</p>
-<p>Default plugins must not add any global variables.</p>
-<h3>Testing</h3>
-<p>The plugin directory should also include tests, which should use the <em>QUnit</em> and
-<em>Syn</em> libraries under <a href="https://github.com/impress/impress.js/tree/master/./test">test/</a>. You can have as many tests as you like,
-but it is suggested your first and main test file is called <code>plugina_tests.html</code>
-and <code>plugina_tests.js</code> respectively. You need to add your test <code>.js</code> file into
-<a href="https://github.com/impress/impress.js/tree/master/./qunit_test_runner.html">/qunit_test_runner.html</a>, and the <code>.js</code> file
-should start by loading the test <code>.html</code> file into the
-<code>iframe#presentation-iframe</code>. See <a href="https://github.com/impress/impress.js/tree/master/src/plugins/navigation-ui">navigation-ui</a> plugin for an
-example.</p>
-<p>You are allowed to test your plugin whatever way you like, but the general
-approach is for the test to load the <a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a> file
-produced by build.js. This way you are testing what users will actually be
-using, rather than the uncompiled source code.</p>
-<h2>HowTo write a plugin</h2>
-<h3>Encapsulation</h3>
-<p>To avoid polluting the global namespace, plugins must encapsulate them in the
-standard javascript anonymous function:</p>
-<pre><code>/**
- * Plugin A - An example plugin
- *
- * Description...
- *
- * Copyright 2016 Firstname Lastname, email or github handle
- * Released under the MIT license.
- */
-(function ( document, window ) {
-
-    // Plugin implementation...
-
-})(document, window);
-</code></pre>
-<h3>Init plugins</h3>
-<p>We categorize plugins into various categories, based on how and when they are
-called, and what they do.</p>
-<p>An init plugin is the simplest kind of plugin. It simply listens for the
-<code>impress().init()</code> method to send the <code>impress:init</code> event, at which point
-the plugin can initialize itself and start doing whatever it does, for example
-by calling methods in the public api returned by <code>impress()</code>.</p>
-<p>The <code>impress:init</code> event has the <code>div#impress</code> element as its <code>target</code> attribute,
-whereas <code>event.detail.api</code> contains the same object that is returned by calling
-<code>impress()</code>. It is customary to store the api object sent by the event rather than
-calling <code>impress()</code> from the global namespace.</p>
-<p>Example:</p>
-<pre><code>/**
- * Plugin A - An example plugin
- *
- * Description...
- *
- * Copyright 2016 Firstname Lastname, email or github handle
- * Released under the MIT license.
- */
-(function ( document, window ) {
-    var root;
-    var api;
-    var lib;
-
-    document.addEventListener( &quot;impress:init&quot;, function( event ) {
-        root = event.target;
-        api = event.detail.api;
-        lib = api.lib;
-
-        // Element attributes starting with &quot;data-&quot;, become available under
-        // element.dataset. In addition hyphenized words become camelCased.
-        var data = root.dataset;
-        // Get value of `&lt;div id=&quot;impress&quot; data-plugina-foo=&quot;...&quot;&gt;`
-        var foo = data.pluginaFoo;
-        // ...
-    }
-})(document, window);
-</code></pre>
-<p>Both <a href="https://github.com/impress/impress.js/tree/master/src/plugins/navigation/navigation.js">Navigation</a> and <a href="https://github.com/impress/impress.js/tree/master/src/plugins/autoplay/autoplay.js">Autoplay</a>
-are init plugins.</p>
-<p>To provide end user configurability in your plugin, a good idea might be to
-read html attributes from the impress presentation. The
-<a href="https://github.com/impress/impress.js/tree/master/src/plugins/autoplay/autoplay.js">Autoplay</a> plugin does exactly this, you can provide
-a default value in the <code>div#impress</code> element, or in each <code>div.step</code>.</p>
-<p>A plugin must only use html attributes in its designated namespace, which is</p>
-<pre><code>data-pluginName-*=&quot;value&quot;
-</code></pre>
-<p>For example, if <em>pluginA</em> offers config options <code>foo</code> and <code>bar</code>, it would look
-like this:</p>
-<pre><code>&lt;div id=&quot;impress&quot; data-plugina-foo=&quot;5&quot; data-plugina-bar=&quot;auto&quot; &gt;
-</code></pre>
-<h3>Pre-init plugins</h3>
-<p>Some plugins need to run before even impress().init() does anything. These
-are typically <em>filters</em>: they want to modify the html via DOM calls, before
-impress.js core parses the presentation. We call these <em>pre-init plugins</em>.</p>
-<p>A pre-init plugin must be called synchronously, before <code>impress().init()</code> is
-executed. Plugins can register themselves to be called in the pre-init phase
-by calling:</p>
-<pre><code>impress.addPreInitPlugin( plugin [, weight] );
-</code></pre>
-<p>The argument <code>plugin</code> must be a function. <code>weight</code> is optional and defaults to
-<code>10</code>. Plugins are ordered by weight when they are executed, with lower weight
-first.</p>
-<p>The <a href="https://github.com/impress/impress.js/tree/master/src/plugins/rel/rel.js">Relative Positioning Plugin</a> is an example of a pre-init plugin.</p>
-<h3>Pre-StepLeave plugins</h3>
-<p>A <em>pre-stepleave plugin</em> is called synchronously from impress.js core at the
-beginning of <code>impress().goto()</code>.</p>
-<p>To register a plugin, call</p>
-<pre><code>impress.addPreStepLeavePlugin( plugin [, weight] );
-</code></pre>
-<p>When the plugin function is executed, it will be passed an argument
-that resembles the <code>event</code> object from DOM event handlers:</p>
-<p><code>event.target</code> contains the current step, which we are about to leave.</p>
-<p><code>event.detail.next</code> contains the element we are about to transition to.</p>
-<p><code>event.detail.reason</code> contains a string, one of &quot;next&quot;, &quot;prev&quot; or &quot;goto&quot;,
-which tells you which API function was called to initiate the transition.</p>
-<p><code>event.detail.transitionDuration</code> contains the transitionDuration for the
-upcoming transition.</p>
-<p>A pre-stepleave plugin may alter the values in <code>event.detail</code> (except for
-<code>reason</code>), and this can change the behavior of the upcoming transition.
-For example, the <code>goto</code> plugin will set the <code>event.detail.next</code> to point to
-some other element, causing the presentation to jump to that step instead.</p>
-<h3>GUI plugins</h3>
-<p>A <em>GUI plugin</em> is actually just an init plugin, but is a special category that
-exposes visible widgets or effects in the presentation. For example, it might
-provide clickable buttons to go to the next and previous slide.</p>
-<p>Note that all plugins shipped in the default set <strong>must not</strong> produce any visible
-html elements unless the user asks for it. A recommended best practice is to let
-the user add a div element, with an id equaling the plugin's namespace, in the
-place where he wants to see whatever visual UI elements the plugin is providing:</p>
-<pre><code>&lt;div id=&quot;impress-plugina&quot;&gt;&lt;/div&gt;
-</code></pre>
-<p>Another way to show the elements of a UI plugin might be by allowing the user
-to explicitly press a key, like &quot;H&quot; for a help dialog.</p>
-<p><a href="/docs/plugins/toolbar">Toolbar plugin</a> is an example of a GUI plugin. It presents
-a toolbar where other plugins can add their buttons in a centralized fashion.</p>
-<p>Remember that for default plugins, even GUI plugins, no html files, css files
-or images are allowed. Everything must be generated from javascript. The idea
-is that users can theme widgets with their own CSS. (A plugin is of course welcome
-to provide example CSS that can be copypasted :-)</p>
-<h2>Dependencies</h2>
-<p>If <em>pluginB</em> depends on the existence of <em>pluginA</em>, and also <em>pluginA</em> must run
-before <em>pluginB</em>, then <em>pluginB</em> should not listen to the <code>impress:init</code> event,
-rather <em>pluginA</em> should send its own init event, which <em>pluginB</em> listens to.</p>
-<p>Example:</p>
-<pre><code>// pluginA
-document.addEventListener(&quot;impress:init&quot;, function (event) {
-    // plugin A does it's own initialization first...
-
-    // Signal other plugins that plugin A is now initialized
-    var root = document.querySelector( &quot;div#impress&quot; );
-    var event = document.createEvent(&quot;CustomEvent&quot;);
-    event.initCustomEvent(&quot;impress:plugina:init', true, true, { &quot;plugina&quot; : &quot;data...&quot; });
-    root.dispatchEvent(event);
-}, false);
-
-// pluginB
-document.addEventListener(&quot;impress:plugina:init&quot;, function (event) {
-    // plugin B implementation
-}, false);
-</code></pre>
-<p>A plugin should use the namespace <code>impress:pluginname:*</code> for any events it sends.</p>
-<p>In theory all plugins could always send an <code>init</code> and other events, but in
-practice we're adding them on an as needed basis.</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/media.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>media :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Media</h1>
-<p>This plugin will do the following things:</p>
-<ul>
-<li>Add a special class when playing (body.impress-media-video-playing and body.impress-media-video-playing) and pausing media (body.impress-media-video-paused and body.impress-media-audio-paused) (removing them when ending). This can be useful for example for darkening the background or fading out other elements while a video is playing. Only media at the current step are taken into account. All classes are removed when leaving a step.</li>
-<li>Introduce the following new data attributes:
-<ul>
-<li>data-media-autoplay=&quot;true&quot;: Autostart media when entering its step.</li>
-<li>data-media-autostop=&quot;true&quot;: Stop media (= pause and reset to start), when leaving its step.</li>
-<li>data-media-autopause=&quot;true&quot;: Pause media but keep current time when leaving its step.</li>
-</ul>
-</li>
-</ul>
-<p>When these attributes are added to a step they are inherited by all media on this step. Of course this setting can be overwritten by adding different attributes to inidvidual media.</p>
-<p>The same rule applies when this attributes is added to the root element. Settings can be overwritten for individual steps and media.
-Examples:</p>
-<ul>
-<li>data-media-autoplay=&quot;true&quot; data-media-autostop=&quot;true&quot;: start media on enter, stop on leave, restart from beginning when re-entering the step.</li>
-<li>data-media-autoplay=&quot;true&quot; data-media-autopause=&quot;true&quot;: start media on enter, pause on leave, resume on re-enter</li>
-<li>data-media-autoplay=&quot;true&quot; data-media-autostop=&quot;true&quot; data-media-autopause=&quot;true&quot;: start media on enter, stop on leave (stop overwrites pause).</li>
-<li>data-media-autoplay=&quot;true&quot; data-media-autopause=&quot;false&quot;: let media start automatically when entering a step and let it play when leaving the step.</li>
-<li><code>&lt;div id=&quot;impress&quot; data-media-autoplay=&quot;true&quot;&gt; ... &lt;div class=&quot;step&quot; data-media-autoplay=&quot;false&quot;&gt;</code>
-All media is startet automatically on all steps except the one that has the data-media-autoplay=&quot;false&quot; attribute.</li>
-<li>Pro tip: Use <code>&lt;audio onended=&quot;impress().next()&quot;&gt; or &lt;video onended=&quot;impress().next()&quot;&gt;</code> to proceed to the next step automatically, when the end of the media is reached.</li>
-</ul>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/mobile.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>mobile :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Mobile devices support</h1>
-<p>Presentations with a lot of 3D effects and graphics can consume a lot of resources, especially on mobile devices.
-This plugin provides some CSS classes that can be used to hide most of the slides, only showing the current, previous
-and next slide.</p>
-<p>In particular, this plugin adds:</p>
-<p><code>body.impress-mobile</code> class, if it detects running on a mobile OS.</p>
-<p><code>div.prev</code> and <code>div.prev</code> to the adjacent steps to the current one. Note that the current slide is already identified
-by <code>present</code> and <code>active</code> CSS classes.</p>
-<h2>Example CSS</h2>
-<pre><code>    body.impress-mobile .step { 
-        display:none;
-    }
-    body.impress-mobile .step.active,
-    body.impress-mobile .step.present,
-    body.impress-mobile .step.next,
-    body.impress-mobile .step.prev { 
-        display:block; 
-    }
-</code></pre>
-<h2>Note</h2>
-<p>This plugin does not take into account redirects that could happen with skip, goto and other plugins. The active
-step will of course always be correct, but &quot;non-linear&quot; transitions to anything else than the actual previous and next
-steps will probably not look correct.</p>
-<h2>Author</h2>
-<p>Kurt Zenisek (@KZeni)</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/mouse-timeout.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>mouse-timeout :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Mouse timeout plugin</h1>
-<p>After 3 seconds of mouse inactivity, add the css class
-<code>body.impress-mouse-timeout</code>. On <code>mousemove</code>, <code>click</code> or <code>touch</code>, remove the
-class.</p>
-<p>The use case for this plugin is to use CSS to hide elements from the screen
-and only make them visible when the mouse is moved. Examples where this
-might be used are: the toolbar from the toolbar plugin, and the mouse cursor
-itself.</p>
-<h2>Example CSS</h2>
-<pre><code>body.impress-mouse-timeout {
-    cursor: none;
-}
-body.impress-mouse-timeout div#impress-toolbar {
-    display: none;
-}
-</code></pre>
-<p>Copyright 2016 Henrik Ingo (@henrikingo)
-Released under the MIT license.</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/navigation-ui.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>navigation-ui :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Navigation UI plugin</h1>
-<p>This plugin provides UI elements &quot;back&quot;, &quot;forward&quot; and a list to select
-a specific slide number.</p>
-<p>Element attribut title is used for select option content if available, it uses element id if no title is provided.</p>
-<p>The navigation controls are visible if the toolbar plugin is enabled. To add the toolbar to your
-presentations, <a href="/docs/plugins/toolbar">see toolbar plugin README</a>.</p>
-<h2>Author</h2>
-<p>Henrik Ingo (@henrikingo), 2016</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/navigation.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>navigation :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Navigation</h1>
-<p>As you can see this part is separate from the impress.js core code.
-It's because these navigation actions only need what impress.js provides with
-its simple API.
-This plugin is what we call an <em>init plugin</em>. It's a simple kind of
-impress.js plugin. When loaded, it starts listening to the <code>impress:init</code>
-event. That event listener initializes the plugin functionality - in this
-case we listen to some keypress and mouse events. The only dependencies on
-core impress.js functionality is the <code>impress:init</code> method, as well as using
-the public api <code>next(), prev(),</code> etc when keys are pressed.
-Copyright 2011-2012 Bartek Szopka (@bartaz)
-Released under the MIT license.</p>
-<p><em><strong>Author:</strong></em></p>
-<p>Bartek Szopka</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>

website/docs/plugins/progress.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-    <html>
-        <head>
-        <title>progress :: plugins | DOCS - impress.js</title>
-        <!--I am using jquery for button animations.-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-        <script>hljs.highlightAll();</script>
-        <script src="/js/docs/loader.js"></script>
-        <link rel="stylesheet" href="/css/docs/style.css">
-        </head>
-        <body>
-            <div class="content">
-                <div id="nav"></div>
-                <div id="top"></div>
-                    <div id="docPage">
-                        <div id="doc-container">
-                        <h1>Progress plugin</h1>
-<p>Progressbar and pagexounter for impress.js presentations</p>
-<h2>Usage</h2>
-<p>Add a div for progressbar and/or progress as you can see it here:</p>
-<h3>HTML</h3>
-<pre><code>  &lt;div class=&quot;impress-progressbar&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
-  &lt;div class=&quot;impress-progress&quot;&gt;&lt;/div&gt;
-</code></pre>
-<h3>Sample CSS</h3>
-<pre><code>.impress-progressbar {
-  position: absolute;
-  right: 318px;
-  bottom: 1px;
-  left: 118px;
-  border-radius: 7px;
-  border: 2px solid rgba(100, 100, 100, 0.2);
-}
-.impress-progressbar DIV {
-  width: 0;
-  height: 2px;
-  border-radius: 5px;
-  background: rgba(75, 75, 75, 0.4);
-  transition: width 1s linear;
-}
-.impress-progress {
-  position: absolute;
-  left: 59px;
-  bottom: 1px;
-  text-align: left;
-  opacity: 0.6;
-}
-</code></pre>
-<p>Feel free to change the style of your progressbar as you like by editing the CSS file.</p>
-<h2>Author</h2>
-<p>Copyright 2014: Matthias Bilger (@m42e)</p>
-</div>
-                    </div>
-                <div id="footer"></div>
-            </div>
-        </body>
-    </html>