diff options
Diffstat (limited to 'ui/controls/ListScrollForm.js')
| -rw-r--r-- | ui/controls/ListScrollForm.js | 153 |
1 files changed, 26 insertions, 127 deletions
diff --git a/ui/controls/ListScrollForm.js b/ui/controls/ListScrollForm.js index 3f75599..f74561e 100644 --- a/ui/controls/ListScrollForm.js +++ b/ui/controls/ListScrollForm.js @@ -2,9 +2,8 @@ import * as ansi from 'tui-lib/util/ansi' import telc from 'tui-lib/util/telchars' import unic from 'tui-lib/util/unichars' -import {DisplayElement} from 'tui-lib/ui/primitives' - import Form from './Form.js' +import ScrollBar from './ScrollBar.js' export default class ListScrollForm extends Form { // A form that lets the user scroll through a list of items. It @@ -17,12 +16,18 @@ export default class ListScrollForm extends Form { super() this.layoutType = layoutType + this.wheelMode = 'scroll' // scroll, selection this.scrollItems = 0 this.scrollBarEnabled = enableScrollBar - this.scrollBar = new ScrollBar(this) + this.scrollBar = new ScrollBar({ + getLayoutType: () => this.layoutType, + getCurrentScroll: () => this.scrollItems, + getMaximumScroll: () => this.getScrollItemsLength(), + getTotalItems: () => this.inputs.length + }) this.scrollBarShown = false } @@ -119,27 +124,26 @@ export default class ListScrollForm extends Form { } clicked(button) { - // Old code for changing the actual selected item...maybe an interesting - // functionality to explore later? - /* - if (button === 'scroll-up') { - this.previousInput() - this.scrollSelectedElementIntoView() - } else if (button === 'scroll-down') { - this.nextInput() - this.scrollSelectedElementIntoView() - } - */ - - // Scrolling is typically pretty slow with a mouse wheel when it's by - // a single line, so scroll at 3x that speed. - for (let i = 0; i < 3; i++) { + if (this.wheelMode === 'selection') { + // Change the actual selected item. if (button === 'scroll-up') { - this.scrollItems-- + this.previousInput() + this.scrollSelectedElementIntoView() } else if (button === 'scroll-down') { - this.scrollItems++ - } else { - return + this.nextInput() + this.scrollSelectedElementIntoView() + } + } else if (this.wheelMode === 'scroll') { + // Scrolling is typically pretty slow with a mouse wheel when it's by + // a single line, so scroll at 3x that speed. + for (let i = 0; i < 3; i++) { + if (button === 'scroll-up') { + this.scrollItems-- + } else if (button === 'scroll-down') { + this.scrollItems++ + } else { + return + } } } @@ -298,108 +302,3 @@ export default class ListScrollForm extends Form { } } } - -class ScrollBar extends DisplayElement { - constructor(listScrollForm) { - super() - - this.listScrollForm = listScrollForm - } - - fixLayout() { - // Normally we'd subtract one from contentW/contentH when setting the x/y - // position, but the scrollbar is actually displayed OUTSIDE of (adjacent - // to) the parent's content area. - if (this.listScrollForm.layoutType === 'vertical') { - this.h = this.listScrollForm.contentH - this.w = 1 - this.x = this.listScrollForm.contentW - this.y = 0 - } else { - this.h = 1 - this.w = this.listScrollForm.contentW - this.x = 0 - this.y = this.listScrollForm.contentH - } - } - - drawTo(writable) { - // Uuuurgh - this.fixLayout() - - // TODO: Horizontal layout! Not functionally a lot different, but I'm too - // lazy to write a test UI for it right now. - - const { - backwards: canScrollBackwards, - forwards: canScrollForwards - } = this.getScrollableDirections() - - // - 2 for extra UI elements (arrows) - const totalLength = this.h - 2 - - // ..[-----].. - // ^start| - // ^end - // - // Start and end should correspond to how much of the scroll area - // is currently visible. So, if you can see 60% of the full scroll length - // at a time, and you are scrolled 10% down, the start position of the - // handle should be 10% down, and it should extend 60% of the scrollbar - // length, to the 70% mark. - - const currentScroll = this.listScrollForm.scrollItems - const edgeLength = this.listScrollForm.contentH - const totalItems = this.listScrollForm.inputs.length - const itemsVisibleAtOnce = Math.min(totalItems, edgeLength) - const handleLength = itemsVisibleAtOnce / totalItems * totalLength - let handlePosition = Math.floor(totalLength / totalItems * currentScroll) - - // Silly peeve of mine: The handle should only be visibly touching the top - // or bottom of the scrollbar area if you're actually scrolled all the way - // to the start or end. Otherwise, it shouldn't be touching! There should - // visible space indicating that you can scroll in that direction - // (in addition to the arrows we show at the ends). - - if (canScrollBackwards && handlePosition === 0) { - handlePosition = 1 - } - - if (canScrollForwards && (handlePosition + handleLength) === edgeLength) { - handlePosition-- - } - - if (this.listScrollForm.layoutType === 'vertical') { - const start = this.absTop + handlePosition + 1 - for (let i = 0; i < handleLength; i++) { - writable.write(ansi.moveCursor(start + i, this.absLeft)) - writable.write(unic.BOX_V_DOUBLE) - } - - if (canScrollBackwards) { - writable.write(ansi.moveCursor(this.absTop, this.absLeft)) - writable.write(unic.ARROW_UP_DOUBLE) - } - - if (canScrollForwards) { - writable.write(ansi.moveCursor(this.absBottom, this.absLeft)) - writable.write(unic.ARROW_DOWN_DOUBLE) - } - } - } - - getScrollableDirections() { - const currentScroll = this.listScrollForm.scrollItems - const totalScroll = this.listScrollForm.getScrollItemsLength() - - return { - backwards: (currentScroll > 0), - forwards: (currentScroll < totalScroll) - } - } - - canScrollAtAll() { - const {backwards, forwards} = this.getScrollableDirections() - return backwards || forwards - } -} |