slideshow-service 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +7 -0
  2. data/HISTORY.md +3 -0
  3. data/Manifest.txt +29 -0
  4. data/README.md +27 -0
  5. data/Rakefile +32 -0
  6. data/lib/slideshow/service.rb +185 -0
  7. data/lib/slideshow/service/docs/welcome.md +52 -0
  8. data/lib/slideshow/service/public/css/markdown/note.css +34 -0
  9. data/lib/slideshow/service/public/i/dots-white.gif +0 -0
  10. data/lib/slideshow/service/public/js/lib3rd/jquery-2.0.1.min.js +6 -0
  11. data/lib/slideshow/service/public/js/markdown.note.js +69 -0
  12. data/lib/slideshow/service/public/slideshow-s6-blank/s6/jquery.js +8176 -0
  13. data/lib/slideshow/service/public/slideshow-s6-blank/s6/jquery.slideshow.js +534 -0
  14. data/lib/slideshow/service/public/slideshow-s6-blank/s6/print.css +1 -0
  15. data/lib/slideshow/service/public/slideshow-s6-blank/s6/projection.css +109 -0
  16. data/lib/slideshow/service/public/slideshow-s6-blank/s6/screen.css +50 -0
  17. data/lib/slideshow/service/public/slideshow-s6-blank/slides.html +46 -0
  18. data/lib/slideshow/service/public/slideshow-s6-blank/slides.pdf.html +63 -0
  19. data/lib/slideshow/service/public/slideshow-s6-blank/style.css +94 -0
  20. data/lib/slideshow/service/public/style.css +62 -0
  21. data/lib/slideshow/service/version.rb +25 -0
  22. data/lib/slideshow/service/views/_debug.erb +28 -0
  23. data/lib/slideshow/service/views/_editor.erb +33 -0
  24. data/lib/slideshow/service/views/_editor_head.erb +6 -0
  25. data/lib/slideshow/service/views/_editor_setup.erb +18 -0
  26. data/lib/slideshow/service/views/_version.erb +9 -0
  27. data/lib/slideshow/service/views/debug.erb +3 -0
  28. data/lib/slideshow/service/views/editor.erb +8 -0
  29. data/lib/slideshow/service/views/index.erb +10 -0
  30. data/lib/slideshow/service/views/layout.erb +36 -0
  31. metadata +148 -0
@@ -0,0 +1,534 @@
1
+
2
+ var Slideshow = {};
3
+
4
+
5
+ /************************************
6
+ * lets you define your own "global" transition function
7
+ * passes in a reference to from and to slide wrapped in jQuery wrapper
8
+ */
9
+
10
+ Slideshow.transition = function( $from, $to ) {
11
+ // $from.hide();
12
+ // $to.show();
13
+
14
+ $from.hide('fast');
15
+ $to.show('fast');
16
+ }
17
+
18
+ /***********************
19
+ * sample custom transition using scrollUp effect
20
+ * inspired by Karl Swedberg's Scroll Up Headline Reader jQuery Tutorial[1]
21
+ * [1] http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader
22
+ */
23
+
24
+ function transitionSlideUpSlideDown( $from, $to ) {
25
+ $from.slideUp( 500, function() { $to.slideDown( 1000 ); } );
26
+ }
27
+
28
+ function transitionFadeOutFadeIn( $from, $to ) {
29
+ $from.fadeOut( 500 );
30
+ $to.fadeIn( 500 );
31
+ }
32
+
33
+ function transitionScrollUp( $from, $to ) {
34
+ var cheight = $from.outerHeight();
35
+
36
+ // hide scrollbar during animation
37
+ $( 'body' ).css( 'overflow-y', 'hidden' );
38
+
39
+ $to.css( 'top', cheight+'px' );
40
+ $to.show();
41
+
42
+ $from.animate( {top: -cheight}, 'slow' );
43
+ $to.animate( {top: 0}, 'slow', function() {
44
+ $from.hide().css( 'top', '0px');
45
+
46
+ // restore possible scrollbar
47
+ $( 'body' ).css( 'overflow-y', 'auto' );
48
+ });
49
+ }
50
+
51
+ Slideshow.init = function( options ) {
52
+
53
+ var settings = $.extend({
54
+ mode : 'slideshow', // slideshow | outline | autoplay
55
+ projectionStyleId : '#styleProjection',
56
+ screenStyleId : '#styleScreen',
57
+ titleSelector : 'h1',
58
+ slideSelector : '.slide', // dummy (not yet working)
59
+ stepSelector : '.step', // dummy (not yet working)
60
+ debug : false,
61
+ change : null // todo: change to use a custom event and trigger
62
+ }, options || {});
63
+
64
+ settings.isProjection = true; // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?
65
+ settings.snum = 1; // current slide # (non-zero based index e.g. starting with 1)
66
+ settings.smax = 1; // max number of slides
67
+ settings.incpos = 0; // current step in slide
68
+ settings.steps = null;
69
+ settings.autoplayInterval = null;
70
+
71
+ function debug( msg )
72
+ {
73
+ if( settings.debug && window.console && window.console.log )
74
+ window.console.log( '[debug] ' + msg );
75
+ }
76
+
77
+ function showHide( action )
78
+ {
79
+ var $navLinks = $( '#navLinks' )
80
+
81
+ switch( action ) {
82
+ case 's': $navLinks.css( 'visibility', 'visible' ); break;
83
+ case 'h': $navLinks.css( 'visibility', 'hidden' ); break;
84
+ case 'c': /* toggle control panel */
85
+ if( $navLinks.css( 'visibility' ) != 'visible' )
86
+ $navLinks.css( 'visibility', 'visible' );
87
+ else
88
+ $navLinks.css( 'visibility', 'hidden' );
89
+ break;
90
+ }
91
+ }
92
+
93
+ function updateCurrentSlideCounter()
94
+ {
95
+ $( '#currentSlide' ).html( settings.snum + '/' + settings.smax );
96
+ }
97
+
98
+ function updateJumpList()
99
+ {
100
+ $('#jumplist').get(0).selectedIndex = (settings.snum-1);
101
+ }
102
+
103
+ function updatePermaLink()
104
+ {
105
+ // todo: unify hash marks??; use #1 for div ids instead of #slide1?
106
+ window.location.hash = '#'+settings.snum;
107
+ }
108
+
109
+ function goTo( target )
110
+ {
111
+ if( target > settings.smax || target == settings.snum ) return;
112
+ go( target - settings.snum );
113
+ }
114
+
115
+ function go( dir )
116
+ {
117
+ debug( 'go: ' + dir );
118
+
119
+ if( dir == 0 ) return; /* same slide; nothing to do */
120
+
121
+ var cid = '#slide' + settings.snum; /* current slide (selector) id */
122
+ var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
123
+
124
+ /* remove all step and stepcurrent classes from current slide */
125
+ if( csteps.length > 0) {
126
+ $( csteps ).each( function() {
127
+ $(this).removeClass( 'step' ).removeClass( 'stepcurrent' );
128
+ } );
129
+ }
130
+
131
+ /* set snum to next slide */
132
+ settings.snum += dir;
133
+ if( settings.snum > settings.smax ) settings.snum = settings.smax;
134
+ if( settings.snum < 1 ) settings.snum = 1;
135
+
136
+ var nid = '#slide' + settings.snum; /* next slide (selector) id */
137
+ var nsteps = settings.steps[settings.snum-1]; /* next slide steps array */
138
+
139
+ if( dir < 0 ) /* go backwards? */
140
+ {
141
+ settings.incpos = nsteps.length;
142
+ /* mark last step as current step */
143
+ if( nsteps.length > 0 )
144
+ $( nsteps[settings.incpos-1] ).addClass( 'stepcurrent' );
145
+ }
146
+ else /* go forwards? */
147
+ {
148
+ settings.incpos = 0;
149
+ if( nsteps.length > 0 ) {
150
+ $( nsteps ).each( function() {
151
+ $(this).addClass( 'step' ).removeClass( 'stepcurrent' );
152
+ } );
153
+ }
154
+ }
155
+
156
+ if( !(cid == nid) ) {
157
+ debug( "transition from " + cid + " to " + nid );
158
+ Slideshow.transition( $( cid ), $( nid ) );
159
+ }
160
+
161
+ updateJumpList();
162
+ updateCurrentSlideCounter();
163
+ updatePermaLink();
164
+
165
+ if (settings.change) { settings.change(); }
166
+ }
167
+
168
+ function subgo( dir )
169
+ {
170
+ debug( 'subgo: ' + dir + ', incpos before: ' + settings.incpos + ', after: ' + (settings.incpos+dir) );
171
+
172
+ var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
173
+
174
+ if( dir > 0)
175
+ { /* go forward? */
176
+ if( settings.incpos > 0 )
177
+ $( csteps[settings.incpos-1] ).removeClass( 'stepcurrent' );
178
+ $( csteps[settings.incpos] ).removeClass( 'step').addClass( 'stepcurrent' );
179
+ settings.incpos++;
180
+ }
181
+ else
182
+ { /* go backwards? */
183
+ settings.incpos--;
184
+ $( csteps[settings.incpos] ).removeClass( 'stepcurrent' ).addClass( 'step' );
185
+ if( settings.incpos > 0 )
186
+ $( csteps[settings.incpos-1] ).addClass( 'stepcurrent' );
187
+ }
188
+ }
189
+
190
+
191
+ function notOperaFix()
192
+ {
193
+ $( settings.projectionStyleId ).attr( 'media','screen' );
194
+
195
+ var styleScreen = $( settings.screenStyleId ).get(0);
196
+ styleScreen.disabled = true;
197
+ }
198
+
199
+
200
+ function toggle()
201
+ {
202
+ // toggle between projection (slide show) mode
203
+ // and screen (outline) mode
204
+
205
+ // get stylesheets
206
+ var styleProjection = $( settings.projectionStyleId ).get(0);
207
+ var styleScreen = $( settings.screenStyleId ).get(0);
208
+
209
+ if( !styleProjection.disabled )
210
+ {
211
+ styleProjection.disabled = true;
212
+ styleScreen.disabled = false;
213
+ settings.isProjection = false;
214
+ $('.slide').each( function() { $(this).show(); } );
215
+ }
216
+ else
217
+ {
218
+ styleProjection.disabled = false;
219
+ styleScreen.disabled = true;
220
+ settings.isProjection = true;
221
+ $('.slide').each( function(i) {
222
+ if( i == (settings.snum-1) )
223
+ $(this).show();
224
+ else
225
+ $(this).hide();
226
+ });
227
+ }
228
+ }
229
+
230
+ function populateJumpList() {
231
+
232
+ var list = $('#jumplist').get(0);
233
+
234
+ $( '.slide' ).each( function(i) {
235
+ var text = $(this).find( settings.titleSelector ).text();
236
+ list.options[list.length] = new Option( (i+1)+' : '+ text, (i+1) );
237
+ });
238
+ }
239
+
240
+ function createControls()
241
+ {
242
+ // todo: make layout into an id (not class?)
243
+ // do we need or allow more than one element?
244
+
245
+
246
+ // if no div.layout exists, create one
247
+ if( $( '.layout' ).length == 0 )
248
+ $( "<div class='layout'></div>").appendTo( 'body' );
249
+
250
+ $( '.layout' )
251
+ .append( "<div id='controls'>" )
252
+ .append( "<div id='currentSlide'>" );
253
+
254
+ var $controls = $( '#controls' )
255
+
256
+ $controls.html( '<div id="navLinks">'
257
+ + '<a accesskey="t" id="toggle" href="#">&#216;<\/a>'
258
+ + '<a accesskey="z" id="prev" href="#">&laquo;<\/a>'
259
+ + '<a accesskey="x" id="next" href="#">&raquo;<\/a>'
260
+ + '<div id="navList"><select id="jumplist" /><\/div>'
261
+ + '<\/div>' );
262
+
263
+ $controls.hover( function() { showHide('s') }, function() { showHide('h') });
264
+ $('#toggle').click( function() { toggle(); } );
265
+ $('#prev').click( function() { go(-1); } );
266
+ $('#next').click( function() { go(1); } );
267
+
268
+ $('#jumplist').change( function() { goTo( parseInt( $( '#jumplist' ).val() )); } );
269
+
270
+ populateJumpList();
271
+ updateCurrentSlideCounter();
272
+ updatePermaLink();
273
+ }
274
+
275
+ function toggleSlideNumber()
276
+ {
277
+ // toggle slide number/counter
278
+ $( '#currentSlide' ).toggle();
279
+ }
280
+
281
+ function toggleFooter()
282
+ {
283
+ $( '#footer').toggle();
284
+ }
285
+
286
+
287
+ function keys(key)
288
+ {
289
+ if (!key) {
290
+ key = event;
291
+ key.which = key.keyCode;
292
+ }
293
+ if (key.which == 84) {
294
+ toggle(); // toggle between project and screen css media mode
295
+ return;
296
+ }
297
+ if( settings.isProjection ) {
298
+ switch (key.which) {
299
+ case 32: // spacebar
300
+ case 34: // page down
301
+ case 39: // rightkey
302
+ case 40: // downkey
303
+
304
+ var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
305
+
306
+ if ( !csteps || settings.incpos >= csteps.length ) {
307
+ go(1);
308
+ } else {
309
+ subgo(1);
310
+ }
311
+ break;
312
+ case 33: // page up
313
+ case 37: // leftkey
314
+ case 38: // upkey
315
+
316
+ if( !settings.steps[settings.snum-1] || settings.incpos <= 0 ) {
317
+ go(-1);
318
+ } else {
319
+ subgo(-1);
320
+ }
321
+ break;
322
+ case 36: // home
323
+ goTo(1);
324
+ break;
325
+ case 35: // end
326
+ goTo(settings.smax);
327
+ break;
328
+ case 67: // c
329
+ showHide('c'); // toggle controls (navlinks,navlist)
330
+ break;
331
+ case 65: //a
332
+ case 80: //p
333
+ case 83: //s
334
+ toggleAutoplay();
335
+ break;
336
+ case 70: //f
337
+ toggleFooter();
338
+ break;
339
+ case 78: // n
340
+ toggleSlideNumber();
341
+ break;
342
+ case 68: // d
343
+ toggleDebug();
344
+ break;
345
+ }
346
+ }
347
+ }
348
+
349
+ function autoplay()
350
+ {
351
+ // suspend autoplay in outline view (just slideshow view)
352
+ if( !settings.isProjection )
353
+ return;
354
+
355
+ // next slide/step, please
356
+ var csteps = settings.steps[settings.snum-1]; // current slide steps array
357
+ if( !csteps || settings.incpos >= csteps.length ) {
358
+ if( settings.snum >= settings.smax )
359
+ goTo( 1 ); // reached end of show? start with 1st slide again (for endless cycle)
360
+ else
361
+ go(1);
362
+ }
363
+ else {
364
+ subgo(1);
365
+ }
366
+ }
367
+
368
+ function toggleDebug()
369
+ {
370
+ settings.debug = !settings.debug;
371
+ doDebug();
372
+ }
373
+
374
+ function doDebug()
375
+ {
376
+ // fix/todo: save background into oldbackground
377
+ // so we can restore later
378
+
379
+ if( settings.debug == true )
380
+ {
381
+ $( '#header' ).css( 'background', '#FCC' );
382
+ $( '#footer' ).css( 'background', '#CCF' );
383
+ $( '#controls' ).css( 'background', '#BBD' );
384
+ $( '#currentSlide' ).css( 'background', '#FFC' );
385
+ }
386
+ else
387
+ {
388
+ $( '#header' ).css( 'background', 'transparent' );
389
+ $( '#footer' ).css( 'background', 'transparent' );
390
+ $( '#controls' ).css( 'background', 'transparent' );
391
+ $( '#currentSlide' ).css( 'background', 'transparent' );
392
+ }
393
+ }
394
+
395
+
396
+ function toggleAutoplay()
397
+ {
398
+ if( settings.autoplayInterval )
399
+ {
400
+ clearInterval( settings.autoplayInterval );
401
+ settings.autoplayInterval = null;
402
+ }
403
+ else
404
+ {
405
+ settings.autoplayInterval = setInterval ( autoplay, 2000 );
406
+ }
407
+ }
408
+
409
+
410
+
411
+ function collectStepsWorker(obj) {
412
+
413
+ var steps = new Array();
414
+ if( !obj )
415
+ return steps;
416
+
417
+ $(obj).children().each( function() {
418
+ if( $(this).hasClass( 'step' ) ) {
419
+
420
+ debug( 'step found for ' + this.tagName );
421
+ $(this).removeClass( 'step' );
422
+
423
+ /* don't add enclosing list; instead add step class to all list items/children */
424
+ if( $(this).is( 'ol,ul' ) ) {
425
+ debug( ' ol or ul found; adding auto steps' );
426
+ $(this).children().addClass( 'step' );
427
+ }
428
+ else
429
+ {
430
+ steps.push( this )
431
+ }
432
+ }
433
+
434
+ steps = steps.concat( collectStepsWorker(this) );
435
+ });
436
+
437
+ return steps;
438
+ }
439
+
440
+ function collectSteps() {
441
+
442
+ var steps = new Array();
443
+
444
+ $slides.each( function(i) {
445
+ debug ( 'collectSteps for ' + this.id + ':' );
446
+ steps[i] = collectStepsWorker( this );
447
+ });
448
+
449
+ $( steps ).each( function(i) {
450
+ debug( 'slide ' + (i+1) + ': found ' + this.length + ' steps' );
451
+ });
452
+
453
+ return steps;
454
+ }
455
+
456
+
457
+ function addClicker() {
458
+ // if you click on heading of slide -> go to next slide (or next step)
459
+
460
+ $( settings.titleSelector, $slides ).click( function( ev ) {
461
+ if(ev.which != 1) return; // only process left clicks (e.g 1; middle and rightclick use 2 and 3)
462
+
463
+ if( !settings.isProjection ) // suspend clicker in outline view (just slideshow view)
464
+ return;
465
+
466
+ var csteps = settings.steps[settings.snum-1]; // current slide steps array
467
+ if ( !csteps || settings.incpos >= csteps.length )
468
+ go(1);
469
+ else
470
+ subgo(1);
471
+ } );
472
+
473
+
474
+ $( settings.titleSelector, $slides ).bind('contextmenu', function() {
475
+ if( !settings.isProjection ) // suspend clicker in outline view (just slideshow view)
476
+ return;
477
+
478
+ var csteps = settings.steps[settings.snum-1]; // current slide steps array
479
+ if ( !csteps || settings.incpos >= csteps.length )
480
+ go(-1);
481
+ else
482
+ subgo(-1);
483
+
484
+ return false;
485
+ } );
486
+ }
487
+
488
+ function addSlideIds() {
489
+ $slides.each( function(i) {
490
+ this.id = 'slide'+(i+1);
491
+ });
492
+ }
493
+
494
+ // init code here
495
+
496
+ // store possible slidenumber from hash */
497
+ // todo: use regex to extract number
498
+ // might be #slide1 or just #1
499
+
500
+ var gotoSlideNum = parseInt( window.location.hash.substring(1) );
501
+ debug( "gotoSlideNum=" + gotoSlideNum );
502
+
503
+ var $slides = $( '.slide' );
504
+ settings.smax = $slides.length;
505
+
506
+ addSlideIds();
507
+ settings.steps = collectSteps();
508
+
509
+ createControls();
510
+
511
+ addClicker();
512
+
513
+ /* opera is the only browser currently supporting css projection mode */
514
+ /* if( !$.browser.opera ) */
515
+ notOperaFix();
516
+
517
+ if( !isNaN( gotoSlideNum ))
518
+ {
519
+ debug( "restoring slide on (re)load #: " + gotoSlideNum );
520
+ goTo( gotoSlideNum );
521
+ }
522
+
523
+ if( settings.mode == 'outline' )
524
+ toggle();
525
+ else if( settings.mode == 'autoplay' )
526
+ toggleAutoplay();
527
+
528
+
529
+ if( settings.debug == true )
530
+ doDebug();
531
+
532
+ document.onkeyup = keys;
533
+
534
+ } // end Slideshow