vebdew 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +70 -42
- data/VERSION +1 -1
- data/lib/template/css/images/ui-bg_flat_0_aaaaaa_40x100.png +0 -0
- data/lib/template/css/images/ui-bg_glass_95_fef1ec_1x400.png +0 -0
- data/lib/template/css/images/ui-bg_gloss-wave_16_121212_500x100.png +0 -0
- data/lib/template/css/images/ui-bg_highlight-hard_15_888888_1x100.png +0 -0
- data/lib/template/css/images/ui-bg_highlight-hard_55_555555_1x100.png +0 -0
- data/lib/template/css/images/ui-bg_highlight-soft_35_adadad_1x100.png +0 -0
- data/lib/template/css/images/ui-bg_highlight-soft_60_dddddd_1x100.png +0 -0
- data/lib/template/css/images/ui-bg_inset-soft_15_121212_1x100.png +0 -0
- data/lib/template/css/images/ui-icons_666666_256x240.png +0 -0
- data/lib/template/css/images/ui-icons_aaaaaa_256x240.png +0 -0
- data/lib/template/css/images/ui-icons_bbbbbb_256x240.png +0 -0
- data/lib/template/css/images/ui-icons_c98000_256x240.png +0 -0
- data/lib/template/css/images/ui-icons_cccccc_256x240.png +0 -0
- data/lib/template/css/images/ui-icons_cd0a0a_256x240.png +0 -0
- data/lib/template/css/images/ui-icons_f29a00_256x240.png +0 -0
- data/lib/template/css/jquery-ui.css +306 -0
- data/lib/template/css/main.css +800 -0
- data/lib/template/css/reset.css +57 -0
- data/lib/template/css/ruler.css +34 -0
- data/lib/template/css/sample.css +128 -0
- data/lib/template/css/styles.css +102 -0
- data/lib/template/js/index.js +57 -0
- data/lib/template/js/init.js +6 -0
- data/lib/template/js/jquery-ui.min.js +76 -0
- data/lib/template/js/jquery.min.js +4 -0
- data/lib/template/js/reveal.js +705 -0
- data/lib/template/js/ruler.js +9 -0
- data/lib/template/js/sample.js +120 -0
- data/lib/template/vew/sample.vew +1 -1
- data/lib/vebdew/parser.rb +5 -1
- data/vebdew.gemspec +29 -1
- metadata +40 -12
|
@@ -0,0 +1,705 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (C) 2011 Hakim El Hattab, http://hakim.se
|
|
3
|
+
*
|
|
4
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
6
|
+
* in the Software without restriction, including without limitation the rights
|
|
7
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
8
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
9
|
+
* furnished to do so, subject to the following conditions:
|
|
10
|
+
*
|
|
11
|
+
* The above copyright notice and this permission notice shall be included in
|
|
12
|
+
* all copies or substantial portions of the Software.
|
|
13
|
+
*
|
|
14
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
15
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
16
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
17
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
18
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
19
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
20
|
+
* THE SOFTWARE.
|
|
21
|
+
*
|
|
22
|
+
* #############################################################################
|
|
23
|
+
*
|
|
24
|
+
* Reveal.js is an easy to use HTML based slideshow enhanced by
|
|
25
|
+
* sexy CSS 3D transforms.
|
|
26
|
+
*
|
|
27
|
+
* Slides are given unique hash based URL's so that they can be
|
|
28
|
+
* opened directly.
|
|
29
|
+
*
|
|
30
|
+
* Public facing methods:
|
|
31
|
+
* - Reveal.initialize( { ... options ... } );
|
|
32
|
+
* - Reveal.navigateTo( indexh, indexv );
|
|
33
|
+
* - Reveal.navigateLeft();
|
|
34
|
+
* - Reveal.navigateRight();
|
|
35
|
+
* - Reveal.navigateUp();
|
|
36
|
+
* - Reveal.navigateDown();
|
|
37
|
+
*
|
|
38
|
+
* @author Hakim El Hattab | http://hakim.se
|
|
39
|
+
* @version 1.2
|
|
40
|
+
*
|
|
41
|
+
* Edited by MrOrz
|
|
42
|
+
* Now slides can be styled with classes, and updateSlide triggers 'update'
|
|
43
|
+
* event on <body>.
|
|
44
|
+
*
|
|
45
|
+
*/
|
|
46
|
+
var Reveal = (function(){
|
|
47
|
+
"use strict";
|
|
48
|
+
|
|
49
|
+
var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section',
|
|
50
|
+
VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section',
|
|
51
|
+
|
|
52
|
+
// The horizontal and verical index of the currently active slide
|
|
53
|
+
indexh = 0,
|
|
54
|
+
indexv = 0,
|
|
55
|
+
|
|
56
|
+
// Configurations options, can be overridden at initialization time
|
|
57
|
+
config = {
|
|
58
|
+
controls: false,
|
|
59
|
+
progress: false,
|
|
60
|
+
history: false,
|
|
61
|
+
transition: 'default',
|
|
62
|
+
theme: 'default',
|
|
63
|
+
mouseWheel: true,
|
|
64
|
+
rollingLinks: true
|
|
65
|
+
},
|
|
66
|
+
|
|
67
|
+
// Cached references to DOM elements
|
|
68
|
+
dom = {},
|
|
69
|
+
|
|
70
|
+
// Detect support for CSS 3D transforms
|
|
71
|
+
supports3DTransforms = document.body.style.perspectiveProperty !== undefined ||
|
|
72
|
+
document.body.style.WebkitPerspective !== undefined ||
|
|
73
|
+
document.body.style.MozPerspective !== undefined ||
|
|
74
|
+
document.body.style.msPerspective !== undefined,
|
|
75
|
+
|
|
76
|
+
supports2DTransforms = document.body.style.transformProperty !== undefined ||
|
|
77
|
+
document.body.style.WebkitTransform !== undefined ||
|
|
78
|
+
document.body.style.MozTransform !== undefined ||
|
|
79
|
+
document.body.style.msTransform !== undefined ||
|
|
80
|
+
document.body.style.OTransform !== undefined,
|
|
81
|
+
|
|
82
|
+
// Throttles mouse wheel navigation
|
|
83
|
+
mouseWheelTimeout = 0;
|
|
84
|
+
|
|
85
|
+
// all methods, making jshint happy
|
|
86
|
+
var initialize, extend, preventAndForward, onDocumentKeyDown,
|
|
87
|
+
onDocumentTouchStart, onDocumentMouseScroll,onWindowHashChange,
|
|
88
|
+
onOverviewSlideClicked, linkify, activateOverview, deactivateOverview,
|
|
89
|
+
overviewIsActive,updateSlides, slide, updateControls, availableRoutes,
|
|
90
|
+
readURL, writeURL, nextFragment, previousFragment,
|
|
91
|
+
navigateTo, navigateLeft, navigateUp, navigateDown, navigateRight;
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Starts up the slideshow by applying configuration
|
|
97
|
+
* options and binding various events.
|
|
98
|
+
*/
|
|
99
|
+
initialize = function( options ) {
|
|
100
|
+
|
|
101
|
+
if( !supports2DTransforms && !supports3DTransforms ) {
|
|
102
|
+
document.body.setAttribute( 'class', 'no-transforms' );
|
|
103
|
+
|
|
104
|
+
// If the browser doesn't support transforms we won't be
|
|
105
|
+
// using JavaScript to control the presentation
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// Cache references to DOM elements
|
|
110
|
+
dom.wrapper = document.querySelector( '#reveal' );
|
|
111
|
+
dom.progress = document.querySelector( '#reveal .progress' );
|
|
112
|
+
dom.progressbar = document.querySelector( '#reveal .progress span' );
|
|
113
|
+
dom.controls = document.querySelector( '#reveal .controls' );
|
|
114
|
+
dom.controlsLeft = document.querySelector( '#reveal .controls .left' );
|
|
115
|
+
dom.controlsRight = document.querySelector( '#reveal .controls .right' );
|
|
116
|
+
dom.controlsUp = document.querySelector( '#reveal .controls .up' );
|
|
117
|
+
dom.controlsDown = document.querySelector( '#reveal .controls .down' );
|
|
118
|
+
|
|
119
|
+
// Bind all view events
|
|
120
|
+
document.addEventListener('keydown', onDocumentKeyDown, false);
|
|
121
|
+
document.addEventListener('touchstart', onDocumentTouchStart, false);
|
|
122
|
+
window.addEventListener('hashchange', onWindowHashChange, false);
|
|
123
|
+
dom.controlsLeft.addEventListener('click', preventAndForward( navigateLeft ), false);
|
|
124
|
+
dom.controlsRight.addEventListener('click', preventAndForward( navigateRight ), false);
|
|
125
|
+
dom.controlsUp.addEventListener('click', preventAndForward( navigateUp ), false);
|
|
126
|
+
dom.controlsDown.addEventListener('click', preventAndForward( navigateDown ), false);
|
|
127
|
+
|
|
128
|
+
// Copy options over to our config object
|
|
129
|
+
extend( config, options );
|
|
130
|
+
|
|
131
|
+
// Fall back on the 2D transform theme 'linear'
|
|
132
|
+
if( supports3DTransforms === false ) {
|
|
133
|
+
config.transition = 'linear';
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
if( config.controls ) {
|
|
137
|
+
dom.controls.style.display = 'block';
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
if( config.progress ) {
|
|
141
|
+
dom.progress.style.display = 'block';
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
if( config.transition !== 'default' ) {
|
|
145
|
+
dom.wrapper.classList.add( config.transition );
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
if( config.theme !== 'default' ) {
|
|
149
|
+
dom.wrapper.classList.add( config.theme );
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
if( config.mouseWheel ) {
|
|
153
|
+
document.addEventListener('DOMMouseScroll', onDocumentMouseScroll, false); // FF
|
|
154
|
+
document.addEventListener('mousewheel', onDocumentMouseScroll, false);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
if( config.rollingLinks ) {
|
|
158
|
+
// Add some 3D magic to our anchors
|
|
159
|
+
linkify();
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// Read the initial hash
|
|
163
|
+
readURL();
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* Extend object a with the properties of object b.
|
|
168
|
+
* If there's a conflict, object b takes precedence.
|
|
169
|
+
*/
|
|
170
|
+
extend = function( a, b ) {
|
|
171
|
+
for( var i in b ) {
|
|
172
|
+
if(b.hasOwnProperty(i)){
|
|
173
|
+
a[ i ] = b[ i ];
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* Prevents an events defaults behavior calls the
|
|
180
|
+
* specified delegate.
|
|
181
|
+
*
|
|
182
|
+
* @param {Function} delegate The method to call
|
|
183
|
+
* after the wrapper has been executed
|
|
184
|
+
*/
|
|
185
|
+
preventAndForward = function( delegate ) {
|
|
186
|
+
return function( event ) {
|
|
187
|
+
event.preventDefault();
|
|
188
|
+
delegate.call();
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
/**
|
|
193
|
+
* Handler for the document level 'keydown' event.
|
|
194
|
+
*
|
|
195
|
+
* @param {Object} event
|
|
196
|
+
*/
|
|
197
|
+
onDocumentKeyDown = function( event ) {
|
|
198
|
+
// FFT: Use document.querySelector( ':focus' ) === null
|
|
199
|
+
// instead of checking contentEditable?
|
|
200
|
+
|
|
201
|
+
if( event.target.contentEditable === 'inherit' ) {
|
|
202
|
+
if( event.keyCode >= 37 && event.keyCode <= 40 ) {
|
|
203
|
+
|
|
204
|
+
switch( event.keyCode ) {
|
|
205
|
+
case 37: navigateLeft(); break; // left
|
|
206
|
+
case 39: navigateRight(); break; // right
|
|
207
|
+
case 38: navigateUp(); break; // up
|
|
208
|
+
case 40: navigateDown(); break; // down
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
//slide();
|
|
212
|
+
|
|
213
|
+
event.preventDefault();
|
|
214
|
+
|
|
215
|
+
}
|
|
216
|
+
// Space bar
|
|
217
|
+
else if ( event.keyCode === 32 && supports3DTransforms ) {
|
|
218
|
+
if( overviewIsActive() ) {
|
|
219
|
+
deactivateOverview();
|
|
220
|
+
}
|
|
221
|
+
else {
|
|
222
|
+
activateOverview();
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
event.preventDefault();
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Handler for the document level 'touchstart' event.
|
|
232
|
+
*
|
|
233
|
+
* This enables very basic tap interaction for touch
|
|
234
|
+
* devices. Added mainly for performance testing of 3D
|
|
235
|
+
* transforms on iOS but was so happily surprised with
|
|
236
|
+
* how smoothly it runs so I left it in here. Apple +1
|
|
237
|
+
*
|
|
238
|
+
* @param {Object} event
|
|
239
|
+
*/
|
|
240
|
+
onDocumentTouchStart = function( event ) {
|
|
241
|
+
// We're only interested in one point taps
|
|
242
|
+
if (event.touches.length === 1) {
|
|
243
|
+
// Never prevent taps on anchors and images
|
|
244
|
+
if( event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'img' ) {
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
event.preventDefault();
|
|
249
|
+
|
|
250
|
+
var point = {
|
|
251
|
+
x: event.touches[0].clientX,
|
|
252
|
+
y: event.touches[0].clientY
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
// Define the extent of the areas that may be tapped
|
|
256
|
+
// to navigate
|
|
257
|
+
var wt = window.innerWidth * 0.3;
|
|
258
|
+
var ht = window.innerHeight * 0.3;
|
|
259
|
+
|
|
260
|
+
if( point.x < wt ) {
|
|
261
|
+
navigateLeft();
|
|
262
|
+
}
|
|
263
|
+
else if( point.x > window.innerWidth - wt ) {
|
|
264
|
+
navigateRight();
|
|
265
|
+
}
|
|
266
|
+
else if( point.y < ht ) {
|
|
267
|
+
navigateUp();
|
|
268
|
+
}
|
|
269
|
+
else if( point.y > window.innerHeight - ht ) {
|
|
270
|
+
navigateDown();
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
/**
|
|
276
|
+
* Handles mouse wheel scrolling, throttled to avoid
|
|
277
|
+
* skipping multiple slides.
|
|
278
|
+
*/
|
|
279
|
+
onDocumentMouseScroll = function( event ){
|
|
280
|
+
clearTimeout( mouseWheelTimeout );
|
|
281
|
+
|
|
282
|
+
mouseWheelTimeout = setTimeout( function() {
|
|
283
|
+
var delta = event.detail || -event.wheelDelta;
|
|
284
|
+
if( delta > 0 ) {
|
|
285
|
+
if(availableRoutes().down)
|
|
286
|
+
navigateDown();
|
|
287
|
+
else
|
|
288
|
+
navigateRight();
|
|
289
|
+
}
|
|
290
|
+
else {
|
|
291
|
+
if(availableRoutes().up)
|
|
292
|
+
navigateUp()
|
|
293
|
+
else
|
|
294
|
+
navigateLeft();
|
|
295
|
+
}
|
|
296
|
+
}, 100 );
|
|
297
|
+
};
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* Handler for the window level 'hashchange' event.
|
|
301
|
+
*
|
|
302
|
+
* @param {Object} event
|
|
303
|
+
*/
|
|
304
|
+
onWindowHashChange = function( event ) {
|
|
305
|
+
readURL();
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
/**
|
|
309
|
+
* Wrap all links in 3D goodness.
|
|
310
|
+
*/
|
|
311
|
+
linkify = function() {
|
|
312
|
+
if( supports3DTransforms ) {
|
|
313
|
+
var nodes = document.querySelectorAll( '#reveal .slides section a:not(.image)' );
|
|
314
|
+
|
|
315
|
+
for( var i = 0, len = nodes.length; i < len; i++ ) {
|
|
316
|
+
var node = nodes[i];
|
|
317
|
+
|
|
318
|
+
if( node.textContent && !node.querySelector( 'img' ) && ( !node.className || !( node.classList.contains('roll') ) ) ) {
|
|
319
|
+
node.classList.add( 'roll' );
|
|
320
|
+
node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
/**
|
|
327
|
+
* Displays the overview of slides (quick nav) by
|
|
328
|
+
* scaling down and arranging all slide elements.
|
|
329
|
+
*
|
|
330
|
+
* Experimental feature, might be dropped if perf
|
|
331
|
+
* can't be improved.
|
|
332
|
+
*/
|
|
333
|
+
activateOverview = function() {
|
|
334
|
+
dom.wrapper.classList.add( 'overview' );
|
|
335
|
+
|
|
336
|
+
var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
|
|
337
|
+
|
|
338
|
+
for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
|
|
339
|
+
var hslide = horizontalSlides[i],
|
|
340
|
+
htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * 105 ) + '%, 0%)';
|
|
341
|
+
|
|
342
|
+
hslide.setAttribute( 'data-index-h', i );
|
|
343
|
+
hslide.style.display = 'block';
|
|
344
|
+
hslide.style.WebkitTransform = htransform;
|
|
345
|
+
hslide.style.MozTransform = htransform;
|
|
346
|
+
hslide.style.msTransform = htransform;
|
|
347
|
+
hslide.style.OTransform = htransform;
|
|
348
|
+
hslide.style.transform = htransform;
|
|
349
|
+
|
|
350
|
+
if( !hslide.classList.contains( 'stack' ) ) {
|
|
351
|
+
// Navigate to this slide on click
|
|
352
|
+
hslide.addEventListener( 'click', onOverviewSlideClicked, true );
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) );
|
|
356
|
+
|
|
357
|
+
for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
|
|
358
|
+
var vslide = verticalSlides[j],
|
|
359
|
+
vtransform = 'translate(0%, ' + ( ( j - indexv ) * 105 ) + '%)';
|
|
360
|
+
|
|
361
|
+
vslide.setAttribute( 'data-index-h', i );
|
|
362
|
+
vslide.setAttribute( 'data-index-v', j );
|
|
363
|
+
vslide.style.display = 'block';
|
|
364
|
+
vslide.style.WebkitTransform = vtransform;
|
|
365
|
+
vslide.style.MozTransform = vtransform;
|
|
366
|
+
vslide.style.msTransform = vtransform;
|
|
367
|
+
vslide.style.OTransform = vtransform;
|
|
368
|
+
vslide.style.transform = vtransform;
|
|
369
|
+
|
|
370
|
+
// Navigate to this slide on click
|
|
371
|
+
vslide.addEventListener( 'click', onOverviewSlideClicked, true );
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
};
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* Exits the slide overview and enters the currently
|
|
378
|
+
* active slide.
|
|
379
|
+
*/
|
|
380
|
+
deactivateOverview = function() {
|
|
381
|
+
dom.wrapper.classList.remove( 'overview' );
|
|
382
|
+
|
|
383
|
+
var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) );
|
|
384
|
+
|
|
385
|
+
for( var i = 0, len = slides.length; i < len; i++ ) {
|
|
386
|
+
var element = slides[i];
|
|
387
|
+
|
|
388
|
+
// Resets all transforms to use the external styles
|
|
389
|
+
element.style.WebkitTransform = '';
|
|
390
|
+
element.style.MozTransform = '';
|
|
391
|
+
element.style.msTransform = '';
|
|
392
|
+
element.style.OTransform = '';
|
|
393
|
+
element.style.transform = '';
|
|
394
|
+
|
|
395
|
+
element.removeEventListener( 'click', onOverviewSlideClicked );
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
slide();
|
|
399
|
+
};
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* Checks if the overview is currently active.
|
|
403
|
+
*
|
|
404
|
+
* @return {Boolean} true if the overview is active,
|
|
405
|
+
* false otherwise
|
|
406
|
+
*/
|
|
407
|
+
overviewIsActive = function() {
|
|
408
|
+
return dom.wrapper.classList.contains( 'overview' );
|
|
409
|
+
};
|
|
410
|
+
|
|
411
|
+
/**
|
|
412
|
+
* Invoked when a slide is and we're in the overview.
|
|
413
|
+
*/
|
|
414
|
+
onOverviewSlideClicked = function( event ) {
|
|
415
|
+
// TODO There's a bug here where the event listeners are not
|
|
416
|
+
// removed after deactivating the overview.
|
|
417
|
+
if( overviewIsActive() ) {
|
|
418
|
+
event.preventDefault();
|
|
419
|
+
|
|
420
|
+
deactivateOverview();
|
|
421
|
+
|
|
422
|
+
indexh = this.getAttribute( 'data-index-h' );
|
|
423
|
+
indexv = this.getAttribute( 'data-index-v' );
|
|
424
|
+
|
|
425
|
+
slide();
|
|
426
|
+
}
|
|
427
|
+
};
|
|
428
|
+
|
|
429
|
+
/**
|
|
430
|
+
* Updates one dimension of slides by showing the slide
|
|
431
|
+
* with the specified index.
|
|
432
|
+
*
|
|
433
|
+
* @param {String} selector A CSS selector that will fetch
|
|
434
|
+
* the group of slides we are working with
|
|
435
|
+
* @param {Number} index The index of the slide that should be
|
|
436
|
+
* shown
|
|
437
|
+
*
|
|
438
|
+
* @return {Number} The index of the slide that is now shown,
|
|
439
|
+
* might differ from the passed in index if it was out of
|
|
440
|
+
* bounds.
|
|
441
|
+
*/
|
|
442
|
+
updateSlides = function( selector, index ) {
|
|
443
|
+
|
|
444
|
+
// Select all slides and convert the NodeList result to
|
|
445
|
+
// an array
|
|
446
|
+
var slides = Array.prototype.slice.call( document.querySelectorAll( selector ) );
|
|
447
|
+
|
|
448
|
+
if( slides.length ) {
|
|
449
|
+
|
|
450
|
+
slides[index].classList.remove('past');
|
|
451
|
+
slides[index].classList.remove('future');
|
|
452
|
+
slides[index].classList.add('present');
|
|
453
|
+
|
|
454
|
+
for( var i = 0; i < slides.length; i++ ) {
|
|
455
|
+
var slide = slides[i];
|
|
456
|
+
|
|
457
|
+
// Optimization; hide all slides that are three or more steps
|
|
458
|
+
// away from the present slide
|
|
459
|
+
if( overviewIsActive() === false ) {
|
|
460
|
+
slide.style.display = Math.abs( index - i ) > 3 ? 'none' : 'block';
|
|
461
|
+
}
|
|
462
|
+
if( i < index ) {
|
|
463
|
+
// Any element previous to index is given the 'past' class
|
|
464
|
+
slide.classList.remove('present');
|
|
465
|
+
slide.classList.remove('future');
|
|
466
|
+
slide.classList.add('past');
|
|
467
|
+
}
|
|
468
|
+
else if( i > index ) {
|
|
469
|
+
// Any element subsequent to index is given the 'future' class
|
|
470
|
+
slide.classList.remove('past');
|
|
471
|
+
slide.classList.remove('present');
|
|
472
|
+
slide.classList.add('future');
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
// If this element contains vertical slides
|
|
476
|
+
if( slide.querySelector( 'section' ) ) {
|
|
477
|
+
slide.classList.add( 'stack' );
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
else {
|
|
482
|
+
// Since there are no slides we can't be anywhere beyond the
|
|
483
|
+
// zeroth index
|
|
484
|
+
index = 0;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
return index;
|
|
488
|
+
};
|
|
489
|
+
|
|
490
|
+
/**
|
|
491
|
+
* Updates the visual slides to represent the currently
|
|
492
|
+
* set indices.
|
|
493
|
+
*/
|
|
494
|
+
slide = function() {
|
|
495
|
+
indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
|
|
496
|
+
indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
|
|
497
|
+
|
|
498
|
+
// Update progress if enabled
|
|
499
|
+
if( config.progress ) {
|
|
500
|
+
dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
// Close the overview if it's active
|
|
504
|
+
if( overviewIsActive() ) {
|
|
505
|
+
activateOverview();
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
updateControls();
|
|
509
|
+
|
|
510
|
+
// writeURL();
|
|
511
|
+
|
|
512
|
+
// dispatch update event
|
|
513
|
+
if(typeof config.update === 'function'){
|
|
514
|
+
//console.log('updating', indexh, indexv);
|
|
515
|
+
config.update(indexh, indexv);
|
|
516
|
+
}
|
|
517
|
+
};
|
|
518
|
+
|
|
519
|
+
/**
|
|
520
|
+
* Updates the state and link pointers of the controls.
|
|
521
|
+
*/
|
|
522
|
+
updateControls = function() {
|
|
523
|
+
var routes = availableRoutes();
|
|
524
|
+
|
|
525
|
+
// Remove the 'enabled' class from all directions
|
|
526
|
+
[ dom.controlsLeft, dom.controlsRight, dom.controlsUp, dom.controlsDown ].forEach( function( node ) {
|
|
527
|
+
node.classList.remove( 'enabled' );
|
|
528
|
+
} )
|
|
529
|
+
|
|
530
|
+
if( routes.left ) dom.controlsLeft.classList.add( 'enabled' );
|
|
531
|
+
if( routes.right ) dom.controlsRight.classList.add( 'enabled' );
|
|
532
|
+
if( routes.up ) dom.controlsUp.classList.add( 'enabled' );
|
|
533
|
+
if( routes.down ) dom.controlsDown.classList.add( 'enabled' );
|
|
534
|
+
};
|
|
535
|
+
|
|
536
|
+
/**
|
|
537
|
+
* Determine what available routes there are for navigation.
|
|
538
|
+
*
|
|
539
|
+
* @return {Object} containing four booleans: left/right/up/down
|
|
540
|
+
*/
|
|
541
|
+
availableRoutes = function() {
|
|
542
|
+
var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
|
|
543
|
+
var verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
|
|
544
|
+
|
|
545
|
+
return {
|
|
546
|
+
left: indexh > 0,
|
|
547
|
+
right: indexh < horizontalSlides.length - 1,
|
|
548
|
+
up: indexv > 0,
|
|
549
|
+
down: indexv < verticalSlides.length - 1
|
|
550
|
+
};
|
|
551
|
+
};
|
|
552
|
+
|
|
553
|
+
/**
|
|
554
|
+
* Reads the current URL (hash) and navigates accordingly.
|
|
555
|
+
*/
|
|
556
|
+
readURL = function() {
|
|
557
|
+
// Break the hash down to separate components
|
|
558
|
+
var bits = window.location.hash.slice(2).split('/');
|
|
559
|
+
|
|
560
|
+
// Read the index components of the hash
|
|
561
|
+
indexh = bits[0] ? parseInt( bits[0], 10 ) : 0;
|
|
562
|
+
indexv = bits[1] ? parseInt( bits[1], 10 ) : 0;
|
|
563
|
+
|
|
564
|
+
navigateTo( indexh, indexv );
|
|
565
|
+
};
|
|
566
|
+
|
|
567
|
+
/**
|
|
568
|
+
* Updates the page URL (hash) to reflect the current
|
|
569
|
+
* state.
|
|
570
|
+
*/
|
|
571
|
+
writeURL = function() {
|
|
572
|
+
// Enforce max and minimum index bounds
|
|
573
|
+
indexh = Math.max(Math.min(indexh,
|
|
574
|
+
document.querySelectorAll(HORIZONTAL_SLIDES_SELECTOR).length - 1),
|
|
575
|
+
0);
|
|
576
|
+
indexv = Math.max(Math.min(indexv,
|
|
577
|
+
document.querySelectorAll(VERTICAL_SLIDES_SELECTOR).length - 1),
|
|
578
|
+
0);
|
|
579
|
+
|
|
580
|
+
if( config.history ) {
|
|
581
|
+
var url = '/';
|
|
582
|
+
|
|
583
|
+
// Only include the minimum possible number of components in
|
|
584
|
+
// the URL
|
|
585
|
+
if( indexh > 0 || indexv > 0 ) url += indexh;
|
|
586
|
+
if( indexv > 0 ) url += '/' + indexv;
|
|
587
|
+
|
|
588
|
+
window.location.hash = url;
|
|
589
|
+
}
|
|
590
|
+
};
|
|
591
|
+
|
|
592
|
+
/**
|
|
593
|
+
* Navigate to the next slide fragment.
|
|
594
|
+
*
|
|
595
|
+
* @return {Boolean} true if there was a next fragment,
|
|
596
|
+
* false otherwise
|
|
597
|
+
*/
|
|
598
|
+
nextFragment = function() {
|
|
599
|
+
// Vertical slides:
|
|
600
|
+
if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
|
|
601
|
+
var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
|
|
602
|
+
if( verticalFragments.length ) {
|
|
603
|
+
verticalFragments[0].classList.add( 'visible' );
|
|
604
|
+
return true;
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
// Horizontal slides:
|
|
608
|
+
else {
|
|
609
|
+
var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
|
|
610
|
+
if( horizontalFragments.length ) {
|
|
611
|
+
horizontalFragments[0].classList.add( 'visible' );
|
|
612
|
+
return true;
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
return false;
|
|
617
|
+
};
|
|
618
|
+
|
|
619
|
+
/**
|
|
620
|
+
* Navigate to the previous slide fragment.
|
|
621
|
+
*
|
|
622
|
+
* @return {Boolean} true if there was a previous fragment,
|
|
623
|
+
* false otherwise
|
|
624
|
+
*/
|
|
625
|
+
previousFragment = function() {
|
|
626
|
+
// Vertical slides:
|
|
627
|
+
if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
|
|
628
|
+
var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' );
|
|
629
|
+
if( verticalFragments.length ) {
|
|
630
|
+
verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' );
|
|
631
|
+
return true;
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
// Horizontal slides:
|
|
635
|
+
else {
|
|
636
|
+
var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' );
|
|
637
|
+
if( horizontalFragments.length ) {
|
|
638
|
+
horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' );
|
|
639
|
+
return true;
|
|
640
|
+
}
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
return false;
|
|
644
|
+
};
|
|
645
|
+
|
|
646
|
+
/**
|
|
647
|
+
* Triggers a navigation to the specified indices.
|
|
648
|
+
*
|
|
649
|
+
* @param {Number} h The horizontal index of the slide to show
|
|
650
|
+
* @param {Number} v The vertical index of the slide to show
|
|
651
|
+
*/
|
|
652
|
+
navigateTo = function( h, v ) {
|
|
653
|
+
indexh = h === undefined ? indexh : h;
|
|
654
|
+
indexv = v === undefined ? indexv : v;
|
|
655
|
+
|
|
656
|
+
slide();
|
|
657
|
+
};
|
|
658
|
+
|
|
659
|
+
navigateLeft = function() {
|
|
660
|
+
// Prioritize hiding fragments
|
|
661
|
+
if( overviewIsActive() || previousFragment() === false ) {
|
|
662
|
+
indexh --;
|
|
663
|
+
indexv = 0;
|
|
664
|
+
//slide();
|
|
665
|
+
writeURL();
|
|
666
|
+
}
|
|
667
|
+
};
|
|
668
|
+
navigateRight = function() {
|
|
669
|
+
// Prioritize revealing fragments
|
|
670
|
+
if( overviewIsActive() || nextFragment() === false ) {
|
|
671
|
+
indexh ++;
|
|
672
|
+
indexv = 0;
|
|
673
|
+
//slide();
|
|
674
|
+
writeURL();
|
|
675
|
+
}
|
|
676
|
+
};
|
|
677
|
+
navigateUp = function() {
|
|
678
|
+
// Prioritize hiding fragments
|
|
679
|
+
if( overviewIsActive() || previousFragment() === false ) {
|
|
680
|
+
indexv --;
|
|
681
|
+
//slide();
|
|
682
|
+
writeURL();
|
|
683
|
+
}
|
|
684
|
+
};
|
|
685
|
+
navigateDown = function() {
|
|
686
|
+
// Prioritize revealing fragments
|
|
687
|
+
if( overviewIsActive() || nextFragment() === false ) {
|
|
688
|
+
indexv ++;
|
|
689
|
+
//slide();
|
|
690
|
+
writeURL();
|
|
691
|
+
}
|
|
692
|
+
};
|
|
693
|
+
|
|
694
|
+
// Expose some methods publicly
|
|
695
|
+
return {
|
|
696
|
+
initialize: initialize,
|
|
697
|
+
navigateTo: navigateTo,
|
|
698
|
+
navigateLeft: navigateLeft,
|
|
699
|
+
navigateRight: navigateRight,
|
|
700
|
+
navigateUp: navigateUp,
|
|
701
|
+
navigateDown: navigateDown
|
|
702
|
+
};
|
|
703
|
+
|
|
704
|
+
})();
|
|
705
|
+
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
(function(){
|
|
2
|
+
"use strict";
|
|
3
|
+
var $ruler = $('<div id="ruler"><span class="text"></span></div>').draggable().resizable().appendTo('body'),
|
|
4
|
+
$text = $ruler.find('.text');
|
|
5
|
+
$ruler.on('resize', function(e, ui){
|
|
6
|
+
$text.css('line-height', $ruler.innerHeight() + 'px');
|
|
7
|
+
$text.text($ruler.outerWidth() + ' x ' + $ruler.outerHeight());
|
|
8
|
+
});
|
|
9
|
+
}());
|