From 923ba2129c9f42c25eb81c479cb17d62fecffb1c Mon Sep 17 00:00:00 2001 From: Nathan Cahill Date: Mon, 8 Oct 2018 20:09:49 -0700 Subject: [PATCH] v1.5.0 --- bower.json | 2 +- package.json | 12 ++--- split.js | 130 +++++++++++++++++++++++++++++---------------------- split.min.js | 4 +- 4 files changed, 83 insertions(+), 65 deletions(-) diff --git a/bower.json b/bower.json index d6a5089d..8df9a4ae 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "Split.js", "main": "split.js", - "version": "1.4.1", + "version": "1.5.0", "homepage": "https://github.com/nathancahill/Split.js", "authors": [ "Nathan Cahill " diff --git a/package.json b/package.json index c6cc403d..b4ba482c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "split.js", - "version": "1.4.1", + "version": "1.5.0", "description": "A lightweight utility for creating adjustable split views", "main": "split.js", "minified:main": "split.min.js", @@ -34,14 +34,16 @@ "rollup-multiple": "^0.41.6", "rollup-plugin-buble": "^0.15.0", "rollup-plugin-uglify": "^2.0.0", - "rollup-watch": "^3.2.2" + "rollup-watch": "^3.2.2", + "opencollective": "^1.0.3", + "purgecss": "^1.1.0" }, "scripts": { "lint": "eslint src", "test": "npm run lint && npm run build && grunt jasmine", "build": "rollup-multiple -c && npm run size", "watch": "rollup-multiple -cw", - "size": "echo \"gzip size: $(gzip-size $npm_package_minified_main)\"", + "size": "echo \"gzip size: $(gzip-size --raw $npm_package_minified_main) bytes\"", "postinstall": "opencollective postinstall" }, "browserslist": [ @@ -52,10 +54,6 @@ "IE >= 9", "IE 8" ], - "dependencies": { - "opencollective": "^1.0.3", - "purgecss": "^1.1.0" - }, "collective": { "type": "opencollective", "url": "https://opencollective.com/splitjs" diff --git a/split.js b/split.js index 8b7032c8..cec5d080 100644 --- a/split.js +++ b/split.js @@ -1,4 +1,4 @@ -/*! Split.js - v1.4.1 */ +/*! Split.js - v1.5.0 */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : @@ -18,6 +18,9 @@ var document = global.document; var addEventListener = 'addEventListener'; var removeEventListener = 'removeEventListener'; var getBoundingClientRect = 'getBoundingClientRect'; +var gutterStartDragging = '_a'; +var aGutterSize = '_b'; +var bGutterSize = '_c'; var HORIZONTAL = 'horizontal'; var NOOP = function () { return false; }; @@ -147,6 +150,9 @@ var Split = function (idsOption, options) { // to be passed as a number. var minSize = getOption(options, 'minSize', 100); var minSizes = Array.isArray(minSize) ? minSize : ids.map(function () { return minSize; }); + + // Get other options + var expandToMin = getOption(options, 'expandToMin', false); var gutterSize = getOption(options, 'gutterSize', 10); var snapOffset = getOption(options, 'snapOffset', 30); var direction = getOption(options, 'direction', HORIZONTAL); @@ -201,6 +207,10 @@ var Split = function (idsOption, options) { }); } + function getSizes () { + return elements.map(function (element) { return element.size; }) + } + // Actually adjust the size of elements `a` and `b` to `offset` while dragging. // calc is used to allow calc(percentage + gutterpx) on the whole split instance, // which allows the viewport to be resized without additional logic. @@ -215,8 +225,8 @@ var Split = function (idsOption, options) { a.size = (offset / this.size) * percentage; b.size = (percentage - ((offset / this.size) * percentage)); - setElementSize(a.element, a.size, this.aGutterSize); - setElementSize(b.element, b.size, this.bGutterSize); + setElementSize(a.element, a.size, this[aGutterSize]); + setElementSize(b.element, b.size, this[bGutterSize]); } // drag, where all the magic happens. The logic is really quite simple: @@ -252,10 +262,10 @@ var Split = function (idsOption, options) { // 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. - if (offset <= a.minSize + snapOffset + this.aGutterSize) { - offset = a.minSize + this.aGutterSize; - } else if (offset >= this.size - (b.minSize + snapOffset + this.bGutterSize)) { - offset = this.size - (b.minSize + this.bGutterSize); + if (offset <= a.minSize + snapOffset + this[aGutterSize]) { + offset = a.minSize + this[aGutterSize]; + } else if (offset >= this.size - (b.minSize + snapOffset + this[bGutterSize])) { + offset = this.size - (b.minSize + this[bGutterSize]); } // Actually adjust the size. @@ -287,7 +297,7 @@ var Split = function (idsOption, options) { var aBounds = a[getBoundingClientRect](); var bBounds = b[getBoundingClientRect](); - this.size = aBounds[dimension] + bBounds[dimension] + this.aGutterSize + this.bGutterSize; + this.size = aBounds[dimension] + bBounds[dimension] + this[aGutterSize] + this[bGutterSize]; this.start = aBounds[position]; } @@ -298,7 +308,7 @@ var Split = function (idsOption, options) { var b = elements[self.b].element; if (self.dragging) { - getOption(options, 'onDragEnd', NOOP)(); + getOption(options, 'onDragEnd', NOOP)(getSizes()); } self.dragging = false; @@ -345,7 +355,7 @@ var Split = function (idsOption, options) { // Call the onDragStart callback. if (!self.dragging) { - getOption(options, 'onDragStart', NOOP)(); + getOption(options, 'onDragStart', NOOP)(getSizes()); } // Don't actually drag the element. We emulate that in the drag function. @@ -418,6 +428,7 @@ var Split = function (idsOption, options) { element: elementOrSelector(id), size: sizes[i], minSize: minSizes[i], + i: i, }; var pair; @@ -435,15 +446,15 @@ var Split = function (idsOption, options) { }; // For first and last pairs, first and last gutter width is half. - pair.aGutterSize = gutterSize; - pair.bGutterSize = gutterSize; + pair[aGutterSize] = gutterSize; + pair[bGutterSize] = gutterSize; if (pair.isFirst) { - pair.aGutterSize = gutterSize / 2; + pair[aGutterSize] = gutterSize / 2; } if (pair.isLast) { - pair.bGutterSize = gutterSize / 2; + pair[bGutterSize] = gutterSize / 2; } // if the parent has a reverse flex-direction, switch the pair elements. @@ -462,11 +473,15 @@ var Split = function (idsOption, options) { if (!isIE8) { // Create gutter elements for each pair. if (i > 0) { - var gutterElement = gutter(i, direction); + var gutterElement = gutter(i, direction, element.element); setGutterSize(gutterElement, gutterSize); - gutterElement[addEventListener]('mousedown', startDragging.bind(pair)); - gutterElement[addEventListener]('touchstart', startDragging.bind(pair)); + // Save bound event listener for removal later + pair[gutterStartDragging] = startDragging.bind(pair); + + // Attach bound event listener + gutterElement[addEventListener]('mousedown', pair[gutterStartDragging]); + gutterElement[addEventListener]('touchstart', pair[gutterStartDragging]); parent.insertBefore(gutterElement, element.element); @@ -476,17 +491,8 @@ var Split = function (idsOption, options) { // Set the element size to our determined size. // Half-size gutters for first and last elements. - if (i === 0 || i === ids.length - 1) { - setElementSize(element.element, element.size, gutterSize / 2); - } else { - setElementSize(element.element, element.size, gutterSize); - } - - var computedSize = element.element[getBoundingClientRect]()[dimension]; - - if (computedSize < element.minSize) { - element.minSize = computedSize; - } + var elementGutterSize = (i === 0 || i === ids.length - 1) ? gutterSize / 2 : gutterSize; + setElementSize(element.element, element.size, elementGutterSize); // After the first iteration, and we have a pair object, append it to the // list of pairs. @@ -497,6 +503,29 @@ var Split = function (idsOption, options) { return element }); + function adjustToMin (element) { + var isLast = (element.i === pairs.length); + var pair = isLast ? pairs[element.i - 1] : pairs[element.i]; + + calculateSizes.call(pair); + + var size = isLast ? (pair.size - element.minSize - pair[bGutterSize]) : element.minSize + pair[aGutterSize]; + + adjust.call(pair, size); + } + + elements.forEach(function (element) { + var computedSize = element.element[getBoundingClientRect]()[dimension]; + + if (computedSize < element.minSize) { + if (expandToMin) { + adjustToMin(element); + } else { + element.minSize = computedSize; + } + } + }); + function setSizes (newSizes) { newSizes.forEach(function (newSize, i) { if (i > 0) { @@ -507,19 +536,28 @@ var Split = function (idsOption, options) { a.size = newSizes[i - 1]; b.size = newSize; - setElementSize(a.element, a.size, pair.aGutterSize); - setElementSize(b.element, b.size, pair.bGutterSize); + setElementSize(a.element, a.size, pair[aGutterSize]); + setElementSize(b.element, b.size, pair[bGutterSize]); } }); } - function destroy (preserve) { + function destroy (preserveStyles, preserveGutter) { pairs.forEach(function (pair) { - pair.parent.removeChild(pair.gutter); + if (preserveGutter !== true) { + pair.parent.removeChild(pair.gutter); + } else { + pair.gutter[removeEventListener]('mousedown', pair[gutterStartDragging]); + pair.gutter[removeEventListener]('touchstart', pair[gutterStartDragging]); + } + + if (preserveStyles !== true) { + var style = elementStyle(dimension, pair.a.size, pair[aGutterSize]); - if (preserve !== true) { - elements[pair.a].element.style[dimension] = ''; - elements[pair.b].element.style[dimension] = ''; + Object.keys(style).forEach(function (prop) { + elements[pair.a].element.style[prop] = ''; + elements[pair.b].element.style[prop] = ''; + }); } }); } @@ -533,27 +571,9 @@ var Split = function (idsOption, options) { return { setSizes: setSizes, - getSizes: function getSizes () { - return elements.map(function (element) { return element.size; }) - }, + getSizes: getSizes, collapse: function collapse (i) { - if (i === pairs.length) { - var pair = pairs[i - 1]; - - calculateSizes.call(pair); - - if (!isIE8) { - adjust.call(pair, pair.size - pair.bGutterSize); - } - } else { - var pair$1 = pairs[i]; - - calculateSizes.call(pair$1); - - if (!isIE8) { - adjust.call(pair$1, pair$1.aGutterSize); - } - } + adjustToMin(elements[i]); }, destroy: destroy, parent: parent, diff --git a/split.min.js b/split.min.js index ccf6e488..7173f52b 100644 --- a/split.min.js +++ b/split.min.js @@ -1,2 +1,2 @@ -/*! Split.js - v1.4.1 */ -!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 k=window,x=k.document,D="addEventListener",M="removeEventListener",A="getBoundingClientRect",L="horizontal",O=function(){return!1},j=k.attachEvent&&!k[D],i=["","-webkit-","-moz-","-o-"].filter(function(e){var t=x.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},C=function(e){if(s(e)){var t=x.querySelector(e);if(!t)throw new Error("Selector "+e+" did match a DOM element");return t}return e},B=function(e,t,r){var n=e[t];return void 0!==n?n:r},F=function(e,t){var r=x.createElement("div");return r.className="gutter gutter-"+t,r},N=function(e,t,r){var n={};return s(t)?n[e]=t:n[e]=j?t+"%":i+"("+t+"% - "+r+"px)",n},q=function(e,t){return(r={})[e]=t+"px",r;var r};return function(e,i){void 0===i&&(i={});var u,s,o,a,c=e;Array.from&&(c=Array.from(c));var m=C(c[0]).parentNode,f=k.getComputedStyle(m).flexDirection,z=B(i,"sizes")||c.map(function(){return 100/c.length}),t=B(i,"minSize",100),h=Array.isArray(t)?t:c.map(function(){return t}),v=B(i,"gutterSize",10),l=B(i,"snapOffset",30),d=B(i,"direction",L),S=B(i,"cursor",d===L?"ew-resize":"ns-resize"),g=B(i,"gutter",F),y=B(i,"elementStyle",N),p=B(i,"gutterStyle",q);function b(t,e,r){var n=y(u,e,r);Object.keys(n).forEach(function(e){t.style[e]=n[e]})}function G(e){var t=a[this.a],r=a[this.b],n=t.size+r.size;t.size=e/this.size*n,r.size=n-e/this.size*n,b(t.element,t.size,this.aGutterSize),b(r.element,r.size,this.bGutterSize)}function E(){var e=a[this.a].element,t=a[this.b].element,r=e[A](),n=t[A]();this.size=r[u]+n[u]+this.aGutterSize+this.bGutterSize,this.start=r[o]}function w(e){var t=this,r=a[t.a].element,n=a[t.b].element;t.dragging||B(i,"onDragStart",O)(),e.preventDefault(),t.dragging=!0,t.move=function(e){var t,r=a[this.a],n=a[this.b];this.dragging&&((t="touches"in e?e.touches[0][s]-this.start:e[s]-this.start)<=r.minSize+l+this.aGutterSize?t=r.minSize+this.aGutterSize:t>=this.size-(n.minSize+l+this.bGutterSize)&&(t=this.size-(n.minSize+this.bGutterSize)),G.call(this,t),B(i,"onDrag",O)())}.bind(t),t.stop=function(){var e=this,t=a[e.a].element,r=a[e.b].element;e.dragging&&B(i,"onDragEnd",O)(),e.dragging=!1,k[M]("mouseup",e.stop),k[M]("touchend",e.stop),k[M]("touchcancel",e.stop),k[M]("mousemove",e.move),k[M]("touchmove",e.move),e.stop=null,e.move=null,t[M]("selectstart",O),t[M]("dragstart",O),r[M]("selectstart",O),r[M]("dragstart",O),t.style.userSelect="",t.style.webkitUserSelect="",t.style.MozUserSelect="",t.style.pointerEvents="",r.style.userSelect="",r.style.webkitUserSelect="",r.style.MozUserSelect="",r.style.pointerEvents="",e.gutter.style.cursor="",e.parent.style.cursor="",x.body.style.cursor=""}.bind(t),k[D]("mouseup",t.stop),k[D]("touchend",t.stop),k[D]("touchcancel",t.stop),k[D]("mousemove",t.move),k[D]("touchmove",t.move),r[D]("selectstart",O),r[D]("dragstart",O),n[D]("selectstart",O),n[D]("dragstart",O),r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",t.gutter.style.cursor=S,t.parent.style.cursor=S,x.body.style.cursor=S,E.call(t)}d===L?(u="width",s="clientX",o="left"):"vertical"===d&&(u="height",s="clientY",o="top");var U=[];function r(s){s.forEach(function(e,t){if(0=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