diff --git a/bower.json b/bower.json index fd715619..55807988 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,12 @@ { "name": "Split.js", "main": "split.js", - "version": "1.5.2", + "version": "1.5.3", "homepage": "https://github.com/nathancahill/Split.js", "authors": [ "Nathan Cahill " ], - "description": "A lightweight utility for creating adjustable split views", + "description": "< 2kb unopinionated utility for resizeable split views", "keywords": [ "css", "split", @@ -25,11 +25,9 @@ "AUTHORS.md", "browserstack.json", "docs", - "examples", "Gruntfile.js", "logo.svg", "node_modules", - "package.json", "rollup.config.js", "src", "test" diff --git a/package.json b/package.json index 89d3ca89..4b01dc15 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "split.js", - "version": "1.5.2", + "version": "1.5.3", "description": "A lightweight utility for creating adjustable split views", "main": "split.js", "minified:main": "split.min.js", diff --git a/split.js b/split.js index cfa2ff80..29383acb 100644 --- a/split.js +++ b/split.js @@ -1,4 +1,4 @@ -/*! Split.js - v1.5.2 */ +/*! Split.js - v1.5.3 */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : @@ -67,6 +67,24 @@ return def }; + var getGutterSize = function (gutterSize, isFirst, isLast, gutterAlign) { + if (isFirst) { + if (gutterAlign === 'end') { + return 0 + } else if (gutterAlign === 'center') { + return gutterSize / 2 + } + } else if (isLast) { + if (gutterAlign === 'start') { + return 0 + } else if (gutterAlign === 'center') { + return gutterSize / 2 + } + } + + return gutterSize + }; + // Default options var defaultGutterFn = function (i, gutterDirection) { var gut = document.createElement('div'); @@ -110,8 +128,6 @@ // bMin: Number, // dragging: Boolean, // parent: DOM element, - // isFirst: Boolean, - // isLast: Boolean, // direction: 'horizontal' | 'vertical' // } // @@ -123,7 +139,7 @@ // rely on CSS strings and classes. // 3. Define the dragging helper functions, and a few helpers to go with them. // 4. Loop through the elements while pairing them off. Every pair gets an - // `pair` object, a gutter, and special isFirst/isLast properties. + // `pair` object and a gutter. // 5. Actually size the pair elements, insert gutters and attach event listeners. var Split = function (idsOption, options) { if ( options === void 0 ) options = {}; @@ -157,7 +173,9 @@ // Get other options var expandToMin = getOption(options, 'expandToMin', false); var gutterSize = getOption(options, 'gutterSize', 10); + var gutterAlign = getOption(options, 'gutterAlign', 'center'); var snapOffset = getOption(options, 'snapOffset', 30); + var dragInterval = getOption(options, 'dragInterval', 0); var direction = getOption(options, 'direction', HORIZONTAL); var cursor = getOption(options, 'cursor', direction === HORIZONTAL ? 'ew-resize' : 'ns-resize'); var gutter = getOption(options, 'gutter', defaultGutterFn); @@ -262,6 +280,16 @@ offset = e[clientAxis] - this.start; } + if (dragInterval > 0) { + offset = Math.round(offset / dragInterval) * dragInterval; + } + + // if (gutterAlign === 'start') { + // offset -= this[aGutterSize] + // } else if (gutterAlign === 'end') { + // offset += this[bGutterSize] + // } + // If within snapOffset of min or max, set offset to min or max. // snapOffset buffers a.minSize and b.minSize, so logic is opposite for both. // Include the appropriate gutter sizes to prevent overflows. @@ -351,9 +379,9 @@ // It also adds event listeners for mouse/touch events, // and prevents selection while dragging so avoid the selecting text. function startDragging (e) { - //Right-clicking can't start dragging. + // Right-clicking can't start dragging. if (e.button !== 0) { - return; + return } // Alias frequently used variables to save space. 200 bytes. @@ -412,7 +440,7 @@ // 5. Create pair and element objects. Each pair has an index reference to // elements `a` and `b` of the pair (first and second elements). // Loop through the elements while pairing them off. Every pair gets a - // `pair` object, a gutter, and isFirst/isLast properties. + // `pair` object and a gutter. // // Basic logic: // @@ -425,7 +453,7 @@ // // ----------------------------------------------------------------------- // | i=0 | i=1 | i=2 | i=3 | - // | | isFirst | | isLast | + // | | | | | // | pair 0 pair 1 pair 2 | // | | | | | // ----------------------------------------------------------------------- @@ -447,23 +475,12 @@ a: i - 1, b: i, dragging: false, - isFirst: (i === 1), - isLast: (i === ids.length - 1), direction: direction, parent: parent, }; - // For first and last pairs, first and last gutter width is half. - pair[aGutterSize] = gutterSize; - pair[bGutterSize] = gutterSize; - - if (pair.isFirst) { - pair[aGutterSize] = gutterSize / 2; - } - - if (pair.isLast) { - pair[bGutterSize] = gutterSize / 2; - } + pair[aGutterSize] = getGutterSize(gutterSize, i - 1 === 0, false, gutterAlign); + pair[bGutterSize] = getGutterSize(gutterSize, false, i === ids.length - 1, gutterAlign); // if the parent has a reverse flex-direction, switch the pair elements. if (parentFlexDirection === 'row-reverse' || parentFlexDirection === 'column-reverse') { @@ -497,10 +514,11 @@ } } - // Set the element size to our determined size. - // Half-size gutters for first and last elements. - var elementGutterSize = (i === 0 || i === ids.length - 1) ? gutterSize / 2 : gutterSize; - setElementSize(element.element, element.size, elementGutterSize); + setElementSize( + element.element, + element.size, + getGutterSize(gutterSize, i === 0, i === ids.length - 1, gutterAlign) + ); // After the first iteration, and we have a pair object, append it to the // list of pairs. diff --git a/split.min.js b/split.min.js index 276ab7fc..925787db 100644 --- a/split.min.js +++ b/split.min.js @@ -1,2 +1,2 @@ -/*! Split.js - v1.5.2 */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Split=t()}(this,function(){"use strict";var M=window,O=M.document,j="addEventListener",A="removeEventListener",L="getBoundingClientRect",C="horizontal",B=function(){return!1},F=M.attachEvent&&!M[j],i=["","-webkit-","-moz-","-o-"].filter(function(e){var t=O.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length}).shift()+"calc",s=function(e){return"string"==typeof e||e instanceof String},N=function(e){if(s(e)){var t=O.querySelector(e);if(!t)throw new Error("Selector "+e+" did match a DOM element");return t}return e},T=function(e,t,n){var r=e[t];return void 0!==r?r:n},q=function(e,t){var n=O.createElement("div");return n.className="gutter gutter-"+t,n},R=function(e,t,n){var r={};return s(t)?r[e]=t:r[e]=F?t+"%":i+"("+t+"% - "+n+"px)",r},X=function(e,t){var n;return(n={})[e]=t+"px",n};return function(e,i){void 0===i&&(i={});var l,s,o,a,u=e;Array.from&&(u=Array.from(u));var f=N(u[0]).parentNode,m=M.getComputedStyle(f).flexDirection,h=T(i,"sizes")||u.map(function(){return 100/u.length}),t=T(i,"minSize",100),v=Array.isArray(t)?t:u.map(function(){return t}),n=T(i,"expandToMin",!1),d=T(i,"gutterSize",10),c=T(i,"snapOffset",30),g=T(i,"direction",C),y=T(i,"cursor",g===C?"ew-resize":"ns-resize"),z=T(i,"gutter",q),p=T(i,"elementStyle",R),b=T(i,"gutterStyle",X);function S(t,e,n){var r=p(l,e,n);Object.keys(r).forEach(function(e){t.style[e]=r[e]})}function _(){return a.map(function(e){return e.size})}function E(e){var t=a[this.a],n=a[this.b],r=t.size+n.size;t.size=e/this.size*r,n.size=r-e/this.size*r,S(t.element,t.size,this._b),S(n.element,n.size,this._c)}function w(){var e=a[this.a].element,t=a[this.b].element,n=e[L](),r=t[L]();this.size=n[l]+r[l]+this._b+this._c,this.start=n[o]}function k(e){if(0===e.button){var t=this,n=a[t.a].element,r=a[t.b].element;t.dragging||T(i,"onDragStart",B)(_()),e.preventDefault(),t.dragging=!0,t.move=function(e){var t,n=a[this.a],r=a[this.b];this.dragging&&((t="touches"in e?e.touches[0][s]-this.start:e[s]-this.start)<=n.minSize+c+this._b?t=n.minSize+this._b:t>=this.size-(r.minSize+c+this._c)&&(t=this.size-(r.minSize+this._c)),E.call(this,t),T(i,"onDrag",B)())}.bind(t),t.stop=function(){var e=this,t=a[e.a].element,n=a[e.b].element;e.dragging&&T(i,"onDragEnd",B)(_()),e.dragging=!1,M[A]("mouseup",e.stop),M[A]("touchend",e.stop),M[A]("touchcancel",e.stop),M[A]("mousemove",e.move),M[A]("touchmove",e.move),e.stop=null,e.move=null,t[A]("selectstart",B),t[A]("dragstart",B),n[A]("selectstart",B),n[A]("dragstart",B),t.style.userSelect="",t.style.webkitUserSelect="",t.style.MozUserSelect="",t.style.pointerEvents="",n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",e.gutter.style.cursor="",e.parent.style.cursor="",O.body.style.cursor=""}.bind(t),M[j]("mouseup",t.stop),M[j]("touchend",t.stop),M[j]("touchcancel",t.stop),M[j]("mousemove",t.move),M[j]("touchmove",t.move),n[j]("selectstart",B),n[j]("dragstart",B),r[j]("selectstart",B),r[j]("dragstart",B),n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",t.gutter.style.cursor=y,t.parent.style.cursor=y,O.body.style.cursor=y,w.call(t)}}g===C?(l="width",s="clientX",o="left"):"vertical"===g&&(l="height",s="clientY",o="top");var x=[];function r(e){var t=e.i===x.length,n=t?x[e.i-1]:x[e.i];w.call(n);var r=t?n.size-e.minSize-n._c:e.minSize+n._b;E.call(n,r)}function U(s){s.forEach(function(e,t){if(0=this.size-(r.minSize+g+this._c)&&(t=this.size-(r.minSize+this._c)),k.call(this,t),R(i,"onDrag",T)())}.bind(t),t.stop=function(){var e=this,t=c[e.a].element,n=c[e.b].element;e.dragging&&R(i,"onDragEnd",T)(w()),e.dragging=!1,O[B]("mouseup",e.stop),O[B]("touchend",e.stop),O[B]("touchcancel",e.stop),O[B]("mousemove",e.move),O[B]("touchmove",e.move),e.stop=null,e.move=null,t[B]("selectstart",T),t[B]("dragstart",T),n[B]("selectstart",T),n[B]("dragstart",T),t.style.userSelect="",t.style.webkitUserSelect="",t.style.MozUserSelect="",t.style.pointerEvents="",n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",e.gutter.style.cursor="",e.parent.style.cursor="",j.body.style.cursor=""}.bind(t),O[C]("mouseup",t.stop),O[C]("touchend",t.stop),O[C]("touchcancel",t.stop),O[C]("mousemove",t.move),O[C]("touchmove",t.move),n[C]("selectstart",T),n[C]("dragstart",T),r[C]("selectstart",T),r[C]("dragstart",T),n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",t.gutter.style.cursor=p,t.parent.style.cursor=p,j.body.style.cursor=p,x.call(t)}}z===N?(a="width",s="clientX",o="left"):"vertical"===z&&(a="height",s="clientY",o="top");var M=[];function r(e){var t=e.i===M.length,n=t?M[e.i-1]:M[e.i];x.call(n);var r=t?n.size-e.minSize-n._c:e.minSize+n._b;k.call(n,r)}function D(s){s.forEach(function(e,t){if(0