|
0
|
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 }());
|
