Introduce plugin framework
* Source files are under src/ * js/impress.js is now generated, but remains part of the repo (so it just works) * npm run build * build.js uses buildify node module * Break out navigation and resize plugins from core src/impress.js file
This commit is contained in:
Henrik Ingo
174
src/plugins/navigation/navigation.js
Normal file
174
src/plugins/navigation/navigation.js
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* Navigation events plugin
|
||||
*
|
||||
* 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 _init plugin_. It's a simple kind of
|
||||
* impress.js plugin. When loaded, it starts listening to the `impress:init`
|
||||
* 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 `impress:init` method, as well as using
|
||||
* the public api `next(), prev(),` etc when keys are pressed.
|
||||
*
|
||||
* Copyright 2011-2012 Bartek Szopka (@bartaz)
|
||||
* Released under the MIT license.
|
||||
* ------------------------------------------------
|
||||
* author: Bartek Szopka
|
||||
* version: 0.5.3
|
||||
* url: http://bartaz.github.com/impress.js/
|
||||
* source: http://github.com/bartaz/impress.js/
|
||||
*
|
||||
*/
|
||||
/* global document */
|
||||
( function( document ) {
|
||||
"use strict";
|
||||
|
||||
var triggerEvent = function( el, eventName, detail ) {
|
||||
var event = document.createEvent( "CustomEvent" );
|
||||
event.initCustomEvent( eventName, true, true, detail );
|
||||
el.dispatchEvent( event );
|
||||
};
|
||||
|
||||
// Wait for impress.js to be initialized
|
||||
document.addEventListener( "impress:init", function( event ) {
|
||||
|
||||
// Getting API from event data.
|
||||
// So you don't event need to know what is the id of the root element
|
||||
// or anything. `impress:init` event data gives you everything you
|
||||
// need to control the presentation that was just initialized.
|
||||
var api = event.detail.api;
|
||||
|
||||
// Supported keys are:
|
||||
// [space] - quite common in presentation software to move forward
|
||||
// [up] [right] / [down] [left] - again common and natural addition,
|
||||
// [pgdown] / [pgup] - often triggered by remote controllers,
|
||||
// [tab] - this one is quite controversial, but the reason it ended up on
|
||||
// this list is quite an interesting story... Remember that strange part
|
||||
// in the impress.js code where window is scrolled to 0,0 on every presentation
|
||||
// step, because sometimes browser scrolls viewport because of the focused element?
|
||||
// Well, the [tab] key by default navigates around focusable elements, so clicking
|
||||
// it very often caused scrolling to focused element and breaking impress.js
|
||||
// positioning. I didn't want to just prevent this default action, so I used [tab]
|
||||
// as another way to moving to next step... And yes, I know that for the sake of
|
||||
// consistency I should add [shift+tab] as opposite action...
|
||||
var isNavigationEvent = function( event ) {
|
||||
|
||||
// Don't trigger navigation for example when user returns to browser window with ALT+TAB
|
||||
if ( event.altKey || event.ctrlKey || event.metaKey ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// In the case of TAB, we force step navigation always, overriding the browser
|
||||
// navigation between input elements, buttons and links.
|
||||
if ( event.keyCode === 9 ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// With the sole exception of TAB, we also ignore keys pressed if shift is down.
|
||||
if ( event.shiftKey ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// For arrows, etc, check that event target is html or body element. This is to allow
|
||||
// presentations to have, for example, forms with input elements where user can type
|
||||
// text, including space, and not move to next step.
|
||||
if ( event.target.nodeName !== "BODY" && event.target.nodeName !== "HTML" ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( ( event.keyCode >= 32 && event.keyCode <= 34 ) ||
|
||||
( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
// KEYBOARD NAVIGATION HANDLERS
|
||||
|
||||
// Prevent default keydown action when one of supported key is pressed.
|
||||
document.addEventListener( "keydown", function( event ) {
|
||||
if ( isNavigationEvent( event ) ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Trigger impress action (next or prev) on keyup.
|
||||
document.addEventListener( "keyup", function( event ) {
|
||||
if ( isNavigationEvent( event ) ) {
|
||||
if ( event.shiftKey ) {
|
||||
switch ( event.keyCode ) {
|
||||
case 9: // Shift+tab
|
||||
api.prev();
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch ( event.keyCode ) {
|
||||
case 33: // Pg up
|
||||
case 37: // Left
|
||||
case 38: // Up
|
||||
api.prev( event );
|
||||
break;
|
||||
case 9: // Tab
|
||||
case 32: // Space
|
||||
case 34: // Pg down
|
||||
case 39: // Right
|
||||
case 40: // Down
|
||||
api.next( event );
|
||||
break;
|
||||
}
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Delegated handler for clicking on the links to presentation steps
|
||||
document.addEventListener( "click", function( event ) {
|
||||
|
||||
// Event delegation with "bubbling"
|
||||
// check if event target (or any of its parents is a link)
|
||||
var target = event.target;
|
||||
while ( ( target.tagName !== "A" ) &&
|
||||
( target !== document.documentElement ) ) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if ( target.tagName === "A" ) {
|
||||
var href = target.getAttribute( "href" );
|
||||
|
||||
// If it's a link to presentation step, target this step
|
||||
if ( href && href[ 0 ] === "#" ) {
|
||||
target = document.getElementById( href.slice( 1 ) );
|
||||
}
|
||||
}
|
||||
|
||||
if ( api.goto( target ) ) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Delegated handler for clicking on step elements
|
||||
document.addEventListener( "click", function( event ) {
|
||||
var target = event.target;
|
||||
|
||||
// Find closest step element that is not active
|
||||
while ( !( target.classList.contains( "step" ) &&
|
||||
!target.classList.contains( "active" ) ) &&
|
||||
( target !== document.documentElement ) ) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if ( api.goto( target ) ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Add a line to the help popup
|
||||
triggerEvent( document, "impress:help:add",
|
||||
{ command: "Left & Right", text: "Previous & Next step", row: 1 } );
|
||||
|
||||
}, false );
|
||||
|
||||
} )( document );
|
||||
|
||||
169
src/plugins/navigation/navigation_tests.js
Normal file
169
src/plugins/navigation/navigation_tests.js
Normal file
@@ -0,0 +1,169 @@
|
||||
/*
|
||||
* Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
*
|
||||
* Released under the MIT license. See LICENSE file.
|
||||
*/
|
||||
/* global QUnit, loadIframe, initPresentation, document, window */
|
||||
|
||||
QUnit.module( "Navigation plugin" );
|
||||
|
||||
QUnit.test( "Navigation Plugin", function( assert ) {
|
||||
window.console.log( "Begin navigation plugin" );
|
||||
var done = assert.async();
|
||||
|
||||
loadIframe( "test/core_tests_presentation.html", assert, function() {
|
||||
initPresentation( assert, function() {
|
||||
var iframe = document.getElementById( "presentation-iframe" );
|
||||
var iframeDoc = iframe.contentDocument;
|
||||
var iframeWin = iframe.contentWindow;
|
||||
|
||||
var wait = 5; // Milliseconds
|
||||
|
||||
var step1 = iframeDoc.querySelector( "div#step-1" );
|
||||
var step2 = iframeDoc.querySelector( "div#step-2" );
|
||||
var step3 = iframeDoc.querySelector( "div#step-3" );
|
||||
var step4 = iframeDoc.querySelector( "div#fourth" );
|
||||
var root = iframeDoc.querySelector( "div#impress" );
|
||||
|
||||
var i = 0;
|
||||
var sequence = [ { left: step1,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", " " ); },
|
||||
text: "space (2->3)" },
|
||||
{ left: step2,
|
||||
entered: step3,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[right]" ); },
|
||||
text: "[right] (3->4)" },
|
||||
{ left: step3,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "\t" ); },
|
||||
text: "tab (4->1)" },
|
||||
{ left: step4,
|
||||
entered: step1,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[down]" ); },
|
||||
text: "[down] (1->2)" },
|
||||
{ left: step1,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[page-down]" ); },
|
||||
text: "[page-down] (2->3)" },
|
||||
{ left: step2,
|
||||
entered: step3,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[page-up]" ); },
|
||||
text: "[page-up] (3->2)" },
|
||||
{ left: step3,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[left]" ); },
|
||||
text: "[left] (2->1)" },
|
||||
{ left: step2,
|
||||
entered: step1,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[up]" ); },
|
||||
text: "[up] (1->4)" },
|
||||
{ left: step1,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.syn.click( "step-2", {} ); },
|
||||
text: "click on 2 (4->2)" },
|
||||
{ left: step4,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.click( "linktofourth", {} ); },
|
||||
text: "click on link with href to id=fourth (2->4)" },
|
||||
{ left: step2,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.impress().goto( 0 ); },
|
||||
text: "Return to first step with goto(0)." },
|
||||
{ left: step4,
|
||||
entered: step1,
|
||||
next: false }
|
||||
];
|
||||
|
||||
var readyCount = 0;
|
||||
var readyForNext = function() {
|
||||
readyCount++;
|
||||
if ( readyCount % 2 === 0 ) {
|
||||
if ( sequence[ i ].next ) {
|
||||
assert.ok( sequence[ i ].next(), sequence[ i ].text );
|
||||
i++;
|
||||
} else {
|
||||
window.console.log( "End navigation plugin" );
|
||||
done();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Things to check on impress:stepenter event -----------------------------//
|
||||
var assertStepEnter = function( event ) {
|
||||
assert.equal( event.target, sequence[ i ].entered,
|
||||
event.target.id + " triggered impress:stepenter event." );
|
||||
readyForNext();
|
||||
};
|
||||
|
||||
var assertStepEnterWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepEnter( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepenter", assertStepEnterWrapper );
|
||||
|
||||
// Things to check on impress:stepleave event -----------------------------//
|
||||
var assertStepLeave = function( event ) {
|
||||
assert.equal( event.target, sequence[ i ].left,
|
||||
event.target.id + " triggered impress:stepleave event." );
|
||||
readyForNext();
|
||||
};
|
||||
|
||||
var assertStepLeaveWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepLeave( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepleave", assertStepLeaveWrapper );
|
||||
|
||||
assert.ok( iframeWin.impress().next(), "next() called and returns ok (1->2)" );
|
||||
} ); // InitPresentation()
|
||||
} ); // LoadIframe()
|
||||
} );
|
||||
|
||||
QUnit.test( "Navigation Plugin - No-op tests", function( assert ) {
|
||||
window.console.log( "Begin navigation no-op" );
|
||||
var done = assert.async();
|
||||
|
||||
loadIframe( "test/core_tests_presentation.html", assert, function() {
|
||||
initPresentation( assert, function() {
|
||||
var iframe = document.getElementById( "presentation-iframe" );
|
||||
var iframeDoc = iframe.contentDocument;
|
||||
var iframeWin = iframe.contentWindow;
|
||||
|
||||
var wait = 5; // Milliseconds
|
||||
|
||||
var root = iframeDoc.querySelector( "div#impress" );
|
||||
|
||||
// This should never happen -----------------------------//
|
||||
var assertStepEnter = function( event ) {
|
||||
assert.ok( false,
|
||||
event.target.id + " triggered impress:stepenter event." );
|
||||
};
|
||||
|
||||
var assertStepEnterWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepEnter( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepenter", assertStepEnterWrapper );
|
||||
|
||||
// This should never happen -----------------------------//
|
||||
var assertStepLeave = function( event ) {
|
||||
assert.ok( false,
|
||||
event.target.id + " triggered impress:stepleave event." );
|
||||
};
|
||||
|
||||
var assertStepLeaveWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepLeave( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepleave", assertStepLeaveWrapper );
|
||||
|
||||
// These are no-op actions, we're already in step-1 -----------------------//
|
||||
assert.ok( iframeWin.syn.click( "step-1", {} ),
|
||||
"Click on step that is currently active, should do nothing." );
|
||||
assert.ok( iframeWin.syn.click( "linktofirst", {} ),
|
||||
"Click on link pointing to step that is currently active, should do nothing." );
|
||||
|
||||
// After delay, if no event triggers are called. We're done.
|
||||
window.setTimeout( function() {
|
||||
window.console.log( "End navigation no-op" ); done();
|
||||
}, 3000 );
|
||||
} ); // InitPresentation()
|
||||
} ); // LoadIframe()
|
||||
} );
|
||||
Reference in New Issue
Block a user