Mercurial > hg > Members > atton > generated_seminar_slides

comparison slides/20141128/scripts/script.js @ 57:29611a3163fd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
auto-Update generated slides by script
author Yasutaka Higa <e115763@ie.u-ryukyu.ac.jp>
date Fri, 28 Nov 2014 11:17:38 +0900
parents
children
comparison
equal deleted inserted replaced
56:eabb5a8efbaf 57:29611a3163fd
1 (function () {
2 var url = window.location,
3 body = document.body,
4 slides = document.querySelectorAll('div.slide'),
5 progress = document.querySelector('div.progress div'),
6 slideList = [],
7 l = slides.length,
8 i;
9
10 for (i = 0; i < l; i++) {
11 slideList.push(slides[i].id);
12 }
13
14 function getTransform() {
15 var denominator = Math.max(
16 body.clientWidth / window.innerWidth,
17 body.clientHeight / window.innerHeight
18 );
19
20 return 'scale(' + (1 / denominator) + ')';
21 }
22
23 function applyTransform(transform) {
24 body.style.MozTransform = transform;
25 body.style.WebkitTransform = transform;
26 body.style.OTransform = transform;
27 body.style.msTransform = transform;
28 body.style.transform = transform;
29 }
30
31 function enterSingleSlideMode() {
32 body.className = 'full';
33 applyTransform(getTransform());
34 }
35
36 function enterSlideListMode() {
37 body.className = 'list';
38 applyTransform('none');
39 }
40
41 function getCurrentSlideNumber() {
42 return slideList.indexOf(url.hash.substr(1));
43 }
44
45 function scrollToCurrentSlide() {
46 var current_slide = document.getElementById(slideList[getCurrentSlideNumber()]);
47
48 if (null != current_slide) {
49 window.scrollTo(0, current_slide.offsetTop);
50 }
51 }
52
53 function isSlideListMode() {
54 return 'full' !== url.search.substr(1);
55 }
56
57 function normalizeSlideNumber(slide_number) {
58 if (0 > slide_number) {
59 return slideList.length - 1;
60 } else if (slideList.length <= slide_number) {
61 return 0;
62 } else {
63 return slide_number;
64 }
65 }
66
67 function updateProgress(slide_number) {
68 if (!progress) return;
69 progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slide_number)).toFixed(2) + '%';
70 }
71
72 function getSlideHashByNumber(slide_number) {
73 return '#' + slideList[normalizeSlideNumber(slide_number)];
74 }
75
76 function goToSlide(slide_number) {
77 url.hash = getSlideHashByNumber(slide_number);
78
79 if (!isSlideListMode()) {
80 updateProgress(slide_number);
81 }
82 }
83
84 window.addEventListener('DOMContentLoaded', function () {
85 if (!isSlideListMode()) {
86 // "?full" is present without slide hash so we should display first
87 // slide
88 if ( -1 === getCurrentSlideNumber() ) {
89 history.replaceState(null, null, url.pathname + '?full' + getSlideHashByNumber( 0 ) );
90 }
91
92 enterSingleSlideMode();
93 updateProgress(getCurrentSlideNumber());
94 }
95 }, false);
96
97 window.addEventListener('popstate', function (e) {
98 if (isSlideListMode()) {
99 enterSlideListMode();
100 scrollToCurrentSlide();
101 } else {
102 enterSingleSlideMode();
103 }
104 }, false);
105
106 window.addEventListener('resize', function (e) {
107 if (!isSlideListMode()) {
108 applyTransform(getTransform());
109 }
110 }, false);
111
112 document.addEventListener('keydown', function (e) {
113 if (e.altKey || e.ctrlKey || e.metaKey) return;
114
115 var current_slide_number = getCurrentSlideNumber();
116
117 switch (e.which) {
118 case 9: // Tab = +1; Shift + Tab = -1
119 if (isSlideListMode()) {
120 e.preventDefault();
121
122 current_slide_number += e.shiftKey ? -1 : 1;
123 url.hash = getSlideHashByNumber(current_slide_number);
124 }
125 break;
126
127 case 13: // Enter
128 if (isSlideListMode()) {
129 e.preventDefault();
130
131 history.pushState(null, null, url.pathname + '?full' + getSlideHashByNumber(current_slide_number));
132 enterSingleSlideMode();
133
134 updateProgress(current_slide_number);
135 }
136 break;
137
138 case 27: // Esc
139 if (!isSlideListMode()) {
140 e.preventDefault();
141
142 history.pushState(null, null, url.pathname + getSlideHashByNumber(current_slide_number));
143 enterSlideListMode();
144 scrollToCurrentSlide();
145 }
146 break;
147
148 case 33: // PgUp
149 case 38: // Up
150 case 37: // Left
151 case 72: // h
152 case 75: // k
153 e.preventDefault();
154
155 current_slide_number--;
156 goToSlide(current_slide_number);
157 break;
158
159 case 34: // PgDown
160 case 40: // Down
161 case 39: // Right
162 case 76: // l
163 case 74: // j
164 e.preventDefault();
165
166 current_slide_number++;
167 goToSlide(current_slide_number);
168 break;
169
170 case 36: // Home
171 e.preventDefault();
172
173 current_slide_number = 0;
174 goToSlide(current_slide_number);
175 break;
176
177 case 35: // End
178 e.preventDefault();
179
180 current_slide_number = slideList.length - 1;
181 goToSlide(current_slide_number);
182 break;
183
184 case 32: // Space = +1; Shift + Space = -1
185 e.preventDefault();
186
187 current_slide_number += e.shiftKey ? -1 : 1;
188 goToSlide(current_slide_number);
189 break;
190
191 default:
192 // Behave as usual
193 }
194 }, false);
195
196 document.addEventListener('click', function (e) {
197 if (
198 'SECTION' === e.target.nodeName &&
199 -1 !== e.target.parentNode.parentNode.className.indexOf('slide') &&
200 isSlideListMode()
201 ) {
202 e.preventDefault();
203
204 // NOTE: we should update hash to get things work properly
205 url.hash = '#' + e.target.parentNode.parentNode.id;
206 history.replaceState(null, null, url.pathname + '?full#' + e.target.parentNode.parentNode.id);
207 enterSingleSlideMode();
208
209 updateProgress(getCurrentSlideNumber());
210 }
211 }, false);
212
213 }());