Mercurial > hg > Members > kaito > slides

comparison 2014/2014_01_21/s6_trunk/js/jquery.slideshow.counter.js @ 1:bcf1ede39faa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
jan 21
author Kaito Tokumori <e105711@ie.u-ryukyu.ac.jp>
date Tue, 21 Jan 2014 19:40:41 +0900
parents
children
comparison
equal deleted inserted replaced
0:845ff8ff4fc9 1:bcf1ede39faa
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();