Mercurial > hg > Papers > 2016 > kaito-master

comparison slide/js/jquery.slideshow.footer.js @ 13:9d3bc0073675

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
slide
author Kaito Tokumori <e105711@ie.u-ryukyu.ac.jp>
date Sun, 14 Feb 2016 18:51:54 +0900
parents
children
comparison
equal deleted inserted replaced
12:a077276f53cc 13:9d3bc0073675
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();