Mercurial > hg > Members > shivanidubey > Internship_presentation

comparison s6/js/jquery.slideshow.js @ 0:845dadcd3a85

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
slide.html
author shivanidubey
date Fri, 21 Jun 2019 14:14:31 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:845dadcd3a85
1
2 var Slideshow = {
3
4 settings: {
5 debug: true
6 },
7
8 isProjection: false, // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?
9 snum: 1, // current slide # (non-zero based index e.g. starting with 1)
10 smax: 1, // max number of slides
11 incpos: 0, // current step in slide
12 steps: null,
13
14 $slides: null,
15 $stylesProjection: null,
16 $stylesScreen: null,
17
18 slideClasses: [ 'far-past', 'past', 'current', 'next', 'far-next' ]
19 };
20
21
22 /************************************
23 * lets you define your own "global" transition function
24 * passes in a reference to from and to slide wrapped in jQuery wrapper
25 *
26 * see jquery.slideshow.transition.js for more examples
27 */
28
29 Slideshow.transition = function( $from, $to ) {
30 // do nothing here; by default lets use css3 for transition effects
31 }
32
33
34 Slideshow.debug = function( msg ) {
35 if( this.settings.debug && window.console && window.console.log )
36 window.console.log( '[debug] ' + msg );
37 }
38
39
40 Slideshow.init = function( options ) {
41
42 this.settings = $.extend({
43 mode : 'slideshow', // slideshow | outline | autoplay
44 titleSelector : 'h1',
45 slideSelector : '.slide', // dummy (not yet working)
46 stepSelector : '.step', // dummy (not yet working)
47 debug : false,
48 normalize : true // normalize selectors (that is, allow aliases
49 // e.g. build,action,etc. for step and so on)
50 }, options || {});
51
52 this.isProjection = false; // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?
53 this.snum = 1; // current slide # (non-zero based index e.g. starting with 1)
54 this.smax = 1; // max number of slides
55 this.incpos = 0; // current step in slide
56 this.steps = null;
57
58 if( this.settings.normalize == true )
59 this.normalize();
60
61 this.$slides = $( '.slide' );
62
63 this.smax = this.$slides.length;
64
65 this.addSlideIds();
66 this.steps = this.collectSteps();
67 this.updateSlides(); // mark slides w/ far-past,past,current,next,far-next
68
69 // $stylesProjection holds all styles (<link rel="stylesheet"> or <style> w/ media type projection)
70 // $stylesScreen holds all styles (<link rel="stylesheet"> or <style> w/ media type screen)
71
72 // add workaround for chrome
73 // use screen,projection instead of projection
74 // (without projection inline style tag gets not parsed into a styleSheet accesible via JavaScript)
75
76 this.$stylesProjection = $( 'link[media*=projection], style[media*=projection]' ).not('[rel*=less]').not('[type*=less]');
77 this.$stylesScreen = $( 'link[media*=screen], style[media*=screen]' ).not('[media*=projection]').not('[rel*=less]').not('[type*=less]') ;
78
79 $( document ).trigger( 'slideshow.init' ); // fire init for addons
80
81 this.addClicker();
82
83
84 // opera is the only browser currently supporting css projection mode
85 this.notOperaFix();
86
87 // store possible slidenumber from hash */
88 // todo: use regex to extract number
89 // might be #slide1 or just #1
90
91 var gotoSlideNum = parseInt( window.location.hash.substring(1) );
92 this.debug( "gotoSlideNum=" + gotoSlideNum );
93
94 if( !isNaN( gotoSlideNum ))
95 {
96 this.debug( "restoring slide on (re)load #: " + gotoSlideNum );
97 this.goTo( gotoSlideNum );
98 }
99
100 if( this.settings.mode == 'outline' )
101 this.toggle();
102
103 $( document ).trigger( 'slideshow.start' ); // fire start for addons
104
105 $( document ).on( 'keyup', $.proxy( Slideshow.keys, this ));
106 } // end init()
107
108
109 Slideshow.normalize = function() {
110
111 // check for .presentation aliases, that is, .deck, .slides
112 $( '.deck, .slides' ).addClass( 'presentation' );
113
114 // add slide class to immediate children
115 // todo: use autoslide option that lets you turn on/off option?
116 $( '.presentation' ).children().addClass( 'slide' );
117
118 // todo: scope with .slide?? e.g .slide .incremental
119 // todo: make removing "old" class an option??
120
121 // check for .step aliases, that is, .incremental, .delayed, .action, .build
122 $( '.incremental, .delayed, .action, .build' ).addClass( 'step' );
123
124 // check for .notes aliases, that is, .note, .handout
125 $( '.note, .handout' ).addClass( 'notes' );
126
127 }
128
129 Slideshow.notOperaFix = function() {
130 // 1) switch media type from projection to screen
131
132 var self = this; // NOTE: jquery binds this in .each to element
133
134 this.$stylesProjection.each( function(i) {
135 var styleProjection = this;
136 // note: no longer used; workaround for chrome needs screen,projection to make it work (thus, no need to switch to screen)
137 // styleProjection.media = 'screen';
138 styleProjection.disabled = true;
139
140 self.debug( "notOperaFix - stylesProjection["+i+"] switching media type from projection to screen" );
141 } );
142
143 this.isProjection = false;
144
145 // 2) disable screen styles and enable projection styles (thus, switch into projection mode)
146 this.toggle();
147
148 // now we should be in project mode
149 } // end notOperatFix()
150
151
152 Slideshow.toggle = function() {
153 // todo: use settings.isProjection for state tracking
154 // and change disable accordingly (plus assert that all styles are in the state as expected)
155
156 // toggle between projection (slide show) mode
157 // and screen (outline) mode
158
159 var self = this; // NOTE: jquery binds this in .each to element
160
161 this.$stylesProjection.each( function(i) {
162 var styleProjection = this;
163
164 styleProjection.disabled = !styleProjection.disabled;
165
166 self.debug( "toggle - stylesProjection["+i+"] disabled? " + styleProjection.disabled );
167 });
168
169 this.$stylesScreen.each( function(i) {
170 var styleScreen = this;
171
172 styleScreen.disabled = !styleScreen.disabled;
173
174 self.debug( "toggle - stylesScreen["+i+"] disabled? " + styleScreen.disabled );
175
176 // update isProjection flag
177 self.isProjection = styleScreen.disabled;
178 });
179
180 /*
181 * note: code no longer needed; using (adding/removing) css classes hide/show)
182 *
183
184 if( this.isProjection )
185 {
186 this.$slides.each( function(i) {
187 if( i == (self.snum-1) )
188 $(this).show();
189 else
190 $(this).hide();
191 });
192 }
193 else
194 {
195 this.$slides.show();
196 }
197 */
198 } // end toggle()
199
200
201 Slideshow.updatePermaLink = function()
202 {
203 // todo: unify hash marks??; use #1 for div ids instead of #slide1?
204 window.location.hash = '#'+ this.snum;
205 }
206
207 Slideshow.goTo = function( target )
208 {
209 if( target > this.smax || target == this.snum )
210 return;
211
212 this.go( target - this.snum );
213 }
214
215 Slideshow.go = function( dir )
216 {
217 this.debug( 'go: ' + dir );
218
219 if( dir == 0 ) return; /* same slide; nothing to do */
220
221 var cid = '#slide' + this.snum; /* current slide (selector) id */
222 var csteps = this.steps[ this.snum-1 ]; /* current slide steps array */
223
224 /* remove all step and stepcurrent classes from current slide */
225 if( csteps.length > 0) {
226 $( csteps ).each( function() {
227 $(this).removeClass( 'step' ).removeClass( 'stepcurrent' );
228 } );
229 }
230
231 /* set snum to next slide */
232 this.snum += dir;
233 if( this.snum > this.smax ) this.snum = this.smax;
234 if( this.snum < 1 ) this.snum = 1;
235
236 var nid = '#slide' + this.snum; /* next slide (selector) id */
237 var nsteps = this.steps[this.snum-1]; /* next slide steps array */
238
239 if( dir < 0 ) /* go backwards? */
240 {
241 this.incpos = nsteps.length;
242 /* mark last step as current step */
243 if( nsteps.length > 0 )
244 $( nsteps[this.incpos-1] ).addClass( 'stepcurrent' );
245 }
246 else /* go forwards? */
247 {
248 this.incpos = 0;
249 if( nsteps.length > 0 ) {
250 $( nsteps ).each( function() {
251 $(this).addClass( 'step' ).removeClass( 'stepcurrent' );
252 } );
253 }
254 }
255
256 if( !(cid == nid) ) {
257 this.updateSlides();
258
259 this.debug( "transition from " + cid + " to " + nid );
260 this.transition( $( cid ), $( nid ) );
261
262 // only fire change event if slide changes
263 $( document ).trigger( 'slideshow.change', [$( cid ), $( nid )]);
264 }
265
266 this.updatePermaLink();
267 } // end go()
268
269
270 Slideshow.updateSlideClass = function( $slide, className )
271 {
272 if( className )
273 $slide.addClass( className );
274
275 for( var i in this.slideClasses )
276 {
277 if( className != this.slideClasses[i] )
278 $slide.removeClass( this.slideClasses[i] );
279 }
280 }
281
282 Slideshow.updateSlides = function()
283 {
284 var self = this;
285 this.$slides.each( function( i ) {
286 switch( i ) {
287 case (self.snum-1)-2:
288 self.updateSlideClass( $(this), 'far-past' );
289 break;
290 case (self.snum-1)-1:
291 self.updateSlideClass( $(this), 'past' );
292 break;
293 case (self.snum-1):
294 self.updateSlideClass( $(this), 'current' );
295 break;
296 case (self.snum-1)+1:
297 self.updateSlideClass( $(this), 'next' );
298 break;
299 case (self.snum-1)+2:
300 self.updateSlideClass( $(this), 'far-next' );
301 break;
302 default:
303 self.updateSlideClass( $(this) );
304 break;
305 }
306 });
307 }
308
309
310
311 Slideshow.subgo = function( dir )
312 {
313 this.debug( 'subgo: ' + dir + ', incpos before: ' + this.incpos + ', after: ' + (this.incpos+dir) );
314
315 var csteps = this.steps[this.snum-1]; /* current slide steps array */
316
317 if( dir > 0)
318 { /* go forward? */
319 if( this.incpos > 0 )
320 $( csteps[this.incpos-1] ).removeClass( 'stepcurrent' );
321 $( csteps[this.incpos] ).removeClass( 'step').addClass( 'stepcurrent' );
322 this.incpos++;
323 }
324 else
325 { /* go backwards? */
326 this.incpos--;
327 $( csteps[this.incpos] ).removeClass( 'stepcurrent' ).addClass( 'step' );
328 if( this.incpos > 0 )
329 $( csteps[this.incpos-1] ).addClass( 'stepcurrent' );
330 }
331 } // end subgo()
332
333
334 Slideshow.keys = function( key )
335 {
336 this.debug( "enter keys()" );
337
338 if( !key ) {
339 key = event;
340 key.which = key.keyCode;
341 }
342 if( key.which == 84 ) {
343 this.toggle(); // toggle between project and screen css media mode
344 return;
345 }
346 if( this.isProjection ) {
347 switch( key.which ) {
348 case 32: // spacebar
349 case 34: // page down
350 case 39: // rightkey
351 case 40: // downkey
352
353 var csteps = this.steps[this.snum-1]; /* current slide steps array */
354
355 if( !csteps || this.incpos >= csteps.length ) {
356 this.go(1);
357 } else {
358 this.subgo(1);
359 }
360 break;
361 case 33: // page up
362 case 37: // leftkey
363 case 38: // upkey
364
365 if( !this.steps[this.snum-1] || this.incpos <= 0 ) {
366 this.go(-1);
367 } else {
368 this.subgo(-1);
369 }
370 break;
371 case 36: // home
372 this.goTo(1);
373 break;
374 case 35: // end
375 this.goTo( this.smax );
376 break;
377 case 68: // d
378 this.toggleDebug();
379 break;
380 }
381 $( document ).trigger( 'slideshow.keys', key );
382 }
383 } // end keys()
384
385
386 Slideshow.toggleDebug = function()
387 {
388 this.settings.debug = !this.settings.debug;
389 this.doDebug();
390 }
391
392 Slideshow.doDebug = function()
393 {
394 if( this.settings.debug == true )
395 {
396 $( document ).trigger( 'slideshow.debug.on' );
397 }
398 else
399 {
400 $( document ).trigger( 'slideshow.debug.off' );
401 }
402 }
403
404 Slideshow.collectStepsWorker = function(obj)
405 {
406 var self = this; // NOTE: jquery binds this in .each,.click, etc to element
407
408 var steps = [];
409 if( !obj )
410 return steps;
411
412 $(obj).children().each( function() {
413 if( $(this).hasClass( 'step' ) ) {
414
415 self.debug( 'step found for ' + this.tagName );
416 $(this).removeClass( 'step' );
417
418 /* don't add enclosing list; instead add step class to all list items/children */
419 if( $(this).is( 'ol,ul' ) ) {
420 self.debug( ' ol or ul found; adding auto steps' );
421 $(this).children().addClass( 'step' );
422 }
423 else
424 {
425 steps.push( this )
426 }
427 }
428 steps = steps.concat( self.collectStepsWorker( this ) );
429 });
430
431 return steps;
432 } // end collectStepWorkers
433
434 Slideshow.collectSteps = function()
435 {
436 var self = this; // NOTE: jquery binds this in .each,.click, etc to element
437
438 var steps = [];
439
440 this.$slides.each( function(i) {
441 self.debug ( 'collectSteps for ' + this.id + ':' );
442 steps[i] = self.collectStepsWorker( this );
443 });
444
445 $( steps ).each( function(i) {
446 self.debug( 'slide ' + (i+1) + ': found ' + this.length + ' steps' );
447 });
448
449 return steps;
450 } // end collectSteps()
451
452
453 Slideshow.addClicker = function()
454 {
455 var self = this; // NOTE: jquery binds this in .each,.click, etc to element
456
457 // if you click on heading of slide -> go to next slide (or next step)
458
459 $( this.settings.titleSelector, this.$slides ).click( function( ev ) {
460 if(ev.which != 1) return; // only process left clicks (e.g 1; middle and rightclick use 2 and 3)
461
462 if( !self.isProjection ) // suspend clicker in outline view (just slideshow view)
463 return;
464
465 var csteps = self.steps[self.snum-1]; // current slide steps array
466 if ( !csteps || self.incpos >= csteps.length )
467 self.go(1);
468 else
469 self.subgo(1);
470 });
471
472
473 $( this.settings.titleSelector, this.$slides ).on('contextmenu', function() {
474 if( !self.isProjection ) // suspend clicker in outline view (just slideshow view)
475 return;
476
477 var csteps = self.steps[self.snum-1]; // current slide steps array
478 if ( !csteps || self.incpos >= csteps.length )
479 self.go(-1);
480 else
481 self.subgo(-1);
482
483 return false;
484 } );
485 } // end addClicker()
486
487
488 Slideshow.addSlideIds = function() {
489 this.$slides.each( function(i) {
490 this.id = 'slide'+(i+1);
491 });
492 }
493
494
495 Slideshow.addStyles = function() {
496 this.debug( 'add builtin css via inline style elements' );
497
498 var styleProjection =
499 "<style media='screen,projection'> \n"+
500 " .slide { display: block; } \n"+
501 " .notes { display: none; } \n"+
502 " .layout { display: block; } \n"+
503 "</style>";
504
505 var styleScreen =
506 "<style media='screen'> \n"+
507 "/**** \n"+
508 " * hide layout stuff (header, footer, navLinks, navList etc.) \n"+
509 " */ \n"+
510 " \n"+
511 " .layout * { display: none; } \n"+
512 "</style>";
513
514 var stylePrint =
515 "<style media='print'> \n"+
516 " \n"+
517 " .slide { display: block !important; } \n"+
518 " .layout, .layout * { display: none !important; } \n"+
519 " \n"+
520 "/****** \n"+
521 " * Turn on print-specific stuff/classes \n"+
522 " */ \n"+
523 " \n"+
524 " .extra { display: block !important; } \n"+
525 "</style>";
526
527 // note: use prepend (not append) to make sure this
528 // styles come first (and do not overrule user supplied styles)
529
530 $( 'head' ).prepend( styleProjection );
531 $( 'head' ).prepend( styleScreen );
532 $( 'head' ).prepend( stylePrint );
533 }
534
535 Slideshow.addStyles();