summaryrefslogtreecommitdiff
path: root/deck.js/extensions/scale
diff options
context:
space:
mode:
Diffstat (limited to 'deck.js/extensions/scale')
-rw-r--r--deck.js/extensions/scale/deck.scale.css28
-rw-r--r--deck.js/extensions/scale/deck.scale.js170
-rw-r--r--deck.js/extensions/scale/deck.scale.scss31
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