diff options
Diffstat (limited to 'ui/form/ListScrollForm.js')
| -rw-r--r-- | ui/form/ListScrollForm.js | 138 |
1 files changed, 65 insertions, 73 deletions
diff --git a/ui/form/ListScrollForm.js b/ui/form/ListScrollForm.js index d22cd35..0e230b5 100644 --- a/ui/form/ListScrollForm.js +++ b/ui/form/ListScrollForm.js @@ -26,41 +26,54 @@ module.exports = class ListScrollForm extends Form { fixLayout() { this.keepScrollInBounds() + const scrollItems = this.scrollItems + // The scrollItems property represents the item to the very left of where // we've scrolled, so we know right away that none of those will be - // visible and we won't bother iterating over them. - const itemsPastScroll = this.inputs.slice(this.scrollItems) - - // We do need to hide them, though. - const itemsBeforeScroll = this.inputs.slice(0, this.scrollItems) - for (const item of itemsBeforeScroll) { - item.visible = false + // visible and we won't bother iterating over them. We do need to hide + // them, though. + for (let i = 0; i < scrollItems; i++) { + this.inputs[i].visible = false } - // This variable stores how far along the respective axis (as defined by - // posProp) the next element should be. + // This variable stores how far along the respective axis (implied by + // layoutType) the next element should be. let nextPos = 0 - this.sizeProp = this.getSizeProp() + let formEdge + if (this.layoutType === 'horizontal') { + formEdge = this.contentW + } else { + formEdge = this.contentH + } - for (const item of itemsPastScroll) { + for (let i = scrollItems; i < this.inputs.length; i++) { + const item = this.inputs[i] item.fixLayout() - item[this.posProp] = nextPos - nextPos += item[this.sizeProp] + const curPos = nextPos + let curSize + if (this.layoutType === 'horizontal') { + item.x = curPos + curSize = item.w + } else { + item.y = curPos + curSize = item.h + } + nextPos += curSize // By default, the item should be visible.. item.visible = true // ..but the item's far edge is past the form's far edge, it isn't // fully visible and should be hidden. - if (item[this.posProp] + item[this.sizeProp] > this.formEdge) { + if (curPos + curSize > formEdge) { item.visible = false } // Same deal goes for the close edge. We can check it against 0 since // the close edge of the form's content is going to be 0, of course! - if (item[this.posProp] < 0) { + if (curPos < 0) { item.visible = false } } @@ -129,10 +142,17 @@ module.exports = class ListScrollForm extends Form { scrollSelectedElementIntoView() { const sel = this.inputs[this.curIndex] + let formEdge + if (this.layoutType === 'horizontal') { + formEdge = this.contentW + } else { + formEdge = this.contentH + } + // If the item is ahead of our view (either to the right of or below), // we should move the view so that the item is the farthest right (of all // the visible items). - if (this.getItemPos(sel) > this.formEdge + this.scrollSize) { + if (this.getItemPos(sel) > formEdge + this.scrollSize) { this.scrollElementIntoEndOfView(sel) } @@ -158,21 +178,28 @@ module.exports = class ListScrollForm extends Form { getScrollPositionOfElementAtEndOfView(element) { // We can decide how many items to scroll past by moving forward until // the item's far edge is visible. - const pos = this.getItemPos(element); - let edge = this.formEdge + const pos = this.getItemPos(element) + + let edge + if (this.layoutType === 'horizontal') { + edge = this.contentW + } else { + edge = this.contentH + } + for (let i = 0; i < this.inputs.length; i++) { if (pos <= edge) { - return i; + return i } - if (this.sizeProp === 'w') { - edge += this.inputs[i].w; + if (this.layoutType === 'horizontal') { + edge += this.inputs[i].w } else { - edge += this.inputs[i].h; + edge += this.inputs[i].h } } // No result? Well, it's at the end. - return this.inputs.length; + return this.inputs.length } scrollElementIntoEndOfView(element) { @@ -206,66 +233,31 @@ module.exports = class ListScrollForm extends Form { getItemPos(item) { // Gets the position of the item in an unscrolled view. - const index = this.inputs.indexOf(item); - let pos = 0; + const index = this.inputs.indexOf(item) + let pos = 0 for (let i = 0; i <= index; i++) { - if (this.sizeProp === 'w') { - pos += this.inputs[i].w; + if (this.layoutType === 'horizontal') { + pos += this.inputs[i].w } else { - pos += this.inputs[i].h; + pos += this.inputs[i].h } } - return pos; - } - - getSizeProp() { - // The property used to measure the size of an item. If the layoutType - // isn't valid (that is, 'horizontal' or 'vertical'), it'll return null. - - return ( - this.layoutType === 'horizontal' ? 'w' : - this.layoutType === 'vertical' ? 'h' : - null - ) - } - - get posProp() { - // The property used to position an item. Like sizeProp, returns null if - // the layoutType isn't valid. - - return ( - this.layoutType === 'horizontal' ? 'x' : - this.layoutType === 'vertical' ? 'y' : - null) - } - - get edgeProp() { - // The property used to get the far edge of the property. As with - // sizeProp, if the layoutType doesn't have an expected value, it'll - // return null. - - return ( - this.layoutType === 'horizontal' ? 'right' : - this.layoutType === 'vertical' ? 'bottom' : - null) - } - - get formEdge() { - // Returns the value of the far edge of this form. Items farther in the - // list (up to the edge) will be closer to this edge. - - return ( - this.layoutType === 'horizontal' ? this.contentW : - this.layoutType === 'vertical' ? this.contentH : - null) + return pos } get scrollSize() { // Gets the actual length made up by all of the items currently scrolled // past. - return this.inputs.slice(0, this.scrollItems) - .reduce((a, b) => a + b[this.sizeProp], 0) + let size = 0 + for (let i = 0; i < this.scrollItems; i++) { + if (this.layoutType === 'horizontal') { + size += this.inputs[i].w + } else { + size += this.inputs[i].h + } + } + return size } get contentW() { |