|
10
|
1 /***********
|
|
|
2 *
|
|
|
3 * footer/header addon:
|
|
|
4 *
|
|
|
5 * adds footer/header
|
|
|
6 * - use key-f to toggle footer/header (in projection mode)
|
|
|
7 *
|
|
|
8 * layout structure:
|
|
|
9 *
|
|
|
10 * .layout
|
|
|
11 * > #header
|
|
|
12 * > #footer
|
|
|
13 */
|
|
|
14
|
|
|
15
|
|
|
16 Slideshow.footerDebugOn = function()
|
|
|
17 {
|
|
|
18 this.debug( 'calling footerDebugOn()' );
|
|
|
19
|
|
|
20 $( '.layout #header,.layout header' ).addClass( 'debug' );
|
|
|
21 $( '.layout #footer,.layout footer' ).addClass( 'debug' );
|
|
|
22 }
|
|
|
23
|
|
|
24 Slideshow.footerDebugOff = function()
|
|
|
25 {
|
|
|
26 this.debug( 'calling footerDebugOff()' );
|
|
|
27
|
|
|
28 $( '.layout #header,.layout header' ).removeClass( 'debug' );
|
|
|
29 $( '.layout #footer,.layout footer' ).removeClass( 'debug' );
|
|
|
30 }
|
|
|
31
|
|
|
32 Slideshow.footerKeys = function( event, key )
|
|
|
33 {
|
|
|
34 this.debug( 'calling footerKeys()' );
|
|
|
35
|
|
|
36 switch( key.which ) {
|
|
|
37 case 70: //f
|
|
|
38 this.footerToggle();
|
|
|
39 break;
|
|
|
40 }
|
|
|
41 }
|
|
|
42
|
|
|
43 // ------------------------------------------------
|
|
|
44
|
|
|
45 Slideshow.footerToggle = function()
|
|
|
46 {
|
|
|
47 // todo/fix: note jquery sets inline css (e.g. display: block)
|
|
|
48 // but css won't get scoped for media (e.g. projection, screen, etc)
|
|
|
49 // thus, css changes "spill over" to all media types
|
|
|
50
|
|
|
51 // fix: add/remove Class hidden?? instead of toggle()
|
|
|
52
|
|
|
53 $( '.layout #footer, .layout footer').toggle();
|
|
|
54 }
|
|
|
55
|
|
|
56 // ------------------------------------------------
|
|
|
57
|
|
|
58 Slideshow.footerAddEvents = function()
|
|
|
59 {
|
|
|
60 $( document ).on( 'slideshow.debug.on', $.proxy( Slideshow.footerDebugOn, this ));
|
|
|
61 $( document ).on( 'slideshow.debug.off', $.proxy( Slideshow.footerDebugOff, this ));
|
|
|
62 $( document ).on( 'slideshow.keys', $.proxy( Slideshow.footerKeys, this ));
|
|
|
63 }
|
|
|
64
|
|
|
65 Slideshow.footerAddStyles = function() {
|
|
|
66 this.debug( 'add builtin footer/header css via inline style elements' );
|
|
|
67
|
|
|
68 var styleProjection =
|
|
|
69 "<style media='screen,projection'> \n"+
|
|
|
70 " .layout #footer.debug, \n"+
|
|
|
71 " .layout footer.debug { background: #CCF; } \n"+
|
|
|
72 " \n"+
|
|
|
73 " .layout #header.debug, \n"+
|
|
|
74 " .layout header.debug { background: #FCC; } \n"+
|
|
|
75 "</style>";
|
|
|
76
|
|
|
77 $( 'head' ).append( styleProjection );
|
|
|
78 }
|
|
|
79
|
|
|
80
|
|
|
81 Slideshow.footerAddStyles();
|
|
|
82 Slideshow.footerAddEvents(); |
