opentok-layout-js - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

bower.json

 {
   "name": "opentok-layout-js",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "homepage": "https://github.com/aullman/opentok-layout-js",
@@ -5,0 +5,0 @@ "authors": [

opentok-layout.js

@@ -467,125 +467,125 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-function css(el, propertyName, value) {
-  if (value) {
-    // We are setting one css property
-    el.style[propertyName] = value;
-    return NaN;
-  }
-  if ((typeof propertyName === 'undefined' ? 'undefined' : _typeof(propertyName)) === 'object') {
-    // We are setting several CSS properties at once
-    Object.keys(propertyName).forEach(function (key) {
-      css(el, key, propertyName[key]);
-    });
-    return NaN;
-  }
-  // We are getting the css property
-  var computedStyle = getComputedStyle(el);
-  var currentValue = computedStyle.getPropertyValue(propertyName);
+module.exports = function (container, opts) {
+  function css(el, propertyName, value) {
+    if (value) {
+      // We are setting one css property
+      el.style[propertyName] = value;
+      return NaN;
+    }
+    if ((typeof propertyName === 'undefined' ? 'undefined' : _typeof(propertyName)) === 'object') {
+      // We are setting several CSS properties at once
+      Object.keys(propertyName).forEach(function (key) {
+        css(el, key, propertyName[key]);
+      });
+      return NaN;
+    }
+    // We are getting the css property
+    var computedStyle = (opts && opts.window || window).getComputedStyle(el);
+    var currentValue = computedStyle.getPropertyValue(propertyName);
 
-  if (currentValue === '') {
-    currentValue = el.style[propertyName];
+    if (currentValue === '') {
+      currentValue = el.style[propertyName];
+    }
+
+    return currentValue;
   }
 
-  return currentValue;
-}
+  var filterDisplayNone = function filterDisplayNone(element) {
+    return css(element, 'display') !== 'none';
+  };
 
-var filterDisplayNone = function filterDisplayNone(element) {
-  return css(element, 'display') !== 'none';
-};
-
-function height(el) {
-  if (el.offsetHeight > 0) {
-    return el.offsetHeight + 'px';
+  function height(el) {
+    if (el.offsetHeight > 0) {
+      return el.offsetHeight + 'px';
+    }
+    return css(el, 'height');
   }
-  return css(el, 'height');
-}
 
-function width(el) {
-  if (el.offsetWidth > 0) {
-    return el.offsetWidth + 'px';
+  function width(el) {
+    if (el.offsetWidth > 0) {
+      return el.offsetWidth + 'px';
+    }
+    return css(el, 'width');
   }
-  return css(el, 'width');
-}
 
-var positionElement = function positionElement(elem, x, y, w, h, animate) {
-  var _this = this;
+  var positionElement = function positionElement(elem, x, y, w, h, animate) {
+    var _this = this;
 
-  var targetPosition = {
-    left: x + 'px',
-    top: y + 'px',
-    width: w + 'px',
-    height: h + 'px'
-  };
+    var targetPosition = {
+      left: x + 'px',
+      top: y + 'px',
+      width: w + 'px',
+      height: h + 'px'
+    };
 
-  var fixAspectRatio = function fixAspectRatio() {
-    var sub = elem.querySelector('.OT_root');
-    if (sub) {
-      // If this is the parent of a subscriber or publisher then we need
-      // to force the mutation observer on the publisher or subscriber to
-      // trigger to get it to fix it's layout
-      var oldWidth = sub.style.width;
-      sub.style.width = w + 'px';
-      // sub.style.height = height + 'px';
-      sub.style.width = oldWidth || '';
+    var fixAspectRatio = function fixAspectRatio() {
+      var sub = elem.querySelector('.OT_root');
+      if (sub) {
+        // If this is the parent of a subscriber or publisher then we need
+        // to force the mutation observer on the publisher or subscriber to
+        // trigger to get it to fix it's layout
+        var oldWidth = sub.style.width;
+        sub.style.width = w + 'px';
+        // sub.style.height = height + 'px';
+        sub.style.width = oldWidth || '';
+      }
+    };
+
+    if (animate && $) {
+      $(elem).stop();
+      $(elem).animate(targetPosition, animate.duration || 200, animate.easing || 'swing', function () {
+        fixAspectRatio();
+        if (animate.complete) animate.complete.call(_this);
+      });
+    } else {
+      css(elem, targetPosition);
+      if (!elem.classList.contains('ot-layout')) {
+        elem.classList.add('ot-layout');
+      }
     }
+    fixAspectRatio();
   };
 
-  if (animate && $) {
-    $(elem).stop();
-    $(elem).animate(targetPosition, animate.duration || 200, animate.easing || 'swing', function () {
-      fixAspectRatio();
-      if (animate.complete) animate.complete.call(_this);
-    });
-  } else {
-    css(elem, targetPosition);
-    if (!elem.classList.contains('ot-layout')) {
-      elem.classList.add('ot-layout');
+  var getChildDims = function getChildDims(child) {
+    if (child) {
+      var video = child.querySelector('video');
+      if (video && video.videoHeight && video.videoWidth) {
+        return {
+          height: video.videoHeight,
+          width: video.videoWidth
+        };
+      }
+      if (child.videoHeight && child.videoWidth) {
+        return {
+          height: child.videoHeight,
+          width: child.videoWidth
+        };
+      }
     }
-  }
-  fixAspectRatio();
-};
+    return {
+      height: 480,
+      width: 640
+    };
+  };
 
-var getChildDims = function getChildDims(child) {
-  if (child) {
-    var video = child.querySelector('video');
-    if (video && video.videoHeight && video.videoWidth) {
-      return {
-        height: video.videoHeight,
-        width: video.videoWidth
-      };
-    }
-    if (child.videoHeight && child.videoWidth) {
-      return {
-        height: child.videoHeight,
-        width: child.videoWidth
-      };
-    }
-  }
-  return {
-    height: 480,
-    width: 640
+  var getCSSNumber = function getCSSNumber(elem, prop) {
+    var cssStr = css(elem, prop);
+    return cssStr ? parseInt(cssStr, 10) : 0;
   };
-};
 
-var getCSSNumber = function getCSSNumber(elem, prop) {
-  var cssStr = css(elem, prop);
-  return cssStr ? parseInt(cssStr, 10) : 0;
-};
+  // Really cheap UUID function
+  var cheapUUID = function cheapUUID() {
+    return (Math.random() * 100000000).toFixed(0);
+  };
 
-// Really cheap UUID function
-var cheapUUID = function cheapUUID() {
-  return (Math.random() * 100000000).toFixed(0);
-};
+  var getHeight = function getHeight(elem) {
+    var heightStr = height(elem);
+    return heightStr ? parseInt(heightStr, 10) : 0;
+  };
 
-var getHeight = function getHeight(elem) {
-  var heightStr = height(elem);
-  return heightStr ? parseInt(heightStr, 10) : 0;
-};
+  var getWidth = function getWidth(elem) {
+    var widthStr = width(elem);
+    return widthStr ? parseInt(widthStr, 10) : 0;
+  };
 
-var getWidth = function getWidth(elem) {
-  var widthStr = width(elem);
-  return widthStr ? parseInt(widthStr, 10) : 0;
-};
-
-module.exports = function (container, opts) {
   var _opts$animate = opts.animate,
@@ -654,4 +654,5 @@ animate = _opts$animate === undefined ? false : _opts$animate,
 module.exports = function initLayoutContainer(container, opts) {
-  container = typeof container === 'string' ? document.querySelector(container) : container;
-  if (!(typeof HTMLElement === 'undefined' || container instanceof HTMLElement) && !opts) {
+  var win = opts && opts.window || (typeof window === 'undefined' ? undefined : window);
+  container = typeof container === 'string' ? win.document.querySelector(container) : container;
+  if (!(typeof (win && win.HTMLElement) === 'undefined' || container instanceof win.HTMLElement) && !opts) {
     // container is actually the options
@@ -658,0 +659,0 @@ opts = container;

opentok-layout.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.initLayoutContainer=e():t.initLayoutContainer=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function i(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(o,r,function(e){return t[e]}.bind(null,r));return o},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=2)}([function(t,e,i){"use strict";var o=function(t,e,i,o,r){for(var n=void 0,a=void 0,f=void 0,d=void 0,h=void 0,u=void 0,c=void 0,s=void 0,l=1;l<=r;l+=1){var g=l,v=Math.ceil(r/g);(s=(c=Math.floor(o/v))/(u=Math.floor(i/g)))>e?c=u*(s=e):s<t&&(u=c/(s=t));var p=u*c*r;(void 0===n||p>n)&&(n=p,d=c,h=u,a=g,f=v)}return{maxArea:n,targetCols:a,targetRows:f,targetHeight:d,targetWidth:h,ratio:d/h}},r=function(t,e){var i=t.maxRatio,r=t.minRatio,n=t.fixedRatio,a=t.containerWidth,f=t.containerHeight,d=t.offsetLeft,h=void 0===d?0:d,u=t.offsetTop,c=void 0===u?0:u,s=t.alignItems,l=void 0===s?"center":s,g=e.map(function(t){return t.height/t.width}),v=g.length,p=void 0;if(n){var m=g.length>0?g[0]:null;p=o(m,m,a,f,v)}else p=o(r,i,a,f,v);for(var y=0,b=0,x=[],w=void 0,R=[],H=0;H<g.length;H+=1){H%p.targetCols==0&&(w={ratios:[],width:0,height:0},x.push(w));var W=g[H];w.ratios.push(W);var M=p.targetWidth,L=p.targetHeight;n&&(M=L/W),w.width+=M,w.height=L}for(var T=0,S=0,I=0;I<x.length;I+=1)(w=x[I]).width>a?(w.height=Math.floor(w.height*(a/w.width)),w.width=a):w.width<a&&(S+=1),T+=w.height;if(T<f&&S>0){var j=f-T;T=0;for(var O=0;O<x.length;O+=1){if((w=x[O]).width<a){var _=j/S;_/w.height>(a-w.width)/w.width&&(_=Math.floor((a-w.width)/w.width*w.height)),w.width+=Math.floor(_/w.height*w.width),w.height+=_,j-=_,S-=1}T+=w.height}}switch(l){case"start":b=0;break;case"end":b=f-T;break;case"center":default:b=(f-T)/2}for(var A=0;A<x.length;A+=1){w=x[A];var P=void 0;switch(l){case"start":P=0;break;case"end":P=a-w.width;break;case"center":default:P=(a-w.width)/2}y=P;for(var C=void 0,k=0;k<w.ratios.length;k+=1){var E=w.ratios[k],q=p.targetWidth;C=w.height,n?q=Math.floor(C/E):C/q!=p.targetHeight/p.targetWidth&&(q=Math.floor(p.targetWidth/p.targetHeight*C)),R.push({left:y+h,top:b+c,width:q,height:C}),y+=q}b+=C}return R};t.exports=function(t,e){var i=t.maxRatio,o=void 0===i?1.5:i,n=t.minRatio,a=void 0===n?9/16:n,f=t.fixedRatio,d=void 0!==f&&f,h=t.bigPercentage,u=void 0===h?.8:h,c=t.bigFixedRatio,s=void 0!==c&&c,l=t.bigMaxRatio,g=void 0===l?1.5:l,v=t.bigMinRatio,p=void 0===v?9/16:v,m=t.bigFirst,y=void 0===m||m,b=t.containerWidth,x=void 0===b?640:b,w=t.containerHeight,R=void 0===w?480:w,H=t.alignItems,W=void 0===H?"center":H,M=t.bigAlignItems,L=void 0===M?"center":M,T=t.smallAlignItems,S=void 0===T?"center":T,I=R/x,j=0,O=0,_=0,A=0,P=[],C=e.filter(function(t,e){return!!t.big&&(P.push(e),!0)}),k=e.filter(function(t){return!t.big}),E=[],q=[];if(C.length>0&&k.length>0){var B=void 0,N=void 0;I>function(t){return t.height/t.width}(C[0])?(B=x,_=R-(O=N=Math.floor(R*u))):(N=R,A=x-(j=B=Math.floor(x*u))),y?(E=r({containerWidth:B,containerHeight:N,offsetLeft:0,offsetTop:0,fixedRatio:s,minRatio:p,maxRatio:g,alignItems:L},C),q=r({containerWidth:x-j,containerHeight:R-O,offsetLeft:j,offsetTop:O,fixedRatio:d,minRatio:a,maxRatio:o,alignItems:S},k)):(q=r({containerWidth:x-j,containerHeight:R-O,offsetLeft:0,offsetTop:0,fixedRatio:d,minRatio:a,maxRatio:o,alignItems:S},k),E=r({containerWidth:B,containerHeight:N,offsetLeft:A,offsetTop:_,fixedRatio:s,minRatio:p,alignItems:L},C))}else C.length>0&&0===k.length?E=r({containerWidth:x,containerHeight:R,fixedRatio:s,minRatio:p,maxRatio:g,alignItems:L},C):q=r({containerWidth:x-j,containerHeight:R-O,offsetLeft:j,offsetTop:O,fixedRatio:d,minRatio:a,maxRatio:o,alignItems:W},k);var F=[],$=0,V=0;return e.forEach(function(t,e){P.indexOf(e)>-1?(F[e]=E[$],$+=1):(F[e]=q[V],V+=1)}),F}},function(t,e,i){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=i(0);function n(t,e,i){if(i)return t.style[e]=i,NaN;if("object"===(void 0===e?"undefined":o(e)))return Object.keys(e).forEach(function(i){n(t,i,e[i])}),NaN;var r=getComputedStyle(t).getPropertyValue(e);return""===r&&(r=t.style[e]),r}var a=function(t){return"none"!==n(t,"display")};var f=function(t,e){var i=n(t,e);return i?parseInt(i,10):0},d=function(t){var e=function(t){return t.offsetHeight>0?t.offsetHeight+"px":n(t,"height")}(t);return e?parseInt(e,10):0},h=function(t){var e=function(t){return t.offsetWidth>0?t.offsetWidth+"px":n(t,"width")}(t);return e?parseInt(e,10):0};t.exports=function(t,e){var i=e.animate,o=void 0!==i&&i,u=e.bigClass,c=void 0===u?"OT_big":u;if("none"!==n(t,"display")){var s=t.getAttribute("id");s||(s="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",s)),e.containerHeight=d(t)-f(t,"borderTop")-f(t,"borderBottom"),e.containerWidth=h(t)-f(t,"borderLeft")-f(t,"borderRight");var l=Array.prototype.filter.call(t.querySelectorAll("#"+s+">*"),a),g=l.map(function(t){var e=function(t){if(t){var e=t.querySelector("video");if(e&&e.videoHeight&&e.videoWidth)return{height:e.videoHeight,width:e.videoWidth};if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth}}return{height:480,width:640}}(t);return e.big=t.classList.contains(c),e});r(e,g).forEach(function(t,e){var i=l[e];n(i,"position","absolute");var r=t.width-f(i,"paddingLeft")-f(i,"paddingRight")-f(i,"marginLeft")-f(i,"marginRight")-f(i,"borderLeft")-f(i,"borderRight"),a=t.height-f(i,"paddingTop")-f(i,"paddingBottom")-f(i,"marginTop")-f(i,"marginBottom")-f(i,"borderTop")-f(i,"borderBottom");!function(t,e,i,o,r,a){var f=this,d={left:e+"px",top:i+"px",width:o+"px",height:r+"px"},h=function(){var e=t.querySelector(".OT_root");if(e){var i=e.style.width;e.style.width=o+"px",e.style.width=i||""}};a&&$?($(t).stop(),$(t).animate(d,a.duration||200,a.easing||"swing",function(){h(),a.complete&&a.complete.call(f)})):(n(t,d),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),h()}(i,t.left,t.top,r,a,o)})}}},function(t,e,i){"use strict";
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.initLayoutContainer=e():t.initLayoutContainer=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(o,n,function(e){return t[e]}.bind(null,n));return o},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=2)}([function(t,e,i){"use strict";var o=function(t,e,i,o,n){for(var r=void 0,a=void 0,d=void 0,f=void 0,h=void 0,u=void 0,c=void 0,s=void 0,l=1;l<=n;l+=1){var g=l,v=Math.ceil(n/g);(s=(c=Math.floor(o/v))/(u=Math.floor(i/g)))>e?c=u*(s=e):s<t&&(u=c/(s=t));var p=u*c*n;(void 0===r||p>r)&&(r=p,f=c,h=u,a=g,d=v)}return{maxArea:r,targetCols:a,targetRows:d,targetHeight:f,targetWidth:h,ratio:f/h}},n=function(t,e){var i=t.maxRatio,n=t.minRatio,r=t.fixedRatio,a=t.containerWidth,d=t.containerHeight,f=t.offsetLeft,h=void 0===f?0:f,u=t.offsetTop,c=void 0===u?0:u,s=t.alignItems,l=void 0===s?"center":s,g=e.map(function(t){return t.height/t.width}),v=g.length,p=void 0;if(r){var m=g.length>0?g[0]:null;p=o(m,m,a,d,v)}else p=o(n,i,a,d,v);for(var y=0,b=0,w=[],x=void 0,R=[],H=0;H<g.length;H+=1){H%p.targetCols==0&&(x={ratios:[],width:0,height:0},w.push(x));var W=g[H];x.ratios.push(W);var M=p.targetWidth,L=p.targetHeight;r&&(M=L/W),x.width+=M,x.height=L}for(var T=0,S=0,I=0;I<w.length;I+=1)(x=w[I]).width>a?(x.height=Math.floor(x.height*(a/x.width)),x.width=a):x.width<a&&(S+=1),T+=x.height;if(T<d&&S>0){var j=d-T;T=0;for(var O=0;O<w.length;O+=1){if((x=w[O]).width<a){var _=j/S;_/x.height>(a-x.width)/x.width&&(_=Math.floor((a-x.width)/x.width*x.height)),x.width+=Math.floor(_/x.height*x.width),x.height+=_,j-=_,S-=1}T+=x.height}}switch(l){case"start":b=0;break;case"end":b=d-T;break;case"center":default:b=(d-T)/2}for(var A=0;A<w.length;A+=1){x=w[A];var P=void 0;switch(l){case"start":P=0;break;case"end":P=a-x.width;break;case"center":default:P=(a-x.width)/2}y=P;for(var C=void 0,k=0;k<x.ratios.length;k+=1){var E=x.ratios[k],q=p.targetWidth;C=x.height,r?q=Math.floor(C/E):C/q!=p.targetHeight/p.targetWidth&&(q=Math.floor(p.targetWidth/p.targetHeight*C)),R.push({left:y+h,top:b+c,width:q,height:C}),y+=q}b+=C}return R};t.exports=function(t,e){var i=t.maxRatio,o=void 0===i?1.5:i,r=t.minRatio,a=void 0===r?9/16:r,d=t.fixedRatio,f=void 0!==d&&d,h=t.bigPercentage,u=void 0===h?.8:h,c=t.bigFixedRatio,s=void 0!==c&&c,l=t.bigMaxRatio,g=void 0===l?1.5:l,v=t.bigMinRatio,p=void 0===v?9/16:v,m=t.bigFirst,y=void 0===m||m,b=t.containerWidth,w=void 0===b?640:b,x=t.containerHeight,R=void 0===x?480:x,H=t.alignItems,W=void 0===H?"center":H,M=t.bigAlignItems,L=void 0===M?"center":M,T=t.smallAlignItems,S=void 0===T?"center":T,I=R/w,j=0,O=0,_=0,A=0,P=[],C=e.filter(function(t,e){return!!t.big&&(P.push(e),!0)}),k=e.filter(function(t){return!t.big}),E=[],q=[];if(C.length>0&&k.length>0){var B=void 0,N=void 0;I>function(t){return t.height/t.width}(C[0])?(B=w,_=R-(O=N=Math.floor(R*u))):(N=R,A=w-(j=B=Math.floor(w*u))),y?(E=n({containerWidth:B,containerHeight:N,offsetLeft:0,offsetTop:0,fixedRatio:s,minRatio:p,maxRatio:g,alignItems:L},C),q=n({containerWidth:w-j,containerHeight:R-O,offsetLeft:j,offsetTop:O,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S},k)):(q=n({containerWidth:w-j,containerHeight:R-O,offsetLeft:0,offsetTop:0,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S},k),E=n({containerWidth:B,containerHeight:N,offsetLeft:A,offsetTop:_,fixedRatio:s,minRatio:p,alignItems:L},C))}else C.length>0&&0===k.length?E=n({containerWidth:w,containerHeight:R,fixedRatio:s,minRatio:p,maxRatio:g,alignItems:L},C):q=n({containerWidth:w-j,containerHeight:R-O,offsetLeft:j,offsetTop:O,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:W},k);var F=[],$=0,V=0;return e.forEach(function(t,e){P.indexOf(e)>-1?(F[e]=E[$],$+=1):(F[e]=q[V],V+=1)}),F}},function(t,e,i){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=i(0);t.exports=function(t,e){function i(t,n,r){if(r)return t.style[n]=r,NaN;if("object"===(void 0===n?"undefined":o(n)))return Object.keys(n).forEach(function(e){i(t,e,n[e])}),NaN;var a=(e&&e.window||window).getComputedStyle(t).getPropertyValue(n);return""===a&&(a=t.style[n]),a}var r=function(t,e){var o=i(t,e);return o?parseInt(o,10):0},a=e.animate,d=void 0!==a&&a,f=e.bigClass,h=void 0===f?"OT_big":f;if("none"!==i(t,"display")){var u=t.getAttribute("id");u||(u="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",u)),e.containerHeight=function(t){var e=function(t){return t.offsetHeight>0?t.offsetHeight+"px":i(t,"height")}(t);return e?parseInt(e,10):0}(t)-r(t,"borderTop")-r(t,"borderBottom"),e.containerWidth=function(t){var e=function(t){return t.offsetWidth>0?t.offsetWidth+"px":i(t,"width")}(t);return e?parseInt(e,10):0}(t)-r(t,"borderLeft")-r(t,"borderRight");var c=Array.prototype.filter.call(t.querySelectorAll("#"+u+">*"),function(t){return"none"!==i(t,"display")}),s=c.map(function(t){var e=function(t){if(t){var e=t.querySelector("video");if(e&&e.videoHeight&&e.videoWidth)return{height:e.videoHeight,width:e.videoWidth};if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth}}return{height:480,width:640}}(t);return e.big=t.classList.contains(h),e});n(e,s).forEach(function(t,e){var o=c[e];i(o,"position","absolute");var n=t.width-r(o,"paddingLeft")-r(o,"paddingRight")-r(o,"marginLeft")-r(o,"marginRight")-r(o,"borderLeft")-r(o,"borderRight"),a=t.height-r(o,"paddingTop")-r(o,"paddingBottom")-r(o,"marginTop")-r(o,"marginBottom")-r(o,"borderTop")-r(o,"borderBottom");!function(t,e,o,n,r,a){var d=this,f={left:e+"px",top:o+"px",width:n+"px",height:r+"px"},h=function(){var e=t.querySelector(".OT_root");if(e){var i=e.style.width;e.style.width=n+"px",e.style.width=i||""}};a&&$?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){h(),a.complete&&a.complete.call(d)})):(i(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),h()}(o,t.left,t.top,n,a,d)})}}},function(t,e,i){"use strict";
 /*!
@@ -11,3 +11,3 @@ *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
  *  @License: Released under the MIT license (http://opensource.org/licenses/MIT)
- * */var o=i(0),r=i(1);t.exports=function(t,e){return t="string"==typeof t?document.querySelector(t):t,"undefined"==typeof HTMLElement||t instanceof HTMLElement||e?e||(e={}):e=t,{layout:r.bind(this,t,e),getLayout:o.bind(this,e)}}}])});
+ * */var o=i(0),n=i(1);t.exports=function(t,e){var i=e&&e.window||("undefined"==typeof window?void 0:window);return t="string"==typeof t?i.document.querySelector(t):t,void 0===(i&&i.HTMLElement)||t instanceof i.HTMLElement||e?e||(e={}):e=t,{layout:n.bind(this,t,e),getLayout:o.bind(this,e)}}}])});
 //# sourceMappingURL=opentok-layout.min.js.map

package.json

 {
   "name": "opentok-layout-js",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.",
@@ -5,0 +5,0 @@ "main": "opentok-layout.js",

README.md

@@ -45,2 +45,3 @@ [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
     animate: true              // Whether you want to animate the transitions
+    window: window,         // Lets you pass in your own window object which should be the same window that the element is in
 };
@@ -47,0 +48,0 @@ const layout = initLayoutContainer(document.getElementById("layout"), options);

src/index.js

@@ -20,4 +20,5 @@ /*!
 module.exports = function initLayoutContainer(container, opts) {
-  container = typeof container === 'string' ? document.querySelector(container) : container;
-  if (!(typeof HTMLElement === 'undefined' || container instanceof HTMLElement) && !opts) {
+  const win = (opts && opts.window) || (typeof window === 'undefined' ? undefined : window);
+  container = typeof container === 'string' ? win.document.querySelector(container) : container;
+  if (!(typeof (win && win.HTMLElement) === 'undefined' || container instanceof win.HTMLElement) && !opts) {
     // container is actually the options
@@ -24,0 +25,0 @@ opts = container;

src/layout.js

 const getLayout = require('./getLayout');
 
-function css(el, propertyName, value) {
-  if (value) {
-    // We are setting one css property
-    el.style[propertyName] = value;
-    return NaN;
-  }
-  if (typeof propertyName === 'object') {
-    // We are setting several CSS properties at once
-    Object.keys(propertyName).forEach((key) => {
-      css(el, key, propertyName[key]);
-    });
-    return NaN;
-  }
-  // We are getting the css property
-  const computedStyle = getComputedStyle(el);
-  let currentValue = computedStyle.getPropertyValue(propertyName);
+module.exports = (container, opts) => {
+  function css(el, propertyName, value) {
+    if (value) {
+      // We are setting one css property
+      el.style[propertyName] = value;
+      return NaN;
+    }
+    if (typeof propertyName === 'object') {
+      // We are setting several CSS properties at once
+      Object.keys(propertyName).forEach((key) => {
+        css(el, key, propertyName[key]);
+      });
+      return NaN;
+    }
+    // We are getting the css property
+    const computedStyle = ((opts && opts.window) || window).getComputedStyle(el);
+    let currentValue = computedStyle.getPropertyValue(propertyName);
 
-  if (currentValue === '') {
-    currentValue = el.style[propertyName];
+    if (currentValue === '') {
+      currentValue = el.style[propertyName];
+    }
+
+    return currentValue;
   }
 
-  return currentValue;
-}
+  const filterDisplayNone = element => css(element, 'display') !== 'none';
 
-const filterDisplayNone = element => css(element, 'display') !== 'none';
-
-function height(el) {
-  if (el.offsetHeight > 0) {
-    return `${el.offsetHeight}px`;
+  function height(el) {
+    if (el.offsetHeight > 0) {
+      return `${el.offsetHeight}px`;
+    }
+    return css(el, 'height');
   }
-  return css(el, 'height');
-}
 
-function width(el) {
-  if (el.offsetWidth > 0) {
-    return `${el.offsetWidth}px`;
+  function width(el) {
+    if (el.offsetWidth > 0) {
+      return `${el.offsetWidth}px`;
+    }
+    return css(el, 'width');
   }
-  return css(el, 'width');
-}
 
-const positionElement = function positionElement(elem, x, y, w, h, animate) {
-  const targetPosition = {
-    left: `${x}px`,
-    top: `${y}px`,
-    width: `${w}px`,
-    height: `${h}px`,
-  };
+  const positionElement = function positionElement(elem, x, y, w, h, animate) {
+    const targetPosition = {
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${w}px`,
+      height: `${h}px`,
+    };
 
-  const fixAspectRatio = function fixAspectRatio() {
-    const sub = elem.querySelector('.OT_root');
-    if (sub) {
-      // If this is the parent of a subscriber or publisher then we need
-      // to force the mutation observer on the publisher or subscriber to
-      // trigger to get it to fix it's layout
-      const oldWidth = sub.style.width;
-      sub.style.width = `${w}px`;
-      // sub.style.height = height + 'px';
-      sub.style.width = oldWidth || '';
+    const fixAspectRatio = function fixAspectRatio() {
+      const sub = elem.querySelector('.OT_root');
+      if (sub) {
+        // If this is the parent of a subscriber or publisher then we need
+        // to force the mutation observer on the publisher or subscriber to
+        // trigger to get it to fix it's layout
+        const oldWidth = sub.style.width;
+        sub.style.width = `${w}px`;
+        // sub.style.height = height + 'px';
+        sub.style.width = oldWidth || '';
+      }
+    };
+
+    if (animate && $) {
+      $(elem).stop();
+      $(elem).animate(targetPosition, animate.duration || 200, animate.easing || 'swing',
+        () => {
+          fixAspectRatio();
+          if (animate.complete) animate.complete.call(this);
+        });
+    } else {
+      css(elem, targetPosition);
+      if (!elem.classList.contains('ot-layout')) {
+        elem.classList.add('ot-layout');
+      }
     }
+    fixAspectRatio();
   };
 
-  if (animate && $) {
-    $(elem).stop();
-    $(elem).animate(targetPosition, animate.duration || 200, animate.easing || 'swing',
-      () => {
-        fixAspectRatio();
-        if (animate.complete) animate.complete.call(this);
-      });
-  } else {
-    css(elem, targetPosition);
-    if (!elem.classList.contains('ot-layout')) {
-      elem.classList.add('ot-layout');
+  const getChildDims = function getChildDims(child) {
+    if (child) {
+      const video = child.querySelector('video');
+      if (video && video.videoHeight && video.videoWidth) {
+        return {
+          height: video.videoHeight,
+          width: video.videoWidth,
+        };
+      }
+      if (child.videoHeight && child.videoWidth) {
+        return {
+          height: child.videoHeight,
+          width: child.videoWidth,
+        };
+      }
     }
-  }
-  fixAspectRatio();
-};
+    return {
+      height: 480,
+      width: 640,
+    };
+  };
 
-const getChildDims = function getChildDims(child) {
-  if (child) {
-    const video = child.querySelector('video');
-    if (video && video.videoHeight && video.videoWidth) {
-      return {
-        height: video.videoHeight,
-        width: video.videoWidth,
-      };
-    }
-    if (child.videoHeight && child.videoWidth) {
-      return {
-        height: child.videoHeight,
-        width: child.videoWidth,
-      };
-    }
-  }
-  return {
-    height: 480,
-    width: 640,
+  const getCSSNumber = function getCSSNumber(elem, prop) {
+    const cssStr = css(elem, prop);
+    return cssStr ? parseInt(cssStr, 10) : 0;
   };
-};
 
-const getCSSNumber = function getCSSNumber(elem, prop) {
-  const cssStr = css(elem, prop);
-  return cssStr ? parseInt(cssStr, 10) : 0;
-};
+  // Really cheap UUID function
+  const cheapUUID = function cheapUUID() {
+    return (Math.random() * 100000000).toFixed(0);
+  };
 
-// Really cheap UUID function
-const cheapUUID = function cheapUUID() {
-  return (Math.random() * 100000000).toFixed(0);
-};
+  const getHeight = function getHeight(elem) {
+    const heightStr = height(elem);
+    return heightStr ? parseInt(heightStr, 10) : 0;
+  };
 
-const getHeight = function getHeight(elem) {
-  const heightStr = height(elem);
-  return heightStr ? parseInt(heightStr, 10) : 0;
-};
+  const getWidth = function getWidth(elem) {
+    const widthStr = width(elem);
+    return widthStr ? parseInt(widthStr, 10) : 0;
+  };
 
-const getWidth = function getWidth(elem) {
-  const widthStr = width(elem);
-  return widthStr ? parseInt(widthStr, 10) : 0;
-};
-
-module.exports = (container, opts) => {
   const {
@@ -124,0 +124,0 @@ animate = false,

No alert changes

Improved metrics

Total package byte prevSize

146260

increased by0.93%

Lines of code

1935

increased by0.16%

Number of lines in readme file

242

increased by0.41%

No dependency changes