add maxSize option

packages/splitjs/README.md

@@ -83,6 +83,7 @@ var split = Split(<HTMLElement|selector[]> elements, <options> options?)
 | -------------- | --------------- | -------------- | -------------------------------------------------------- |
 | `sizes`        | Array           |                | Initial sizes of each element in percents or CSS values. |
 | `minSize`      | Number or Array | `100`          | Minimum size of each element.                            |
+| `maxSize`      | Number or Array | `Infinity`     | Maximum size of each element.                            |
 | `expandToMin`  | Boolean         | `false`        | Grow initial sizes to `minSize`                          |
 | `gutterSize`   | Number          | `10`           | Gutter size in pixels.                                   |
 | `gutterAlign`  | String          | `'center'`     | Gutter alignment between elements.                       |
@@ -128,11 +129,22 @@ Split(['#one', '#two'], {
 })
 ```
 
+#### maxSize. Default: `Infinity`
+
+An array of maximum sizes of the elements, specified as pixel values. Example: Setting the maximum sizes of the first element to `500px`, and not setting a maximum size on the second element.
+
+```js
+Split(['#one', '#two'], {
+    maxSize: [500, Infinity],
+})
+```
+
 If a number is passed instead of an array, all elements are set to the same minimum size:
 
 ```js
 Split(['#one', '#two'], {
     minSize: 100,
+    maxSize: 500,
 })
 ```
 
@@ -365,7 +377,7 @@ if (sizes) {
 
 var split = Split(['#one', '#two'], {
     sizes: sizes,
-    onDragEnd: function(sizes) {
+    onDragEnd: function (sizes) {
         localStorage.setItem('split-sizes', JSON.stringify(sizes))
     },
 })
@@ -396,12 +408,12 @@ For more complicated flex layouts, the `elementStyle` and `gutterStyle` can be u
 
 ```js
 Split(['#flex-1', '#flex-2'], {
-    elementStyle: function(dimension, size, gutterSize) {
+    elementStyle: function (dimension, size, gutterSize) {
         return {
             'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)',
         }
     },
-    gutterStyle: function(dimension, gutterSize) {
+    gutterStyle: function (dimension, gutterSize) {
         return {
             'flex-basis': gutterSize + 'px',
         }

packages/splitjs/src/split.js

@@ -155,10 +155,12 @@ const Split = (idsOption, options = {}) => {
     // Set default options.sizes to equal percentages of the parent element.
     let sizes = getOption(options, 'sizes') || ids.map(() => 100 / ids.length)
 
-    // Standardize minSize to an array if it isn't already. This allows minSize
-    // to be passed as a number.
+    // Standardize minSize and maxSize to an array if it isn't already.
+    // This allows minSize and maxSize to be passed as a number.
     const minSize = getOption(options, 'minSize', 100)
     const minSizes = Array.isArray(minSize) ? minSize : ids.map(() => minSize)
+    const maxSize = getOption(options, 'maxSize', Infinity)
+    const maxSizes = Array.isArray(maxSize) ? maxSize : ids.map(() => maxSize)
 
     // Get other options
     const expandToMin = getOption(options, 'expandToMin', false)
@@ -304,6 +306,15 @@ const Split = (idsOption, options = {}) => {
             offset = this.size - (b.minSize + this[bGutterSize])
         }
 
+        if (offset >= a.maxSize - snapOffset + this[aGutterSize]) {
+            offset = a.maxSize + this[aGutterSize]
+        } else if (
+            offset <=
+            this.size - (b.maxSize - snapOffset + this[bGutterSize])
+        ) {
+            offset = this.size - (b.maxSize + this[bGutterSize])
+        }
+
         // Actually adjust the size.
         adjust.call(this, offset)
 
@@ -577,6 +588,7 @@ const Split = (idsOption, options = {}) => {
             element: elementOrSelector(id),
             size: sizes[i],
             minSize: minSizes[i],
+            maxSize: maxSizes[i],
             i,
         }