gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 11:39:01 +01:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

add maxSize option

Browse Source
This commit is contained in:
Nathan Cahill 2021-04-02 09:17:11 -04:00
parent db9591a011
commit 2f74e84777
2 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/splitjs/README.md
View File

@ -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',
}

16
packages/splitjs/src/split.js
View File

@ -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,
}