From f5661cd67116d1908720abdcd817226316a2417a Mon Sep 17 00:00:00 2001
From: Dan Allen <dan.j.allen@gmail.com>
Date: Wed, 12 Aug 2015 02:24:16 -0600
Subject: [PATCH] resolves #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                      |  4 ++--
 dist/bespoke-scale.js          | 19 +++++++++++++++----
 dist/bespoke-scale.min.js      |  4 ++--
 lib/bespoke-scale.js           | 17 ++++++++++++++---
 test/spec/bespoke-scaleSpec.js | 15 +++++++++++----
 5 files changed, 44 insertions(+), 15 deletions(-)
 mode change 100755 => 100644 dist/bespoke-scale.js
 mode change 100755 => 100644 dist/bespoke-scale.min.js

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<o.length;f++)r(o[f]);return r}({1:[function(e,n){n.exports=function(e){return function(n){var t=n.parent,o=n.slides[0],r=o.offsetHeight,i=o.offsetWidth,f="zoom"===e||"zoom"in t.style&&"transform"!==e,s=function(e){var n=document.createElement("div");return n.className="bespoke-scale-parent",e.parentNode.insertBefore(n,e),n.appendChild(e),n},u=f?n.slides:n.slides.map(s),d=function(e){var n="Moz Webkit O ms".split(" ");return n.reduce(function(n,o){return o+e in t.style?o+e:n},e.toLowerCase())}("Transform"),a=f?function(e,n){n.style.zoom=e}:function(e,n){n.style[d]="scale("+e+")"},l=function(){var e=t.offsetWidth/i,n=t.offsetHeight/r;u.forEach(a.bind(null,Math.min(e,n)))};window.addEventListener("resize",l),l()}}},{}]},{},[1])(1)});
\ No newline at end of file
+/*! bespoke-scale v1.0.1 © 2015 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,r){function o(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 a=t[f]={exports:{}};n[f][0].call(a.exports,function(e){var t=n[f][1][e];return o(t?t:e)},a,a.exports,e,n,t,r)}return t[f].exports}for(var i="function"==typeof require&&require,f=0;f<r.length;f++)o(r[f]);return o}({1:[function(e,n){n.exports=function(e){return function(n){var t=n.parent,r=n.slides[0],o=r.offsetHeight,i=r.offsetWidth,f="transform-group"===e?!1:!0,s="zoom"===e||"zoom"in t.style&&"transform"!==e&&"transform-group"!==e,u=function(e){var n=document.createElement("div");return n.className="bespoke-scale-parent",e.parentNode.insertBefore(n,e),n.appendChild(e),n},a=function(e,n){var t=document.createElement("div");return t.className="bespoke-scale-parent",n.forEach(function(e){t.appendChild(e)}),[e.appendChild(t)]},d=s?n.slides:f?n.slides.map(u):a(n.parent,n.slides),l=function(e){var n="Moz Webkit O ms".split(" ");return n.reduce(function(n,r){return r+e in t.style?r+e:n},e.toLowerCase())}("Transform"),p=s?function(e,n){n.style.zoom=e}:function(e,n){n.style[l]="scale("+e+")"},c=function(){var e=t.offsetWidth/i,n=t.offsetHeight/o;d.forEach(p.bind(null,Math.min(e,n)))};window.addEventListener("resize",c),c()}}},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/lib/bespoke-scale.js b/lib/bespoke-scale.js
index e45a209..f8fe852 100644
--- a/lib/bespoke-scale.js
+++ b/lib/bespoke-scale.js
@@ -4,9 +4,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);
@@ -14,7 +15,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/test/spec/bespoke-scaleSpec.js b/test/spec/bespoke-scaleSpec.js
index 1bd0226..0e4c658 100644
--- a/test/spec/bespoke-scaleSpec.js
+++ b/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);