listbar rendering.

lib/widget.js

@@ -5700,7 +5700,7 @@ function Listbar(options) {
 
   // XXX Workaround to make sure buttons don't
   // overlap border on the right.
-  options.scrollable = true;
+  // options.scrollable = true;
 
   this.items = [];
   this.ritems = [];
@@ -5713,34 +5713,28 @@ function Listbar(options) {
 
   Box.call(this, options);
 
-  this._.debug = new Box({
-    parent: this.screen,
-    top: 0,
-    left: 0,
-    shrink: true,
-    content: '...'
-  });
-
-  // XXX Make consistent with vertical lists.
-  //if (this.style.selected) {
-  //  this.style.item = this.style.item || merge({}, this.style);
-  //  this.style.item.focus = this.style.selected;
-  //}
-
   if (options.commands || options.items) {
     this.setItems(options.commands || options.items);
   }
 
   if (options.keys) {
     this.on('keypress', function(ch, key) {
-      if (key.name === 'left' || (options.vi && key.name === 'h')) {
+      if (key.name === 'left'
+          || (options.vi && key.name === 'h')
+          || (key.shift && key.name === 'tab')) {
         self.moveLeft();
         self.screen.render();
+        // Stop propagation if we're in a form.
+        if (key.name === 'tab') return false;
         return;
       }
-      if (key.name === 'right' || (options.vi && key.name === 'l')) {
+      if (key.name === 'right'
+          || (options.vi && key.name === 'l')
+          || key.name === 'tab') {
         self.moveRight();
         self.screen.render();
+        // Stop propagation if we're in a form.
+        if (key.name === 'tab') return false;
         return;
       }
       if (key.name === 'enter'
@@ -5843,6 +5837,10 @@ Listbar.prototype.appendItem = function(item, callback) {
     , title
     , len;
 
+  if (!this.screen.autoPadding) {
+    drawn += this.ileft;
+  }
+
   if (typeof item === 'object') {
     cmd = item;
   }
@@ -5935,42 +5933,52 @@ Listbar.prototype.appendItem = function(item, callback) {
       self.select(el);
       self.screen.render();
     });
-/*
-    el.on('click', function(data) {
-      if (self.items[self.selected] === el) {
-        self._.debug.setContent('execute');
-        self.emit('action', el, self.selected);
-        self.emit('select', el, self.selected);
-        var item = self.items[self.selected];
-        //item.press();
-        if (item._.cmd.callback) {
-          item._.cmd.callback();
-        }
-        self.screen.render();
-        return;
-      }
-      self._.debug.setContent('select');
-      self.select(el);
-      self.screen.render();
-    });
-*/
   }
 };
 
 Listbar.prototype.render = function() {
   var self = this
-    , drawn = 0;
+    , lpos = this._getCoords(this)
+    , drawn = 0
+    , redo;
+
+  if (!this.screen.autoPadding) {
+    drawn += this.ileft;
+  }
 
   this.items.forEach(function(el, i) {
+    // XXX Ugly workaround - no need for .scrollable though
+    el.width = el.getText().length + 2;
+
     if (i < self.leftBase) {
       el.hide();
     } else {
-      el.left = drawn + 1;
+      el.rleft = drawn + 1;
+
+      // XXX Ugly workaround - no need for .scrollable though
+      if (drawn + el.width + 2 > lpos.xl - lpos.xi - self.iwidth) {
+        if (i === self.items.length - 1 && self.selected === i) {
+          redo = true;
+          return;
+        }
+        el.width -= ((drawn + el.width)
+          - (lpos.xl - lpos.xi - self.iwidth)
+          // XXX WHY? This seems backwards:
+          + (self.screen.autoPadding ? 1 : 0));
+      }
+
       drawn += el.width + 2;
       el.show();
     }
   });
 
+  // XXX Ugly workaround - no need for .scrollable though
+  if (redo) {
+    this.leftBase++;
+    this.leftOffset--;
+    return this.render();
+  }
+
   return this._render();
 };
 
@@ -5998,9 +6006,9 @@ Listbar.prototype.select = function(offset) {
     if (i < self.leftBase) return;
     var lpos = el._getCoords();
     if (!lpos) return;
-    drawn += (lpos.xl - lpos.xi) + 2;
+    //drawn += (lpos.xl - lpos.xi) + 2;
-    //drawn += el.width + 2;
+    // XXX Ugly workaround - no need for .scrollable though
-    //drawn += el.getText().length + 2 + 2;
+    drawn += el.getText().length + 2 + 2;
     if (drawn <= width) visible++;
   });
 
@@ -6022,19 +6030,6 @@ Listbar.prototype.select = function(offset) {
       this.leftOffset -= diff;
     }
   }
-
-/*
-  this._.debug.setContent(JSON.stringify({
-    leftOffset: this.leftOffset,
-    leftBase: this.leftBase,
-    drawn: drawn,
-    visible: visible,
-    width: width,
-    diff: diff
-  }, null, 2));
-*/
-
-  //el.focus();
 };
 
 Listbar.prototype.removeItem = function(child) {

test/widget-listbar.js

@@ -2,7 +2,8 @@ var blessed = require('../')
   , screen;
 
 screen = blessed.screen({
-  dump: __dirname + '/logs/listbar.log'
+  dump: __dirname + '/logs/listbar.log',
+  autoPadding: true
 });
 
 var box = blessed.box({
@@ -17,7 +18,8 @@ var box = blessed.box({
 var bar = blessed.listbar({
   parent: screen,
   bottom: 0,
-  left: 0,
+  left: 3,
+  right: 3,
   height: 3,
   mouse: true,
   keys: true,