allow element hiding.

lib/widget.js

@@ -375,6 +375,26 @@ Screen.prototype.focusNext = function() {
   return this.focus(1);
 };
 
+Screen.prototype.clearRegion = function(xi, xl, yi, yl) {
+  var lines = this.lines
+    , attr = this.dattr
+    , ch = ' '
+    , xx;
+
+  for (; yi < yl; yi++) {
+    if (!lines[yi]) break;
+    for (xx = xi; xx < xl; xx++) {
+      cell = lines[yi][xx];
+      if (!cell) break;
+      if (attr !== cell[0] || ch !== cell[1]) {
+        lines[yi][xx][0] = attr;
+        lines[yi][xx][1] = ch;
+        lines[yi].dirty = true;
+      }
+    }
+  }
+};
+
 /**
  * Element
  */
@@ -392,6 +412,7 @@ function Element(options) {
     height: options.height || null
   };
 
+  this.hidden = options.hidden || false;
   this.fg = options.fg || 0x1ff;
   this.bg = options.bg || 0x1ff;
   this.bold = options.bold ? 1 : 0;
@@ -448,6 +469,21 @@ Element.prototype.addListener = function(type, listener) {
   return Element._addListener.apply(this, arguments);
 };
 
+Element.prototype.hide = function() {
+  var ret = this.render(true);
+  this.hidden = true;
+  this.screen.clearRegion(ret.xi, ret.xl, ret.yi, ret.yl);
+};
+
+Element.prototype.show = function() {
+  this.hidden = false;
+  //this.render();
+};
+
+Element.prototype.toggle = function() {
+  return this.hidden ? this.show() : this.hide();
+};
+
 Element.prototype.focus = function() {
   var old = this.screen.focused;
   this.screen.focused = this;
@@ -591,7 +627,10 @@ function Box(options) {
 
 Box.prototype.__proto__ = Element.prototype;
 
-Box.prototype.render = function() {
+Box.prototype.render = function(stop) {
+  // NOTE: Maybe move this `hidden` check down below `stop` check and return `ret`.
+  if (this.hidden) return;
+
   var lines = this.screen.lines
     , xi = this.left
     , xl = this.screen.cols - this.right
@@ -642,6 +681,8 @@ Box.prototype.render = function() {
     yl: yl
   };
 
+  if (stop) return ret;
+
   for (; yi < yl; yi++) {
     if (!lines[yi]) break;
     for (xi = this.left; xi < xl; xi++) {
@@ -710,7 +751,10 @@ function Text(options) {
 
 Text.prototype.__proto__ = Element.prototype;
 
-Text.prototype.render = function() {
+Text.prototype.render = function(stop) {
+  // NOTE: Maybe move this `hidden` check down below `stop` check and return `ret`.
+  if (this.hidden) return;
+
   var lines = this.screen.lines
     , xi = this.left
     , xl = this.screen.cols - this.right
@@ -758,6 +802,8 @@ Text.prototype.render = function() {
     yl: yl
   };
 
+  if (stop) return ret;
+
   var dattr = ((this.bold << 18) + (this.underline << 18)) | (this.fg << 9) | this.bg;
 
   for (; yi < yl; yi++) {
@@ -1080,12 +1126,16 @@ function ProgressBar(options) {
 ProgressBar.prototype.__proto__ = Input.prototype;
 
 ProgressBar.prototype._render = ProgressBar.prototype.render;
-ProgressBar.prototype.render = function() {
+ProgressBar.prototype.render = function(stop) {
+  // NOTE: Maybe move this `hidden` check down below `stop` check and return `ret`.
+  if (this.hidden) return;
+
   //var hash = this.filled + ':' + dattr;
   //if (this._hash === hash) return;
   //this._hash = hash;
 
-  var ret = this._render();
+  var ret = this._render(stop);
+  if (stop) return ret;
 
   var xi = ret.xi
     , xl = ret.xl

test/widget.js

@@ -194,6 +194,11 @@ list.focus();
 
 screen.render();
 
+setInterval(function() {
+  stext.toggle();
+  screen.render();
+}, 1000);
+
 (function fill() {
   if (progress.filled === 100) progress.filled = 0;
   progress.progress(2);