scrollablebox.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. /**
  2. * scrollablebox.js - scrollable box element for blessed
  3. * Copyright (c) 2013-2015, Christopher Jeffrey and contributors (MIT License).
  4. * https://github.com/chjj/blessed
  5. */
  6. /**
  7. * Modules
  8. */
  9. var Node = require('./node');
  10. var Box = require('./box');
  11. /**
  12. * ScrollableBox
  13. */
  14. function ScrollableBox(options) {
  15. var self = this;
  16. if (!(this instanceof Node)) {
  17. return new ScrollableBox(options);
  18. }
  19. options = options || {};
  20. Box.call(this, options);
  21. if (options.scrollable === false) {
  22. return this;
  23. }
  24. this.scrollable = true;
  25. this.childOffset = 0;
  26. this.childBase = 0;
  27. this.baseLimit = options.baseLimit || Infinity;
  28. this.alwaysScroll = options.alwaysScroll;
  29. this.scrollbar = options.scrollbar;
  30. if (this.scrollbar) {
  31. this.scrollbar.ch = this.scrollbar.ch || ' ';
  32. this.style.scrollbar = this.style.scrollbar || this.scrollbar.style;
  33. if (!this.style.scrollbar) {
  34. this.style.scrollbar = {};
  35. this.style.scrollbar.fg = this.scrollbar.fg;
  36. this.style.scrollbar.bg = this.scrollbar.bg;
  37. this.style.scrollbar.bold = this.scrollbar.bold;
  38. this.style.scrollbar.underline = this.scrollbar.underline;
  39. this.style.scrollbar.inverse = this.scrollbar.inverse;
  40. this.style.scrollbar.invisible = this.scrollbar.invisible;
  41. }
  42. //this.scrollbar.style = this.style.scrollbar;
  43. if (this.track || this.scrollbar.track) {
  44. this.track = this.scrollbar.track || this.track;
  45. this.style.track = this.style.scrollbar.track || this.style.track;
  46. this.track.ch = this.track.ch || ' ';
  47. this.style.track = this.style.track || this.track.style;
  48. if (!this.style.track) {
  49. this.style.track = {};
  50. this.style.track.fg = this.track.fg;
  51. this.style.track.bg = this.track.bg;
  52. this.style.track.bold = this.track.bold;
  53. this.style.track.underline = this.track.underline;
  54. this.style.track.inverse = this.track.inverse;
  55. this.style.track.invisible = this.track.invisible;
  56. }
  57. this.track.style = this.style.track;
  58. }
  59. // Allow controlling of the scrollbar via the mouse:
  60. if (options.mouse) {
  61. this.on('mousedown', function(data) {
  62. if (self._scrollingBar) {
  63. // Do not allow dragging on the scrollbar:
  64. delete self.screen._dragging;
  65. delete self._drag;
  66. return;
  67. }
  68. var x = data.x - self.aleft;
  69. var y = data.y - self.atop;
  70. if (x === self.width - self.iright - 1) {
  71. // Do not allow dragging on the scrollbar:
  72. delete self.screen._dragging;
  73. delete self._drag;
  74. var perc = (y - self.itop) / (self.height - self.iheight);
  75. self.setScrollPerc(perc * 100 | 0);
  76. self.screen.render();
  77. var smd, smu;
  78. self._scrollingBar = true;
  79. self.onScreenEvent('mousedown', smd = function(data) {
  80. var y = data.y - self.atop;
  81. var perc = y / self.height;
  82. self.setScrollPerc(perc * 100 | 0);
  83. self.screen.render();
  84. });
  85. // If mouseup occurs out of the window, no mouseup event fires, and
  86. // scrollbar will drag again on mousedown until another mouseup
  87. // occurs.
  88. self.onScreenEvent('mouseup', smu = function() {
  89. self._scrollingBar = false;
  90. self.removeScreenEvent('mousedown', smd);
  91. self.removeScreenEvent('mouseup', smu);
  92. });
  93. }
  94. });
  95. }
  96. }
  97. if (options.mouse) {
  98. this.on('wheeldown', function() {
  99. self.scroll(self.height / 2 | 0 || 1);
  100. self.screen.render();
  101. });
  102. this.on('wheelup', function() {
  103. self.scroll(-(self.height / 2 | 0) || -1);
  104. self.screen.render();
  105. });
  106. }
  107. if (options.keys && !options.ignoreKeys) {
  108. this.on('keypress', function(ch, key) {
  109. if (key.name === 'up' || (options.vi && key.name === 'k')) {
  110. self.scroll(-1);
  111. self.screen.render();
  112. return;
  113. }
  114. if (key.name === 'down' || (options.vi && key.name === 'j')) {
  115. self.scroll(1);
  116. self.screen.render();
  117. return;
  118. }
  119. if (options.vi && key.name === 'u' && key.ctrl) {
  120. self.scroll(-(self.height / 2 | 0) || -1);
  121. self.screen.render();
  122. return;
  123. }
  124. if (options.vi && key.name === 'd' && key.ctrl) {
  125. self.scroll(self.height / 2 | 0 || 1);
  126. self.screen.render();
  127. return;
  128. }
  129. if (options.vi && key.name === 'b' && key.ctrl) {
  130. self.scroll(-self.height || -1);
  131. self.screen.render();
  132. return;
  133. }
  134. if (options.vi && key.name === 'f' && key.ctrl) {
  135. self.scroll(self.height || 1);
  136. self.screen.render();
  137. return;
  138. }
  139. if (options.vi && key.name === 'g' && !key.shift) {
  140. self.scrollTo(0);
  141. self.screen.render();
  142. return;
  143. }
  144. if (options.vi && key.name === 'g' && key.shift) {
  145. self.scrollTo(self.getScrollHeight());
  146. self.screen.render();
  147. return;
  148. }
  149. });
  150. }
  151. this.on('parsed content', function() {
  152. self._recalculateIndex();
  153. });
  154. self._recalculateIndex();
  155. }
  156. ScrollableBox.prototype.__proto__ = Box.prototype;
  157. ScrollableBox.prototype.type = 'scrollable-box';
  158. // XXX Potentially use this in place of scrollable checks elsewhere.
  159. ScrollableBox.prototype.__defineGetter__('reallyScrollable', function() {
  160. if (this.shrink) return this.scrollable;
  161. return this.getScrollHeight() > this.height;
  162. });
  163. ScrollableBox.prototype._scrollBottom = function() {
  164. if (!this.scrollable) return 0;
  165. // We could just calculate the children, but we can
  166. // optimize for lists by just returning the items.length.
  167. if (this._isList) {
  168. return this.items ? this.items.length : 0;
  169. }
  170. if (this.lpos && this.lpos._scrollBottom) {
  171. return this.lpos._scrollBottom;
  172. }
  173. var bottom = this.children.reduce(function(current, el) {
  174. // el.height alone does not calculate the shrunken height, we need to use
  175. // getCoords. A shrunken box inside a scrollable element will not grow any
  176. // larger than the scrollable element's context regardless of how much
  177. // content is in the shrunken box, unless we do this (call getCoords
  178. // without the scrollable calculation):
  179. // See: $ node test/widget-shrink-fail-2.js
  180. if (!el.detached) {
  181. var lpos = el._getCoords(false, true);
  182. if (lpos) {
  183. return Math.max(current, el.rtop + (lpos.yl - lpos.yi));
  184. }
  185. }
  186. return Math.max(current, el.rtop + el.height);
  187. }, 0);
  188. // XXX Use this? Makes .getScrollHeight() useless!
  189. // if (bottom < this._clines.length) bottom = this._clines.length;
  190. if (this.lpos) this.lpos._scrollBottom = bottom;
  191. return bottom;
  192. };
  193. ScrollableBox.prototype.setScroll =
  194. ScrollableBox.prototype.scrollTo = function(offset, always) {
  195. // XXX
  196. // At first, this appeared to account for the first new calculation of childBase:
  197. this.scroll(0);
  198. return this.scroll(offset - (this.childBase + this.childOffset), always);
  199. };
  200. ScrollableBox.prototype.getScroll = function() {
  201. return this.childBase + this.childOffset;
  202. };
  203. ScrollableBox.prototype.scroll = function(offset, always) {
  204. if (!this.scrollable) return;
  205. if (this.detached) return;
  206. // Handle scrolling.
  207. var visible = this.height - this.iheight
  208. , base = this.childBase
  209. , d
  210. , p
  211. , t
  212. , b
  213. , max
  214. , emax;
  215. if (this.alwaysScroll || always) {
  216. // Semi-workaround
  217. this.childOffset = offset > 0
  218. ? visible - 1 + offset
  219. : offset;
  220. } else {
  221. this.childOffset += offset;
  222. }
  223. if (this.childOffset > visible - 1) {
  224. d = this.childOffset - (visible - 1);
  225. this.childOffset -= d;
  226. this.childBase += d;
  227. } else if (this.childOffset < 0) {
  228. d = this.childOffset;
  229. this.childOffset += -d;
  230. this.childBase += d;
  231. }
  232. if (this.childBase < 0) {
  233. this.childBase = 0;
  234. } else if (this.childBase > this.baseLimit) {
  235. this.childBase = this.baseLimit;
  236. }
  237. // Find max "bottom" value for
  238. // content and descendant elements.
  239. // Scroll the content if necessary.
  240. if (this.childBase === base) {
  241. return this.emit('scroll');
  242. }
  243. // When scrolling text, we want to be able to handle SGR codes as well as line
  244. // feeds. This allows us to take preformatted text output from other programs
  245. // and put it in a scrollable text box.
  246. this.parseContent();
  247. // XXX
  248. // max = this.getScrollHeight() - (this.height - this.iheight);
  249. max = this._clines.length - (this.height - this.iheight);
  250. if (max < 0) max = 0;
  251. emax = this._scrollBottom() - (this.height - this.iheight);
  252. if (emax < 0) emax = 0;
  253. this.childBase = Math.min(this.childBase, Math.max(emax, max));
  254. if (this.childBase < 0) {
  255. this.childBase = 0;
  256. } else if (this.childBase > this.baseLimit) {
  257. this.childBase = this.baseLimit;
  258. }
  259. // Optimize scrolling with CSR + IL/DL.
  260. p = this.lpos;
  261. // Only really need _getCoords() if we want
  262. // to allow nestable scrolling elements...
  263. // or if we **really** want shrinkable
  264. // scrolling elements.
  265. // p = this._getCoords();
  266. if (p && this.childBase !== base && this.screen.cleanSides(this)) {
  267. t = p.yi + this.itop;
  268. b = p.yl - this.ibottom - 1;
  269. d = this.childBase - base;
  270. if (d > 0 && d < visible) {
  271. // scrolled down
  272. this.screen.deleteLine(d, t, t, b);
  273. } else if (d < 0 && -d < visible) {
  274. // scrolled up
  275. d = -d;
  276. this.screen.insertLine(d, t, t, b);
  277. }
  278. }
  279. return this.emit('scroll');
  280. };
  281. ScrollableBox.prototype._recalculateIndex = function() {
  282. var max, emax;
  283. if (this.detached || !this.scrollable) {
  284. return 0;
  285. }
  286. // XXX
  287. // max = this.getScrollHeight() - (this.height - this.iheight);
  288. max = this._clines.length - (this.height - this.iheight);
  289. if (max < 0) max = 0;
  290. emax = this._scrollBottom() - (this.height - this.iheight);
  291. if (emax < 0) emax = 0;
  292. this.childBase = Math.min(this.childBase, Math.max(emax, max));
  293. if (this.childBase < 0) {
  294. this.childBase = 0;
  295. } else if (this.childBase > this.baseLimit) {
  296. this.childBase = this.baseLimit;
  297. }
  298. };
  299. ScrollableBox.prototype.resetScroll = function() {
  300. if (!this.scrollable) return;
  301. this.childOffset = 0;
  302. this.childBase = 0;
  303. return this.emit('scroll');
  304. };
  305. ScrollableBox.prototype.getScrollHeight = function() {
  306. return Math.max(this._clines.length, this._scrollBottom());
  307. };
  308. ScrollableBox.prototype.getScrollPerc = function(s) {
  309. var pos = this.lpos || this._getCoords();
  310. if (!pos) return s ? -1 : 0;
  311. var height = (pos.yl - pos.yi) - this.iheight
  312. , i = this.getScrollHeight()
  313. , p;
  314. if (height < i) {
  315. if (this.alwaysScroll) {
  316. p = this.childBase / (i - height);
  317. } else {
  318. p = (this.childBase + this.childOffset) / (i - 1);
  319. }
  320. return p * 100;
  321. }
  322. return s ? -1 : 0;
  323. };
  324. ScrollableBox.prototype.setScrollPerc = function(i) {
  325. // XXX
  326. // var m = this.getScrollHeight();
  327. var m = Math.max(this._clines.length, this._scrollBottom());
  328. return this.scrollTo((i / 100) * m | 0);
  329. };
  330. /**
  331. * Expose
  332. */
  333. module.exports = ScrollableBox;