├── LICENSE ├── src ├── otf-fragment-order.coffee ├── otf-fragment-order.js.map └── otf-fragment-order.js └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Sonaryr 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /src/otf-fragment-order.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | otf-fragment-order.coffee 3 | http://www.waxam.be 4 | MIT Licensed 5 | 6 | Copyright (C) 2015 Maarten Schroeven 7 | ### 8 | CURRENT_INDEX = -1 9 | showFragment = (event) -> 10 | if 48 <= event.keyCode <= 57 11 | index = event.keyCode - 48 12 | index = 10 if index is 0 13 | currentSlide = Reveal.getCurrentSlide() 14 | fragment = currentSlide.querySelector ".fragment[data-otf-fragment-order-index=\"#{index}\"]" 15 | 16 | if fragment?.className.indexOf('visible') is -1 17 | CURRENT_INDEX++ 18 | otherFragment = currentSlide.querySelector ".fragment[data-fragment-index=\"#{CURRENT_INDEX}\"]" 19 | if otherFragment? 20 | otherFragment.setAttribute 'data-fragment-index', fragment.getAttribute('data-fragment-index') 21 | fragment.setAttribute 'data-fragment-index', CURRENT_INDEX 22 | Reveal.nextFragment() 23 | 24 | toggleKeyListener = -> 25 | currentSlide = Reveal.getCurrentSlide() 26 | if currentSlide?.hasAttribute 'data-otf-fragment-order-slide' 27 | CURRENT_INDEX = -1 28 | document.addEventListener 'keydown', showFragment 29 | else 30 | document.removeEventListener 'keydown', showFragment 31 | 32 | addDataAttributes = -> 33 | fragments = Array.prototype.slice.call(document.querySelectorAll 'section[data-otf-fragment-order-slide] .fragment') 34 | fragments.forEach (fragment)-> 35 | fragment.setAttribute 'data-otf-fragment-order-index', parseInt(fragment.getAttribute('data-fragment-index'))+1 36 | 37 | config = Reveal.getConfig() 38 | if config?.otfFragmentOrder? is true 39 | addDataAttributes() 40 | toggleKeyListener() 41 | Reveal.addEventListener 'slidechanged', (evt) -> 42 | if not evt.previousSlide? or evt.previousSlide.className.indexOf 'past' > -1 43 | toggleKeyListener() -------------------------------------------------------------------------------- /src/otf-fragment-order.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "otf-fragment-order.js", 4 | "sourceRoot": "", 5 | "sources": [ 6 | "otf-fragment-order.coffee" 7 | ], 8 | "names": [], 9 | "mappings": ";AAAA;AAAA;;;;;;GAAA;AAAA;AAAA;AAAA,MAAA,yEAAA;;AAAA,EAOA,aAAA,GAAgB,CAAA,CAPhB,CAAA;;AAAA,EAQA,YAAA,GAAe,SAAC,KAAD,GAAA;AACb,QAAA,kDAAA;AAAA,IAAA,IAAG,CAAA,EAAA,YAAM,KAAK,CAAC,QAAZ,QAAA,IAAuB,EAAvB,CAAH;AACE,MAAA,KAAA,GAAQ,KAAK,CAAC,OAAN,GAAgB,EAAxB,CAAA;AACA,MAAA,IAAc,KAAA,KAAS,CAAvB;AAAA,QAAA,KAAA,GAAQ,EAAR,CAAA;OADA;AAAA,MAEA,YAAA,GAAe,MAAM,CAAC,eAAP,CAAA,CAFf,CAAA;AAAA,MAGA,QAAA,GAAW,YAAY,CAAC,aAAb,CAA4B,4CAAA,GAA4C,KAA5C,GAAkD,KAA9E,CAHX,CAAA;AAKA,MAAA,wBAAG,QAAQ,CAAE,SAAS,CAAC,OAApB,CAA4B,SAA5B,WAAA,KAA0C,CAAA,CAA7C;AACE,QAAA,aAAA,EAAA,CAAA;AAAA,QACA,aAAA,GAAgB,YAAY,CAAC,aAAb,CAA4B,kCAAA,GAAkC,aAAlC,GAAgD,KAA5E,CADhB,CAAA;AAEA,QAAA,IAAG,qBAAH;AACE,UAAA,aAAa,CAAC,YAAd,CAA2B,qBAA3B,EAAkD,QAAQ,CAAC,YAAT,CAAsB,qBAAtB,CAAlD,CAAA,CAAA;AAAA,UACA,QAAQ,CAAC,YAAT,CAAsB,qBAAtB,EAA6C,aAA7C,CADA,CAAA;iBAEA,MAAM,CAAC,YAAP,CAAA,EAHF;SAHF;OANF;KADa;EAAA,CARf,CAAA;;AAAA,EAuBA,iBAAA,GAAoB,SAAA,GAAA;AAClB,QAAA,YAAA;AAAA,IAAA,YAAA,GAAe,MAAM,CAAC,eAAP,CAAA,CAAf,CAAA;AACA,IAAA,2BAAG,YAAY,CAAE,YAAd,CAA2B,+BAA3B,UAAH;AACE,MAAA,aAAA,GAAgB,CAAA,CAAhB,CAAA;aACA,QAAQ,CAAC,gBAAT,CAA0B,SAA1B,EAAqC,YAArC,EAFF;KAAA,MAAA;aAIE,QAAQ,CAAC,mBAAT,CAA6B,SAA7B,EAAwC,YAAxC,EAJF;KAFkB;EAAA,CAvBpB,CAAA;;AAAA,EA+BA,iBAAA,GAAoB,SAAA,GAAA;AAClB,QAAA,SAAA;AAAA,IAAA,SAAA,GAAY,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAtB,CAA2B,QAAQ,CAAC,gBAAT,CAA0B,kDAA1B,CAA3B,CAAZ,CAAA;WACA,SAAS,CAAC,OAAV,CAAkB,SAAC,QAAD,GAAA;aAChB,QAAQ,CAAC,YAAT,CAAsB,+BAAtB,EAAuD,QAAA,CAAS,QAAQ,CAAC,YAAT,CAAsB,qBAAtB,CAAT,CAAA,GAAuD,CAA9G,EADgB;IAAA,CAAlB,EAFkB;EAAA,CA/BpB,CAAA;;AAAA,EAoCA,MAAA,GAAS,MAAM,CAAC,SAAP,CAAA,CApCT,CAAA;;AAqCA,EAAA,IAAG,6DAAA,KAA6B,IAAhC;AACE,IAAA,iBAAA,CAAA,CAAA,CAAA;AAAA,IACA,iBAAA,CAAA,CADA,CAAA;AAAA,IAEA,MAAM,CAAC,gBAAP,CAAwB,cAAxB,EAAwC,SAAC,GAAD,GAAA;AACtC,MAAA,IAAO,2BAAJ,IAA0B,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC,OAA5B,CAAoC,MAAA,GAAS,CAAA,CAA7C,CAA7B;eACE,iBAAA,CAAA,EADF;OADsC;IAAA,CAAxC,CAFA,CADF;GArCA;AAAA" 10 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # reveal.js - On-the-fly fragment order 2 | This is a plugin that makes the order in which the fragments trigger dynamic. 3 | 4 | An ideal situation where this can be used is with a question you ask your audience and they don't answer in the order you programmed your list. 5 | 6 | An example: you are giving a presention about Snow White. Off course you like to tell them about the dwarves too. 7 | You put them in the following order: Doc, Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey. 8 | And you want some interaction with your audience so you ask them if they know any of them already. Offcourse the first one they mention is Grumpy. 9 | But you can't display him just yet because you will already show them one they haven't said yet... How can you solve this issue? 10 | 11 | **With this plugin offcourse!** 12 | 13 | ##Installation 14 | First of all download the code, It's available in CoffeeScript and plain JavaScript, and place it in `plugin/otf-fragment-order` 15 | 16 | The second thing to do, is include it as a dependency in your initialization. And enable it. 17 | ```javascript 18 | Reveal.initialize({ 19 | ... 20 | otfFragmentOrder: true, 21 | ... 22 | dependencies: [ 23 | ... 24 | { src: 'plugin/otf-fragment-order/otf-fragment-order.js', async: true, condition: function() { return !!document.body.classList; } } 25 | ] 26 | }); 27 | ``` 28 | And the last thing to do is to add a data attribute to your slide. 29 | ```html 30 |
31 |

The seven dwarf

32 |

Do you know them all?

33 | 42 |
43 | ``` 44 | That's all for installation 45 | 46 | ##Usage in presentation 47 | On this slide when they tell you Grumpy now, you are prepared! 48 | 49 | Just use the numerical keys on the top of your keyboard for the number you want to show, so for Grumpy you type 2. 50 | This way you can be completly interactive with your audience. 51 | -------------------------------------------------------------------------------- /src/otf-fragment-order.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.8.0 2 | 3 | /* 4 | otf-fragment-order.coffee 5 | http://www.waxam.be 6 | MIT Licensed 7 | 8 | Copyright (C) 2015 Maarten Schroeven 9 | */ 10 | 11 | (function() { 12 | var CURRENT_INDEX, addDataAttributes, config, showFragment, toggleKeyListener; 13 | 14 | CURRENT_INDEX = -1; 15 | 16 | showFragment = function(event) { 17 | var currentSlide, fragment, index, otherFragment, _ref; 18 | if ((48 <= (_ref = event.keyCode) && _ref <= 57)) { 19 | index = event.keyCode - 48; 20 | if (index === 0) { 21 | index = 10; 22 | } 23 | currentSlide = Reveal.getCurrentSlide(); 24 | fragment = currentSlide.querySelector(".fragment[data-otf-fragment-order-index=\"" + index + "\"]"); 25 | if ((fragment != null ? fragment.className.indexOf('visible') : void 0) === -1) { 26 | CURRENT_INDEX++; 27 | otherFragment = currentSlide.querySelector(".fragment[data-fragment-index=\"" + CURRENT_INDEX + "\"]"); 28 | if (otherFragment != null) { 29 | otherFragment.setAttribute('data-fragment-index', fragment.getAttribute('data-fragment-index')); 30 | fragment.setAttribute('data-fragment-index', CURRENT_INDEX); 31 | return Reveal.nextFragment(); 32 | } 33 | } 34 | } 35 | }; 36 | 37 | toggleKeyListener = function() { 38 | var currentSlide; 39 | currentSlide = Reveal.getCurrentSlide(); 40 | if (currentSlide != null ? currentSlide.hasAttribute('data-otf-fragment-order-slide') : void 0) { 41 | CURRENT_INDEX = -1; 42 | return document.addEventListener('keydown', showFragment); 43 | } else { 44 | return document.removeEventListener('keydown', showFragment); 45 | } 46 | }; 47 | 48 | addDataAttributes = function() { 49 | var fragments; 50 | fragments = Array.prototype.slice.call(document.querySelectorAll('section[data-otf-fragment-order-slide] .fragment')); 51 | return fragments.forEach(function(fragment) { 52 | return fragment.setAttribute('data-otf-fragment-order-index', parseInt(fragment.getAttribute('data-fragment-index')) + 1); 53 | }); 54 | }; 55 | 56 | config = Reveal.getConfig(); 57 | 58 | if (((config != null ? config.otfFragmentOrder : void 0) != null) === true) { 59 | addDataAttributes(); 60 | toggleKeyListener(); 61 | Reveal.addEventListener('slidechanged', function(evt) { 62 | if ((evt.previousSlide == null) || evt.previousSlide.className.indexOf('past' > -1)) { 63 | return toggleKeyListener(); 64 | } 65 | }); 66 | } 67 | 68 | }).call(this); 69 | 70 | //# sourceMappingURL=otf-fragment-order.js.map 71 | --------------------------------------------------------------------------------