opentok-layout-js - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

bower.json

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

opentok-layout.js

@@ -374,2 +374,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
     var bigHeight = void 0;
+    var showBigFirst = bigFirst === true;
 
@@ -383,2 +384,7 @@ if (availableRatio > getVideoRatio(bigOnes[0])) {
       bigOffsetTop = containerHeight - offsetTop;
+      if (bigFirst === 'column') {
+        showBigFirst = false;
+      } else if (bigFirst === 'row') {
+        showBigFirst = true;
+      }
     } else {
@@ -391,4 +397,9 @@ // We are wide, going to take up the whole height and arrange the small
       bigOffsetLeft = containerWidth - offsetLeft;
+      if (bigFirst === 'column') {
+        showBigFirst = true;
+      } else if (bigFirst === 'row') {
+        showBigFirst = false;
+      }
     }
-    if (bigFirst) {
+    if (showBigFirst) {
       bigBoxes = getLayout({
@@ -395,0 +406,0 @@ containerWidth: bigWidth,

opentok-layout.min.js

@@ -1,2 +0,2 @@
-!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.initLayoutContainer=i():t.initLayoutContainer=i()}("undefined"!=typeof self?self:this,function(){return function(t){var i={};function e(o){if(i[o])return i[o].exports;var n=i[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=i,e.d=function(t,i,o){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:o})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)e.d(o,n,function(i){return t[i]}.bind(null,n));return o},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=2)}([function(t,i,e){"use strict";var o=function(t,i,e,o,n,r,a){for(var d=void 0,f=void 0,h=void 0,u=void 0,g=void 0,s=void 0,l=void 0,c=void 0,v=1;v<=n;v+=1){var m=v,p=Math.ceil(n/m);(c=(l=Math.floor(o/p))/(s=Math.floor(e/m)))>i?l=s*(c=i):c<t&&(s=l/(c=t));var x=(s=Math.min(r,s))*(l=Math.min(a,l))*n;(void 0===d||x>=d)&&(d=x,u=l,g=s,f=m,h=p)}return{maxArea:d,targetCols:f,targetRows:h,targetHeight:u,targetWidth:g,ratio:u/g}},n=function(t,i){var e=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,g=void 0===u?0:u,s=t.alignItems,l=void 0===s?"center":s,c=t.maxWidth,v=void 0===c?1/0:c,m=t.maxHeight,p=void 0===m?1/0:m,x=i.map(function(t){return t.height/t.width}),b=x.length,y=void 0;if(r){var w=x.length>0?x[0]:null;y=o(w,w,a,d,b,v,p)}else y=o(n,e,a,d,b,v,p);for(var R=0,H=0,W=[],M=void 0,L=[],T=0;T<x.length;T+=1){T%y.targetCols==0&&(M={ratios:[],width:0,height:0},W.push(M));var S=x[T];M.ratios.push(S);var I=y.targetWidth,O=y.targetHeight;r&&(I=O/S),M.width+=I,M.height=O}for(var j=0,_=0,A=0;A<W.length;A+=1)(M=W[A]).width>a?(M.height=Math.floor(M.height*(a/M.width)),M.width=a):M.width<a&&M.height<p&&(_+=1),j+=M.height;if(j<d&&_>0){var C=d-j;j=0;for(var P=0;P<W.length;P+=1){if((M=W[P]).width<a){var k=C/_;k/M.height>(a-M.width)/M.width&&(k=Math.floor((a-M.width)/M.width*M.height)),M.width+=Math.floor(k/M.height*M.width),M.height+=k,C-=k,_-=1}j+=M.height}}switch(l){case"start":H=0;break;case"end":H=d-j;break;case"center":default:H=(d-j)/2}for(var E=0;E<W.length;E+=1){M=W[E];var q=void 0;switch(l){case"start":q=0;break;case"end":q=a-M.width;break;case"center":default:q=(a-M.width)/2}R=q;for(var B=void 0,N=0;N<M.ratios.length;N+=1){var F=M.ratios[N],$=y.targetWidth;B=M.height,r?$=Math.floor(B/F):B/$!=y.targetHeight/y.targetWidth&&($=Math.floor(y.targetWidth/y.targetHeight*B)),L.push({left:R+h,top:H+g,width:$,height:B}),R+=$}H+=B}return L};t.exports=function(t,i){var e=t.maxRatio,o=void 0===e?1.5:e,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,g=t.bigFixedRatio,s=void 0!==g&&g,l=t.bigMaxRatio,c=void 0===l?1.5:l,v=t.bigMinRatio,m=void 0===v?9/16:v,p=t.bigFirst,x=void 0===p||p,b=t.containerWidth,y=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=t.smallMaxWidth,O=void 0===I?1/0:I,j=t.smallMaxHeight,_=void 0===j?1/0:j,A=t.bigMaxWidth,C=void 0===A?1/0:A,P=t.bigMaxHeight,k=void 0===P?1/0:P,E=R/y,q=0,B=0,N=0,F=0,$=[],V=i.filter(function(t,i){return!!t.big&&($.push(i),!0)}),z=i.filter(function(t){return!t.big}),D=[],G=[];if(V.length>0&&z.length>0){var J=void 0,K=void 0;E>function(t){return t.height/t.width}(V[0])?(J=y,N=R-(B=K=Math.floor(R*u))):(K=R,F=y-(q=J=Math.floor(y*u))),x?(D=n({containerWidth:J,containerHeight:K,offsetLeft:0,offsetTop:0,fixedRatio:s,minRatio:m,maxRatio:c,alignItems:L,maxWidth:C,maxHeight:k},V),G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:q,offsetTop:B,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:O,maxHeight:_},z)):(G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:0,offsetTop:0,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:O,maxHeight:_},z),D=n({containerWidth:J,containerHeight:K,offsetLeft:F,offsetTop:N,fixedRatio:s,minRatio:m,alignItems:L,maxWidth:C,maxHeight:k},V))}else V.length>0&&0===z.length?D=n({containerWidth:y,containerHeight:R,fixedRatio:s,minRatio:m,maxRatio:c,alignItems:L,maxWidth:C,maxHeight:k},V):G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:q,offsetTop:B,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:W,maxWidth:O,maxHeight:_},z);var Q=[],U=0,X=0;return i.forEach(function(t,i){$.indexOf(i)>-1?(Q[i]=D[U],U+=1):(Q[i]=G[X],X+=1)}),Q}},function(t,i,e){"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=e(0);t.exports=function(t,i){function e(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(i){e(t,i,n[i])}),NaN;var a=(i&&i.window||window).getComputedStyle(t).getPropertyValue(n);return""===a&&(a=t.style[n]),a}var r=function(t,i){var o=e(t,i);return o?parseInt(o,10):0},a=i.animate,d=void 0!==a&&a,f=i.bigClass,h=void 0===f?"OT_big":f,u=i.ignoreClass,g=void 0===u?"OT_ignore":u;if("none"!==e(t,"display")){var s=t.getAttribute("id");s||(s="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",s)),i.containerHeight=function(t){var i=function(t){return t.offsetHeight>0?t.offsetHeight+"px":e(t,"height")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderTop")-r(t,"borderBottom"),i.containerWidth=function(t){var i=function(t){return t.offsetWidth>0?t.offsetWidth+"px":e(t,"width")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderLeft")-r(t,"borderRight");var l=Array.prototype.filter.call(t.querySelectorAll("#"+s+">*:not(."+g+")"),function(t){return"none"!==e(t,"display")}),c=l.map(function(t){var i=function(t){if(t){var i=t.querySelector("video");if(i&&i.videoHeight&&i.videoWidth)return{height:i.videoHeight,width:i.videoWidth};if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth}}return{height:480,width:640}}(t);return i.big=t.classList.contains(h),i});n(i,c).forEach(function(t,i){var o=l[i];e(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,i,o,n,r,a){var d=this,f={left:i+"px",top:o+"px",width:n+"px",height:r+"px"},h=function(){var i=t.querySelector(".OT_root");if(i){var e=i.style.width;i.style.width=n+"px",i.style.width=e||""}};a&&$?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){h(),a.complete&&a.complete.call(d)})):(e(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),h()}(o,t.left,t.top,n,a,d)})}}},function(t,i,e){"use strict";
+!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.initLayoutContainer=i():t.initLayoutContainer=i()}("undefined"!=typeof self?self:this,function(){return function(t){var i={};function e(o){if(i[o])return i[o].exports;var n=i[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=i,e.d=function(t,i,o){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:o})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)e.d(o,n,function(i){return t[i]}.bind(null,n));return o},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=2)}([function(t,i,e){"use strict";var o=function(t,i,e,o,n,r,a){for(var d=void 0,f=void 0,h=void 0,u=void 0,g=void 0,l=void 0,s=void 0,c=void 0,v=1;v<=n;v+=1){var m=v,p=Math.ceil(n/m);(c=(s=Math.floor(o/p))/(l=Math.floor(e/m)))>i?s=l*(c=i):c<t&&(l=s/(c=t));var x=(l=Math.min(r,l))*(s=Math.min(a,s))*n;(void 0===d||x>=d)&&(d=x,u=s,g=l,f=m,h=p)}return{maxArea:d,targetCols:f,targetRows:h,targetHeight:u,targetWidth:g,ratio:u/g}},n=function(t,i){var e=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,g=void 0===u?0:u,l=t.alignItems,s=void 0===l?"center":l,c=t.maxWidth,v=void 0===c?1/0:c,m=t.maxHeight,p=void 0===m?1/0:m,x=i.map(function(t){return t.height/t.width}),b=x.length,y=void 0;if(r){var w=x.length>0?x[0]:null;y=o(w,w,a,d,b,v,p)}else y=o(n,e,a,d,b,v,p);for(var R=0,H=0,W=[],M=void 0,L=[],T=0;T<x.length;T+=1){T%y.targetCols==0&&(M={ratios:[],width:0,height:0},W.push(M));var S=x[T];M.ratios.push(S);var I=y.targetWidth,O=y.targetHeight;r&&(I=O/S),M.width+=I,M.height=O}for(var j=0,_=0,A=0;A<W.length;A+=1)(M=W[A]).width>a?(M.height=Math.floor(M.height*(a/M.width)),M.width=a):M.width<a&&M.height<p&&(_+=1),j+=M.height;if(j<d&&_>0){var C=d-j;j=0;for(var P=0;P<W.length;P+=1){if((M=W[P]).width<a){var k=C/_;k/M.height>(a-M.width)/M.width&&(k=Math.floor((a-M.width)/M.width*M.height)),M.width+=Math.floor(k/M.height*M.width),M.height+=k,C-=k,_-=1}j+=M.height}}switch(s){case"start":H=0;break;case"end":H=d-j;break;case"center":default:H=(d-j)/2}for(var E=0;E<W.length;E+=1){M=W[E];var q=void 0;switch(s){case"start":q=0;break;case"end":q=a-M.width;break;case"center":default:q=(a-M.width)/2}R=q;for(var B=void 0,N=0;N<M.ratios.length;N+=1){var F=M.ratios[N],$=y.targetWidth;B=M.height,r?$=Math.floor(B/F):B/$!=y.targetHeight/y.targetWidth&&($=Math.floor(y.targetWidth/y.targetHeight*B)),L.push({left:R+h,top:H+g,width:$,height:B}),R+=$}H+=B}return L};t.exports=function(t,i){var e=t.maxRatio,o=void 0===e?1.5:e,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,g=t.bigFixedRatio,l=void 0!==g&&g,s=t.bigMaxRatio,c=void 0===s?1.5:s,v=t.bigMinRatio,m=void 0===v?9/16:v,p=t.bigFirst,x=void 0===p||p,b=t.containerWidth,y=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=t.smallMaxWidth,O=void 0===I?1/0:I,j=t.smallMaxHeight,_=void 0===j?1/0:j,A=t.bigMaxWidth,C=void 0===A?1/0:A,P=t.bigMaxHeight,k=void 0===P?1/0:P,E=R/y,q=0,B=0,N=0,F=0,$=[],V=i.filter(function(t,i){return!!t.big&&($.push(i),!0)}),z=i.filter(function(t){return!t.big}),D=[],G=[];if(V.length>0&&z.length>0){var J=void 0,K=void 0,Q=!0===x;E>function(t){return t.height/t.width}(V[0])?(J=y,N=R-(B=K=Math.floor(R*u)),"column"===x?Q=!1:"row"===x&&(Q=!0)):(K=R,F=y-(q=J=Math.floor(y*u)),"column"===x?Q=!0:"row"===x&&(Q=!1)),Q?(D=n({containerWidth:J,containerHeight:K,offsetLeft:0,offsetTop:0,fixedRatio:l,minRatio:m,maxRatio:c,alignItems:L,maxWidth:C,maxHeight:k},V),G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:q,offsetTop:B,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:O,maxHeight:_},z)):(G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:0,offsetTop:0,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:S,maxWidth:O,maxHeight:_},z),D=n({containerWidth:J,containerHeight:K,offsetLeft:F,offsetTop:N,fixedRatio:l,minRatio:m,alignItems:L,maxWidth:C,maxHeight:k},V))}else V.length>0&&0===z.length?D=n({containerWidth:y,containerHeight:R,fixedRatio:l,minRatio:m,maxRatio:c,alignItems:L,maxWidth:C,maxHeight:k},V):G=n({containerWidth:y-q,containerHeight:R-B,offsetLeft:q,offsetTop:B,fixedRatio:f,minRatio:a,maxRatio:o,alignItems:W,maxWidth:O,maxHeight:_},z);var U=[],X=0,Y=0;return i.forEach(function(t,i){$.indexOf(i)>-1?(U[i]=D[X],X+=1):(U[i]=G[Y],Y+=1)}),U}},function(t,i,e){"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=e(0);t.exports=function(t,i){function e(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(i){e(t,i,n[i])}),NaN;var a=(i&&i.window||window).getComputedStyle(t).getPropertyValue(n);return""===a&&(a=t.style[n]),a}var r=function(t,i){var o=e(t,i);return o?parseInt(o,10):0},a=i.animate,d=void 0!==a&&a,f=i.bigClass,h=void 0===f?"OT_big":f,u=i.ignoreClass,g=void 0===u?"OT_ignore":u;if("none"!==e(t,"display")){var l=t.getAttribute("id");l||(l="OT_"+(1e8*Math.random()).toFixed(0),t.setAttribute("id",l)),i.containerHeight=function(t){var i=function(t){return t.offsetHeight>0?t.offsetHeight+"px":e(t,"height")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderTop")-r(t,"borderBottom"),i.containerWidth=function(t){var i=function(t){return t.offsetWidth>0?t.offsetWidth+"px":e(t,"width")}(t);return i?parseInt(i,10):0}(t)-r(t,"borderLeft")-r(t,"borderRight");var s=Array.prototype.filter.call(t.querySelectorAll("#"+l+">*:not(."+g+")"),function(t){return"none"!==e(t,"display")}),c=s.map(function(t){var i=function(t){if(t){var i=t.querySelector("video");if(i&&i.videoHeight&&i.videoWidth)return{height:i.videoHeight,width:i.videoWidth};if(t.videoHeight&&t.videoWidth)return{height:t.videoHeight,width:t.videoWidth}}return{height:480,width:640}}(t);return i.big=t.classList.contains(h),i});n(i,c).forEach(function(t,i){var o=s[i];e(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,i,o,n,r,a){var d=this,f={left:i+"px",top:o+"px",width:n+"px",height:r+"px"},h=function(){var i=t.querySelector(".OT_root");if(i){var e=i.style.width;i.style.width=n+"px",i.style.width=e||""}};a&&$?($(t).stop(),$(t).animate(f,a.duration||200,a.easing||"swing",function(){h(),a.complete&&a.complete.call(d)})):(e(t,f),t.classList.contains("ot-layout")||t.classList.add("ot-layout")),h()}(o,t.left,t.top,n,a,d)})}}},function(t,i,e){"use strict";
 /*!
@@ -3,0 +3,0 @@ *  opentok-layout-js (http://github.com/aullman/opentok-layout-js)

package.json

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

@@ -47,3 +47,4 @@ [![Build Status](https://travis-ci.org/aullman/opentok-layout-js.svg?branch=master)](https://travis-ci.org/aullman/opentok-layout-js)
     bigMinRatio: 9/16,         // The widest ratio to use for the big elements (default 16x9)
-    bigFirst: true,            // Whether to place the big one in the top left (true) or bottom right
+    bigFirst: true,            // Whether to place the big one in the top left (true) or bottom right (false). 
+                               // You can also pass 'column' or 'row' to change whether big is first when you are in a row (bottom) or a column (right) layout
     animate: true              // Whether you want to animate the transitions
@@ -50,0 +51,0 @@ window: window,            // Lets you pass in your own window object which should be the same window that the element is in

src/getLayout.js

@@ -249,2 +249,3 @@ const getBestDimensions = (minRatio, maxRatio, Width, Height, count, maxWidth, maxHeight) => {
     let bigHeight;
+    let showBigFirst = bigFirst === true;
 
@@ -258,2 +259,7 @@ if (availableRatio > getVideoRatio(bigOnes[0])) {
       bigOffsetTop = containerHeight - offsetTop;
+      if (bigFirst === 'column') {
+        showBigFirst = false;
+      } else if (bigFirst === 'row') {
+        showBigFirst = true;
+      }
     } else {
@@ -266,4 +272,9 @@ // We are wide, going to take up the whole height and arrange the small
       bigOffsetLeft = containerWidth - offsetLeft;
+      if (bigFirst === 'column') {
+        showBigFirst = true;
+      } else if (bigFirst === 'row') {
+        showBigFirst = false;
+      }
     }
-    if (bigFirst) {
+    if (showBigFirst) {
       bigBoxes = getLayout({
@@ -270,0 +281,0 @@ containerWidth: bigWidth,

tests/unit/opentok-layout-spec.js

@@ -282,3 +282,3 @@ /* globals describe, beforeEach, expect, it, afterEach, initLayoutContainer */
 
-      it('handles bigFirst', () => {
+      it('handles bigFirst false', () => {
         const layoutContainer = initLayoutContainer(layoutDiv, { bigFirst: false });
@@ -608,2 +608,19 @@ layoutContainer.layout();
 
+      it('handles bigFirst "column" and "row"', () => {
+        divs[0].className = 'OT_big';
+        let layoutContainer = initLayoutContainer(layoutDiv, { bigFirst: 'column' });
+        layoutContainer.layout();
+        // Big element is displayed on the left because we are in a column layout
+        let bigDivRect = divs[0].getBoundingClientRect();
+        expect(bigDivRect.left).toBeCloseTo(133.33);
+        expect(bigDivRect.top).toBe(0);
+
+        layoutContainer = initLayoutContainer(layoutDiv, { bigFirst: 'row' });
+        layoutContainer.layout();
+        // Big element is displayed on the right because we are in a column layout
+        bigDivRect = divs[0].getBoundingClientRect();
+        expect(bigDivRect.left).toBeCloseTo(333.33);
+        expect(bigDivRect.top).toBe(0);
+      });
+
       it('handles two big elements', () => {
@@ -714,2 +731,19 @@ divs[0].className = 'OT_big';
 
+      it('handles bigFirst "column" and "row"', () => {
+        divs[0].className = 'OT_big';
+        let layoutContainer = initLayoutContainer(layoutDiv, { bigFirst: 'column' });
+        layoutContainer.layout();
+        // Big element is displayed at the bottom because we are in a row layout
+        let bigDivRect = divs[0].getBoundingClientRect();
+        expect(bigDivRect.left).toBe(0);
+        expect(bigDivRect.top).toBe(160);
+
+        layoutContainer = initLayoutContainer(layoutDiv, { bigFirst: 'row' });
+        layoutContainer.layout();
+        // Big element is displayed at the top because we are in a row layout
+        bigDivRect = divs[0].getBoundingClientRect();
+        expect(bigDivRect.left).toBe(0);
+        expect(bigDivRect.top).toBe(20);
+      });
+
       it('handles two big elements', () => {
@@ -716,0 +750,0 @@ divs[0].className = 'OT_big';

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

Total package byte prevSize

156680

increased by1.92%

Lines of code

2100

increased by2.54%

Number of lines in readme file

248

increased by0.4%

No dependency changes