uki 1.0.1 → 1.0.2

data/frameworks/uki/src/uki-core/view/styleable.js

@@ -33,11 +33,10 @@ uki.view.Styleable = new function() {
     //     };
     // });
     
-    var probe = uki.createElement('div').style,
-        proto = this;
-    uki.each(['userSelect', 'MozUserSelect', 'WebkitUserSelect'], function() {
-        if (typeof probe[this] == 'string') proto._textSelectProp = this;
-    });
+    var probe = uki.createElement('div').style;
+    uki.each(['userSelect', 'MozUserSelect', 'WebkitUserSelect'], function(i, name) {
+        if (typeof probe[name] == 'string') this._textSelectProp = name;
+    }, this);
     
     /**
      * Sets whether text of the view can be selected.
@@ -56,7 +55,7 @@ uki.view.Styleable = new function() {
         } else {
             uki.dom[state ? 'unbind' : 'bind'](this.dom(), 'selectstart', uki.dom.preventDefaultHandler);
         }
-        this._dom.style.cursor = state ? 'text' : 'default';
+        this._dom.style.cursor = state ? '' : 'default';
         return this;
     };
     
@@ -64,6 +63,7 @@ uki.view.Styleable = new function() {
         if (state === undefined) return this._dom.getAttribute('draggable');
         this._dom.setAttribute('draggable', true);
         this._dom.style.WebkitUserDrag = 'element';
+        return this;
     };
     
     /**#@-*/ 

data/frameworks/uki/src/uki-data/model.js

@@ -1,28 +1,94 @@
 include('observable.js');
 
+/**
+ *
+ * @example
+ * myModel = uki.newClass(uki.data.Model, function() {
+ *     uki.data.model.addField(this, ['name', 'age', 'sex']);
+ * })
+ *
+ * var m = new myModel({ age: 22, name: 'Jonh Smith', sex: 'm' })
+ * m.bind('change.sex', function() {
+ *     alert('omg! wtf!');
+ * });
+ *
+ * m.bind('change', function(e) {
+ *     console.log(e.fields);
+ * });
+ *
+ * m.name('Joe Black') // triggers 'change' and 'change.name'
+ * m.sex('w') // triggers'change' and 'change.sex'
+ */
 uki.data.Model = uki.newClass(uki.data.Observable, function(Observable) {
     
-    this.change = this.update = function(values, arg2) {
-        var changes = {}, fields = [];
-        if (arg2 !== undefined) {
-            var tmp = {};
-            tmp[values] = arg2;
-            values = tmp;
-        }
-        uki.each(values, function(i) {
-            if (this[i] != values[i]) {
-                changes[i] = true
-                fields.push(i);
-                this[i] = values[i];
+    this._fields = [];
+    
+    this.init = function(values) {
+        this.update(values || {});
+    };
+    
+    this.fields = function() {
+        return this._fields;
+    };
+    
+    this.update = function(values) {
+        var fields = [], changes = {};
+        
+        uki.each(values, function(name, value) {
+            var field = uki.isFunction(this[name]) ? '_' + name : name;
+            if (this[field] != value) {
+                changes[name] = true;
+                fields.push(name);
+                this[field] = value;
+                this.trigger('change.' + name, { model: this });
             }
         }, this);
         
-        this._triggerChange({changes: changes, fields: fields, model: this});
+        if (fields.length) this.trigger('change', {changes: changes, fields: fields, model: this});
         return this;
     };
     
-    this._triggerChange = function(e) {
-        this.trigger('change', e);
-    };
+});
+
+uki.data.model = {
+    _newProp: function(name) {
+        return uki.newProp('_' + name, function(v) {
+            var changes = {};
+            changes[name] = v;
+            this.update(changes);
+        });
+    },
     
-});
+    addFields: function(target, names) {
+        for (var i=0; i < names.length; i++) {
+            target[names[i]] = uki.data.model._newProp(names[i]);
+        }
+        // do not break prototypes
+        target._fields = names.concat(target._fields || []);
+    },
+    
+    newLoader: function(name, options) {
+        return function(callback) {
+            callback = callback || uki.F;
+            if (this['loaded.' + name]) {
+                callback.call(this, this[name]());
+            } else {
+                this.bind('load.' + name, callback);
+                if (!this['loading.' + name]) {
+                    this['loading.' + name] = true;
+                    uki.ajax(uki.extend({
+                        url: uki.isFunction(options.url) ? options.url.call(this) : options.url,
+                        data: uki.isFunction(options.data) ? options.data.call(this) : options.data ? options.data : { id: this.id() },
+                        success: uki.proxy(function(val) {
+                            this['loading.' + name] = false;
+                            this['loaded.' + name] = true;
+                            options.setter ? options.setter.call(this, val) : this['_' + name] = val;
+                            this.trigger('load.' + name, val);
+                            this.unbind('load.' + name);
+                        }, this)
+                    }, options.ajaxOptions || {}));
+                }
+            }
+        };
+    }
+};

data/frameworks/uki/src/uki-data/observable.js

@@ -5,6 +5,7 @@ include('data.js');
 uki.data.Observable = {
     bind: function(name, callback) {
         var _this = this;
+        callback.huid = callback.huid || uki.guid++;
         uki.each(name.split(' '), function(i, name) {
             _this._observersFor(name).push(callback);
         });
@@ -13,20 +14,22 @@ uki.data.Observable = {
     unbind: function(name, callback) {
         var _this = this;
         uki.each(name.split(' '), function(i, name) {
-            _this._observers[name] = uki.grep(_this._observersFor(name), function(c) {
-                return c != callback;
+            _this._observers[name] = !callback ? [] : uki.grep(_this._observersFor(name), function(c) {
+                return c != callback && c.huid != callback.huid;
             });
+            if (_this._observers[name]) delete _this._observers[name];
         });
     },
     
     trigger: function(name/*, data1, data2*/) {
         var attrs = Array.prototype.slice.call(arguments, 1);
-        uki.each(this._observersFor(name), function(i, callback) {
+        uki.each(this._observersFor(name, true), function(i, callback) {
             callback.apply(this, attrs);
-        });
+        }, this);
     },
     
-    _observersFor: function(name) {
+    _observersFor: function(name, skipCreate) {
+        if (skipCreate && (!this._observers || !this._observers[name])) return [];
         if (!this._observers) this._observers = {};
         if (!this._observers[name]) this._observers[name] = [];
         return this._observers[name];

data/frameworks/uki/src/uki-more/more/view/treeList/render.js

@@ -11,7 +11,7 @@ uki.more.view.treeList.Render = uki.newClass(uki.view.list.Render, new function(
     );
     
     this.initStyles = function() {
-        this.classPrefix = 'treeList-' + uki.dom.guid++;
+        this.classPrefix = 'treeList-' + uki.guid++;
         var style = new uki.theme.Template(
             '.${classPrefix}-row { color: #333; position:relative; padding-top:3px; } ' +
             '.${classPrefix}-toggle { overflow: hidden; position:absolute; left:-15px; top:5px; width: 10px; height:9px; } ' +
@@ -30,8 +30,9 @@ uki.more.view.treeList.Render = uki.newClass(uki.view.list.Render, new function(
 
     this.render = function(row, rect, i) {
         this.classPrefix || this.initStyles();
-        var text = row.data;
-        if (row.children && row.children.length) {
+        var text = row.data,
+            children = uki.attr(row, 'children');
+        if (children && children.length) {
             return this._parentTemplate.render({ 
                 text: text, 
                 indent: row.__indent*18 + 22,

data/frameworks/uki/src/uki-more/more/view/treeList.js

@@ -13,7 +13,16 @@ uki.view.declare('uki.more.view.TreeList', uki.view.List, function(Base) {
 
     this.data = uki.newProp('_treeData', function(v) {
         this._treeData = v;
-        this.listData(this._treeNodeToListData(v));
+        this._data = this._treeNodeToListData(v);
+        var children = this.listData(), opened = false;
+        for (var i=children.length - 1; i >= 0 ; i--) {
+            if (this._data[i].__opened) {
+                opened = true;
+                this._openSubElement(i);
+            }
+        };
+        this.listData(this._data);
+        if (opened) this.trigger('open');
     });
 
     this._treeNodeToListData = function(node, indent) {
@@ -35,7 +44,7 @@ uki.view.declare('uki.more.view.TreeList', uki.view.List, function(Base) {
     }
     
     function recursiveLength (item) {
-        var children = item.children,
+        var children = uki.attr(item, 'children'),
         length = children.length;
 
         for (var i=0; i < children.length; i++) {
@@ -46,8 +55,8 @@ uki.view.declare('uki.more.view.TreeList', uki.view.List, function(Base) {
     
     this._openSubElement = function(index) {
         var item = this._data[index],
-            children = item.children;
-            
+            children = uki.attr(item, 'children');
+
         if (!children || !children.length) return 0;
         var length = children.length;
         
@@ -80,13 +89,14 @@ uki.view.declare('uki.more.view.TreeList', uki.view.List, function(Base) {
         this.listData(this._data);
         this.selectedIndexes(indexes);
         this._lastClickIndex = clickIndex > index ? clickIndex + length : clickIndex;
+        this.trigger('open');
         return this;
     };
     
     this.close = function(index) {
         var item = this._data[index],
             indexes = this._selectedIndexes,
-            children = item.children;
+            children = uki.attr(item, 'children');
         if (!children || !children.length || !item.__opened) return;
             
         var length = recursiveLength(item);
@@ -109,12 +119,13 @@ uki.view.declare('uki.more.view.TreeList', uki.view.List, function(Base) {
         this.listData(this._data);
         this.selectedIndexes(indexes);
         this._lastClickIndex = clickIndex > index ? clickIndex - length : clickIndex;
+        this.trigger('close');
     };
     
     this._mousedown = function(e) {
-        if (e.domEvent.target.className.indexOf('toggle-tree') > -1) {
+        if (e.target.className.indexOf('toggle-tree') > -1) {
             var o = uki.dom.offset(this._dom),
-                y = e.domEvent.pageY - o.y,
+                y = e.pageY - o.y,
                 p = y / this._rowHeight << 0;
             this.toggle(p);
         } else {

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

@@ -23,8 +23,10 @@ uki.view.declare('uki.view.Checkbox', uki.view.Button, function(Base) {
     };
     
     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) {

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

@@ -8,23 +8,41 @@ uki.view.declare('uki.view.VFlow', uki.view.Container, function(Base) {
     
     this.hidePartlyVisible = uki.newProp('_hidePartlyVisible');
     
-    this._layoutChildViews = function(oldRect) {
+    this.resizeToContents = function(autosizeStr) {
+        this._resizeChildViews(this._rect);
+        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];
-            view.rect(new Rect(view._rect.x, offset, view._rect.width, view._rect.height));
+            view.parentResized(oldRect, this._rect);
+            view.rect().y = offset;
+            // view.rect(new Rect(view._rect.x, offset, view._rect.width, view._rect.height));
             if (this._hidePartlyVisible) {
                 view.visible(view._rect.height + offset <= this._rect.height);
             }
             if (view.visible()) offset += view._rect.height;
         };
-        Base._layoutChildViews.call(this);
     };
 });
 
-uki.view.declare('uki.view.HFlow', uki.view.Container, function(Base) {
-    this.hidePartlyVisible = uki.newProp('_hidePartlyVisible');
-    
+uki.view.declare('uki.view.HFlow', uki.view.VFlow, function(Base) {
     this.contentsSize = function() {
         var value = uki.reduce(0, this._childViews, function(sum, e) { 
                 return sum + (e.visible() ? e.rect().width : 0); 
@@ -32,17 +50,18 @@ uki.view.declare('uki.view.HFlow', uki.view.Container, function(Base) {
         return new Size( value, this.contentsHeight() );
     };
     
-    this._layoutChildViews = function(oldRect) {
+    this._resizeChildViews = function(oldRect) {
         var offset = 0, rect, view;
         for (var i=0, childViews = this.childViews(); i < childViews.length; i++) {
             view = childViews[i];
-            view.rect(new Rect(offset, view._rect.y, view._rect.width, view._rect.height));
+            view.parentResized(oldRect, this._rect);
+            view.rect().x = offset;
+            // view.rect(new Rect(offset, view._rect.y, view._rect.width, view._rect.height));
             if (this._hidePartlyVisible) {
                 view.visible(view._rect.width + offset <= this._rect.width);
             }
             if (view.visible()) offset += view._rect.width;
         };
-        Base._layoutChildViews.call(this);
     };
     
 });

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

@@ -3,7 +3,7 @@ include('scrollPane.js');
 uki.view.list = {};
 uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Base, Focusable) {
     
-    this._throttle = 5; // do not try to render more often than every 5ms
+    this._throttle = 42; // do not try to render more often than every 42ms
     this._visibleRectExt = 300; // extend visible rect by 300 px overflow
     this._defaultBackground = 'theme(list)';
     
@@ -22,13 +22,15 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         return uki.theme.background('list', this._rowHeight);
     };
     
-    uki.addProps(this, ['render', 'packSize', 'visibleRectExt', 'throttle', 'contentDraggable', 'lastClickIndex', 'multiselect']);
+    uki.addProps(this, ['render', 'packSize', 'visibleRectExt', 'throttle', 'contentDraggable', 'lastClickIndex', 'multiselect', 'lastClickIndex']);
     
     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.data = function(d) {
@@ -37,8 +39,8 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         this._data = d;
         this._packs[0].itemFrom = this._packs[0].itemTo = this._packs[1].itemFrom = this._packs[1].itemTo = 0;
         
-        var minWidth = this._minSize ? this._minSize.width : 0;
-        this.minSize(new Size(minWidth, this._rowHeight * this._data.length));
+        this.minSize(new Size(this.minSize().width, this._rowHeight * this._data.length));
+        this.trigger('selection', {source: this})
         this._relayoutParent();
         return this;
     };
@@ -48,16 +50,51 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         this.layout();
     };
     
+    this.contentsSize = function() {
+        return new Size(this.rect().width, this._rowHeight * this._data.length);
+    };
+    
+    // used in search. should be fast
     this.addRow = function(position, data) {
-        this.clearSelection();
         this._data.splice(position, 0, data);
-        this.data(this._data);
+        var item = this._itemAt(position);
+        if (item) {
+            var container = doc.createElement('div');
+            
+            container.innerHTML = this._rowTemplate.render({ 
+                height: this._rowHeight, 
+                text: this._render.render(this._data[position], this._rowRect(position), position)
+            });
+            item.parentNode.insertBefore(container.firstChild, item);
+            if (position < this._packs[0].itemTo) {
+                this._packs[0].itemTo++;
+                this._packs[1].itemFrom++;
+                this._packs[1].itemTo++;
+                this._packs[1].dom.style.top = this._packs[1].itemFrom*this._rowHeight + 'px';
+            } else {
+                this._packs[1].itemTo++;
+            }
+        }
+        
+        // offset selection
+        var selectionPosition = uki.binarySearch(position, this.selectedIndexes());
+        for (var i = selectionPosition; i < this._selectedIndexes.length; i++) {
+            this._selectedIndexes[i]++;
+        };
+        
+        return this;
     };
     
     this.removeRow = function(position, data) {
-        this.clearSelection();
         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);
+        return this;
     };
     
     this.selectedIndex = function(position) {
@@ -69,12 +106,13 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
     
     this.selectedIndexes = function(indexes) {
         if (indexes === undefined) return this._selectedIndexes;
+        var changed = indexes != this._selectedIndexes;
         this.clearSelection(true);
         this._selectedIndexes = indexes;
         for (var i=0; i < this._selectedIndexes.length; i++) {
             this._setSelected(this._selectedIndexes[i], true);
         };
-        this.trigger('selection', {source: this});
+        if (changed) this.trigger('selection', {source: this});
         return this;
     };
     
@@ -120,6 +158,10 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         if (p > initialP) array.splice(initialP, p - initialP);
     }
     
+    this._rowRect = function(p) {
+        return new Rect(0, p*this._rowHeight, this.rect().width, this._rowHeight);
+    };
+    
     this._toggleSelection = function(p) {
         var indexes = [].concat(this._selectedIndexes);
         var addTo = uki.binarySearch(p, indexes);
@@ -222,6 +264,9 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         } else if (e.which == 40 || e.keyCode == 40) { // DOWN
             nextIndex = Math.min(this._data.length-1, this._lastClickIndex + 1);
             e.preventDefault();
+        } else if (this._multiselect && (e.which == 97 || e.which == 65) && e.metaKey) {
+            e.preventDefault();
+            this.selectedIndexes(range(0, this._data.length -1));
         }
         if (nextIndex > -1 && nextIndex != this._lastClickIndex) {
             if (e.shiftKey && this._multiselect) {
@@ -230,6 +275,7 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
                 } else {
                     this._toggleSelection(nextIndex);
                 }
+                this._scrollToPosition(nextIndex);
             } else {
                 this.selectedIndex(nextIndex);
             }
@@ -292,14 +338,12 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
     this._rowTemplate = new uki.theme.Template('<div style="width:100%;height:${height}px;overflow:hidden;">${text}</div>')
     
     this._renderPack = function(pack, itemFrom, itemTo) {
-        var html = [], position,
-            rect = new Rect(0, itemFrom*this._rowHeight, this.rect().width, this._rowHeight);
+        var html = [], position;
         for (i=itemFrom; i < itemTo; i++) {
             html[html.length] = this._rowTemplate.render({ 
                 height: this._rowHeight, 
-                text: this._render.render(this._data[i], rect, i)
+                text: this._render.render(this._data[i], this._rowRect(i), i)
             });
-            rect.y += this._rowHeight;
         };
         pack.dom.innerHTML = html.join('');
         pack.itemFrom = itemFrom;
@@ -344,7 +388,7 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
             scrollableParent = this._scrollableParent;
 
         this._visibleRect = uki.view.visibleRect(this, scrollableParent);
-        
+        if (this._focusTarget) this._focusTarget.style.top = this._visibleRect.y + 'px';
         var prefferedPackSize = CEIL((this._visibleRect.height + this._visibleRectExt*2) / this._rowHeight),
         
             minVisibleY  = MAX(0, this._visibleRect.y - this._visibleRectExt),
@@ -355,7 +399,6 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
             itemFrom, itemTo, startAt, updated = true;
 
         Base._layoutDom.call(this, rect);
-        
         if (
             maxVisibleY <= minRenderedY || minVisibleY >= maxRenderedY || // both packs below/above visible area
             (maxVisibleY > maxRenderedY && this._packs[1].itemFrom * this._rowHeight > this._visibleRect.y && this._packs[1].itemTo > this._packs[1].itemFrom) || // need to render below, and pack 2 is not enough to cover
@@ -396,7 +439,7 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
         } else {
             updated = false;
         }
-        if (updated && /MSIE 7/.test(ua)) this.dom().className += '';
+        if (updated && /MSIE 6|7/.test(ua)) this.dom().className += '';
     };
     
     this._bindToDom = function(name) {
@@ -419,7 +462,7 @@ uki.view.declare('uki.view.List', uki.view.Base, uki.view.Focusable, function(Ba
     
 });
 
-uki.Collection.addAttrs(['data','selectedIndex']);
+uki.Collection.addAttrs(['data','selectedIndex', 'selectedIndexes', 'selectedRows']);
 
 uki.view.declare('uki.view.ScrollableList', uki.view.ScrollPane, function(Base) {
 

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

@@ -13,9 +13,11 @@ include('checkbox.js');
         });
 
         this.value = this.checked = uki.newProp('_checked', function(state) {
+            var changed = this._checked != !!state;
             this._checked = !!state;
             if (state) manager.clearGroup(this);
             this._updateBg();
+            if (changed) this.trigger('change', {checked: this._checked, source: this});
         });
 
         this._mouseup = function() {
@@ -23,7 +25,6 @@ include('checkbox.js');
             this._down = false;
             if (!this._checked && !this._disabled) {
                 this.checked(!this._checked);
-                this.trigger('change', {checked: this._checked, source: this});
             }
         }
     });

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

@@ -52,12 +52,6 @@
             if (dy) this.scrollTop(this.scrollTop() + dy);
         };
     
-        uki.each(['appendChild', 'removeChild', 'insertBefore'], function(i, name) {
-            this[name] = function(arg1, arg2) {
-                return Base[name].call(this, arg1, arg2);
-            };
-        }, this);
-    
         uki.each(['scrollTop', 'scrollLeft'], function(i, name) {
             this[name] = function(v) {
                 if (v == undefined) return this._dom[name];
@@ -86,6 +80,11 @@
             this.trigger('resize', {oldRect: oldRect, newRect: this._rect, source: this});
             return this;
         };
+        
+        this._createDom = function() {
+            Base._createDom.call(this);
+            if (ua.indexOf('Gecko/') > -1) this._dom.tabIndex = '-1';
+        };
     
         this._recalcClientRects = function() {
             initScrollWidth();

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

@@ -71,7 +71,7 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
         }, this);
         
         this.bind('click', this._click);
-        this.bind('keydown', this._keydown);
+        this.bind(uki.view.List.prototype.keyPressEvent(), this._keypress);
     };
     
     this._mouseenter = function() {
@@ -90,10 +90,10 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
         this._cachedIndex = undefined;
     };
     
-    this._keydown = function(e) {
-        if (e.which == 39) {
+    this._keypress = function(e) {
+        if (e.which == 39 || e.keyCode == 39) {
             this.value(this.value() + this._keyStep * (this._max - this._min));
-        } else if (e.which == 37) {
+        } else if (e.which == 37 || e.keyCode == 37) {
             this.value(this.value() - this._keyStep * (this._max - this._min));
         }
     };