diff options
Diffstat (limited to 'deck.js/extensions/fit')
| -rw-r--r-- | deck.js/extensions/fit/deck.fit-fs.css | 14 | ||||
| -rw-r--r-- | deck.js/extensions/fit/deck.fit.js | 171 |
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); + |