vebdew 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}());
|