From 972dc413f37cc6e0593c5ecdb8411f4b2acb2da3 Mon Sep 17 00:00:00 2001 From: Falco Nogatz Date: Mon, 19 Dec 2022 16:55:17 +0100 Subject: [PATCH 1/3] Add .slideView or .preView classes in speaker console view (#827) --- css/impress-common.css | 17 +++++++++++++++++ js/impress.js | 9 +++++---- src/plugins/impressConsole/impressConsole.js | 9 +++++---- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/css/impress-common.css b/css/impress-common.css index f918473..6402376 100644 --- a/css/impress-common.css +++ b/css/impress-common.css @@ -93,6 +93,23 @@ It is focused on plugin functionality, not the visual style of your presentation padding-right: 1em; } +/* + We might want to hide the help, toolbar, progress and progress bar in the + preView window of the impressConsole that is displayed when you press P. +*/ +.impress-console.preView .impress-progress, +.impress-console.preView .impress-progressbar, +.impress-console.preView #impress-toolbar, +.impress-console.preView #impress-help { + display: none; +} +/* + Hide the help in the slideView as well. +*/ +.impress-console.slideView #impress-help { + display: none; +} + /* With help from the mouse-timeout plugin, we can hide the toolbar and have it show only when you move/click/touch the mouse. diff --git a/js/impress.js b/js/impress.js index 6a865c8..932d12b 100644 --- a/js/impress.js +++ b/js/impress.js @@ -2891,8 +2891,8 @@ var preView = consoleWindow.document.getElementById( 'preView' ); // Firefox: - slideView.contentDocument.body.classList.add( 'impress-console' ); - preView.contentDocument.body.classList.add( 'impress-console' ); + slideView.contentDocument.body.classList.add( 'impress-console', 'slideView' ); + preView.contentDocument.body.classList.add( 'impress-console', 'preView' ); if ( cssFileIframe !== undefined ) { slideView.contentDocument.head.insertAdjacentHTML( 'beforeend', @@ -2906,7 +2906,8 @@ // Chrome: slideView.addEventListener( 'load', function() { - slideView.contentDocument.body.classList.add( 'impress-console' ); + slideView.contentDocument.body.classList.add( 'impress-console', + 'slideView' ); if ( cssFileIframe !== undefined ) { slideView.contentDocument.head.insertAdjacentHTML( 'beforeend', @@ -2916,7 +2917,7 @@ } } ); preView.addEventListener( 'load', function() { - preView.contentDocument.body.classList.add( 'impress-console' ); + preView.contentDocument.body.classList.add( 'impress-console', 'preView' ); if ( cssFileIframe !== undefined ) { preView.contentDocument.head.insertAdjacentHTML( 'beforeend', diff --git a/src/plugins/impressConsole/impressConsole.js b/src/plugins/impressConsole/impressConsole.js index c00ee67..fd6594f 100644 --- a/src/plugins/impressConsole/impressConsole.js +++ b/src/plugins/impressConsole/impressConsole.js @@ -342,8 +342,8 @@ var preView = consoleWindow.document.getElementById( 'preView' ); // Firefox: - slideView.contentDocument.body.classList.add( 'impress-console' ); - preView.contentDocument.body.classList.add( 'impress-console' ); + slideView.contentDocument.body.classList.add( 'impress-console', 'slideView' ); + preView.contentDocument.body.classList.add( 'impress-console', 'preView' ); if ( cssFileIframe !== undefined ) { slideView.contentDocument.head.insertAdjacentHTML( 'beforeend', @@ -357,7 +357,8 @@ // Chrome: slideView.addEventListener( 'load', function() { - slideView.contentDocument.body.classList.add( 'impress-console' ); + slideView.contentDocument.body.classList.add( 'impress-console', + 'slideView' ); if ( cssFileIframe !== undefined ) { slideView.contentDocument.head.insertAdjacentHTML( 'beforeend', @@ -367,7 +368,7 @@ } } ); preView.addEventListener( 'load', function() { - preView.contentDocument.body.classList.add( 'impress-console' ); + preView.contentDocument.body.classList.add( 'impress-console', 'preView' ); if ( cssFileIframe !== undefined ) { preView.contentDocument.head.insertAdjacentHTML( 'beforeend', From 7817f12c12b36b1616e050b01e9451ce4de3342b Mon Sep 17 00:00:00 2001 From: Falco Nogatz Date: Fri, 23 Dec 2022 15:52:07 +0100 Subject: [PATCH 2/3] Allow multiple data-substep-order with the same value (#825) --- js/impress.js | 29 ++++++++++++++++++++++++++--- src/plugins/substep/substep.js | 29 ++++++++++++++++++++++++++--- 2 files changed, 52 insertions(+), 6 deletions(-) diff --git a/js/impress.js b/js/impress.js index 932d12b..ea02cbe 100644 --- a/js/impress.js +++ b/js/impress.js @@ -4692,9 +4692,24 @@ for ( var i = 0; i < substeps.length; i++ ) { substeps[ i ].classList.remove( "substep-active" ); } - var el = substeps[ visible.length ]; - el.classList.add( "substep-visible" ); - el.classList.add( "substep-active" ); + + // Loop over all substeps that are not yet visible and set + // those of currentSubstepOrder to visible and active + var el; + var currentSubstepOrder; + for ( var j = visible.length; j < substeps.length; j++ ) { + if ( currentSubstepOrder && + currentSubstepOrder !== substeps[ j ].dataset.substepOrder ) { + + // Stop if the substepOrder is greater + break; + } + el = substeps[ j ]; + currentSubstepOrder = el.dataset.substepOrder; + el.classList.add( "substep-visible" ); + el.classList.add( "substep-active" ); + } + return el; } }; @@ -4722,6 +4737,14 @@ } var el = visible[ visible.length - 1 ]; el.classList.remove( "substep-visible" ); + + // Continue if there is another substep with the same substepOrder + if ( current > 0 && + visible[ current - 1 ].dataset.substepOrder === + visible[ current ].dataset.substepOrder ) { + visible.pop(); + return hideSubstep( visible ); + } return el; } }; diff --git a/src/plugins/substep/substep.js b/src/plugins/substep/substep.js index 2f08250..d79253e 100644 --- a/src/plugins/substep/substep.js +++ b/src/plugins/substep/substep.js @@ -88,9 +88,24 @@ for ( var i = 0; i < substeps.length; i++ ) { substeps[ i ].classList.remove( "substep-active" ); } - var el = substeps[ visible.length ]; - el.classList.add( "substep-visible" ); - el.classList.add( "substep-active" ); + + // Loop over all substeps that are not yet visible and set + // those of currentSubstepOrder to visible and active + var el; + var currentSubstepOrder; + for ( var j = visible.length; j < substeps.length; j++ ) { + if ( currentSubstepOrder && + currentSubstepOrder !== substeps[ j ].dataset.substepOrder ) { + + // Stop if the substepOrder is greater + break; + } + el = substeps[ j ]; + currentSubstepOrder = el.dataset.substepOrder; + el.classList.add( "substep-visible" ); + el.classList.add( "substep-active" ); + } + return el; } }; @@ -118,6 +133,14 @@ } var el = visible[ visible.length - 1 ]; el.classList.remove( "substep-visible" ); + + // Continue if there is another substep with the same substepOrder + if ( current > 0 && + visible[ current - 1 ].dataset.substepOrder === + visible[ current ].dataset.substepOrder ) { + visible.pop(); + return hideSubstep( visible ); + } return el; } }; From 0e26510cb49e146ba4e075eacb696ee1413f85ea Mon Sep 17 00:00:00 2001 From: Janis Hutz <98422316+simplePCBuilding@users.noreply.github.com> Date: Wed, 1 Feb 2023 22:04:44 +0000 Subject: [PATCH 3/3] Npm readme (#836) --- README.md | 2 ++ npm-readme.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 npm-readme.md diff --git a/README.md b/README.md index b646acf..0944850 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,8 @@ impress.js may not help you if you have nothing interesting to say ;) HOW TO USE IT --------------- +### Getting Started Guide +Check out our new [Getting Started](GettingStarted.md) guide if you want a quick introduction to the project! ### Checking out and initializing the git repository diff --git a/npm-readme.md b/npm-readme.md new file mode 100644 index 0000000..83abf69 --- /dev/null +++ b/npm-readme.md @@ -0,0 +1,44 @@ +# impress.js +**What is impress.js?** + +impress.js is a javascript framework that uses the power of CSS 3 transforms and transitions in today's browsers and is inspired by the idea behind [prezi.com](https://prezi.com). + +**WARNING** + +impress.js may not help you if you have nothing interesting to say ;) + + +# How to use it +Run `npm i impress.js` to get the framework or head to our GitHub page and follow the instructions in the [README](/README.md) there. You may also use one of the links provided down below to include the script directly from a cdn. *Note:* This might not always work, so if it doesn't, just download the file and put it into a folder on your hard drive. + +## Direct links to only impress.js file +- 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 + +For older versions, please just replace the version number behind the @! + +## Getting Started guide +Alternative download instructions that are more exhaustive are also included in our new [Getting Started](/GettingStarted.md) file where you can also get an introduction to impress.js. + +## Demos +You can see a demo of the framework in action [here](https://impress.js.org). Additional examples may be found [here](https://impress.js.org/examples). + +# 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-2016 Bartek Szopka + +Copyright 2015-present Henrik Ingo + +Released under the MIT [License](https://github.com/impress/impress.js/blob/HEAD/LICENSE)