resolves bespokejs#4 add transform-group option to use single wrapper…

… element

- using single wrapper to scale slides if option is transform-group
- fix tests
- add tests for transform-group option
- document transform-group option in README

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', [

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,17 +13,28 @@ 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);
         wrapper.appendChild(element);
         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(' ');

lib/bespoke-scale.js

@@ -4,17 +4,28 @@ 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);
         wrapper.appendChild(element);
         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(' ');

test/spec/bespoke-scaleSpec.js

@@ -1,7 +1,8 @@
 Function.prototype.bind = Function.prototype.bind || require('function-bind');
 
-var bespoke = require('bespoke');
-var scale = require('../../lib-instrumented/bespoke-scale.js');
+var bespoke = require('bespoke'),
+  classes = require('bespoke-classes'),
+  scale = require('../../lib-instrumented/bespoke-scale.js');
 
 describe("bespoke-scale", function() {
 
@@ -27,6 +28,7 @@ describe("bespoke-scale", function() {
       document.body.appendChild(container);
 
       deck = bespoke.from(parent, [
+        classes(),
         scale(pluginValue)
       ]);
     },
@@ -52,14 +54,14 @@ describe("bespoke-scale", function() {
     }('Transform')),
 
     actualSize = function(el, dimension) {
-      return el['offset' + (dimension === 'width' ? 'Width' : 'Height')] *
+      return el['offset' + dimension.substring(0, 1).toUpperCase() + dimension.substring(1)] *
         (el.style.zoom != null && el.style.zoom !== '' ?
           el.style.zoom :
           el.parentNode.style[transformProperty].match(/scale\(([0-9.]+)\)/)[1]
         );
     };
 
-  [undefined, 'zoom', 'transform'].forEach(function(option) {
+  [undefined, 'zoom', 'transform', 'transform-group'].forEach(function(option) {
 
     describe("option value of '" + option + "'", function() {
 
@@ -74,6 +76,11 @@ describe("bespoke-scale", function() {
             });
           });
         }
+        else if (option === 'transform-group') {
+          it("should wrap the group of slides in a 'bespoke-scale-parent'", function() {
+            expect(deck.parent.children[0].className).toBe('bespoke-scale-parent');
+          });
+        }
 
         it("should resize the slide to fit the height of the deck", function() {
           expect(actualSize(deck.slides[0], 'height')).toBe(deck.parent.offsetHeight);