|
10
|
1 /***********
|
|
|
2 *
|
|
|
3 * control addon:
|
|
|
4 *
|
|
|
5 * adds toggle, prev slide, next slide links/buttons and jump list
|
|
|
6 * - use key-c to toggle controls (in projection mode)
|
|
|
7 *
|
|
|
8 * layout structure:
|
|
|
9 *
|
|
|
10 * .layout
|
|
|
11 * > #controls (holding navigation controls)
|
|
|
12 * > #navLinks
|
|
|
13 * > #toggle
|
|
|
14 * > #navList
|
|
|
15 * > #jumplist
|
|
|
16 */
|
|
|
17
|
|
|
18
|
|
|
19 Slideshow.ctrlInit = function()
|
|
|
20 {
|
|
|
21 this.debug( 'calling ctrlInit()' );
|
|
|
22
|
|
|
23 var self = this; // NOTE: jquery binds this in .each,.click, etc to element
|
|
|
24
|
|
|
25 // todo: make layout into an id (not class?)
|
|
|
26 // do we need or allow more than one element?
|
|
|
27
|
|
|
28 // if no div.layout exists, create one
|
|
|
29 if( $( '.layout' ).length == 0 )
|
|
|
30 $( 'body' ).append( "<div class='layout'></div>");
|
|
|
31
|
|
|
32 $( '.layout' ).append( "<div id='controls'>" );
|
|
|
33
|
|
|
34 var $controls = $( '#controls' )
|
|
|
35
|
|
|
36 $controls.html( '<div id="navLinks">'
|
|
|
37 + '<a accesskey="t" id="toggle" href="#">Ø<\/a>'
|
|
|
38 + '<a accesskey="z" id="prev" href="#">«<\/a>'
|
|
|
39 + '<a accesskey="x" id="next" href="#">»<\/a>'
|
|
|
40 + '<div id="navList"><select id="jumplist" /><\/div>'
|
|
|
41 + '<\/div>' );
|
|
|
42
|
|
|
43 $controls.hover( function() { self.ctrlShow(); }, function() { self.ctrlHide(); });
|
|
|
44 $('#toggle').click( function() { self.toggle(); } );
|
|
|
45 $('#prev').click( function() { self.go(-1); } );
|
|
|
46 $('#next').click( function() { self.go(1); } );
|
|
|
47
|
|
|
48 $('#jumplist').change( function() { self.goTo( parseInt( $( '#jumplist' ).val() )); } );
|
|
|
49
|
|
|
50 this.ctrlPopulateJumpList();
|
|
|
51 }
|
|
|
52
|
|
|
53
|
|
|
54 Slideshow.ctrlDebugOn = function()
|
|
|
55 {
|
|
|
56 this.debug( 'calling ctrlDebugOn()' );
|
|
|
57 $( '#controls' ).addClass( 'debug' );
|
|
|
58 }
|
|
|
59
|
|
|
60 Slideshow.ctrlDebugOff = function()
|
|
|
61 {
|
|
|
62 this.debug( 'calling ctrlDebugOff()' );
|
|
|
63 $( '#controls' ).removeClass( 'debug' );
|
|
|
64 }
|
|
|
65
|
|
|
66 Slideshow.ctrlKeys = function( event, key )
|
|
|
67 {
|
|
|
68 this.debug( 'calling ctrlKeys()' );
|
|
|
69
|
|
|
70 switch( key.which ) {
|
|
|
71 case 67: // c
|
|
|
72 this.ctrlToggle();
|
|
|
73 break;
|
|
|
74 }
|
|
|
75 }
|
|
|
76
|
|
|
77 Slideshow.ctrlChange = function()
|
|
|
78 {
|
|
|
79 this.debug( 'calling ctrlChange()' );
|
|
|
80 this.ctrlUpdateJumpList();
|
|
|
81 }
|
|
|
82
|
|
|
83 // -----------------------------------------------------
|
|
|
84
|
|
|
85 Slideshow.ctrlPopulateJumpList = function()
|
|
|
86 {
|
|
|
87 var self = this; // NOTE: jquery binds this in .each to element
|
|
|
88
|
|
|
89 var list = $('#jumplist').get(0);
|
|
|
90
|
|
|
91 this.$slides.each( function(i) {
|
|
|
92 var text = "-"; // untitled slide
|
|
|
93
|
|
|
94 // todo: use titleSelector if user set??
|
|
|
95 // $(this).find( self.settings.titleSelector ).text();
|
|
|
96
|
|
|
97 var $h1 = $( 'h1', this );
|
|
|
98 if( $h1.length > 0 )
|
|
|
99 {
|
|
|
100 text = $h1.first().text();
|
|
|
101 }
|
|
|
102 else // try h2
|
|
|
103 {
|
|
|
104 var $h2 = $( 'h2', this );
|
|
|
105 if( $h2.length > 0 )
|
|
|
106 {
|
|
|
107 text = $h2.first().text();
|
|
|
108 }
|
|
|
109 else // try h3
|
|
|
110 {
|
|
|
111 var $h3 = $( 'h3', this );
|
|
|
112 if( $h3.length > 0 )
|
|
|
113 {
|
|
|
114 text = $h3.first().text();
|
|
|
115 }
|
|
|
116 }
|
|
|
117 }
|
|
|
118
|
|
|
119 list.options[list.length] = new Option( (i+1)+' : '+ text, (i+1) );
|
|
|
120 });
|
|
|
121 }
|
|
|
122
|
|
|
123 Slideshow.ctrlUpdateJumpList = function()
|
|
|
124 {
|
|
|
125 $('#jumplist').get(0).selectedIndex = (this.snum-1);
|
|
|
126 }
|
|
|
127
|
|
|
128 Slideshow.ctrlShow = function()
|
|
|
129 {
|
|
|
130 $( '#navLinks' ).css( 'visibility', 'visible' );
|
|
|
131 }
|
|
|
132
|
|
|
133 Slideshow.ctrlHide = function()
|
|
|
134 {
|
|
|
135 $( '#navLinks' ).css( 'visibility', 'hidden' );
|
|
|
136 }
|
|
|
137
|
|
|
138 Slideshow.ctrlToggle = function()
|
|
|
139 {
|
|
|
140 // toggle control panel
|
|
|
141 var $navLinks = $( '#navLinks' );
|
|
|
142
|
|
|
143 if( $navLinks.css( 'visibility' ) != 'visible' )
|
|
|
144 $navLinks.css( 'visibility', 'visible' );
|
|
|
145 else
|
|
|
146 $navLinks.css( 'visibility', 'hidden' );
|
|
|
147 }
|
|
|
148
|
|
|
149
|
|
|
150 // ------------------------------------------------
|
|
|
151
|
|
|
152 Slideshow.ctrlAddEvents = function()
|
|
|
153 {
|
|
|
154 $( document ).on( 'slideshow.init', $.proxy( Slideshow.ctrlInit, this ));
|
|
|
155 $( document ).on( 'slideshow.debug.on', $.proxy( Slideshow.ctrlDebugOn, this ));
|
|
|
156 $( document ).on( 'slideshow.debug.off', $.proxy( Slideshow.ctrlDebugOff, this ));
|
|
|
157 $( document ).on( 'slideshow.keys', $.proxy( Slideshow.ctrlKeys, this ));
|
|
|
158 $( document ).on( 'slideshow.change', $.proxy( Slideshow.ctrlChange, this ));
|
|
|
159 }
|
|
|
160
|
|
|
161 Slideshow.ctrlAddStyles = function() {
|
|
|
162 this.debug( 'add builtin controls css via inline style elements' );
|
|
|
163
|
|
|
164 var styleProjection =
|
|
|
165 "<style media='screen,projection'> \n"+
|
|
|
166 " \n"+
|
|
|
167 " #controls.debug { background: #BBD; } \n"+
|
|
|
168 " \n"+
|
|
|
169 " #controls { position: fixed; \n"+
|
|
|
170 " left: 60%; bottom: 0; \n"+
|
|
|
171 " width: 40%; \n"+
|
|
|
172 " z-index: 100; \n"+
|
|
|
173 " text-align: right; \n"+
|
|
|
174 " font-weight: bold; \n"+
|
|
|
175 " font-size: 120%; \n"+
|
|
|
176 " } \n"+
|
|
|
177 " \n"+
|
|
|
178 " #controls :focus { outline: 1px dotted white;} \n"+
|
|
|
179 " \n"+
|
|
|
180 " #controls #navLinks { text-align: right; margin: 0; visibility: hidden; } \n"+
|
|
|
181
|
|
|
182 " \n"+
|
|
|
183 " #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; } \n"+
|
|
|
184 " \n"+
|
|
|
185 " #controls #navLinks :link, \n"+
|
|
|
186 " #controls #navLinks :visited {text-decoration: none; } \n"+
|
|
|
187 " \n"+
|
|
|
188 " #controls #navList #jumplist { background: white; color: black; } \n"+
|
|
|
189 "</style>";
|
|
|
190
|
|
|
191 var styleScreen =
|
|
|
192 "<style media='screen'> \n"+
|
|
|
193 "/********* \n"+
|
|
|
194 " * make toggle button visible and reposition to upper right corner \n"+
|
|
|
195 " * note: toogle button is nested inside #controls > #navLinks > #toogle \n"+
|
|
|
196 " */ \n"+
|
|
|
197 " \n"+
|
|
|
198 " #controls, \n"+
|
|
|
199 " #navLinks, \n"+
|
|
|
200 " #toggle { display: block; \n"+
|
|
|
201 " visibility: visible; \n"+
|
|
|
202 " margin: 0; padding: 0; \n"+
|
|
|
203 " } \n"+
|
|
|
204 " \n"+
|
|
|
205 " #toggle { position: fixed; \n"+
|
|
|
206 " top: 0; right: 0; \n"+
|
|
|
207 " padding: 0.5em; \n"+
|
|
|
208 " border-left: 1px solid; \n"+
|
|
|
209 " border-bottom: 1px solid; \n"+
|
|
|
210 " background: white; \n"+
|
|
|
211 " } \n"+
|
|
|
212 "</style>";
|
|
|
213
|
|
|
214 $( 'head' ).append( styleProjection );
|
|
|
215 $( 'head' ).append( styleScreen );
|
|
|
216 }
|
|
|
217
|
|
|
218 Slideshow.ctrlAddStyles();
|
|
|
219 Slideshow.ctrlAddEvents(); |
