Add skip plugin
Add class="skip" to a step to cause the step to be skipped when nagivating with prev() and next(). A goto() to the step will still work.
This commit is contained in:
20
src/plugins/skip/README.md
Normal file
20
src/plugins/skip/README.md
Normal file
@@ -0,0 +1,20 @@
|
||||
Skip Plugin
|
||||
===========
|
||||
|
||||
Example:
|
||||
|
||||
<!-- This slide is disabled in presentations, when moving with next()
|
||||
and prev() commands, but you can still move directly to it, for
|
||||
example with a url (anything using goto()). -->
|
||||
<div class="step skip">
|
||||
|
||||
The skip plugin is a pre-stepleave plugin. It is executed before
|
||||
`impress:stepleave` event. If the next step also has `class="skip"`
|
||||
set, it will set the next step to the one after that.
|
||||
|
||||
Author
|
||||
------
|
||||
|
||||
Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
Released under the MIT license.
|
||||
|
||||
84
src/plugins/skip/skip.js
Normal file
84
src/plugins/skip/skip.js
Normal file
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Skip Plugin
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* <!-- This slide is disabled in presentations, when moving with next()
|
||||
* and prev() commands, but you can still move directly to it, for
|
||||
* example with a url (anything using goto()). -->
|
||||
* <div class="step skip">
|
||||
*
|
||||
* Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
* Released under the MIT license.
|
||||
*/
|
||||
|
||||
/* global document, window */
|
||||
|
||||
( function( document, window ) {
|
||||
"use strict";
|
||||
var util;
|
||||
|
||||
document.addEventListener( "impress:init", function( event ) {
|
||||
util = event.detail.api.lib.util;
|
||||
}, false );
|
||||
|
||||
var getNextStep = function( el ) {
|
||||
var steps = document.querySelectorAll( ".step" );
|
||||
for ( var i = 0; i < steps.length; i++ ) {
|
||||
if ( steps[ i ] === el ) {
|
||||
if ( i + 1 < steps.length ) {
|
||||
return steps[ i + 1 ];
|
||||
} else {
|
||||
return steps[ 0 ];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
var getPrevStep = function( el ) {
|
||||
var steps = document.querySelectorAll( ".step" );
|
||||
for ( var i = steps.length - 1; i >= 0; i-- ) {
|
||||
if ( steps[ i ] === el ) {
|
||||
if ( i - 1 >= 0 ) {
|
||||
return steps[ i - 1 ];
|
||||
} else {
|
||||
return steps[ steps.length - 1 ];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var skip = function( event ) {
|
||||
if ( ( !event ) || ( !event.target ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( event.detail.next.classList.contains( "skip" ) ) {
|
||||
if ( event.detail.reason === "next" ) {
|
||||
|
||||
// Go to the next next step instead
|
||||
event.detail.next = getNextStep( event.detail.next );
|
||||
|
||||
// Recursively call this plugin again, until there's a step not to skip
|
||||
skip( event );
|
||||
} else if ( event.detail.reason === "prev" ) {
|
||||
|
||||
// Go to the previous previous step instead
|
||||
event.detail.next = getPrevStep( event.detail.next );
|
||||
skip( event );
|
||||
}
|
||||
|
||||
// If the new next element has its own transitionDuration, we're responsible for setting
|
||||
// that on the event as well
|
||||
event.detail.transitionDuration = util.toNumber(
|
||||
event.detail.next.dataset.transitionDuration, event.detail.transitionDuration
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Register the plugin to be called in pre-stepleave phase
|
||||
// The weight makes this plugin run early. This is a good thing, because this plugin calls
|
||||
// itself recursively.
|
||||
window.impress.addPreStepLeavePlugin( skip, 1 );
|
||||
|
||||
} )( document, window );
|
||||
|
||||
Reference in New Issue
Block a user