diff --git a/README.md b/README.md index 1f89b59..afa24d9 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ bespoke.from('article', [ ]); ``` -By default, bespoke-scale detects which method to use for resizing slides. In browsers that support it, CSS `zoom` is used. In all other browsers, each slide is wrapped with an element with a `bespoke-scale-parent` class, which is resized with CSS transforms. You will need to provide styles for this element, for example: +By default, bespoke-scale detects which method to use for resizing slides. In browsers that support it, CSS `zoom` is used. In all other browsers, the slides are wrapped with an element with a `bespoke-scale-parent` class, which is resized with CSS transforms. If the plugin option is 'transform', this element is wrapped around each slide individually. If the plugin option is 'transform-group', a single wrapper element is added around the whole group of slides. You'll need to provide styles for the wrapper element when using the transform scaling method. For example: ```css .bespoke-scale-parent { @@ -47,7 +47,7 @@ By default, bespoke-scale detects which method to use for resizing slides. In br } ``` -If you'd like to specify which scaling method to use, you can pass `'zoom'` or `'transform'` as an option, for example: +If you'd like to specify which scaling method to use, you can pass `'zoom'`, `'transform'` or `'transform-group'` as an option, for example: ```js bespoke.from('article', [ diff --git a/dist/bespoke-scale.js b/dist/bespoke-scale.js old mode 100755 new mode 100644 index 4b06a5f..ecc26cf --- a/dist/bespoke-scale.js +++ b/dist/bespoke-scale.js @@ -1,7 +1,7 @@ /*! * bespoke-scale v1.0.1 * - * Copyright 2014, Mark Dalgleish + * Copyright 2015, Mark Dalgleish * This content is released under the MIT license * http://mit-license.org/markdalgleish */ @@ -13,9 +13,10 @@ module.exports = function(options) { firstSlide = deck.slides[0], slideHeight = firstSlide.offsetHeight, slideWidth = firstSlide.offsetWidth, - useZoom = options === 'zoom' || ('zoom' in parent.style && options !== 'transform'), + wrapEachSlide = options === 'transform-group' ? false : true, + useZoom = options === 'zoom' || ('zoom' in parent.style && options !== 'transform' && options !== 'transform-group'), - wrap = function(element) { + wrapSlide = function(element) { var wrapper = document.createElement('div'); wrapper.className = 'bespoke-scale-parent'; element.parentNode.insertBefore(wrapper, element); @@ -23,7 +24,17 @@ module.exports = function(options) { return wrapper; }, - elements = useZoom ? deck.slides : deck.slides.map(wrap), + wrapSlides = function(parent, slides) { + var wrapper = document.createElement('div'); + wrapper.className = 'bespoke-scale-parent'; + slides.forEach(function(slide) { + wrapper.appendChild(slide); + }); + return [parent.appendChild(wrapper)]; + }, + + elements = useZoom ? deck.slides : + (wrapEachSlide ? deck.slides.map(wrapSlide) : wrapSlides(deck.parent, deck.slides)), transformProperty = (function(property) { var prefixes = 'Moz Webkit O ms'.split(' '); diff --git a/dist/bespoke-scale.min.js b/dist/bespoke-scale.min.js old mode 100755 new mode 100644 index 66acbc8..2aade5c --- a/dist/bespoke-scale.min.js +++ b/dist/bespoke-scale.min.js @@ -1,2 +1,2 @@ -/*! bespoke-scale v1.0.1 © 2014 Mark Dalgleish, MIT License */ -!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self);var t=n;t=t.bespoke||(t.bespoke={}),t=t.plugins||(t.plugins={}),t.scale=e()}}(function(){return function e(n,t,o){function r(f,s){if(!t[f]){if(!n[f]){var u="function"==typeof require&&require;if(!s&&u)return u(f,!0);if(i)return i(f,!0);throw new Error("Cannot find module '"+f+"'")}var d=t[f]={exports:{}};n[f][0].call(d.exports,function(e){var t=n[f][1][e];return r(t?t:e)},d,d.exports,e,n,t,o)}return t[f].exports}for(var i="function"==typeof require&&require,f=0;f