diff --git a/js/impress.js b/js/impress.js index 6a865c8..ea02cbe 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', @@ -4691,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; } }; @@ -4721,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/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) 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', 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; } }; diff --git a/website/demo/css/impress-common.css b/website/demo/css/impress-common.css index f918473..6402376 100644 --- a/website/demo/css/impress-common.css +++ b/website/demo/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.