/Demo/slides.js
JavaScript | 163 lines | 138 code | 23 blank | 2 comment | 28 complexity | b97c3df992d87c5d95439973b3e00e2e MD5 | raw file
1function editSource() { 2 window.open("http://etherpad.mozilla.org:9000" + 3 window.location.pathname); 4} 5 6onclick = function(event) { 7 if (event.shiftKey) 8 editSource(); 9}; 10 11onload = function() { 12 var allSlides = document.querySelectorAll(".slide"); 13 var currSlide; 14 15 function $(sel) { 16 return document.querySelector(sel); 17 } 18 19 function each(sel, fun) { 20 var nodeList = document.querySelectorAll(sel); 21 for (var i = 0; i < nodeList.length; i++) 22 fun.call(nodeList[i], i); 23 } 24 25 function removeClass(elem, className) { 26 var classes = elem.className.split(" "); 27 if (classes.indexOf(className) != -1) { 28 classes.splice(classes.indexOf(className), 1); 29 elem.className = classes.join(" "); 30 } 31 } 32 33 function addClass(elem, className) { 34 var classes = elem.className.split(" "); 35 if (classes.indexOf(className) == -1) 36 elem.className += " " + className; 37 } 38 39 function addFooters() { 40 var footer = $(".title.slide .footer"); 41 var date = $(".title.slide .date"); 42 43 each(".normal.slide", function() { 44 if (date) 45 this.appendChild(date.cloneNode(true)); 46 if (footer) 47 this.appendChild(footer.cloneNode(true)); 48 }); 49 50 each(".slide", function(i) { 51 var slideNo = document.createElement("div"); 52 slideNo.className = "slide-number"; 53 slideNo.textContent = (i + 1) + " / " + allSlides.length; 54 this.appendChild(slideNo); 55 }); 56 } 57 58 function setCurrSlide(newCurrSlide) { 59 if (newCurrSlide != currSlide) { 60 if (currSlide != undefined) 61 removeClass(allSlides[currSlide - 1], "selected"); 62 currSlide = newCurrSlide; 63 addClass(allSlides[currSlide - 1], "selected"); 64 if (currSlide == 1) 65 window.location.hash = ""; 66 else 67 window.location.hash = "#" + currSlide; 68 } 69 } 70 71 function setCurrSlideFromHash() { 72 var hash = window.location.hash; 73 var match = hash.match(/#(-?[0-9]+)/); 74 if (match) { 75 var newSlide = parseInt(match[1]); 76 if (newSlide < 0) 77 newSlide = allSlides.length + newSlide; 78 setCurrSlide(newSlide); 79 } else 80 setCurrSlide(1); 81 } 82 83 function prevSlide() { 84 if (currSlide > 1) 85 setCurrSlide(currSlide - 1); 86 } 87 88 function nextSlide() { 89 if (currSlide < allSlides.length) 90 setCurrSlide(currSlide + 1); 91 } 92 93 if ('onhashchange' in window) 94 window.onhashchange = setCurrSlideFromHash; 95 else 96 window.setInterval(setCurrSlideFromHash, 250); 97 98 window.onkeydown = function(event) { 99 // Don't let Firefox scroll the window *and* 100 // advance the slides at the same time. 101 event.preventDefault(); 102 }; 103 104 window.onkeyup = function(event) { 105 const LEFT_ARROW = 37; 106 const RIGHT_ARROW = 39; 107 const SPACE = 32; 108 109 switch (event.keyCode) { 110 case SPACE: 111 case RIGHT_ARROW: 112 nextSlide(); 113 break; 114 case LEFT_ARROW: 115 prevSlide(); 116 break; 117 } 118 }; 119 120 function setupTouchUI() { 121 var startX; 122 var startY; 123 var x; 124 var y; 125 var inGesture; 126 127 document.body.addEventListener("touchstart", function(event) { 128 inGesture = true; 129 startX = event.touches[0].pageX; 130 startY = event.touches[0].pageY; 131 }, false); 132 133 document.body.addEventListener("touchmove", function(event) { 134 if (event.touches.length == 3) 135 editSource(); 136 if (event.touches.length > 1) 137 inGesture = false; 138 if (!inGesture) 139 return; 140 x = event.targetTouches[0].pageX - startX; 141 y = event.targetTouches[0].pageY - startY; 142 event.preventDefault(); 143 }, false); 144 145 document.body.addEventListener("touchend", function(event) { 146 if (!inGesture) 147 return; 148 if (Math.abs(x) < Math.abs(y)) 149 return; 150 if (x < 0) 151 nextSlide(); 152 if (x > 0) 153 prevSlide(); 154 }, false); 155 } 156 157 setCurrSlideFromHash(); 158 setupTouchUI(); 159 addFooters(); 160 161 document.body.style.display = "block"; 162 document.title = $(".title.slide .header").textContent; 163};