diff options
Diffstat (limited to 'deck.js/extensions/scale')
| -rw-r--r-- | deck.js/extensions/scale/deck.scale.css | 28 | ||||
| -rw-r--r-- | deck.js/extensions/scale/deck.scale.js | 170 | ||||
| -rw-r--r-- | deck.js/extensions/scale/deck.scale.scss | 31 |
3 files changed, 229 insertions, 0 deletions
diff --git a/deck.js/extensions/scale/deck.scale.css b/deck.js/extensions/scale/deck.scale.css new file mode 100644 index 0000000..d6a4eb0 --- /dev/null +++ b/deck.js/extensions/scale/deck.scale.css @@ -0,0 +1,28 @@ +/* Remove this line if you are embedding deck.js in a page and +using the scale extension. */ +.csstransforms { + overflow: hidden; +} + +.csstransforms .deck-container.deck-scale:not(.deck-menu) > .slide { + -webkit-box-sizing: padding-box; + -moz-box-sizing: padding-box; + box-sizing: padding-box; + width: 100%; + padding-bottom: 20px; +} +.csstransforms .deck-container.deck-scale:not(.deck-menu) > .slide > .deck-slide-scaler { + -webkit-transform-origin: 50% 0; + -moz-transform-origin: 50% 0; + -o-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; +} + +.csstransforms .deck-container.deck-menu .deck-slide-scaler { + -webkit-transform: none !important; + -moz-transform: none !important; + -o-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} diff --git a/deck.js/extensions/scale/deck.scale.js b/deck.js/extensions/scale/deck.scale.js new file mode 100644 index 0000000..14feb1a --- /dev/null +++ b/deck.js/extensions/scale/deck.scale.js @@ -0,0 +1,170 @@ +/*! +Deck JS - deck.scale +Copyright (c) 2011-2012 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds automatic scaling to the deck. Slides are scaled down +using CSS transforms to fit within the deck container. If the container is +big enough to hold the slides without scaling, no scaling occurs. The user +can disable and enable scaling with a keyboard shortcut. + +Note: CSS transforms may make Flash videos render incorrectly. Presenters +that need to use video may want to disable scaling to play them. HTML5 video +works fine. +*/ +(function($, deck, window, undefined) { + var $d = $(document), + $w = $(window), + baseHeight, // Value to scale against + timer, // Timeout id for debouncing + rootSlides, + + /* + Internal function to do all the dirty work of scaling the slides. + */ + scaleDeck = function() { + var opts = $[deck]('getOptions'), + obh = opts.baseHeight, + $container = $[deck]('getContainer'), + baseHeight = obh ? obh : $container.height(); + + // Scale each slide down if necessary (but don't scale up) + $.each(rootSlides, function(i, $slide) { + var slideHeight = $slide.innerHeight(), + $scaler = $slide.find('.' + opts.classes.scaleSlideWrapper), + scale = $container.hasClass(opts.classes.scale) ? + baseHeight / slideHeight : + 1; + + $.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) { + if (scale === 1) { + $scaler.css(prefix + 'Transform', ''); + } + else { + $scaler.css(prefix + 'Transform', 'scale(' + scale + ')'); + } + }); + }); + } + + /* + Extends defaults/options. + + options.classes.scale + This class is added to the deck container when scaling is enabled. + It is enabled by default when the module is included. + + options.classes.scaleSlideWrapper + Scaling is done using a wrapper around the contents of each slide. This + class is applied to that wrapper. + + options.keys.scale + The numeric keycode used to toggle enabling and disabling scaling. + + options.baseHeight + When baseHeight is falsy, as it is by default, the deck is scaled in + proportion to the height of the deck container. You may instead specify + a height as a number of px, and slides will be scaled against this + height regardless of the container size. + + options.scaleDebounce + Scaling on the browser resize event is debounced. This number is the + threshold in milliseconds. You can learn more about debouncing here: + http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + + */ + $.extend(true, $[deck].defaults, { + classes: { + scale: 'deck-scale', + scaleSlideWrapper: 'deck-slide-scaler' + }, + + keys: { + scale: 83 // s + }, + + baseHeight: null, + scaleDebounce: 200 + }); + + /* + jQuery.deck('disableScale') + + Disables scaling and removes the scale class from the deck container. + */ + $[deck]('extend', 'disableScale', function() { + $[deck]('getContainer').removeClass($[deck]('getOptions').classes.scale); + scaleDeck(); + }); + + /* + jQuery.deck('enableScale') + + Enables scaling and adds the scale class to the deck container. + */ + $[deck]('extend', 'enableScale', function() { + $[deck]('getContainer').addClass($[deck]('getOptions').classes.scale); + scaleDeck(); + }); + + /* + jQuery.deck('toggleScale') + + Toggles between enabling and disabling scaling. + */ + $[deck]('extend', 'toggleScale', function() { + var $c = $[deck]('getContainer'); + $[deck]($c.hasClass($[deck]('getOptions').classes.scale) ? + 'disableScale' : 'enableScale'); + }); + + $d.bind('deck.init', function() { + var opts = $[deck]('getOptions'), + slideTest = $.map([ + opts.classes.before, + opts.classes.previous, + opts.classes.current, + opts.classes.next, + opts.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '); + + // Build top level slides array + rootSlides = []; + $.each($[deck]('getSlides'), function(i, $el) { + if (!$el.parentsUntil(opts.selectors.container, slideTest).length) { + rootSlides.push($el); + } + }); + + // Use a wrapper on each slide to handle content scaling + $.each(rootSlides, function(i, $slide) { + $slide.children().wrapAll('<div class="' + opts.classes.scaleSlideWrapper + '"/>'); + }); + + // Debounce the resize scaling + $w.unbind('resize.deckscale').bind('resize.deckscale', function() { + window.clearTimeout(timer); + timer = window.setTimeout(scaleDeck, opts.scaleDebounce); + }) + // Scale once on load, in case images or something change layout + .unbind('load.deckscale').bind('load.deckscale', scaleDeck); + + // Bind key events + $d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) { + if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) { + $[deck]('toggleScale'); + e.preventDefault(); + } + }); + + // Enable scale on init + $[deck]('enableScale'); + }); +})(jQuery, 'deck', this); + diff --git a/deck.js/extensions/scale/deck.scale.scss b/deck.js/extensions/scale/deck.scale.scss new file mode 100644 index 0000000..2fa0851 --- /dev/null +++ b/deck.js/extensions/scale/deck.scale.scss @@ -0,0 +1,31 @@ +/* Remove this line if you are embedding deck.js in a page and +using the scale extension. */ +.csstransforms { + overflow:hidden; +} + +.csstransforms .deck-container.deck-scale:not(.deck-menu) { + > .slide { + -webkit-box-sizing: padding-box; + -moz-box-sizing: padding-box; + box-sizing: padding-box; + width:100%; + padding-bottom:20px; + + > .deck-slide-scaler { + -webkit-transform-origin: 50% 0; + -moz-transform-origin: 50% 0; + -o-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; + } + } +} + +.csstransforms .deck-container.deck-menu .deck-slide-scaler { + -webkit-transform:none !important; + -moz-transform:none !important; + -o-transform:none !important; + -ms-transform:none !important; + transform:none !important; +}
\ No newline at end of file |