447 lines
13 KiB
JavaScript
447 lines
13 KiB
JavaScript
/**
|
|
** ==============================
|
|
** O O O OOOO
|
|
** O O O O O O
|
|
** O O O O O O
|
|
** OOOO OOOO O OOO OOOO
|
|
** O O O O O O O
|
|
** O O O O O O O
|
|
** OOOO OOOO O O OOOO
|
|
** ==============================
|
|
** Dr. Stefan Bosse http://www.bsslab.de
|
|
**
|
|
** COPYRIGHT: THIS SOFTWARE, EXECUTABLE AND SOURCE CODE IS OWNED
|
|
** BY THE AUTHOR(S).
|
|
** THIS SOURCE CODE MAY NOT BE COPIED, EXTRACTED,
|
|
** MODIFIED, OR OTHERWISE USED IN A CONTEXT
|
|
** OUTSIDE OF THE SOFTWARE SYSTEM.
|
|
**
|
|
** $AUTHORS: Christopher Jeffrey and contributors, Stefan Bosse
|
|
** $INITIAL: (C) 2013-2016, Christopher Jeffrey and contributors
|
|
** $MODIFIED: sbosse (2017-2021).
|
|
** $VERSION: 1.2.3
|
|
**
|
|
** $INFO:
|
|
*
|
|
* scrollablebox.js - scrollable box element for blessed
|
|
*
|
|
* events: 'mouse', 'click' (low level), 'clicked' (high level)
|
|
*
|
|
** $ENDOFINFO
|
|
*/
|
|
|
|
/**
|
|
* Modules
|
|
*/
|
|
var Comp = Require('com/compat');
|
|
|
|
var Node = Require('term/widgets/node');
|
|
var Box = Require('term/widgets/box');
|
|
|
|
/**
|
|
* ScrollableBox
|
|
*/
|
|
|
|
function ScrollableBox(options) {
|
|
var self = this;
|
|
|
|
if (!instanceOf(this,Node)) {
|
|
return new ScrollableBox(options);
|
|
}
|
|
|
|
options = options || {};
|
|
|
|
Box.call(this, options);
|
|
|
|
if (options.scrollable === false) {
|
|
return this;
|
|
}
|
|
|
|
this.scrollable = true;
|
|
this.childOffset = 0;
|
|
this.childBase = 0;
|
|
this.baseLimit = options.baseLimit || Infinity;
|
|
this.alwaysScroll = options.alwaysScroll;
|
|
|
|
this.scrollbar = options.scrollbar;
|
|
if (this.scrollbar) {
|
|
this.scrollbar.ch = this.scrollbar.ch || ' ';
|
|
this.style.scrollbar = this.style.scrollbar || this.scrollbar.style;
|
|
if (!this.style.scrollbar) {
|
|
this.style.scrollbar = {};
|
|
this.style.scrollbar.fg = this.scrollbar.fg;
|
|
this.style.scrollbar.bg = this.scrollbar.bg;
|
|
this.style.scrollbar.bold = this.scrollbar.bold;
|
|
this.style.scrollbar.underline = this.scrollbar.underline;
|
|
this.style.scrollbar.inverse = this.scrollbar.inverse;
|
|
this.style.scrollbar.invisible = this.scrollbar.invisible;
|
|
}
|
|
//this.scrollbar.style = this.style.scrollbar;
|
|
if (this.track || this.scrollbar.track) {
|
|
this.track = this.scrollbar.track || this.track;
|
|
this.style.track = this.style.scrollbar.track || this.style.track;
|
|
this.track.ch = this.track.ch || ' ';
|
|
this.style.track = this.style.track || this.track.style;
|
|
if (!this.style.track) {
|
|
this.style.track = {};
|
|
this.style.track.fg = this.track.fg;
|
|
this.style.track.bg = this.track.bg;
|
|
this.style.track.bold = this.track.bold;
|
|
this.style.track.underline = this.track.underline;
|
|
this.style.track.inverse = this.track.inverse;
|
|
this.style.track.invisible = this.track.invisible;
|
|
}
|
|
this.track.style = this.style.track;
|
|
}
|
|
// Allow controlling of the scrollbar via the mouse:
|
|
if (options.mouse) {
|
|
this.on('mousedown', function(data) {
|
|
if (self._scrollingBar) {
|
|
// Do not allow dragging on the scrollbar:
|
|
delete self.screen._dragging;
|
|
delete self._drag;
|
|
return;
|
|
}
|
|
var x = data.x - self.aleft;
|
|
var y = data.y - self.atop;
|
|
self.emit('clicked',{x:x-1,y:y-1,ev:'click'});
|
|
if (x === self.width - self.iright - 1) {
|
|
// Do not allow dragging on the scrollbar:
|
|
delete self.screen._dragging;
|
|
delete self._drag;
|
|
var perc = (y - self.itop) / (self.height - self.iheight);
|
|
self.setScrollPerc(perc * 100 | 0);
|
|
self.screen.render();
|
|
var smd, smu;
|
|
self._scrollingBar = true;
|
|
self.onScreenEvent('mousedown', smd = function(data) {
|
|
var y = data.y - self.atop;
|
|
var perc = y / self.height;
|
|
self.setScrollPerc(perc * 100 | 0);
|
|
self.screen.render();
|
|
});
|
|
// If mouseup occurs out of the window, no mouseup event fires, and
|
|
// scrollbar will drag again on mousedown until another mouseup
|
|
// occurs.
|
|
self.onScreenEvent('mouseup', smu = function() {
|
|
self._scrollingBar = false;
|
|
self.removeScreenEvent('mousedown', smd);
|
|
self.removeScreenEvent('mouseup', smu);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
if (options.mouse) {
|
|
this.on('wheeldown', function() {
|
|
self.scroll(self.height / 2 | 0 || 1);
|
|
self.screen.render();
|
|
});
|
|
this.on('wheelup', function() {
|
|
self.scroll(-(self.height / 2 | 0) || -1);
|
|
self.screen.render();
|
|
});
|
|
}
|
|
|
|
if (options.keys && !options.ignoreKeys) {
|
|
this.on('keypress', function(ch, key) {
|
|
if (key.name === 'up' || (options.vi && key.name === 'k')) {
|
|
self.scroll(-1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (key.name === 'down' || (options.vi && key.name === 'j')) {
|
|
self.scroll(1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (key.name === 'pageup') {
|
|
self.scroll(-(self.height / 2 | 0) || -1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (key.name === 'pagedown') {
|
|
self.scroll(self.height / 2 | 0 || 1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (options.vi && key.name === 'u' && key.ctrl) {
|
|
self.scroll(-(self.height / 2 | 0) || -1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (options.vi && key.name === 'd' && key.ctrl) {
|
|
self.scroll(self.height / 2 | 0 || 1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (options.vi && key.name === 'b' && key.ctrl) {
|
|
self.scroll(-self.height || -1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (options.vi && key.name === 'f' && key.ctrl) {
|
|
self.scroll(self.height || 1);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (options.vi && key.name === 'g' && !key.shift) {
|
|
self.scrollTo(0);
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
if (options.vi && key.name === 'g' && key.shift) {
|
|
self.scrollTo(self.getScrollHeight());
|
|
self.screen.render();
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
this.on('parsed content', function() {
|
|
self._recalculateIndex();
|
|
});
|
|
|
|
self._recalculateIndex();
|
|
}
|
|
|
|
//ScrollableBox.prototype.__proto__ = Box.prototype;
|
|
inheritPrototype(ScrollableBox,Box);
|
|
|
|
ScrollableBox.prototype.type = 'scrollable-box';
|
|
|
|
/* depricated
|
|
// XXX Potentially use this in place of scrollable checks elsewhere.
|
|
ScrollableBox.prototype.__defineGetter__('reallyScrollable', function() {
|
|
if (this.shrink) return this.scrollable;
|
|
return this.getScrollHeight() > this.height;
|
|
});
|
|
*/
|
|
Object.defineProperty(ScrollableBox.prototype,'reallyScrollable',{
|
|
get: function () {
|
|
if (this.shrink) return this.scrollable;
|
|
return this.getScrollHeight() > this.height;
|
|
},
|
|
set: function (val) {
|
|
}
|
|
});
|
|
|
|
|
|
ScrollableBox.prototype._scrollBottom = function() {
|
|
if (!this.scrollable) return 0;
|
|
|
|
// We could just calculate the children, but we can
|
|
// optimize for lists by just returning the items.length.
|
|
if (this._isList) {
|
|
return this.items ? this.items.length : 0;
|
|
}
|
|
|
|
if (this.lpos && this.lpos._scrollBottom) {
|
|
return this.lpos._scrollBottom;
|
|
}
|
|
|
|
var bottom = this.children.reduce(function(current, el) {
|
|
// el.height alone does not calculate the shrunken height, we need to use
|
|
// getCoords. A shrunken box inside a scrollable element will not grow any
|
|
// larger than the scrollable element's context regardless of how much
|
|
// content is in the shrunken box, unless we do this (call getCoords
|
|
// without the scrollable calculation):
|
|
// See: $ node test/widget-shrink-fail-2.js
|
|
if (!el.detached) {
|
|
var lpos = el._getCoords(false, true);
|
|
if (lpos) {
|
|
return Math.max(current, el.rtop + (lpos.yl - lpos.yi));
|
|
}
|
|
}
|
|
return Math.max(current, el.rtop + el.height);
|
|
}, 0);
|
|
|
|
// XXX Use this? Makes .getScrollHeight() useless!
|
|
// if (bottom < this._clines.length) bottom = this._clines.length;
|
|
|
|
if (this.lpos) this.lpos._scrollBottom = bottom;
|
|
|
|
return bottom;
|
|
};
|
|
|
|
ScrollableBox.prototype.setScroll =
|
|
ScrollableBox.prototype.scrollTo = function(offset, always) {
|
|
// XXX
|
|
// At first, this appeared to account for the first new calculation of childBase:
|
|
this.scroll(0);
|
|
return this.scroll(offset - (this.childBase + this.childOffset), always);
|
|
|
|
};
|
|
|
|
ScrollableBox.prototype.getScroll = function() {
|
|
return this.childBase + this.childOffset;
|
|
};
|
|
|
|
ScrollableBox.prototype.scroll = function(offset, always) {
|
|
if (!this.scrollable) return;
|
|
|
|
if (this.detached) return;
|
|
|
|
// Handle scrolling.
|
|
var visible = this.height - this.iheight
|
|
, base = this.childBase
|
|
, d
|
|
, p
|
|
, t
|
|
, b
|
|
, max
|
|
, emax;
|
|
|
|
if (this.alwaysScroll || always) {
|
|
// Semi-workaround
|
|
this.childOffset = offset > 0
|
|
? visible - 1 + offset
|
|
: offset;
|
|
} else {
|
|
this.childOffset += offset;
|
|
}
|
|
|
|
if (this.childOffset > visible - 1) {
|
|
d = this.childOffset - (visible - 1);
|
|
this.childOffset -= d;
|
|
this.childBase += d;
|
|
} else if (this.childOffset < 0) {
|
|
d = this.childOffset;
|
|
this.childOffset += -d;
|
|
this.childBase += d;
|
|
}
|
|
|
|
if (this.childBase < 0) {
|
|
this.childBase = 0;
|
|
} else if (this.childBase > this.baseLimit) {
|
|
this.childBase = this.baseLimit;
|
|
}
|
|
|
|
// Find max "bottom" value for
|
|
// content and descendant elements.
|
|
// Scroll the content if necessary.
|
|
if (this.childBase === base) {
|
|
return this.emit('scroll');
|
|
}
|
|
|
|
// When scrolling text, we want to be able to handle SGR codes as well as line
|
|
// feeds. This allows us to take preformatted text output from other programs
|
|
// and put it in a scrollable text box.
|
|
this.parseContent();
|
|
|
|
// XXX
|
|
// max = this.getScrollHeight() - (this.height - this.iheight);
|
|
|
|
max = this._clines.length - (this.height - this.iheight);
|
|
if (max < 0) max = 0;
|
|
emax = this._scrollBottom() - (this.height - this.iheight);
|
|
if (emax < 0) emax = 0;
|
|
|
|
this.childBase = Math.min(this.childBase, Math.max(emax, max));
|
|
|
|
if (this.childBase < 0) {
|
|
this.childBase = 0;
|
|
} else if (this.childBase > this.baseLimit) {
|
|
this.childBase = this.baseLimit;
|
|
}
|
|
|
|
// Optimize scrolling with CSR + IL/DL.
|
|
p = this.lpos;
|
|
// Only really need _getCoords() if we want
|
|
// to allow nestable scrolling elements...
|
|
// or if we **really** want shrinkable
|
|
// scrolling elements.
|
|
// p = this._getCoords();
|
|
if (p && this.childBase !== base && this.screen.cleanSides(this)) {
|
|
t = p.yi + this.itop;
|
|
b = p.yl - this.ibottom - 1;
|
|
d = this.childBase - base;
|
|
|
|
if (d > 0 && d < visible) {
|
|
// scrolled down
|
|
this.screen.deleteLine(d, t, t, b);
|
|
} else if (d < 0 && -d < visible) {
|
|
// scrolled up
|
|
d = -d;
|
|
this.screen.insertLine(d, t, t, b);
|
|
}
|
|
}
|
|
|
|
return this.emit('scroll');
|
|
};
|
|
|
|
ScrollableBox.prototype.scrollBottom = function () {
|
|
// Workaround: inserting lines when scrollbar was manually set
|
|
// breaks scroll window (can't usee _scrollBottom...)
|
|
this.scrollTo(10000000);
|
|
};
|
|
|
|
ScrollableBox.prototype._recalculateIndex = function() {
|
|
var max, emax;
|
|
|
|
if (this.detached || !this.scrollable) {
|
|
return 0;
|
|
}
|
|
|
|
// XXX
|
|
// max = this.getScrollHeight() - (this.height - this.iheight);
|
|
|
|
max = this._clines.length - (this.height - this.iheight);
|
|
if (max < 0) max = 0;
|
|
emax = this._scrollBottom() - (this.height - this.iheight);
|
|
if (emax < 0) emax = 0;
|
|
|
|
this.childBase = Math.min(this.childBase, Math.max(emax, max));
|
|
|
|
if (this.childBase < 0) {
|
|
this.childBase = 0;
|
|
} else if (this.childBase > this.baseLimit) {
|
|
this.childBase = this.baseLimit;
|
|
}
|
|
};
|
|
|
|
ScrollableBox.prototype.resetScroll = function() {
|
|
if (!this.scrollable) return;
|
|
this.childOffset = 0;
|
|
this.childBase = 0;
|
|
return this.emit('scroll');
|
|
};
|
|
|
|
ScrollableBox.prototype.getScrollHeight = function() {
|
|
return Math.max(this._clines.length, this._scrollBottom());
|
|
};
|
|
|
|
ScrollableBox.prototype.getScrollPerc = function(s) {
|
|
var pos = this.lpos || this._getCoords();
|
|
if (!pos) return s ? -1 : 0;
|
|
|
|
var height = (pos.yl - pos.yi) - this.iheight
|
|
, i = this.getScrollHeight()
|
|
, p;
|
|
|
|
if (height < i) {
|
|
if (this.alwaysScroll) {
|
|
p = this.childBase / (i - height);
|
|
} else {
|
|
p = (this.childBase + this.childOffset) / (i - 1);
|
|
}
|
|
return p * 100;
|
|
}
|
|
|
|
return s ? -1 : 0;
|
|
};
|
|
|
|
ScrollableBox.prototype.setScrollPerc = function(i) {
|
|
// XXX
|
|
// var m = this.getScrollHeight();
|
|
var m = Math.max(this._clines.length, this._scrollBottom());
|
|
return this.scrollTo((i / 100) * m | 0);
|
|
};
|
|
|
|
/**
|
|
* Expose
|
|
*/
|
|
|
|
module.exports = ScrollableBox;
|