uki 1.1.1 → 1.1.2

data/frameworks/uki/src/uki-touch/touch/view/scrollableList.js

@@ -0,0 +1,27 @@
+include('../view.js');
+include('../../../uki-view/view/list.js');
+include('touchScrollPane.js');
+
+/**
+ * Touch scrollable List View
+ * Puts a list into a touch.view.ScrollPane
+ * 
+ * @author rsaccon
+ * @name uki.touch.view.ScrollableList
+ * @class
+ * @extends uki.touch.view.ScrollPane
+ */
+uki.view.declare('uki.touch.view.ScrollableList', uki.touch.view.ScrollPane, function(Base) {
+
+    this._createDom = function() {
+        Base._createDom.call(this);
+        this._list = uki({ view: 'List', rect: this.rect().clone().normalize(), anchors: 'left top right bottom' })[0];
+        this.appendChild(this._list);
+    };
+    
+    uki.each('data rowHeight render packSize visibleRectExt throttle focusable selectedIndex selectedIndexes selectedRow selectedRows multiselect draggable textSelectable'.split(' '), 
+        function(i, name) {
+            uki.delegateProp(this, name, '_list');
+        }, this);
+    
+});

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

@@ -1 +1,10 @@
+/**
+ * Basic container view
+ *
+ *
+ * @author voloko
+ * @name uki.view.Box
+ * @class
+ * @extends uki.view.Container
+ */
 uki.view.declare('uki.view.Box', uki.view.Container, {});

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

@@ -1,7 +1,17 @@
 include('label.js');
 
+/**
+ * Button view
+ *
+ *
+ * @author voloko
+ * @name uki.view.Button
+ * @class
+ * @extends uki.view.Label
+ * @implements uki.view.Focusable
+ */
 uki.view.declare('uki.view.Button', uki.view.Label, uki.view.Focusable, function(Base, Focusable) {
-    var proto = this;
+    /** @lends uki.view.Button.prototype */
     
     this._backgroundPrefix = 'button-';
     
@@ -13,8 +23,32 @@ uki.view.declare('uki.view.Button', uki.view.Label, uki.view.Focusable, function
         this.defaultCss += "cursor:default;-moz-user-select:none;-webkit-user-select:none;" + uki.theme.style('button');
     };
     
+    /**
+     * @function
+     * @name uki.view.Button#backgroundPrefix
+     */
     uki.addProps(this, ['backgroundPrefix']);
     
+    /**
+     * @function
+     * @name uki.view.Button#"normal-background"
+     */
+    /**
+     * @function
+     * @name uki.view.Button#"hover-background"
+     */
+    /**
+     * @function
+     * @name uki.view.Button#"down-background"
+     */
+    /**
+     * @function
+     * @name uki.view.Button#"focus-background"
+     */
+     /**
+      * @function
+      * @name uki.view.Button#"disabled-background"
+      */
     uki.each(['normal', 'hover', 'down', 'focus', 'disabled'], function(i, name) {
         var property = name + '-background';
         this[property] = function(bg) {
@@ -48,6 +82,7 @@ uki.view.declare('uki.view.Button', uki.view.Label, uki.view.Focusable, function
     this._createDom = function() {
         // dom
         this._dom = uki.createElement('div', this.defaultCss);
+        this._initClassName();
         this._label = uki.createElement('div', this.defaultCss); // text-shadow:0 1px 0px rgba(255,255,255,0.8);
         this._dom.appendChild(this._label);
         

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

@@ -1,7 +1,27 @@
+/**
+ * Checkbox
+ *
+ * @author voloko
+ * @name uki.view.Checkbox
+ * @class
+ * @extends uki.view.Button
+ */
 uki.view.declare('uki.view.Checkbox', uki.view.Button, function(Base) {
     
     this._backgroundPrefix = 'checkbox-';
     
+    /**
+     * @function
+     * @name uki.view.Button#"checked-normal-background"
+     */
+    /**
+     * @function
+     * @name uki.view.Button#"checked-hover-background"
+     */
+    /**
+     * @function
+     * @name uki.view.Button#"checked-disabled-background"
+     */
     uki.each(['checked-normal', 'checked-hover', 'checked-disabled'], function(i, name) {
         var property = name + '-background';
         this[property] = function(bg) {
@@ -22,17 +42,26 @@ uki.view.declare('uki.view.Checkbox', uki.view.Button, function(Base) {
         this._backgroundByName(name);
     };
     
+    /**
+     * @function
+     * @name uki.view.Button#value
+     */
+     /**
+      * @function
+      * @name uki.view.Button#checked
+      */
     this.value = this.checked = uki.newProp('_checked', function(state) {
-        var changed = this._checked != !!state;
         this._checked = !!state;
         this._updateBg();
-        if (changed) this.trigger('change', {checked: this._checked, source: this});
     });
     
     this._mouseup = function(e) {
         if (!this._down) return;
         this._down = false;
-        if (!this._disabled) this.checked(!this.checked())
+        if (!this._disabled) {
+            this.checked(!this.checked())
+            this.trigger('change', {checked: this._checked, source: this});
+        }
     };
     
 });

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

@@ -1,3 +1,12 @@
+/**
+ * Vertical Flow
+ * Arranges child views verticaly, one after another
+ *
+ * @author voloko
+ * @name uki.view.VFlow
+ * @class
+ * @extends uki.view.Container
+ */
 uki.view.declare('uki.view.VFlow', uki.view.Container, function(Base) {
     this.contentsSize = function() {
         var value = uki.reduce(0, this._childViews, function(sum, e) { 
@@ -13,21 +22,12 @@ uki.view.declare('uki.view.VFlow', uki.view.Container, function(Base) {
         return Base.resizeToContents.call(this, autosizeStr);
     }
     
-    uki.each(['appendChild', 'removeChild', 'insertBefore'], function(i, name) {
-        this[name] = function(arg1, arg2) {
-            this._contentChanged = true;
-            return Base[name].call(this, arg1, arg2);
-        };
-    }, this)
-    
     this.layout = function() {
-        if (this._contentChanged) this._resizeChildViews(this._rect);
         return Base.layout.call(this);
     };
     
     // resize in layout
     this._resizeChildViews = function(oldRect) {
-        this._contentChanged = false;
         var offset = 0, rect, view;
         for (var i=0, childViews = this.childViews(); i < childViews.length; i++) {
             view = childViews[i];
@@ -40,8 +40,31 @@ uki.view.declare('uki.view.VFlow', uki.view.Container, function(Base) {
             if (view.visible()) offset += view._rect.height;
         };
     };
+    
+    this.childResized = function() {
+        this._needsLayout = true;
+        uki.after(uki.proxy(this._afterChildResized, this));
+    };
+    
+    this._contentChanged = this.childResized;
+    
+    this._afterChildResized = function() {
+        this.resizeToContents('height');
+        this.parent().childResized(this);
+        this.layoutIfNeeded();
+    };
+    
 });
 
+/**
+ * Horizontla Flow
+ * Arranges child views horizontally
+ *
+ * @author voloko
+ * @name uki.view.HFlow
+ * @class
+ * @extends uki.view.VFlow
+ */
 uki.view.declare('uki.view.HFlow', uki.view.VFlow, function(Base) {
     this.contentsSize = function() {
         var value = uki.reduce(0, this._childViews, function(sum, e) { 
@@ -64,4 +87,9 @@ uki.view.declare('uki.view.HFlow', uki.view.VFlow, function(Base) {
         };
     };
     
+    this._afterChildResized = function() {
+        this.resizeToContents('width');
+        this.parent().childResized(this);
+        this.layoutIfNeeded();
+    };
 });

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

@@ -1,9 +1,22 @@
+/**
+ * Image
+ *
+ * @author voloko
+ * @name uki.view.Image
+ * @class
+ * @extends uki.view.Base
+ */
 uki.view.declare('uki.view.Image', uki.view.Base, function() {
     this.typeName = function() { return 'uki.view.Image'; };
     
+    /**
+     * @function
+     * @name uki.view.Image#src
+     */
     uki.delegateProp(this, 'src', '_dom');
     
     this._createDom = function() {
-        this._dom = uki.createElement('img', this.defaultCss)
+        this._dom = uki.createElement('img', this.defaultCss);
+        this._initClassName();
     };
 });

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

@@ -1,5 +1,14 @@
 include('../../uki-core/const.js');
 
+/**
+ * Label View
+ * Contains any html
+ * 
+ * @author voloko
+ * @name uki.view.Label
+ * @class
+ * @extends uki.view.Base
+ */
 uki.view.declare('uki.view.Label', uki.view.Base, function(Base) {
 
     this._setup = function() {
@@ -13,12 +22,14 @@ uki.view.declare('uki.view.Label', uki.view.Base, function(Base) {
     };
     
     this._style = function(name, value) {
-        if (value !== undefined && 'font fontFamily fontWeight fontSize textDecoration textOverflow textAlign overflow color'.indexOf(name) != -1) {
+        if (value !== undefined && uki.inArray(name, uki.browser.textStyles) != -1) {
             this._label.style[name] = value;
         }
         return Base._style.call(this, name, value);
     };
     
+    this.adaptToContents = uki.newProp('_adaptToContents');
+    
     this.textSelectable = function(state) {
         if (state !== undefined && !this._textSelectProp) {
             this._label.unselectable = state ? '' : 'on';
@@ -35,29 +46,53 @@ uki.view.declare('uki.view.Label', uki.view.Base, function(Base) {
         uki.dom.probe(clone, function() {
             size = new Size(clone.offsetWidth + inset.width(), clone.offsetHeight + inset.height());
         });
-        
         return size;
     };
     
+    /**
+     * Read/write escaped html contents 
+     * @function
+     * @name uki.view.Label#text
+     */
     this.text = function(text) {
         return text === undefined ? this.html() : this.html(uki.escapeHTML(text));
     };
     
+    /**
+     * Read/write html contents
+     * @function
+     * @name uki.view.Label#html
+     */
     this.html = function(html) {
         if (html === undefined) return this._label.innerHTML;
         this._label.innerHTML = html;
         return this;
     };
     
+    /**
+     * Insets between text and view borders
+     * @function
+     * @name uki.view.Label#inset
+     */
     this.inset = uki.newProp('_inset', function(inset) {
         this._inset = Inset.create(inset);
     });
 
+    /**
+     * Whether label have inline scrollbars on not
+     * @function
+     * @name uki.view.Label#scrollable
+     */
     this.scrollable = uki.newProp('_scrollable', function(state) {
         this._scrollable = state;
         this._label.style.overflow = state ? 'auto' : 'hidden';
     });
     
+    /**
+     * Whether can have multiline lines or not
+     * @function
+     * @name uki.view.Label#multiline
+     */
     this.multiline = uki.newProp('_multiline', function(state) {
         this._multiline = state;
         this._label.style.whiteSpace = state ? '' : 'nowrap';
@@ -92,15 +127,10 @@ uki.view.declare('uki.view.Label', uki.view.Base, function(Base) {
     };
     
     this._layoutDom = function() {
-        Base._layoutDom.apply(this, arguments);
-        
-        var inset = this._inset;
-        if (!this.multiline()) {
-            var fz = parseInt(this.style('fontSize'), 10) || 12;
-            this._label.style.lineHeight = (this._rect.height - inset.top - inset.bottom) + 'px';
-            // this._label.style.paddingTop = MAX(0, this._rect.height/2 - fz/2) + 'px';
-        }
-        var l;
+        var inset = this._inset,
+            l,
+            a = this._anchors,
+            watchField = '', watchValue;
         
         if (uki.supportNativeLayout) {
             l = {
@@ -117,7 +147,38 @@ uki.view.declare('uki.view.Label', uki.view.Base, function(Base) {
                 height: this._rect.height - inset.height()
             };
         }
+        
+        if (!(a & ANCHOR_BOTTOM)) {
+            l.height = l.bottom = undefined;
+            watchField = 'offsetHeight';
+        } else if (!(a & ANCHOR_TOP)) {
+            l.height = l.bottom = undefined;
+            watchField = 'offsetHeight';
+        } else if (!(a & ANCHOR_RIGHT)) {
+            l.right = l.width = undefined;
+            watchField = 'offsetWidth';
+        } else if (!(a & ANCHOR_LEFT)) {
+            l.left = l.width = undefined;
+            watchField = 'offsetWidth';
+        }
+        
+        Base._layoutDom.apply(this, arguments);
+        
+        if (!this.multiline()) {
+            var fz = parseInt(this.style('fontSize'), 10) || 12;
+            this._label.style.lineHeight = (this._rect.height - inset.top - inset.bottom) + 'px';
+            // this._label.style.paddingTop = MAX(0, this._rect.height/2 - fz/2) + 'px';
+        }
         this._lastLabelLayout = uki.dom.layout(this._label.style, l, this._lastLabelLayout);
+        
+        if (this.adaptToContents() && watchField) {
+            watchValue = this._label[watchField];
+            if (watchValue != this._lastWatchValue && this.parent()) {
+                this.resizeToContents(watchField == 'offsetWidth' ? 'width' : 'height');
+                this.parent().childResized(this);
+            }
+            this._lastWatchValue = watchValue;
+        }
     };
     
 });

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

@@ -1,6 +1,17 @@
 include('scrollPane.js');
 
 uki.view.list = {};
+/**
+ * List View
+ * Progressevly renders list data. Support selection and drag&drop.
+ * Renders rows with plain html.
+ * 
+ * @author voloko
+ * @name uki.view.List
+ * @class
+ * @extends uki.view.Base
+ * @implements uki.view.Focusable
+ */
 uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Base, Focusable) {
     
     this._throttle = 42; // do not try to render more often than every 42ms
@@ -18,21 +29,59 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         });
     };
     
+    /**
+     * @function
+     * @name uki.view.List#defaultBackground
+     */
     this.defaultBackground = function() {
         return uki.theme.background('list', this._rowHeight);
     };
     
-    uki.addProps(this, ['render', 'packSize', 'visibleRectExt', 'throttle', 'contentDraggable', 'lastClickIndex', 'multiselect', 'lastClickIndex']);
-    
+    /**
+    * @type uki.view.list.Render
+    * @function
+    * @name uki.view.List#render
+    */
+    /**
+    * @function
+    * @name uki.view.List#packSize
+    */
+    /**
+    * @function
+    * @name uki.view.List#visibleRectExt
+    */
+    /**
+    * @function
+    * @name uki.view.List#throttle
+    */
+    /**
+    * @function
+    * @name uki.view.List#lastClickIndex
+    */
+    /**
+    * @function
+    * @name uki.view.List#multiselect
+    */
+    uki.addProps(this, ['render', 'packSize', 'visibleRectExt', 'throttle', 'lastClickIndex', 'multiselect']);
+    
+    /**
+    * @function
+    * @name uki.view.List#rowHeight
+    */
     this.rowHeight = uki.newProp('_rowHeight', function(val) {
         this._rowHeight = val;
         this.minSize(new Size(this.minSize().width, this._rowHeight * this._data.length));
         if (this._background) this._background.detach();
         this._background = null;
         if (this.background()) this.background().attachTo(this);
-        this._relayoutParent();
+        this._contentChanged();
     });
     
+    /**
+    * @example list.data(['row1', 'row2', ...])
+    * @function
+    * @name uki.view.List#data
+    */
     this.data = function(d) {
         if (d === undefined) return this._data;
         this.clearSelection();
@@ -40,11 +89,16 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         this._packs[0].itemFrom = this._packs[0].itemTo = this._packs[1].itemFrom = this._packs[1].itemTo = 0;
         
         this.minSize(new Size(this.minSize().width, this._rowHeight * this._data.length));
-        this.trigger('selection', {source: this})
-        this._relayoutParent();
+        this.trigger('selection', {source: this});
+        this._contentChanged();
         return this;
     };
     
+    /**
+    * Forces list content update
+    * @function
+    * @name uki.view.List#relayout
+    */
     this.relayout = function() {
         this._packs[0].itemFrom = this._packs[0].itemTo = this._packs[1].itemFrom = this._packs[1].itemTo = 0;
         this.layout();
@@ -54,7 +108,13 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         return new Size(this.rect().width, this._rowHeight * this._data.length);
     };
     
-    // used in search. should be fast
+    /**
+    * used in search. should be fast
+    * @function
+    * @param {Number} position
+    * @param {String} data
+    * @name uki.view.List#addRow
+    */
     this.addRow = function(position, data) {
         this._data.splice(position, 0, data);
         var item = this._itemAt(position);
@@ -87,23 +147,40 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         
         // needed for scrollbar
         this.minSize(new Size(this.minSize().width, this._rowHeight * this._data.length));
-        this._relayoutParent();
+        this._contentChanged();
 
         return this;
     };
     
-    this.removeRow = function(position, data) {
+    /**
+    * @function
+    * @param {Number} position
+    * @name uki.view.List#removeRow
+    */
+    this.removeRow = function(position) {
         this._data.splice(position, 1);
         this.data(this._data);
         return this;
     };
     
-    this.redrawRow = function(row) {
-        var item = this._itemAt(row);
-        if (item) item.innerHTML = this._render.render(this._data[row], this._rowRect(row), row);
+    /**
+    * Forces one particular row to be redrawn
+    * @function
+    * @param {Number} position
+    * @name uki.view.List#removeRow
+    */
+    this.redrawRow = function(position) {
+        var item = this._itemAt(position);
+        if (item) item.innerHTML = this._render.render(this._data[position], this._rowRect(position), position);
         return this;
     };
     
+    /**
+    * Read/write current selected index for selectable lists
+    * @function
+    * @param {Number} position
+    * @name uki.view.List#selectedIndex
+    */
     this.selectedIndex = function(position) {
         if (position === undefined) return this._selectedIndexes.length ? this._selectedIndexes[0] : -1;
         this.selectedIndexes([position]);
@@ -111,6 +188,12 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         return this;
     };
     
+    /**
+    * Read/write all selected indexes for multiselectable lists
+    * @function
+    * @param {Array.<Number>} position
+    * @name uki.view.List#selectedIndex
+    */
     this.selectedIndexes = function(indexes) {
         if (indexes === undefined) return this._selectedIndexes;
         this.clearSelection(true);
@@ -122,16 +205,30 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         return this;
     };
     
+    /**
+    * Read contents of selected row
+    * @function
+    * @name uki.view.List#selectedRow
+    */
     this.selectedRow = function() {
         return this._data[this.selectedIndex()];
     };    
     
+    /**
+    * Read contents of all selected rows
+    * @function
+    * @name uki.view.List#selectedRows
+    */
     this.selectedRows = function() {
         return uki.map(this.selectedIndexes(), function(index) {
             return this._data[index];
         }, this)
     };
     
+    /**
+    * @function
+    * @name uki.view.List#clearSelection
+    */
     this.clearSelection = function(skipClickIndex) {
         for (var i=0; i < this._selectedIndexes.length; i++) {
             this._setSelected(this._selectedIndexes[i], false);
@@ -140,6 +237,11 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         if (!skipClickIndex) this._lastClickIndex = -1;
     };
     
+    /**
+    * @function
+    * @param {Number} index
+    * @name uki.view.List#isSelected
+    */
     this.isSelected = function(index) {
         var found = uki.binarySearch(index, this._selectedIndexes);
         return this._selectedIndexes[found] == index;
@@ -198,7 +300,13 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         }
     };
     
+    this._contentChanged = function() {
+        this._needsLayout = true;
+        uki.after(uki.proxy(this._relayoutParent, this));
+    };
+
     this._relayoutParent = function() {
+        this.parent().childResized(this);
         if (!this._scrollableParent) return;
         var c = this;
         while ( c && c != this._scrollableParent) {
@@ -295,6 +403,7 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
     
     this._createDom = function() {
         this._dom = uki.createElement('div', this.defaultCss + 'overflow:hidden');
+        this._initClassName();
         
         var packDom = uki.createElement('div', 'position:absolute;left:0;top:0px;width:100%;overflow:hidden');
         this._packs = [
@@ -472,8 +581,29 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
     
 });
 
-uki.Collection.addAttrs(['data','selectedIndex', 'selectedIndexes', 'selectedRows']);
+/** @function
+@name uki.Collection#data */
+/** @function
+@name uki.Collection#selectedIndex */
+/** @function
+@name uki.Collection#selectedIndexes */
+/** @function
+@name uki.Collection#selectedRow */
+/** @function
+@name uki.Collection#selectedRows */
+/** @function
+@name uki.Collection#lastClickIndex */
+uki.Collection.addAttrs(['data', 'selectedIndex', 'selectedIndexes', 'selectedRow', 'selectedRows', 'lastClickIndex']);
 
+/**
+ * Scrollable List View
+ * Puts a list into a scroll pane
+ * 
+ * @author voloko
+ * @name uki.view.ScrollableList
+ * @class
+ * @extends uki.view.ScrollPane
+ */
 uki.view.declare('uki.view.ScrollableList', uki.view.ScrollPane, function(Base) {
 
     this._createDom = function() {
@@ -482,7 +612,7 @@ uki.view.declare('uki.view.ScrollableList', uki.view.ScrollPane, function(Base)
         this.appendChild(this._list);
     };
     
-    uki.each('data rowHeight render packSize visibleRectExt throttle focusable selectedIndexes selectedIndex selectedIndexes selectedRows multiselect contentDraggable draggable textSelectable'.split(' '), 
+    uki.each('data rowHeight render packSize visibleRectExt throttle focusable selectedIndex selectedIndexes selectedRow selectedRows multiselect draggable textSelectable'.split(' '), 
         function(i, name) {
             uki.delegateProp(this, name, '_list');
         }, this);