opentok-layout-js - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

bower.json

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

opentok-layout.js

@@ -12,5 +12,2 @@ /*!
 
-/* global OT */
-
-// TODO: don't rely on internal OT.$ API.
 // in CommonJS context, this should be a `require()`d dependency.
@@ -22,2 +19,47 @@ // in browser globals context, ...? (when using bower, there are dependencies that it has handled
 (function($) {
+    function css(el, propertyName, value) {
+        if (value) {
+            // We are setting one css property
+            el.style[propertyName] = value;
+        } else if (typeof propertyName === 'object') {
+            // We are setting several CSS properties at once
+            Object.keys(propertyName).forEach(function(key) {
+                css(el, key, propertyName[key]);
+            });
+        } else {
+            // We are getting the css property
+            var computedStyle = getComputedStyle(el);
+            var currentValue = computedStyle.getPropertyValue(propertyName);
+
+            if (currentValue === '') {
+                currentValue = el.style[propertyName];
+            }
+
+            return currentValue;
+        }
+    }
+    function height(el) {
+        if (el.offsetHeight > 0) {
+            return el.offsetHeight + 'px';
+        }
+        return css(el, 'height');
+    }
+    function width(el) {
+        if (el.offsetWidth > 0) {
+            return el.offsetWidth + 'px';
+        }
+        return css(el, 'width');
+    }
+    function defaults(custom, defaults) {
+        var res = {};
+        Object.keys(defaults).forEach(function(key) {
+            if (custom.hasOwnProperty(key)) {
+                res[key] = custom[key];
+            } else {
+                res[key] = defaults[key];
+            }
+        });
+        return res;
+    }
+
     var positionElement = function positionElement(elem, x, y, width, height, animate) {
@@ -52,4 +94,3 @@ var targetPosition = {
         } else {
-            // NOTE: internal OT.$ API
-            OT.$.css(elem, targetPosition);
+            css(elem, targetPosition);
         }
@@ -73,4 +114,3 @@ fixAspectRatio();
     var getCSSNumber = function (elem, prop) {
-        // NOTE: internal OT.$ API
-        var cssStr = OT.$.css(elem, prop);
+        var cssStr = css(elem, prop);
         return cssStr ? parseInt(cssStr, 10) : 0;
@@ -85,4 +125,3 @@ };
     var getHeight = function (elem) {
-        // NOTE: internal OT.$ API
-        var heightStr = OT.$.height(elem);
+        var heightStr = height(elem);
         return heightStr ? parseInt(heightStr, 10) : 0;
@@ -92,4 +131,3 @@ };
     var getWidth = function (elem) {
-        // NOTE: internal OT.$ API
-        var widthStr = OT.$.width(elem);
+        var widthStr = width(elem);
         return widthStr ? parseInt(widthStr, 10) : 0;
@@ -244,4 +282,3 @@ };
             }
-            // NOTE: internal OT.$ API
-            OT.$.css(elem, 'position', 'absolute');
+            css(elem, 'position', 'absolute');
             var actualWidth = targetWidth - getCSSNumber(elem, 'paddingLeft') -
@@ -269,9 +306,7 @@ getCSSNumber(elem, 'paddingRight') -
     var filterDisplayNone = function (element) {
-        // NOTE: internal OT.$ API
-        return OT.$.css(element, 'display') !== 'none';
+        return css(element, 'display') !== 'none';
     };
 
     var layout = function layout(container, opts) {
-        // NOTE: internal OT.$ API
-        if (OT.$.css(container, 'display') === 'none') {
+        if (css(container, 'display') === 'none') {
             return;
@@ -343,4 +378,3 @@ }
     var initLayoutContainer = function(container, opts) {
-        // NOTE: internal OT.$ API
-        opts = OT.$.defaults(opts || {}, {
+        opts = defaults(opts || {}, {
             maxRatio: 3/2,
@@ -357,11 +391,11 @@ minRatio: 9/16,
         });
-        // NOTE: internal OT.$ API
-        container = typeof(container) === 'string' ? OT.$(container) : container;
+        container = typeof(container) === 'string' ? document.querySelector(container) : container;
 
-        // TODO: should we add event hooks to external globals like this?
-        // this could be left as a responsibility of the user, and i think that would be more sound
-        // the OT.onLoad() method has (publicly) undefined behavior
-        OT.onLoad(function() {
+        if (document.readyState === 'complete') {
             layout(container, opts);
-        });
+        } else {
+            window.addEventListener('load', function() {
+                layout(container, opts);
+            });
+        }
 
@@ -368,0 +402,0 @@ return {

opentok-layout.min.js

@@ -11,2 +11,2 @@ /*!
 **/
-!function(t){var i=function(i,e,o,a,r,n){var h={left:e+"px",top:o+"px",width:a+"px",height:r+"px"},d=function(){var t=i.querySelector(".OT_root");if(t){var e=t.style.width;t.style.width=a+"px",t.style.width=e||""}};n&&t?(t(i).stop(),t(i).animate(h,n.duration||200,n.easing||"swing",function(){d(),n.complete&&n.complete.call(this)})):OT.$.css(i,h),d()},e=function(t){if(!t)return.75;var i=t.querySelector("video");return i&&i.videoHeight&&i.videoWidth?i.videoHeight/i.videoWidth:t.videoHeight&&t.videoWidth?t.videoHeight/t.videoWidth:.75},o=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},a=function(){return(1e8*Math.random()).toFixed(0)},r=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},n=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},h=function(t,a,r,n,h,d,g,l,f){var u,s=t.length,v=function(t,i){for(var e,o,n,h,d,g,l,f,u=1;s>=u;u++){var v=u,c=Math.ceil(s/v);l=Math.floor(r/c),g=Math.floor(a/v),f=l/g,f>i?(f=i,l=g*f):t>f&&(f=t,g=l/f);var p=g*l*s;(void 0===e||p>e)&&(e=p,h=l,d=g,o=v,n=c)}return{maxArea:e,targetCols:o,targetRows:n,targetHeight:h,targetWidth:d,ratio:h/d}};if(d){var c=e(t.length>0?t[0]:null);u=v(c,c)}else u=v(g,l);for(var p,b=0,m=0,w=[],R=0;R<t.length;R++){R%u.targetCols===0&&(p={children:[],width:0,height:0},w.push(p));var x=t[R];p.children.push(x);var y=u.targetWidth,M=u.targetHeight;d&&(y=M/e(x)),p.width+=y,p.height=M}var T=0,O=0;for(R=0;R<w.length;R++){var p=w[R];p.width>a?(p.height=Math.floor(p.height*(a/p.width)),p.width=a):p.width<a&&(O+=1),T+=p.height}if(r>T&&O>0){var $=r-T;for(T=0,R=0;R<w.length;R++){var p=w[R];if(p.width<a){var A=$/O;A/p.height>(a-p.width)/p.width&&(A=Math.floor((a-p.width)/p.width*p.height)),p.width+=Math.floor(A/p.height*p.width),p.height+=A,$-=A,O-=1}T+=p.height}}for(m=(r-T)/2,R=0;R<w.length;R++){var p=w[R],C=(a-p.width)/2;b=C;for(var F=0;F<p.children.length;F++){var x=p.children[F],y=u.targetWidth,M=p.height;d&&(y=Math.floor(M/e(x))),OT.$.css(x,"position","absolute");var L=y-o(x,"paddingLeft")-o(x,"paddingRight")-o(x,"marginLeft")-o(x,"marginRight")-o(x,"borderLeft")-o(x,"borderRight"),W=M-o(x,"paddingTop")-o(x,"paddingBottom")-o(x,"marginTop")-o(x,"marginBottom")-o(x,"borderTop")-o(x,"borderBottom");i(x,b+n,m+h,L,W,f),b+=y}m+=M}},d=function(t){return"none"!==OT.$.css(t,"display")},g=function(t,i){if("none"!==OT.$.css(t,"display")){var g=t.getAttribute("id");g||(g="OT_"+a(),t.setAttribute("id",g));var l=r(t)-o(t,"borderTop")-o(t,"borderBottom"),f=n(t)-o(t,"borderLeft")-o(t,"borderRight"),u=l/f,s=0,v=0,c=0,p=0,b=Array.prototype.filter.call(t.querySelectorAll("#"+g+">."+i.bigClass),d),m=Array.prototype.filter.call(t.querySelectorAll("#"+g+">*:not(."+i.bigClass+")"),d);if(b.length>0&&m.length>0){var w,R;u>e(b[0])?(w=f,R=Math.floor(l*i.bigPercentage),v=R,c=l-v):(R=l,w=Math.floor(f*i.bigPercentage),s=w,p=f-s),i.bigFirst?(h(b,w,R,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),h(m,f-s,l-v,s,v,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(h(m,f-s,l-v,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),h(b,w,R,p,c,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else b.length>0&&0===m.length?h(b,f,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):h(m,f-s,l-v,s,v,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}},l=function(t,i){return i=OT.$.defaults(i||{},{maxRatio:1.5,minRatio:9/16,fixedRatio:!1,animate:!1,bigClass:"OT_big",bigPercentage:.8,bigFixedRatio:!1,bigMaxRatio:1.5,bigMinRatio:9/16,bigFirst:!0}),t="string"==typeof t?OT.$(t):t,OT.onLoad(function(){g(t,i)}),{layout:g.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=l:module.exports.initLayoutContainer=l}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);
+!function(t){function i(t,e,o){if(o)t.style[e]=o;else{if("object"!=typeof e){var r=getComputedStyle(t),a=r.getPropertyValue(e);return""===a&&(a=t.style[e]),a}Object.keys(e).forEach(function(o){i(t,o,e[o])})}}function e(t){return t.offsetHeight>0?t.offsetHeight+"px":i(t,"height")}function o(t){return t.offsetWidth>0?t.offsetWidth+"px":i(t,"width")}function r(t,i){var e={};return Object.keys(i).forEach(function(o){t.hasOwnProperty(o)?e[o]=t[o]:e[o]=i[o]}),e}var a=function(e,o,r,a,n,h){var d={left:o+"px",top:r+"px",width:a+"px",height:n+"px"},g=function(){var t=e.querySelector(".OT_root");if(t){var i=t.style.width;t.style.width=a+"px",t.style.width=i||""}};h&&t?(t(e).stop(),t(e).animate(d,h.duration||200,h.easing||"swing",function(){g(),h.complete&&h.complete.call(this)})):i(e,d),g()},n=function(t){if(!t)return.75;var i=t.querySelector("video");return i&&i.videoHeight&&i.videoWidth?i.videoHeight/i.videoWidth:t.videoHeight&&t.videoWidth?t.videoHeight/t.videoWidth:.75},h=function(t,e){var o=i(t,e);return o?parseInt(o,10):0},d=function(){return(1e8*Math.random()).toFixed(0)},g=function(t){var i=e(t);return i?parseInt(i,10):0},f=function(t){var i=o(t);return i?parseInt(i,10):0},l=function(t,e,o,r,d,g,f,l,u){var c,s=t.length,p=function(t,i){for(var r,a,n,h,d,g,f,l,u=1;s>=u;u++){var c=u,p=Math.ceil(s/c);f=Math.floor(o/p),g=Math.floor(e/c),l=f/g,l>i?(l=i,f=g*l):t>l&&(l=t,g=f/l);var v=g*f*s;(void 0===r||v>r)&&(r=v,h=f,d=g,a=c,n=p)}return{maxArea:r,targetCols:a,targetRows:n,targetHeight:h,targetWidth:d,ratio:h/d}};if(g){var v=n(t.length>0?t[0]:null);c=p(v,v)}else c=p(f,l);for(var b,m=0,w=0,y=[],R=0;R<t.length;R++){R%c.targetCols===0&&(b={children:[],width:0,height:0},y.push(b));var x=t[R];b.children.push(x);var M=c.targetWidth,W=c.targetHeight;g&&(M=W/n(x)),b.width+=M,b.height=W}var C=0,H=0;for(R=0;R<y.length;R++){var b=y[R];b.width>e?(b.height=Math.floor(b.height*(e/b.width)),b.width=e):b.width<e&&(H+=1),C+=b.height}if(o>C&&H>0){var A=o-C;for(C=0,R=0;R<y.length;R++){var b=y[R];if(b.width<e){var F=A/H;F/b.height>(e-b.width)/b.width&&(F=Math.floor((e-b.width)/b.width*b.height)),b.width+=Math.floor(F/b.height*b.width),b.height+=F,A-=F,H-=1}C+=b.height}}for(w=(o-C)/2,R=0;R<y.length;R++){var b=y[R],L=(e-b.width)/2;m=L;for(var O=0;O<b.children.length;O++){var x=b.children[O],M=c.targetWidth,W=b.height;g&&(M=Math.floor(W/n(x))),i(x,"position","absolute");var S=M-h(x,"paddingLeft")-h(x,"paddingRight")-h(x,"marginLeft")-h(x,"marginRight")-h(x,"borderLeft")-h(x,"borderRight"),T=W-h(x,"paddingTop")-h(x,"paddingBottom")-h(x,"marginTop")-h(x,"marginBottom")-h(x,"borderTop")-h(x,"borderBottom");a(x,m+r,w+d,S,T,u),m+=M}w+=W}},u=function(t){return"none"!==i(t,"display")},c=function(t,e){if("none"!==i(t,"display")){var o=t.getAttribute("id");o||(o="OT_"+d(),t.setAttribute("id",o));var r=g(t)-h(t,"borderTop")-h(t,"borderBottom"),a=f(t)-h(t,"borderLeft")-h(t,"borderRight"),c=r/a,s=0,p=0,v=0,b=0,m=Array.prototype.filter.call(t.querySelectorAll("#"+o+">."+e.bigClass),u),w=Array.prototype.filter.call(t.querySelectorAll("#"+o+">*:not(."+e.bigClass+")"),u);if(m.length>0&&w.length>0){var y,R;c>n(m[0])?(y=a,R=Math.floor(r*e.bigPercentage),p=R,v=r-p):(R=r,y=Math.floor(a*e.bigPercentage),s=y,b=a-s),e.bigFirst?(l(m,y,R,0,0,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate),l(w,a-s,r-p,s,p,e.fixedRatio,e.minRatio,e.maxRatio,e.animate)):(l(w,a-s,r-p,0,0,e.fixedRatio,e.minRatio,e.maxRatio,e.animate),l(m,y,R,b,v,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate))}else m.length>0&&0===w.length?l(m,a,r,0,0,e.bigFixedRatio,e.bigMinRatio,e.bigMaxRatio,e.animate):l(w,a-s,r-p,s,p,e.fixedRatio,e.minRatio,e.maxRatio,e.animate)}},s=function(t,i){return i=r(i||{},{maxRatio:1.5,minRatio:9/16,fixedRatio:!1,animate:!1,bigClass:"OT_big",bigPercentage:.8,bigFixedRatio:!1,bigMaxRatio:1.5,bigMinRatio:9/16,bigFirst:!0}),t="string"==typeof t?document.querySelector(t):t,"complete"===document.readyState?c(t,i):window.addEventListener("load",function(){c(t,i)}),{layout:c.bind(null,t,i)}};"undefined"==typeof module||"undefined"==typeof module.exports?window.initLayoutContainer=s:module.exports.initLayoutContainer=s}("undefined"!=typeof window&&window.hasOwnProperty("jQuery")?window.jQuery:void 0);

package.json

 {
   "name": "opentok-layout-js",
-  "version": "1.1.0",
+  "version": "2.0.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

 [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
-[![Code Climate](https://codeclimate.com/github/aullman/opentok-layout-js/badges/gpa.svg)](https://codeclimate.com/github/aullman/opentok-layout-js)
-[![Test Coverage](https://codeclimate.com/github/aullman/opentok-layout-js/badges/coverage.svg)](https://codeclimate.com/github/aullman/opentok-layout-js)
 
@@ -5,0 +3,0 @@ [![Demo of Layout Container](https://github.com/aullman/opentok-layout-js/raw/master/layout-demo.gif)](https://aullman.github.io/opentok-layout-js/ "Layout-container Demo")

tests/karma.conf.js

@@ -25,3 +25,2 @@ // Karma configuration
     files: [
-      'https://tbdev.tokbox.com/v2/js/opentok.min.js',
       '../opentok-layout.js',
@@ -28,0 +27,0 @@ '**/*spec.js'

tests/unit/opentok-layout-spec.js

@@ -88,3 +88,2 @@ /*globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
       layoutContainer.layout();
-      debugger;
       var div1Rect = div1.getBoundingClientRect();
@@ -91,0 +90,0 @@ var div2Rect = div2.getBoundingClientRect();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1027

increased by3.01%

Worsened metrics

Total package byte prevSize

15878076

decreased by-0.18%

Number of lines in readme file

198

decreased by-1%

No dependency changes