|
0
|
1 /***********
|
|
|
2 *
|
|
|
3 * counter addon:
|
|
|
4 *
|
|
|
5 * adds slide counter (e.g. 1/7)
|
|
|
6 * - use key-n to toggle slide counter (in projection mode)
|
|
|
7 *
|
|
|
8 * layout structure:
|
|
|
9 *
|
|
|
10 * .layout
|
|
|
11 * > #counter (e.g. 1/7)
|
|
|
12 */
|
|
|
13
|
|
|
14
|
|
|
15 Slideshow.counterInit = function()
|
|
|
16 {
|
|
|
17 this.debug( 'calling counterInit()' );
|
|
|
18
|
|
|
19 // if no div.layout exists, create one
|
|
|
20 if( $( '.layout' ).length == 0 )
|
|
|
21 $( 'body' ).append( "<div class='layout'></div>");
|
|
|
22
|
|
|
23 $( '.layout' ).append( "<div id='counter'>" );
|
|
|
24
|
|
|
25 this.counterUpdate();
|
|
|
26 }
|
|
|
27
|
|
|
28 Slideshow.counterDebugOn = function()
|
|
|
29 {
|
|
|
30 this.debug( 'calling counterDebugOn()' );
|
|
|
31 $( '#counter' ).addClass( 'debug' );
|
|
|
32 }
|
|
|
33
|
|
|
34 Slideshow.counterDebugOff = function()
|
|
|
35 {
|
|
|
36 this.debug( 'calling counterDebugOff()' );
|
|
|
37 $( '#counter' ).removeClass( 'debug' );
|
|
|
38 }
|
|
|
39
|
|
|
40 Slideshow.counterKeys = function( event, key )
|
|
|
41 {
|
|
|
42 this.debug( 'calling counterKeys()' );
|
|
|
43
|
|
|
44 switch( key.which ) {
|
|
|
45 case 78: // n
|
|
|
46 this.counterToggle();
|
|
|
47 break;
|
|
|
48 }
|
|
|
49 }
|
|
|
50
|
|
|
51 Slideshow.counterChange = function()
|
|
|
52 {
|
|
|
53 this.debug( 'calling counterChange()' );
|
|
|
54 this.counterUpdate();
|
|
|
55 }
|
|
|
56
|
|
|
57 // ------------------------------------------------
|
|
|
58
|
|
|
59 Slideshow.counterUpdate = function()
|
|
|
60 {
|
|
|
61 $( '#counter' ).html( this.snum + '/' + this.smax );
|
|
|
62 }
|
|
|
63
|
|
|
64
|
|
|
65 Slideshow.counterToggle = function()
|
|
|
66 {
|
|
|
67 // toggle slide number/counter
|
|
|
68
|
|
|
69 // todo/fix: note jquery sets inline css (e.g. display: block)
|
|
|
70 // but css won't get scoped for media (e.g. projection, screen, etc)
|
|
|
71 // thus, css changes "spill over" to all media types
|
|
|
72
|
|
|
73 $( '#counter' ).toggle();
|
|
|
74 }
|
|
|
75
|
|
|
76 // ------------------------------------------------
|
|
|
77
|
|
|
78 Slideshow.counterAddEvents = function()
|
|
|
79 {
|
|
|
80 $( document ).on( 'slideshow.init', $.proxy( Slideshow.counterInit, this ));
|
|
|
81 $( document ).on( 'slideshow.debug.on', $.proxy( Slideshow.counterDebugOn, this ));
|
|
|
82 $( document ).on( 'slideshow.debug.off', $.proxy( Slideshow.counterDebugOff, this ));
|
|
|
83 $( document ).on( 'slideshow.keys', $.proxy( Slideshow.counterKeys, this ));
|
|
|
84 $( document ).on( 'slideshow.change', $.proxy( Slideshow.counterChange, this ));
|
|
|
85 }
|
|
|
86
|
|
|
87 Slideshow.counterAddStyles = function() {
|
|
|
88 this.debug( 'add builtin counter css via inline style elements' );
|
|
|
89
|
|
|
90 var styleProjection =
|
|
|
91 "<style media='screen,projection'> \n"+
|
|
|
92 " \n"+
|
|
|
93 " #counter.debug { background: #FFC; } \n"+
|
|
|
94 " \n"+
|
|
|
95 " #counter { position: fixed; \n"+
|
|
|
96 " left: 45%; bottom: 1em; \n"+
|
|
|
97 " width: 10%; \n"+
|
|
|
98 " z-index: 10; \n"+
|
|
|
99 " text-align: center; \n"+
|
|
|
100 " font-size: 80%; \n"+
|
|
|
101 " } \n"+
|
|
|
102 " \n"+
|
|
|
103 " #counter :link, \n"+
|
|
|
104 " #counter :visited { text-decoration: none; } \n"+
|
|
|
105 " \n"+
|
|
|
106 "</style>";
|
|
|
107
|
|
|
108 var styleScreen =
|
|
|
109 "<style media='screen'> \n"+
|
|
|
110 " #counter { display: none !important; } \n"+
|
|
|
111 "</style>";
|
|
|
112
|
|
|
113 $( 'head' ).append( styleProjection );
|
|
|
114 $( 'head' ).append( styleScreen );
|
|
|
115 }
|
|
|
116
|
|
|
117 Slideshow.counterAddStyles();
|
|
|
118 Slideshow.counterAddEvents(); |
