summaryrefslogtreecommitdiff
path: root/deck.js/extensions/fit
diff options
context:
space:
mode:
authorChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
committerChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
commit5a774ef6f3b38b19b26913a34b1388530c72334e (patch)
tree543127427771d75f652fc9e726cc39aa1a72571c /deck.js/extensions/fit
Initial Commit
Diffstat (limited to 'deck.js/extensions/fit')
-rw-r--r--deck.js/extensions/fit/deck.fit-fs.css14
-rw-r--r--deck.js/extensions/fit/deck.fit.js171
2 files changed, 185 insertions, 0 deletions
diff --git a/deck.js/extensions/fit/deck.fit-fs.css b/deck.js/extensions/fit/deck.fit-fs.css
new file mode 100644
index 0000000..fd58665
--- /dev/null
+++ b/deck.js/extensions/fit/deck.fit-fs.css
@@ -0,0 +1,14 @@
+
+.deck-container {
+ width: 100%; height: 100%; /* to get a proper filling of the parent */
+ margin: 0; padding: 0; /* any margin is handled by the parent or the fit extension */
+ position: absolute;
+ left:0; top:0; width:100%; height:100%;
+ border: 0;
+}
+.deck-container>.slide {
+ width: 100%; height: 100%; /* to get a proper filling of the parent */
+ min-width:0; min-height:0; /* undoing some hurting style in the defaults of deck.js */
+ overflow: hidden; /* don't show slides outside of their box */
+ /* margin:0; padding:0; /* remove possible margins */
+}
diff --git a/deck.js/extensions/fit/deck.fit.js b/deck.js/extensions/fit/deck.fit.js
new file mode 100644
index 0000000..ea71ef9
--- /dev/null
+++ b/deck.js/extensions/fit/deck.fit.js
@@ -0,0 +1,171 @@
+/*!
+ Deck JS - deck.fit
+ Copyright (c) 2012 RĂ©mi Emonet
+ 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 extension provides a way of scaling the slides to fit the slide container.
+ A "design size" is used to do global scaling of all slides in the same way.
+ The default design size is 800x600.
+*/
+(function($, deck, window, undefined) {
+ var $d = $(document),
+ $w = $(window),
+ timer, // Timeout id for debouncing
+ rootSlides,
+
+ /*
+ Internal function to do all the dirty work of scaling the slides.
+ */
+ scaleDeck = function() {
+ var opts = $[deck]('getOptions');
+ var addMarginX = opts.fitMarginX * 2;
+ var addMarginY = opts.fitMarginY * 2;
+ var fitMode = opts.fitMode;
+ var sdw = opts.designWidth;
+ var sdh = opts.designHeight;
+ var $container = $[deck]('getContainer');
+ var scaleX = $container.hasClass(opts.classes.globalscale) ? $container.innerWidth() / (sdw+addMarginX) : 1;
+ var scaleY = $container.hasClass(opts.classes.globalscale) ? $container.innerHeight() / (sdh+addMarginY) : 1;
+ var truescaleX = $container.hasClass(opts.classes.globalscale) ? $container.innerWidth() / (sdw) : 1;
+ var truescaleY = $container.hasClass(opts.classes.globalscale) ? $container.innerHeight() / (sdh) : 1;
+ var scale = scaleX < scaleY ? scaleX : scaleY;
+ var rootSlides = [];
+ var slideTest = $.map([opts.classes.before, opts.classes.previous, opts.classes.current, opts.classes.next, opts.classes.after],
+ function(el, i) {return '.' + el;}).join(', ');
+
+ $.each($[deck]('getSlides'), function(i, $el) {
+ if (!$el.parentsUntil(opts.selectors.container).length) {
+ rootSlides.push($el);
+ }
+ });
+ $.each(rootSlides, function(i, $slide) {
+ $slide.width(sdw);
+ $slide.height(sdh);
+ $.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) {
+ if (scale == 1) {
+ $slide.css(prefix + 'Transform', '');
+ } else {
+ if (fitMode == "left top" || fitMode == "top left") {
+ // ok align left/top (ok with the percents)
+ $slide.css(prefix + 'Transform', 'translate(-50%,-50%) scale(' + scale + ' , ' + scale + ') translate(50%,50%) translate('+(addMarginX/2)+'px,'+(addMarginY/2)+'px)');
+ } else if (fitMode == "center middle") {
+ // ok align center/middle
+ $slide.css(prefix + 'Transform', 'translate(-50%,-50%) scale(' + scale + ' , ' + scale + ') translate(50%, 50%) translate('+($container.innerWidth()/2/scale - sdw/2)+'px,'+($container.innerHeight()/2/scale - sdh/2)+'px)');
+ } else if (fitMode == "right bottom" || fitMode == "bottom right") {
+ // ok align right/bottom
+ $slide.css(prefix + 'Transform', 'translate(-50%,-50%) scale(' + scale + ' , ' + scale + ') translate(50%, 50%) translate('+($container.innerWidth()/scale - sdw - addMarginX/2)+'px,'+($container.innerHeight()/scale - sdh - addMarginY/2)+'px)');
+ } else if (fitMode == "stretched") {
+ // ok stretched (with respect of the margin, i.e., it is center/middle)
+ $slide.css(prefix + 'Transform', 'scale(' + scaleX + ' , ' + scaleY + ') translate('+(($container.innerWidth()-sdw)/2/scaleX)+'px,'+(($container.innerHeight()-sdh)/2/scaleY)+'px)');
+ }
+ }
+ });
+ });
+
+ }
+
+ /*
+ Extends defaults/options.
+
+ options.designWidth
+ Defaults to 800. You may instead specify a width as a number
+ of px and all slides will be scaled in the same way, considering their
+ size is the provided one.
+
+ options.designHeight
+ Defaults to 600. You may instead specify a height as a number
+ of px and all slides will be scaled in the same way, considering their
+ size is the provided one.
+
+ options.fitMode
+ How to adapt the slide to the container.
+ Only the following combinations are available for now:
+ "center middle", "top left", "bottom right", "stretched"
+
+ options.fitMarginX
+ options.fitMarginY
+ Defaults to 5. Adds some margin in design space units.
+ E.g., if the designe width is 800 and the margin is 5, the slide will be
+ 810 pixel wide before rescaling.
+
+ 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: {
+ globalscale: 'deck-globalscale'
+ },
+ keys: {
+ scale: 83 // s
+ },
+
+ designWidth: 800,
+ designHeight: 600,
+ fitMode: "center middle",
+ fitMarginX: 5,
+ fitMarginY: 5,
+ 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.globalscale);
+ 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.globalscale);
+ scaleDeck();
+ });
+
+ /*
+ jQuery.deck('toggleScale')
+
+ Toggles between enabling and disabling scaling.
+ */
+ $[deck]('extend', 'toggleScale', function() {
+ var $c = $[deck]('getContainer');
+ $[deck]($c.hasClass($[deck]('getOptions').classes.globalscale) ?
+ 'disableScale' : 'enableScale');
+ });
+
+ $d.bind('deck.init', function() {
+ var opts = $[deck]('getOptions');
+
+ // 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);
+