| /** |
| * 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) |
| * |
| * Released under the MIT and GPL Licenses. |
| * |
| * ------------------------------------------------ |
| * author: Bartek Szopka |
| * version: 0.5.3 |
| * url: http://bartaz.github.com/impress.js/ |
| * source: http://github.com/bartaz/impress.js/ |
| */ |
| |
| /*jshint bitwise:true, curly:true, eqeqeq:true, forin:true, latedef:true, newcap:true, |
| noarg:true, noempty:true, undef:true, strict:true, browser:true */ |
| |
| // You are one of those who like to know how thing work inside? |
| // Let me show you the cogs that make impress.js run... |
| (function ( document, window ) { |
| 'use strict'; |
| |
| // 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 ]; |
| }; |
| |
| })(); |
| |
| // `arraify` takes an array-like object and turns it into real Array |
| // to make all the Array.prototype goodness available. |
| var arrayify = function ( a ) { |
| return [].slice.call( a ); |
| }; |
| |
| // `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; |
| }; |
| |
| // `toNumber` takes a value given as `numeric` parameter and tries to turn |
| // it into a number. If it is not possible it returns 0 (or other value |
| // given as `fallback`). |
| var toNumber = function (numeric, fallback) { |
| return isNaN(numeric) ? (fallback || 0) : Number(numeric); |
| }; |
| |
| // `byId` returns element with given `id` - you probably have guessed that ;) |
| var byId = function ( id ) { |
| return document.getElementById(id); |
| }; |
| |
| // `$` returns first element for given CSS `selector` in the `context` of |
| // the given element or whole document. |
| var $ = function ( selector, context ) { |
| context = context || document; |
| return context.querySelector(selector); |
| }; |
| |
| // `$$` return an array of elements for given CSS `selector` in the `context` of |
| // the given element or whole document. |
| var $$ = function ( selector, context ) { |
| context = context || document; |
| return arrayify( context.querySelectorAll(selector) ); |
| }; |
| |
| // `triggerEvent` builds a custom DOM event with given `eventName` and `detail` data |
| // and triggers it on element given as `el`. |
| var triggerEvent = function (el, eventName, detail) { |
| var event = document.createEvent("CustomEvent"); |
| event.initCustomEvent(eventName, true, true, detail); |
| el.dispatchEvent(event); |
| }; |
| |
| // `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 rX = " rotateX(" + r.x + "deg) ", |
| rY = " rotateY(" + r.y + "deg) ", |
| rZ = " rotateZ(" + r.z + "deg) "; |
| |
| return revert ? rZ+rY+rX : rX+rY+rZ; |
| }; |
| |
| // `scale` builds a scale transform string for given data. |
| var scale = function ( s ) { |
| return " scale(" + s + ") "; |
| }; |
| |
| // `perspective` builds a perspective transform string for given data. |
| var perspective = function ( p ) { |
| return " perspective(" + p + "px) "; |
| }; |
| |
| // `getElementFromHash` returns an element located by id from hash part of |
| // window location. |
| var getElementFromHash = function () { |
| // get id from url # by removing `#` or `#/` from the beginning, |
| // so both "fallback" `#slide-id` and "enhanced" `#/slide-id` will work |
| return byId( window.location.hash.replace(/^#\/?/,"") ); |
| }; |
| |
| // `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 ua = navigator.userAgent.toLowerCase(); |
| var impressSupported = |
| // browser should support CSS 3D transtorms |
| ( pfx("perspective") !== null ) && |
| |
| // and `classList` and `dataset` APIs |
| ( body.classList ) && |
| ( body.dataset ) && |
| |
| // but some mobile devices need to be blacklisted, |
| // because their CSS 3D support or hardware is not |
| // good enough to run impress.js properly, sorry... |
| ( ua.search(/(iphone)|(ipod)|(android)/) === -1 ); |
| |
| if (!impressSupported) { |
| // we can't be sure that `classList` is supported |
| body.className += " impress-not-supported "; |
| } else { |
| body.classList.remove("impress-not-supported"); |
| body.classList.add("impress-supported"); |
| } |
| |
| // GLOBALS AND DEFAULTS |
| |
| // This is were 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 = {}; |
| |
| // some default config values. |
| var defaults = { |
| width: 1024, |
| height: 768, |
| maxScale: 1, |
| minScale: 0, |
| |
| perspective: 1000, |
| |
| transitionDuration: 1000 |
| }; |
| |
| // 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 |
| }; |
| } |
| |
| rootId = rootId || "impress"; |
| |
| // if given root is already initialized just return the API |
| if (roots["impress-root-" + rootId]) { |
| return roots["impress-root-" + rootId]; |
| } |
| |
| // 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; |
| |
| // configuration options |
| var config = null; |
| |
| // scale factor of the browser window |
| var windowScale = null; |
| |
| // root presentation elements |
| var root = 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. |
| var onStepEnter = function (step) { |
| if (lastEntered !== step) { |
| triggerEvent(step, "impress:stepenter"); |
| lastEntered = step; |
| } |
| }; |
| |
| // `onStepLeave` is called whenever the step element is left |
| // but the event is triggered only if the step is the same as |
| // last entered step. |
| var onStepLeave = function (step) { |
| if (lastEntered === step) { |
| triggerEvent(step, "impress:stepleave"); |
| 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: toNumber(data.x), |
| y: toNumber(data.y), |
| z: toNumber(data.z) |
| }, |
| rotate: { |
| x: toNumber(data.rotateX), |
| y: toNumber(data.rotateY), |
| z: toNumber(data.rotateZ || data.rotate) |
| }, |
| scale: toNumber(data.scale, 1), |
| 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" |
| }); |
| }; |
| |
| // `init` API function that initializes (and runs) the presentation. |
| var init = function () { |
| if (initialized) { return; } |
| |
| // First we set up the viewport for mobile devices. |
| // For some reason iPad goes nuts when it is not done properly. |
| var meta = $("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); |
| } |
| |
| // initialize configuration object |
| var rootData = root.dataset; |
| config = { |
| width: toNumber( rootData.width, defaults.width ), |
| height: toNumber( rootData.height, defaults.height ), |
| maxScale: toNumber( rootData.maxScale, defaults.maxScale ), |
| minScale: toNumber( rootData.minScale, defaults.minScale ), |
| perspective: toNumber( rootData.perspective, defaults.perspective ), |
| transitionDuration: toNumber( rootData.transitionDuration, defaults.transitionDuration ) |
| }; |
| |
| windowScale = computeWindowScale( config ); |
| |
| // wrap steps with "canvas" element |
| 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%", |
| transform: perspective( config.perspective/windowScale ) + scale( windowScale ) |
| }); |
| css(canvas, rootStyles); |
| |
| body.classList.remove("impress-disabled"); |
| body.classList.add("impress-enabled"); |
| |
| // get and init steps |
| steps = $$(".step", root); |
| steps.forEach( initStep ); |
| |
| // set a default initial state of the canvas |
| currentState = { |
| translate: { x: 0, y: 0, z: 0 }, |
| rotate: { x: 0, y: 0, z: 0 }, |
| scale: 1 |
| }; |
| |
| initialized = true; |
| |
| 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 = 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 with `el` parameter (by index, id or element), |
| // with a transition `duration` optionally given as second parameter. |
| var goto = function ( el, duration ) { |
| |
| if ( !initialized || !(el = getStep(el)) ) { |
| // presentation not initialized or given element is not a step |
| 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]; |
| |
| 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 |
| }, |
| 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 = 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); |
| } |
| |
| // 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 |
| transform: perspective( config.perspective / targetScale ) + 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) |
| var prev = function () { |
| var prev = steps.indexOf( activeStep ) - 1; |
| prev = prev >= 0 ? steps[ prev ] : steps[ steps.length-1 ]; |
| |
| return goto(prev); |
| }; |
| |
| // `next` API function goes to next step (in document order) |
| var next = function () { |
| var next = steps.indexOf( activeStep ) + 1; |
| next = next < steps.length ? steps[ next ] : steps[ 0 ]; |
| |
| return goto(next); |
| }; |
| |
| // 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. |
| root.addEventListener("impress:init", function(){ |
| // STEP CLASSES |
| steps.forEach(function (step) { |
| step.classList.add("future"); |
| }); |
| |
| root.addEventListener("impress:stepenter", function (event) { |
| event.target.classList.remove("past"); |
| event.target.classList.remove("future"); |
| event.target.classList.add("present"); |
| }, false); |
| |
| root.addEventListener("impress:stepleave", function (event) { |
| event.target.classList.remove("present"); |
| event.target.classList.add("past"); |
| }, false); |
| |
| }, false); |
| |
| // Adding hash change support. |
| root.addEventListener("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 transtion laggy. |
| // BUG: http://code.google.com/p/chromium/issues/detail?id=62820 |
| root.addEventListener("impress:stepenter", function (event) { |
| window.location.hash = lastHash = "#/" + event.target.id; |
| }, false); |
| |
| window.addEventListener("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( getElementFromHash() ); |
| } |
| }, false); |
| |
| // START |
| // by selecting step defined in url or first step of the presentation |
| goto(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 |
| }); |
| |
| }; |
| |
| // flag that can be used in JS to check if browser have passed the support test |
| impress.supported = impressSupported; |
| |
| })(document, window); |
| |
| // NAVIGATION EVENTS |
| |
| // 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. |
| // |
| // In future I think about moving it to make them optional, move to separate files |
| // and treat more like a 'plugins'. |
| (function ( document, window ) { |
| 'use strict'; |
| |
| // throttling function calls, by Remy Sharp |
| // http://remysharp.com/2010/07/21/throttling-function-calls/ |
| var throttle = function (fn, delay) { |
| var timer = null; |
| return function () { |
| var context = this, args = arguments; |
| clearTimeout(timer); |
| timer = setTimeout(function () { |
| fn.apply(context, args); |
| }, delay); |
| }; |
| }; |
| |
| // 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; |
| |
| // KEYBOARD NAVIGATION HANDLERS |
| |
| // Prevent default keydown action when one of supported key is pressed. |
| document.addEventListener("keydown", function ( event ) { |
| if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) { |
| event.preventDefault(); |
| } |
| }, false); |
| |
| // Trigger impress action (next or prev) on keyup. |
| |
| // 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... |
| document.addEventListener("keyup", function ( event ) { |
| if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) { |
| switch( event.keyCode ) { |
| case 33: // pg up |
| case 37: // left |
| case 38: // up |
| api.prev(); |
| break; |
| case 9: // tab |
| case 32: // space |
| case 34: // pg down |
| case 39: // right |
| case 40: // down |
| api.next(); |
| 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); |
| |
| // touch handler to detect taps on the left and right side of the screen |
| // based on awesome work of @hakimel: https://github.com/hakimel/reveal.js |
| document.addEventListener("touchstart", function ( event ) { |
| if (event.touches.length === 1) { |
| var x = event.touches[0].clientX, |
| width = window.innerWidth * 0.3, |
| result = null; |
| |
| if ( x < width ) { |
| result = api.prev(); |
| } else if ( x > window.innerWidth - width ) { |
| result = api.next(); |
| } |
| |
| if (result) { |
| event.preventDefault(); |
| } |
| } |
| }, false); |
| |
| // rescale presentation when window is resized |
| window.addEventListener("resize", throttle(function () { |
| // force going to active step again, to trigger rescaling |
| api.goto( document.querySelector(".step.active"), 500 ); |
| }, 250), false); |
| |
| }, 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. |
