Mercurial > hg > Members > taiki > slides

comparison deck.js/extensions/scale/deck.scale.js @ 0:dd1c78c6398f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add having slides
author taiki <taiki@cr.ie.u-ryukyu.ac.jp>
date Mon, 25 Mar 2013 05:14:03 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:dd1c78c6398f
1 /*!
2 Deck JS - deck.scale
3 Copyright (c) 2011-2012 Caleb Troughton
4 Dual licensed under the MIT license and GPL license.
5 https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
6 https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
7 */
8
9 /*
10 This module adds automatic scaling to the deck. Slides are scaled down
11 using CSS transforms to fit within the deck container. If the container is
12 big enough to hold the slides without scaling, no scaling occurs. The user
13 can disable and enable scaling with a keyboard shortcut.
14
15 Note: CSS transforms may make Flash videos render incorrectly. Presenters
16 that need to use video may want to disable scaling to play them. HTML5 video
17 works fine.
18 */
19 (function($, deck, window, undefined) {
20 var $d = $(document),
21 $w = $(window),
22 baseHeight, // Value to scale against
23 timer, // Timeout id for debouncing
24 rootSlides,
25
26 /*
27 Internal function to do all the dirty work of scaling the slides.
28 */
29 scaleDeck = function() {
30 var opts = $[deck]('getOptions'),
31 obh = opts.baseHeight,
32 $container = $[deck]('getContainer'),
33 baseHeight = obh ? obh : $container.height();
34
35 // Scale each slide down if necessary (but don't scale up)
36 $.each(rootSlides, function(i, $slide) {
37 var slideHeight = $slide.innerHeight(),
38 $scaler = $slide.find('.' + opts.classes.scaleSlideWrapper),
39 scale = $container.hasClass(opts.classes.scale) ?
40 baseHeight / slideHeight :
41 1;
42
43 $.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) {
44 if (scale === 1) {
45 $scaler.css(prefix + 'Transform', '');
46 }
47 else {
48 $scaler.css(prefix + 'Transform', 'scale(' + scale + ')');
49 }
50 });
51 });
52 }
53
54 /*
55 Extends defaults/options.
56
57 options.classes.scale
58 This class is added to the deck container when scaling is enabled.
59 It is enabled by default when the module is included.
60
61 options.classes.scaleSlideWrapper
62 Scaling is done using a wrapper around the contents of each slide. This
63 class is applied to that wrapper.
64
65 options.keys.scale
66 The numeric keycode used to toggle enabling and disabling scaling.
67
68 options.baseHeight
69 When baseHeight is falsy, as it is by default, the deck is scaled in
70 proportion to the height of the deck container. You may instead specify
71 a height as a number of px, and slides will be scaled against this
72 height regardless of the container size.
73
74 options.scaleDebounce
75 Scaling on the browser resize event is debounced. This number is the
76 threshold in milliseconds. You can learn more about debouncing here:
77 http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
78
79 */
80 $.extend(true, $[deck].defaults, {
81 classes: {
82 scale: 'deck-scale',
83 scaleSlideWrapper: 'deck-slide-scaler'
84 },
85
86 keys: {
87 scale: 83 // s
88 },
89
90 baseHeight: null,
91 scaleDebounce: 200
92 });
93
94 /*
95 jQuery.deck('disableScale')
96
97 Disables scaling and removes the scale class from the deck container.
98 */
99 $[deck]('extend', 'disableScale', function() {
100 $[deck]('getContainer').removeClass($[deck]('getOptions').classes.scale);
101 scaleDeck();
102 });
103
104 /*
105 jQuery.deck('enableScale')
106
107 Enables scaling and adds the scale class to the deck container.
108 */
109 $[deck]('extend', 'enableScale', function() {
110 $[deck]('getContainer').addClass($[deck]('getOptions').classes.scale);
111 scaleDeck();
112 });
113
114 /*
115 jQuery.deck('toggleScale')
116
117 Toggles between enabling and disabling scaling.
118 */
119 $[deck]('extend', 'toggleScale', function() {
120 var $c = $[deck]('getContainer');
121 $[deck]($c.hasClass($[deck]('getOptions').classes.scale) ?
122 'disableScale' : 'enableScale');
123 });
124
125 $d.bind('deck.init', function() {
126 var opts = $[deck]('getOptions'),
127 slideTest = $.map([
128 opts.classes.before,
129 opts.classes.previous,
130 opts.classes.current,
131 opts.classes.next,
132 opts.classes.after
133 ], function(el, i) {
134 return '.' + el;
135 }).join(', ');
136
137 // Build top level slides array
138 rootSlides = [];
139 $.each($[deck]('getSlides'), function(i, $el) {
140 if (!$el.parentsUntil(opts.selectors.container, slideTest).length) {
141 rootSlides.push($el);
142 }
143 });
144
145 // Use a wrapper on each slide to handle content scaling
146 $.each(rootSlides, function(i, $slide) {
147 $slide.children().wrapAll('<div class="' + opts.classes.scaleSlideWrapper + '"/>');
148 });
149
150 // Debounce the resize scaling
151 $w.unbind('resize.deckscale').bind('resize.deckscale', function() {
152 window.clearTimeout(timer);
153 timer = window.setTimeout(scaleDeck, opts.scaleDebounce);
154 })
155 // Scale once on load, in case images or something change layout
156 .unbind('load.deckscale').bind('load.deckscale', scaleDeck);
157
158 // Bind key events
159 $d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) {
160 if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) {
161 $[deck]('toggleScale');
162 e.preventDefault();
163 }
164 });
165
166 // Enable scale on init
167 $[deck]('enableScale');
168 });
169 })(jQuery, 'deck', this);
170