extensions/scale/deck.scale.js

   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                         if (scale === 1) {
  44                                 $scaler.css('transform', '');
  45                         }
  46                         else {
  47                                 $scaler.css('transform', 'scale(' + scale + ')');
  48                         }
  49                 });
  50         }
  51
  52         /*
  53         Extends defaults/options.
  54
  55         options.classes.scale
  56                 This class is added to the deck container when scaling is enabled.
  57                 It is enabled by default when the module is included.
  58
  59         options.classes.scaleSlideWrapper
  60                 Scaling is done using a wrapper around the contents of each slide. This
  61                 class is applied to that wrapper.
  62
  63         options.keys.scale
  64                 The numeric keycode used to toggle enabling and disabling scaling.
  65
  66         options.baseHeight
  67                 When baseHeight is falsy, as it is by default, the deck is scaled in
  68                 proportion to the height of the deck container. You may instead specify
  69                 a height as a number of px, and slides will be scaled against this
  70                 height regardless of the container size.
  71
  72         options.scaleDebounce
  73                 Scaling on the browser resize event is debounced. This number is the
  74                 threshold in milliseconds. You can learn more about debouncing here:
  75                 http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  76
  77         */
  78         $.extend(true, $[deck].defaults, {
  79                 classes: {
  80                         scale: 'deck-scale',
  81                         scaleSlideWrapper: 'deck-slide-scaler'
  82                 },
  83
  84                 keys: {
  85                         scale: 83 // s
  86                 },
  87
  88                 baseHeight: null,
  89                 scaleDebounce: 200
  90         });
  91
  92         /*
  93         jQuery.deck('disableScale')
  94
  95         Disables scaling and removes the scale class from the deck container.
  96         */
  97         $[deck]('extend', 'disableScale', function() {
  98                 $[deck]('getContainer').removeClass($[deck]('getOptions').classes.scale);
  99                 scaleDeck();
 100         });
 101
 102         /*
 103         jQuery.deck('enableScale')
 104
 105         Enables scaling and adds the scale class to the deck container.
 106         */
 107         $[deck]('extend', 'enableScale', function() {
 108                 $[deck]('getContainer').addClass($[deck]('getOptions').classes.scale);
 109                 scaleDeck();
 110         });
 111
 112         /*
 113         jQuery.deck('toggleScale')
 114
 115         Toggles between enabling and disabling scaling.
 116         */
 117         $[deck]('extend', 'toggleScale', function() {
 118                 var $c = $[deck]('getContainer');
 119                 $[deck]($c.hasClass($[deck]('getOptions').classes.scale) ?
 120                         'disableScale' : 'enableScale');
 121         });
 122
 123         $d.bind('deck.init', function() {
 124                 var opts = $[deck]('getOptions'),
 125                 slideTest = $.map([
 126                         opts.classes.before,
 127                         opts.classes.previous,
 128                         opts.classes.current,
 129                         opts.classes.next,
 130                         opts.classes.after
 131                 ], function(el, i) {
 132                         return '.' + el;
 133                 }).join(', ');
 134
 135                 // Build top level slides array
 136                 rootSlides = [];
 137                 $.each($[deck]('getSlides'), function(i, $el) {
 138                         if (!$el.parentsUntil(opts.selectors.container, slideTest).length) {
 139                                 rootSlides.push($el);
 140                         }
 141                 });
 142
 143                 // Use a wrapper on each slide to handle content scaling
 144                 $.each(rootSlides, function(i, $slide) {
 145                         $slide.children().wrapAll('<div class="' + opts.classes.scaleSlideWrapper + '"/>');
 146                 });
 147
 148                 // Debounce the resize scaling
 149                 $w.unbind('resize.deckscale').bind('resize.deckscale', function() {
 150                         window.clearTimeout(timer);
 151                         timer = window.setTimeout(scaleDeck, opts.scaleDebounce);
 152                 })
 153                 // Scale once on load, in case images or something change layout
 154                 .unbind('load.deckscale').bind('load.deckscale', scaleDeck);
 155
 156                 // Bind key events
 157                 $d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) {
 158                         if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) {
 159                                 $[deck]('toggleScale');
 160                                 e.preventDefault();
 161                         }
 162                 });
 163
 164                 // Enable scale on init
 165                 $[deck]('enableScale');
 166         });
 167 })(jQuery, 'deck', this);
 168