uki 1.1.1 → 1.1.2

data/frameworks/uki/src/uki-view/view/splitPane.js

@@ -1,4 +1,14 @@
+/**
+* Horizontal Split Pane
+*
+* @author voloko
+* @name uki.view.HSplitPane
+* @class
+* @extends uki.view.Container
+*/
 uki.view.declare('uki.view.HSplitPane', uki.view.Container, function(Base) {
+    this._throttle = 0; // do not try to render more often than every Xms
+    
     this._setup = function() {
         Base._setup.call(this);
         this._originalRect = this._rect;
@@ -16,14 +26,44 @@ uki.view.declare('uki.view.HSplitPane', uki.view.Container, function(Base) {
     };
     
     /**
-     * @fires event:handleMove
-     */
+    * @function
+    * @name uki.view.HSplitPane#leftMin
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#rightMin
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#autogrowLeft
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#autogrowRight
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#throttle
+    */
+    uki.addProps(this, ['leftMin', 'rightMin', 'autogrowLeft', 'autogrowRight', 'throttle']);
+    this.topMin = this.leftMin;
+    this.bottomMin = this.rightMin;
+    
+    /**
+    * @function
+    * @fires event:handleMove
+    * @name uki.view.HSplitPane#handlePosition
+    */
     this.handlePosition = uki.newProp('_handlePosition', function(val) {
         this._handlePosition = this._normalizePosition(val);
         this.trigger('handleMove', {source: this, handlePosition: this._handlePosition, dragValue: val });
         this._resizeChildViews();
     });
     
+    /**
+    * @function
+    * @name uki.view.HSplitPane#handleWidth
+    */
     this.handleWidth = uki.newProp('_handleWidth', function(val) {
         if (this._handleWidth != val) {
             this._handleWidth = val;
@@ -47,10 +87,6 @@ uki.view.declare('uki.view.HSplitPane', uki.view.Container, function(Base) {
     };
     
     
-    uki.addProps(this, ['leftMin', 'rightMin', 'autogrowLeft', 'autogrowRight']);
-    this.topMin = this.leftMin;
-    this.bottomMin = this.rightMin;
-    
     this._removeHandle = function() {
         this._dom.removeChild(this._handle);
     };
@@ -74,6 +110,7 @@ uki.view.declare('uki.view.HSplitPane', uki.view.Container, function(Base) {
     
     this._createDom = function() {
         this._dom = uki.createElement('div', this.defaultCss);
+        this._initClassName();
         for (var i=0, paneML; i < 2; i++) {
             paneML = { view: 'Container' };
             paneML.anchors = i == 1         ? 'left top bottom right' :
@@ -124,26 +161,74 @@ uki.view.declare('uki.view.HSplitPane', uki.view.Container, function(Base) {
     };
     
     this._draggesture = function(e) {
-        var offset = uki.dom.offset(this.dom());
-        this.handlePosition(e[this._vertical ? 'pageY' : 'pageX'] - offset[this._vertical ? 'y' : 'x'] - this._posWithinHandle);
-        this.layout();
+        this._updatePositionOnDrag(e);
     };
     
     this._draggestureend = function(e, offset) {
+        this._updatePositionOnDrag(e);
     };
     
+    this._updatePositionOnDrag = function(e) {
+        var offset = uki.dom.offset(this.dom());
+        this.handlePosition(e[this._vertical ? 'pageY' : 'pageX'] - offset[this._vertical ? 'y' : 'x'] - this._posWithinHandle);
+        if (this._throttle) {
+            this._throttleHandler = this._throttleHandler || uki.proxy(function() {
+                this.layout();
+                this._trottling = false;
+            }, this);
+            if (this._trottling) return;
+            this._trottling = true;
+            setTimeout(this._throttleHandler, this._throttle);
+        } else {
+            this.layout();
+        }
+    };
+    
+    
+    /**
+    * @function
+    * @name uki.view.HSplitPane#topPane
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#leftPane
+    */
     this.topPane = this.leftPane = function(pane) {
         return this._paneAt(0, pane);
     };
     
+    /**
+    * @function
+    * @name uki.view.HSplitPane#bottomPane
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#rightPane
+    */
     this.bottomPane = this.rightPane = function(pane) {
         return this._paneAt(1, pane);
     };
     
+    /**
+    * @function
+    * @name uki.view.HSplitPane#topChildViews
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#leftChildViews
+    */
     this.topChildViews = this.leftChildViews = function(views) {
         return this._childViewsAt(0, views);
     };
     
+    /**
+    * @function
+    * @name uki.view.HSplitPane#rightChildViews
+    */
+    /**
+    * @function
+    * @name uki.view.HSplitPane#bottomChildViews
+    */
     this.bottomChildViews = this.rightChildViews = function(views) {
         return this._childViewsAt(1, views);
     };
@@ -199,6 +284,14 @@ uki.view.declare('uki.view.HSplitPane', uki.view.Container, function(Base) {
     
 });
 
+/**
+* Vertical Split Pane
+*
+* @author voloko
+* @name uki.view.VSplitPane
+* @class
+* @extends uki.view.HSplitPane
+*/
 uki.view.declare('uki.view.VSplitPane', uki.view.HSplitPane, function(Base) {
     this._setup = function() {
         Base._setup.call(this);

data/frameworks/uki/src/uki-view/view/table.js

@@ -2,6 +2,36 @@ include('list.js');
 
 uki.view.table = {};
 
+/**
+* Table
+*
+* Uses uki.view.List to render data. Wraps it into scroll pane and ads a header
+* @author voloko
+* @name uki.view.Table
+* @class
+* @extends uki.view.Container
+*
+* @lends uki.view.List#rowHeight as rowHeight
+* @lends uki.view.List#data as data
+* @lends uki.view.List#packSize as packSize
+* @lends uki.view.List#visibleRectExt as visibleRectExt
+* @lends uki.view.List#render as render
+* @lends uki.view.List#selectedIndex as selectedIndex
+* @lends uki.view.List#selectedIndexes as selectedIndexes
+* @lends uki.view.List#selectedRow as selectedRow
+* @lends uki.view.List#selectedRows as selectedRows
+* @lends uki.view.List#lastClickIndex as lastClickIndex
+* @lends uki.view.List#textSelectable as textSelectable
+* @lends uki.view.List#multiselect as multiselect
+* @lends uki.view.List#redrawRow as redrawRow
+* @lends uki.view.List#addRow as addRow
+* @lends uki.view.List#removeRow as removeRow
+* @lends uki.view.List#focusable as lastClickIndex
+* @lends uki.view.List#focus as focus
+* @lends uki.view.List#blur as blur
+* @lends uki.view.List#hasFocus as hasFocus
+*
+*/
 uki.view.declare('uki.view.Table', uki.view.Container, function(Base) {
     var propertiesToDelegate = 'rowHeight data packSize visibleRectExt render selectedIndex selectedIndexes selectedRows selectedRow focus blur hasFocus lastClickIndex focusable textSelectable multiselect'.split(' ');
     
@@ -22,14 +52,29 @@ uki.view.declare('uki.view.Table', uki.view.Container, function(Base) {
         return Base._style.call(this, name, value);
     };
     
+    /**
+    * @function
+    * @return {uki.view.List}
+    * @name uki.view.Table#list
+    */
     this.list = function() {
         return this._list;
     };
     
+    /**
+    * @function
+    * @return {uki.view.table.Header}
+    * @name uki.view.Table#header
+    */
     this.header = function() {
         return this._header;
     };
     
+    /**
+    * @function
+    * @param {Array.<uki.view.table.Column>} c
+    * @name uki.view.Table#columns
+    */
     this.columns = uki.newProp('_columns', function(c) {
         for (var i = 0; i < this._columns.length; i++) {
             this._columns[i].unbind();
@@ -47,6 +92,12 @@ uki.view.declare('uki.view.Table', uki.view.Container, function(Base) {
         this._header.columns(this._columns);
     });
     
+    /**
+    * @function
+    * @param {Number} row
+    * @param {Number} col
+    * @name uki.view.Table#redrawCell
+    */
     this.redrawCell = function(row, col) {
         var item = this._list._itemAt(row);
         if (item) {
@@ -67,11 +118,16 @@ uki.view.declare('uki.view.Table', uki.view.Container, function(Base) {
             this.list()[name].apply(this.list(), arguments);
             return this;
         };
-    }, this)
+    }, this);
     
+    /**
+    * @function
+    * @param {Number} col
+    * @name uki.view.Table#redrawColumn
+    */
     this.redrawColumn = function(col) {
         var from = this._list._packs[0].itemFrom,
-            to   = this._list._packs[1].itemTo
+            to   = this._list._packs[1].itemTo;
         for (var i=from; i < to; i++) {
             this.redrawCell(i, col);
         };
@@ -91,6 +147,7 @@ uki.view.declare('uki.view.Table', uki.view.Container, function(Base) {
     
     this._createDom = function() {
         Base._createDom.call(this);
+        this._initClassName();
         var scrollPaneRect = new Rect(0, this._headerHeight, this.rect().width, this.rect().height - this._headerHeight),
             listRect = scrollPaneRect.clone().normalize(),
             headerRect = new Rect(0, 0, this.rect().width, this._headerHeight),

data/frameworks/uki/src/uki-view/view/table/column.js

@@ -1,3 +1,7 @@
+/**
+ * @class
+ * @extends uki.view.Observable
+ */
 uki.view.table.Column = uki.newClass(uki.view.Observable, new function() {
     this._width = 100;
     this._offset = 0;
@@ -6,21 +10,36 @@ uki.view.table.Column = uki.newClass(uki.view.Observable, new function() {
     this._maxWidth = 0;
     this._css = 'float:left;white-space:nowrap;text-overflow:ellipsis;';
     this._inset = new Inset(3, 5);
+    this._templatePrefix = 'table-';
 
     this.init = function() {};
     
-    uki.addProps(this, ['position', 'css', 'formatter', 'label', 'resizable', 'maxWidth', 'minWidth', 'maxWidth', 'key']);
+    uki.addProps(this, ['position', 'css', 'formatter', 'label', 'resizable', 'maxWidth', 'minWidth', 'maxWidth', 'key', 'sort']);
     
-    this.template = function(v) {
-        if (v === undefined) return this._template = this._template || uki.theme.template('table-cell');
-        this._template = v;
-        return this;
+    this.template = function() {
+        // cache
+        return this._template || (this._template = uki.theme.template(this._templatePrefix + 'cell'));
     };
     
-    this.headerTemplate = function(v) {
-        if (v === undefined) return this._headerTemplate = this._headerTemplate || uki.theme.template('table-header-cell');
-        this._headerTemplate = v;
-        return this;
+    this.headerTemplate = function() {
+        var suffix = '';
+        if (this.sort() == 'ASC') suffix = '-asc';
+        if (this.sort() == 'DESC') suffix = '-desc';
+        return uki.theme.template(this._templatePrefix + 'header-cell' + suffix);
+    };
+    
+    this.sortData = function(data) {
+        var _this = this;
+        return data.sort(function(a, b) {
+            return _this._key ? 
+                _this.compare(uki.attr(a, _this._key), uki.attr(b, _this._key)) : 
+                _this.compare(a[_this._position], b[_this._position]);
+        });
+        
+    };
+    
+    this.compare = function(a, b) {
+        return (a >= b ? 1 : a == b ? 0 : -1) * (this._sort == 'DESC' ? -1 : 1);
     };
     
     /**
@@ -70,8 +89,8 @@ uki.view.table.Column = uki.newClass(uki.view.Observable, new function() {
     this.renderHeader = function(height) {
         this._className || this._initStylesheet();
         var x = this.headerTemplate().render({
-            data: '<div style="overflow:hidden;text-overflow:ellipsis;*width:100%;height:100%;">' + this.label() + '</div>',
-            style: '*overflow-y:hidden;' + this._cellStyle(uki.dom.offset.boxModel ? height - 1 : height),
+            data: '<div style="overflow:hidden;text-overflow:ellipsis;*width:100%;height:100%;padding-top:' + this._inset.top + 'px">' + this.label() + '</div>',
+            style: '*overflow-y:hidden;' + this._cellStyle(true, height),
             className: this._className
         });
         return x;
@@ -81,19 +100,22 @@ uki.view.table.Column = uki.newClass(uki.view.Observable, new function() {
         this._className || this._initStylesheet();
         this._prerenderedTemplate = this.template().render({
             data: '\u0001\u0001',
-            style: 'overflow:hidden;' + this._cellStyle(rect.height),
+            style: 'overflow:hidden;' + this._cellStyle(false, rect.height),
             className: this._className
         }).split('\u0001');
     };
     
-    this._cellPadding = function() {
+    this._cellPadding = function(skipVertical) {
         var inset = this._inset;
-        return ['padding:', inset.top, 'px ', inset.right, 'px ', inset.bottom, 'px ', inset.left, 'px;'].join('');
+        return ['padding:', (skipVertical ? '0' : inset.top), 'px ', inset.right, 'px ', (skipVertical ? '0' : inset.bottom), 'px ', inset.left, 'px;'].join('');
     };
     
-    this._cellStyle = function(height) {
-        var h = 'height:' + (height - (uki.dom.offset.boxModel ? this._inset.height() : 0)) + 'px;';
-        return this._css + this._cellPadding() + ';' + h;
+    this._cellHeight = function(skipVertical, height) {
+        return 'height:' + (height - (uki.dom.offset.boxModel && !skipVertical ? this._inset.height() : 0)) + 'px;';
+    };
+    
+    this._cellStyle = function(skipVertical, height) {
+        return this._css + this._cellPadding(skipVertical) + ';' + this._cellHeight(skipVertical, height);
     };
     
     this._clientWidth = function() {
@@ -114,6 +136,12 @@ uki.view.table.NumberColumn = uki.newClass(uki.view.table.Column, new function()
     var Base = uki.view.table.Column.prototype;
 
     this._css = Base._css + 'text-align:right;';
+    
+    this.compare = function(a, b) {
+        a*=1;
+        b*=1;
+        return (a >= b ? 1 : a == b ? 0 : -1) * (this._sort == 'DESC' ? -1 : 1);
+    };
 });
 
 uki.view.table.CustomColumn = uki.view.table.Column;

data/frameworks/uki/src/uki-view/view/table/header.js

@@ -1,24 +1,43 @@
 include('../label.js');
 
-uki.view.table.Header = uki.newClass(uki.view.Label, function(Base) {
+/**
+ * @class
+ * @extends uki.view.Label
+ */
+uki.view.declare('uki.view.table.Header', uki.view.Label, function(Base) {
+    this._defaultBackground = 'theme(table-header)';
+    
     this._setup = function() {
         Base._setup.call(this);
         this._multiline = true;
         this._resizers = [];
     };
     
-    this.typeName = function() { return 'uki.view.table.Header'; };
-    
     this.columns = uki.newProp('_columns', function(v) {
         this._columns = v;
         this.html(this._createColumns());
         this._createResizers();
     });
     
-    this.redrawColumn = function(col) {
-        if (this._resizers[col]) {
-            uki.dom.unbind(this._resizers[col]);
+    this._createDom = function() {
+        Base._createDom.call(this);
+        this.bind('click', this._click);
+    };
+    
+    this._click = function(e) {
+        if (this._dragging) return;
+        
+        var target = e.target;
+        if (target == this.dom() || target == this._label) return;
+        while (target.parentNode != this._label) target = target.parentNode;
+        var i = uki.inArray(target, this._label.childNodes);
+        if (i > -1) {
+            this.trigger('columnClick', { source: this, columnIndex: i, column: this._columns[i] });
         }
+    };
+    
+    this.redrawColumn = function(col) {
+        if (this._resizers[col]) uki.dom.unbind(this._resizers[col]);
         var container = doc.createElement('div');
         container.innerHTML = this._columns[col].renderHeader(this.rect().height);
         this._label.replaceChild(container.firstChild, this._label.childNodes[col]);
@@ -30,7 +49,7 @@ uki.view.table.Header = uki.newClass(uki.view.Label, function(Base) {
         for(var i = 0, offset = 0, columns = this._columns, l = columns.length; i < l; i++) {
             html[html.length] = columns[i].renderHeader(this.rect().height);
         }
-        return html.join('')
+        return html.join('');
     };
     
     this._createResizer = function(i) {
@@ -47,14 +66,23 @@ uki.view.table.Header = uki.newClass(uki.view.Label, function(Base) {
     };
     
     this._bindResizerDrag = function(resizer, columnIndex) {
-        uki.dom.bind(resizer, 'draggesture', uki.proxy(function(e) {
-            var headerOffset = uki.dom.offset(this.dom()),
+        var _this = this;
+        
+        uki.dom.bind(resizer, 'draggesture', function(e) {
+            _this._dragging = true;
+            var headerOffset = uki.dom.offset(_this.dom()),
                 offsetWithinHeader = e.pageX - headerOffset.x,
-                columnOffset = 0, i, column = this._columns[columnIndex];
+                columnOffset = 0, i, column = _this._columns[columnIndex];
             for (i=0; i < columnIndex; i++) {
-                columnOffset += this._columns[i].width();
+                columnOffset += _this._columns[i].width();
             };
             column.width(offsetWithinHeader - columnOffset);
-        }, this));
+        });
+        
+        uki.dom.bind(resizer, 'draggestureend', function() {
+            setTimeout(function() {
+                _this._dragging = false;
+            }, 1);
+        });
     };
 });