opentok-layout-js - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

bower.json

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

gulpfile.js

 var gulp = require('gulp'),
     jshint = require('gulp-jshint'),
     rename = require('gulp-rename'),
-    uglify = require('gulp-uglify');
+    uglify = require('gulp-uglify'),
+    Server = require('karma').Server;
 
@@ -13,1 +14,31 @@ gulp.task('default', function(){
 });
+
+gulp.task('test', function (done) {
+  new Server({
+    // Run tests with jQuery
+    configFile: __dirname + '/karma.conf.js',
+    browsers: ['Firefox'],
+    // list of files / patterns to load in the browser
+    files: [
+      'https://static.opentok.com/v2/js/opentok.js',
+      'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js',
+      'opentok-layout.js',
+      'tests/**/*spec.js'
+    ],
+    singleRun: true
+  }, function () {
+    // Run tests without jQuery
+    new Server({
+      // Run tests with jQuery
+      configFile: __dirname + '/karma.conf.js',
+      browsers: ['Firefox'],
+      // list of files / patterns to load in the browser
+      files: [
+        'https://static.opentok.com/v2/js/opentok.js',
+        'opentok-layout.js',
+        'tests/**/*spec.js'
+      ],
+      singleRun: true
+    }, done).start();
+  }).start();
+});

karma.conf.js

@@ -16,11 +16,2 @@ // Karma configuration
 
-    // list of files / patterns to load in the browser
-    files: [
-      'https://static.opentok.com/v2/js/opentok.js',
-      'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js',
-      'opentok-layout.js',
-      'tests/**/*spec.js'
-    ],
-
-
     // list of files to exclude
@@ -27,0 +18,0 @@ exclude: [

opentok-layout.js

 /*!
  *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
  *
- *  Automatic layout of video elements (publisher and subscriber) minimising 
+ *  Automatic layout of video elements (publisher and subscriber) minimising
  *  white-space for the OpenTok on WebRTC API.
@@ -45,2 +45,3 @@ *
         if (animate && $) {
+            console.log('animate');
             $(elem).stop();
@@ -175,3 +176,3 @@ $(elem).animate(targetPosition, animate.duration || 200, animate.easing || "swing", function () {
                             getCSSNumber(elem, "paddingRight") -
-                            getCSSNumber(elem, "marginLeft") - 
+                            getCSSNumber(elem, "marginLeft") -
                             getCSSNumber(elem, "marginRight") -
@@ -183,5 +184,5 @@ getCSSNumber(elem, "borderLeft") -
                             getCSSNumber(elem, "paddingBottom") -
-                            getCSSNumber(elem, "marginTop") - 
+                            getCSSNumber(elem, "marginTop") -
                             getCSSNumber(elem, "marginBottom") -
-                            getCSSNumber(elem, "borderTop") - 
+                            getCSSNumber(elem, "borderTop") -
                             getCSSNumber(elem, "borderBottom");
@@ -209,4 +210,4 @@
 
-        var Height = getHeight(container) - 
-                    getCSSNumber(container, "borderTop") - 
+        var Height = getHeight(container) -
+                    getCSSNumber(container, "borderTop") -
                     getCSSNumber(container, "borderBottom"),
@@ -222,3 +223,3 @@ Width = getWidth(container) -
             bigOnes = Array.prototype.filter.call(
-                container.querySelectorAll("#" + id + ">." + opts.bigClass), 
+                container.querySelectorAll("#" + id + ">." + opts.bigClass),
                 filterDisplayNone),
@@ -298,2 +299,2 @@ smallOnes = Array.prototype.filter.call(
 
-})(jQuery);
+})(window.hasOwnProperty('jQuery') ? jQuery : undefined);

opentok-layout.min.js

 /*!
  *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)
  *
- *  Automatic layout of video elements (publisher and subscriber) minimising 
+ *  Automatic layout of video elements (publisher and subscriber) minimising
  *  white-space for the OpenTok on WebRTC API.
@@ -11,2 +11,2 @@ *
 **/
-("undefined"==typeof module||"undefined"==typeof module.exports)&&(exports=window),function(t){var i=function(i,e,o,a,r,n){var g={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(g,n.duration||200,n.easing||"swing",function(){d(),n.complete&&n.complete.call(this)})):OT.$.css(i,g),d()},e=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},o=function(){return(1e8*Math.random()).toFixed(0)},a=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},r=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},n=function(t,o,a,r,n,g,d,l,s){var h,R=t.length,f=function(t,i){for(var e,r,n,g,d,l,s,f=1;R>=f;f++){var u=f,b=Math.ceil(R/u);s=Math.floor(a/b),l=Math.floor(o/u),tRatio=s/l,tRatio>i?(tRatio=i,s=l*tRatio):t>tRatio&&(tRatio=t,l=s/tRatio);var p=l*s*R;(void 0===e||p>e)&&(e=p,g=s,d=l,r=u,n=b)}return{maxArea:e,targetCols:r,targetRows:n,targetHeight:g,targetWidth:d,ratio:h}};if(g){var u=t.length>0&&t[0].querySelector("video");h=u&&u.videoHeight&&u.videoWidth?f(u.videoHeight/u.videoWidth,u.videoHeight/u.videoWidth):f(.75,.75)}else h=f(d,l);for(var b=h.targetRows*h.targetCols-R,p=b*h.targetWidth/2,c=(h.targetRows-1)*h.targetCols,m=(a-h.targetRows*h.targetHeight)/2,v=(o-h.targetCols*h.targetWidth)/2,x=0,y=0,T=0;T<t.length;T++){var M=t[T];T%h.targetCols===0?(x=v,T==c&&(x+=p),y+=0===T?m:h.targetHeight):x+=h.targetWidth,OT.$.css(M,"position","absolute");var O=h.targetWidth-e(M,"paddingLeft")-e(M,"paddingRight")-e(M,"marginLeft")-e(M,"marginRight")-e(M,"borderLeft")-e(M,"borderRight"),w=h.targetHeight-e(M,"paddingTop")-e(M,"paddingBottom")-e(M,"marginTop")-e(M,"marginBottom")-e(M,"borderTop")-e(M,"borderBottom");i(M,x+r,y+n,O,w,s)}},g=function(t){return"none"!==OT.$.css(t,"display")},d=function(t,i){if("none"!==OT.$.css(t,"display")){var d=t.getAttribute("id");d||(d="OT_"+o(),t.setAttribute("id",d));var l=a(t)-e(t,"borderTop")-e(t,"borderBottom"),s=r(t)-e(t,"borderLeft")-e(t,"borderRight"),h=l/s,R=0,f=0,u=0,b=0,p=Array.prototype.filter.call(t.querySelectorAll("#"+d+">."+i.bigClass),g),c=Array.prototype.filter.call(t.querySelectorAll("#"+d+">*:not(."+i.bigClass+")"),g);if(p.length>0&&c.length>0){var m=p[0].querySelector("video");bigRatio=m&&m.videoHeight&&m.videoWidth?m.videoHeight/m.videoWidth:.75;var v,x;h>bigRatio?(v=s,x=Math.min(Math.floor(l*i.bigPercentage),s*bigRatio),f=x,u=l-f):(x=l,v=Math.min(s*i.bigPercentage,Math.floor(x/bigRatio)),R=v,b=s-R),i.bigFirst?(n(p,v,x,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),n(c,s-R,l-f,R,f,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(n(c,s-R,l-f,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),n(p,v,x,b,u,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else p.length>0&&0===c.length?n(p,s,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):n(c,s-R,l-f,R,f,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}};exports.initLayoutContainer=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(){d(t,i)}),{layout:d.bind(null,t,i)}},OT.initLayoutContainer=exports.initLayoutContainer}(jQuery);
+("undefined"==typeof module||"undefined"==typeof module.exports)&&(exports=window),function(t){var i=function(i,e,o,a,r,n){var g={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?(console.log("animate"),t(i).stop(),t(i).animate(g,n.duration||200,n.easing||"swing",function(){d(),n.complete&&n.complete.call(this)})):OT.$.css(i,g),d()},e=function(t,i){var e=OT.$.css(t,i);return e?parseInt(e,10):0},o=function(){return(1e8*Math.random()).toFixed(0)},a=function(t){var i=OT.$.height(t);return i?parseInt(i,10):0},r=function(t){var i=OT.$.width(t);return i?parseInt(i,10):0},n=function(t,o,a,r,n,g,d,l,s){var h,R=t.length,u=function(t,i){for(var e,r,n,g,d,l,s,u=1;R>=u;u++){var f=u,b=Math.ceil(R/f);s=Math.floor(a/b),l=Math.floor(o/f),tRatio=s/l,tRatio>i?(tRatio=i,s=l*tRatio):t>tRatio&&(tRatio=t,l=s/tRatio);var p=l*s*R;(void 0===e||p>e)&&(e=p,g=s,d=l,r=f,n=b)}return{maxArea:e,targetCols:r,targetRows:n,targetHeight:g,targetWidth:d,ratio:h}};if(g){var f=t.length>0&&t[0].querySelector("video");h=f&&f.videoHeight&&f.videoWidth?u(f.videoHeight/f.videoWidth,f.videoHeight/f.videoWidth):u(.75,.75)}else h=u(d,l);for(var b=h.targetRows*h.targetCols-R,p=b*h.targetWidth/2,c=(h.targetRows-1)*h.targetCols,m=(a-h.targetRows*h.targetHeight)/2,v=(o-h.targetCols*h.targetWidth)/2,x=0,y=0,T=0;T<t.length;T++){var M=t[T];T%h.targetCols===0?(x=v,T==c&&(x+=p),y+=0===T?m:h.targetHeight):x+=h.targetWidth,OT.$.css(M,"position","absolute");var w=h.targetWidth-e(M,"paddingLeft")-e(M,"paddingRight")-e(M,"marginLeft")-e(M,"marginRight")-e(M,"borderLeft")-e(M,"borderRight"),O=h.targetHeight-e(M,"paddingTop")-e(M,"paddingBottom")-e(M,"marginTop")-e(M,"marginBottom")-e(M,"borderTop")-e(M,"borderBottom");i(M,x+r,y+n,w,O,s)}},g=function(t){return"none"!==OT.$.css(t,"display")},d=function(t,i){if("none"!==OT.$.css(t,"display")){var d=t.getAttribute("id");d||(d="OT_"+o(),t.setAttribute("id",d));var l=a(t)-e(t,"borderTop")-e(t,"borderBottom"),s=r(t)-e(t,"borderLeft")-e(t,"borderRight"),h=l/s,R=0,u=0,f=0,b=0,p=Array.prototype.filter.call(t.querySelectorAll("#"+d+">."+i.bigClass),g),c=Array.prototype.filter.call(t.querySelectorAll("#"+d+">*:not(."+i.bigClass+")"),g);if(p.length>0&&c.length>0){var m=p[0].querySelector("video");bigRatio=m&&m.videoHeight&&m.videoWidth?m.videoHeight/m.videoWidth:.75;var v,x;h>bigRatio?(v=s,x=Math.min(Math.floor(l*i.bigPercentage),s*bigRatio),u=x,f=l-u):(x=l,v=Math.min(s*i.bigPercentage,Math.floor(x/bigRatio)),R=v,b=s-R),i.bigFirst?(n(p,v,x,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate),n(c,s-R,l-u,R,u,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)):(n(c,s-R,l-u,0,0,i.fixedRatio,i.minRatio,i.maxRatio,i.animate),n(p,v,x,b,f,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate))}else p.length>0&&0===c.length?n(p,s,l,0,0,i.bigFixedRatio,i.bigMinRatio,i.bigMaxRatio,i.animate):n(c,s-R,l-u,R,u,i.fixedRatio,i.minRatio,i.maxRatio,i.animate)}};exports.initLayoutContainer=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(){d(t,i)}),{layout:d.bind(null,t,i)}},OT.initLayoutContainer=exports.initLayoutContainer}(window.hasOwnProperty("jQuery")?jQuery:void 0);

package.json

 {
   "name": "opentok-layout-js",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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.",
   "main": "opentok-layout.js",
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
@@ -14,3 +13,4 @@ "codeclimate-test-reporter": "0.0.4",
     "gulp-uglify": "~0.2.1",
-    "karma": "^0.12.22",
+    "http-server": "^0.8.0",
+    "karma": "^0.13.0",
     "karma-chrome-launcher": "^0.1.4",
@@ -22,4 +22,5 @@ "karma-coverage": "^0.2.7",
   "scripts": {
-    "test": "node node_modules/karma/bin/karma start karma.conf.js --single-run --browsers Firefox",
-    "postinstall": "gulp"
+    "test": "gulp test",
+    "postinstall": "gulp",
+    "start": "http-server"
   },
@@ -26,0 +27,0 @@ "repository": {

tests/unit/opentok-layout-spec.js

@@ -1,6 +0,17 @@
-describe('opentok-layout', function () {
+describe('opentok layout', function () {
+  //describe('with jQuery specs', specs);
+  describe('without jQuery', function () {
+    beforeEach(function () {
+      window.$ = undefined;
+      window.jQuery = undefined;
+    });
+    describe('specs', specs);
+  });
+})
+
+function specs() {
   it('defines initLayoutContainer', function () {
     expect(window.hasOwnProperty('initLayoutContainer')).toBe(true);
   });
-  
+
   it('defines a layout method', function () {
@@ -10,3 +21,3 @@ var layoutDiv = document.createElement('div');
     layoutContainer = initLayoutContainer(layoutDiv);
-    
+
     expect(layoutContainer.hasOwnProperty('layout')).toBe(true);
@@ -17,3 +28,3 @@ expect(typeof layoutContainer.layout).toEqual('function');
   it('does not break jQuery', function() {
-    expect(window.$).toBeDefined();
+    expect(window.$).toBe(window.jQuery);
   });
@@ -31,3 +42,3 @@
       document.body.appendChild(layoutDiv);
-      
+
       div1 = document.createElement('div');
@@ -40,3 +51,3 @@ div2 = document.createElement('div');
     });
-    
+
     afterEach(function () {
@@ -48,3 +59,3 @@ document.body.removeChild(layoutDiv);
     });
-    
+
     it('handles default layout', function () {
@@ -78,37 +89,39 @@ var layoutContainer = initLayoutContainer(layoutDiv);
     });
-    
-    it('animates if you tell it to', function (done) {
-      var layoutContainer = initLayoutContainer(layoutDiv, {animate: true});
-      layoutContainer.layout();
-      expect(200 - parseFloat(div1.style.width)).not.toBeLessThan(10);
-      setTimeout(function () {
-        expect(200 - parseFloat(div1.style.width)).toBeLessThan(10);
-        done();
-      }, 500);
-    });
-    
-    it('allows you to set the animate duration', function (done) {
-      var layoutContainer = initLayoutContainer(layoutDiv, {animate: {duration: 100}});
-      layoutContainer.layout();
-      expect(200 - parseFloat(div1.style.width)).not.toBeLessThan(10);
-      setTimeout(function () {
-        expect(200 - parseFloat(div1.style.width)).toBeLessThan(10);
-        done();
-      }, 150);
-    });
-    
-    it('calls the animate completionHandler on complete for each element', function (done) {
-      var div1Complete = false,
-        div2Complete = false;
-      
-      var animateComplete = function () {
-        if (this === div1) div1Complete = true;
-        if (this === div2) div2Complete = true;
-        expect(this.style.width).toBe('200px');
-        if (div1Complete && div2Complete) done();
-      };
-      var layoutContainer = initLayoutContainer(layoutDiv, {animate: {complete:animateComplete}});
-      layoutContainer.layout();
-    });
-    
+
+    if (window.jQuery) {
+      it('animates if you tell it to', function (done) {
+        var layoutContainer = initLayoutContainer(layoutDiv, {animate: true});
+        layoutContainer.layout();
+        expect(200 - parseFloat(div1.style.width)).not.toBeLessThan(10);
+        setTimeout(function () {
+          expect(200 - parseFloat(div1.style.width)).toBeLessThan(10);
+          done();
+        }, 500);
+      });
+
+      it('allows you to set the animate duration', function (done) {
+        var layoutContainer = initLayoutContainer(layoutDiv, {animate: {duration: 100}});
+        layoutContainer.layout();
+        expect(200 - parseFloat(div1.style.width)).not.toBeLessThan(10);
+        setTimeout(function () {
+          expect(200 - parseFloat(div1.style.width)).toBeLessThan(10);
+          done();
+        }, 150);
+      });
+
+      it('calls the animate completionHandler on complete for each element', function (done) {
+        var div1Complete = false,
+          div2Complete = false;
+
+        var animateComplete = function () {
+          if (this === div1) div1Complete = true;
+          if (this === div2) div2Complete = true;
+          expect(this.style.width).toBe('200px');
+          if (div1Complete && div2Complete) done();
+        };
+        var layoutContainer = initLayoutContainer(layoutDiv, {animate: {complete:animateComplete}});
+        layoutContainer.layout();
+      });
+    }
+
     describe('with a big element', function () {
@@ -200,3 +213,3 @@ beforeEach(function () {
       document.body.appendChild(layoutDiv);
-      
+
       for (var i = 0; i < divCount; i++) {
@@ -207,3 +220,3 @@ divs[i] = document.createElement('div');
     });
-    
+
     afterEach(function () {
@@ -214,3 +227,3 @@ document.body.removeChild(layoutDiv);
     });
-    
+
     it('handles default layout', function () {
@@ -240,2 +253,2 @@ var layoutContainer = initLayoutContainer(layoutDiv);
   });
-});
+};

No alert changes

Improved metrics

Total package byte prevSize

39176

increased by2.72%

Lines of code

596

increased by6.43%

Worsened metrics

Dev dependency count

11

increased by10%

No dependency changes