uki 1.0.0

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

@@ -0,0 +1,442 @@
+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._visibleRectExt = 300; // extend visible rect by 300 px overflow
+    this._defaultBackground = 'theme(list)';
+    
+    this._setup = function() {
+        Base._setup.call(this);
+        uki.extend(this, {
+            _rowHeight: 30,
+            _render: new uki.view.list.Render(),
+            _data: [],
+            _lastClickIndex: -1,
+            _selectedIndexes: []
+        });
+    };
+    
+    this.defaultBackground = function() {
+        return uki.theme.background('list', this._rowHeight);
+    };
+    
+    uki.addProps(this, ['render', 'packSize', 'visibleRectExt', 'throttle', 'contentDraggable', 'lastClickIndex', 'multiselect']);
+    
+    this.rowHeight = uki.newProp('_rowHeight', function(val) {
+        this._rowHeight = val;
+        if (this._background) this._background.detach();
+        this._background = null;
+        if (this.background()) this.background().attachTo(this);
+    });
+    
+    this.data = function(d) {
+        if (d === undefined) return this._data;
+        this.clearSelection();
+        this._data = d;
+        this._packs[0].itemFrom = this._packs[0].itemTo = this._packs[1].itemFrom = this._packs[1].itemTo = 0;
+        this._updateRectOnDataChnage();
+        this._relayoutParent();
+        return this;
+    };
+    
+    this.addRow = function(position, data) {
+        this.clearSelection();
+        this._data.splice(position, 0, data);
+        this.data(this._data);
+    };
+    
+    this.removeRow = function(position, data) {
+        this.clearSelection();
+        this._data.splice(position, 1);
+        this.data(this._data);
+    };
+    
+    this.selectedIndex = function(position) {
+        if (position === undefined) return this._selectedIndexes.length ? this._selectedIndexes[0] : -1;
+        this.selectedIndexes([position]);
+        this._scrollToPosition(position);
+        return this;
+    };
+    
+    this.selectedIndexes = function(indexes) {
+        if (indexes === undefined) return 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});
+        return this;
+    };
+    
+    this.selectedRows = function() {
+        return uki.map(this.selectedIndexes(), function(index) {
+            return this._data[index];
+        }, this)
+    };
+    
+    this.clearSelection = function(skipClickIndex) {
+        for (var i=0; i < this._selectedIndexes.length; i++) {
+            this._setSelected(this._selectedIndexes[i], false);
+        };
+        this._selectedIndexes = [];
+        if (!skipClickIndex) this._lastClickIndex = -1;
+    };
+    
+    this.isSelected = function(index) {
+        var found = uki.binarySearch(index, this._selectedIndexes);
+        return this._selectedIndexes[found] == index;
+    };
+    
+    this.layout = function() {
+        this._layoutDom(this._rect);
+        this._needsLayout = false;
+        // send visibleRect with layout
+        this.trigger('layout', { rect: this._rect, source: this, visibleRect: this._visibleRect });
+        this._firstLayout = false;
+    };
+    
+    function range (from, to) {
+        var result = new Array(to - from);
+        for (var idx = 0; from <= to; from++, idx++) {
+            result[idx] = from;
+        };
+        return result;
+    }
+    
+    function removeRange (array, from, to) {
+        var p = uki.binarySearch(from, array),
+            initialP = p;
+        while (array[p] <= to) p++;
+        if (p > initialP) array.splice(initialP, p - initialP);
+    }
+    
+    this._toggleSelection = function(p) {
+        var indexes = [].concat(this._selectedIndexes);
+        var addTo = uki.binarySearch(p, indexes);
+        if (indexes[addTo] == p) {
+            indexes.splice(addTo, 1);
+        } else {
+            indexes.splice(addTo, 0, p);
+        }
+        this.selectedIndexes(indexes);
+    };
+    
+    this._scrollableParentScroll = function() {
+        if (this._throttle) {
+            if (this._throttleStarted) return;
+            this._throttleStarted = true;
+            setTimeout(uki.proxy(function() {
+                this._throttleStarted = false;
+                this.layout();
+            }, this), this._throttle);
+        } else {
+            this.layout();
+        }
+    };
+    
+    this._relayoutParent = function() {
+        if (!this._scrollableParent) return;
+        var c = this;
+        while ( c && c != this._scrollableParent) {
+            c._needsLayout = true;
+            c = c.parent();
+        }
+        c.layout();
+    };
+    
+    
+    this._updateRectOnDataChnage = function() {
+        this.rect(this._parentRect);
+    };
+    
+    this.keyPressEvent = function() {
+        var useKeyPress = /mozilla/i.test( ua ) && !(/(compatible|webkit)/i).test( ua );
+        return useKeyPress ? 'keypress' : 'keydown';
+    };
+    
+    this._bindSelectionEvents = function() {
+        this.bind('mousedown', this._mousedown);
+        this.bind('mouseup', this._mouseup);
+        this.bind(this.keyPressEvent(), this._keypress);
+    };
+    
+    this._mouseup = function(e) {
+        if (!this._multiselect) return;
+        
+        var o = uki.dom.offset(this._dom),
+            y = e.pageY - o.y,
+            p = y / this._rowHeight << 0;
+            
+        if (this._selectionInProcess && this._lastClickIndex == p && this.isSelected(p)) this.selectedIndexes([p]);
+        this._selectionInProcess = false;
+    };
+    
+    this._mousedown = function(e) {
+        var o = uki.dom.offset(this._dom),
+            y = e.pageY - o.y,
+            p = y / this._rowHeight << 0,
+            indexes = this._selectedIndexes;
+
+        if (this._multiselect) {
+            this._selectionInProcess = false;
+            if (e.shiftKey && indexes.length > 0) {
+                if (this.isSelected(p)) {
+                    indexes = [].concat(indexes);
+                    removeRange(indexes, Math.min(p+1, this._lastClickIndex), Math.max(p-1, this._lastClickIndex));
+                    this.selectedIndexes(indexes);
+                } else {
+                    this.selectedIndexes(range(
+                        Math.min(p, indexes[0]),
+                        Math.max(p, indexes[indexes.length - 1])
+                    ));
+                }
+            } else if (e.metaKey) {
+                this._toggleSelection(p);
+            } else {
+                if (!this.isSelected(p)) {
+                    this.selectedIndexes([p]);
+                } else {
+                    this._selectionInProcess = true;
+                }
+            }
+        } else {
+            this.selectedIndexes([p]);
+        }
+        this._lastClickIndex = p;
+    };    
+    
+    this._keypress = function(e) {
+        var indexes = this._selectedIndexes,
+            nextIndex = -1;
+        if (e.which == 38 || e.keyCode == 38) { // UP
+            nextIndex = Math.max(0, this._lastClickIndex - 1);
+        } else if (e.which == 40 || e.keyCode == 40) { // DOWN
+            nextIndex = Math.min(this._data.length-1, this._lastClickIndex + 1);
+        }
+        if (nextIndex > -1 && nextIndex != this._lastClickIndex) {
+            if (e.shiftKey) {
+                if (this.isSelected(nextIndex)) {
+                    this._toggleSelection(this._lastClickIndex);
+                } else {
+                    this._toggleSelection(nextIndex);
+                }
+            } else {
+                this.selectedIndex(nextIndex);
+            }
+            this._lastClickIndex = nextIndex;
+            e.preventDefault();
+        }
+    };
+    
+    this._createDom = function() {
+        this._dom = uki.createElement('div', this.defaultCss + 'overflow:hidden');
+        
+        var packDom = uki.createElement('div', 'position:absolute;left:0;top:0px;width:100%;overflow:hidden');
+        this._packs = [
+            {
+                dom: packDom,
+                itemTo: 0,
+                itemFrom: 0
+            },
+            {
+                dom: packDom.cloneNode(false),
+                itemTo: 0,
+                itemFrom: 0
+            }
+        ];
+        this._dom.appendChild(this._packs[0].dom);
+        this._dom.appendChild(this._packs[1].dom);
+        
+        this._initFocusable();
+        this._bindSelectionEvents();
+    };
+    
+    this._setSelected = function(position, state) {
+        var item = this._itemAt(position);
+        if (item) this._render.setSelected(item, this._data[position], state, this.hasFocus());
+    };
+    
+    this._scrollToPosition = function(position) {
+        if (!this._visibleRect) return;
+        var maxY, minY;
+        maxY = (position+1)*this._rowHeight;
+        minY = position*this._rowHeight;
+        if (maxY >= this._visibleRect.maxY()) {
+            this._scrollableParent.scroll(0, maxY - this._visibleRect.maxY());
+        } else if (minY < this._visibleRect.y) {
+            this._scrollableParent.scroll(0, minY - this._visibleRect.y);
+        }
+        this.layout();
+    };
+    
+    this._itemAt = function(position) {
+        if (position < this._packs[1].itemTo && position >= this._packs[1].itemFrom) {
+            return this._packs[1].dom.childNodes[position - this._packs[1].itemFrom];
+        } else if (position < this._packs[0].itemTo && position >= this._packs[0].itemFrom) {
+            return this._packs[0].dom.childNodes[position - this._packs[0].itemFrom];
+        }
+        return null;
+    };
+    
+    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);
+        for (i=itemFrom; i < itemTo; i++) {
+            html[html.length] = this._rowTemplate.render({ 
+                height: this._rowHeight, 
+                text: this._render.render(this._data[i], rect, i)
+            });
+            rect.y += this._rowHeight;
+        };
+        pack.dom.innerHTML = html.join('');
+        pack.itemFrom = itemFrom;
+        pack.itemTo   = itemTo;
+        pack.dom.style.top = itemFrom*this._rowHeight + 'px';
+        this._restorePackSelection(pack, itemFrom, itemTo);
+    };
+    
+    //   xxxxx    |    xxxxx  |  xxxxxxxx  |     xxx
+    //     yyyyy  |  yyyyy    |    yyyy    |   yyyyyyy
+    this._restorePackSelection = function(pack) {
+        var indexes = this._selectedIndexes;
+        
+        if (
+            (indexes[0] <= pack.itemFrom && indexes[indexes.length - 1] >= pack.itemFrom) || // left index
+            (indexes[0] <= pack.itemTo   && indexes[indexes.length - 1] >= pack.itemTo) || // right index
+            (indexes[0] >= pack.itemFrom && indexes[indexes.length - 1] <= pack.itemTo) // within
+        ) {
+            var currentSelection = uki.binarySearch(pack.itemFrom, indexes);
+            currentSelection = Math.max(currentSelection, 0);
+            while(indexes[currentSelection] !== null && indexes[currentSelection] < pack.itemTo) {
+                var position = indexes[currentSelection] - pack.itemFrom;
+                this._render.setSelected(pack.dom.childNodes[position], this._data[position], true, this.hasFocus());
+                currentSelection++;
+            }
+        }
+    };
+    
+    this._swapPacks = function() {
+        var tmp = this._packs[0];
+        this._packs[0] = this._packs[1];
+        this._packs[1] = tmp;
+    };
+    
+    this._normalizeRect = function(rect) {
+        rect = Base._normalizeRect.call(this, rect);
+        // if (rect.height != this._rowHeight * this._data.length) {
+        //     rect = new Rect(rect.x, rect.y, rect.width, this._rowHeight * this._data.length);
+        // }
+        if (rect.height < this._rowHeight * this._data.length) {
+            rect = new Rect(rect.x, rect.y, rect.width, this._rowHeight * this._data.length);
+        }
+        return rect;
+    };
+    
+    this._layoutDom = function(rect) {
+        if (!this._scrollableParent) {
+            this._scrollableParent = uki.view.scrollableParent(this);
+            this._scrollableParent.bind('scroll', uki.proxy(this._scrollableParentScroll, this));
+        }
+        
+        var totalHeight = this._rowHeight * this._data.length,
+            scrollableParent = this._scrollableParent;
+
+        this._visibleRect = uki.view.visibleRect(this, scrollableParent);
+        
+        var prefferedPackSize = CEIL((this._visibleRect.height + this._visibleRectExt*2) / this._rowHeight),
+        
+            minVisibleY  = MAX(0, this._visibleRect.y - this._visibleRectExt),
+            maxVisibleY  = MIN(totalHeight, this._visibleRect.maxY() + this._visibleRectExt),
+            minRenderedY = this._packs[0].itemFrom * this._rowHeight,
+            maxRenderedY = this._packs[1].itemTo * this._rowHeight,
+            
+            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
+            (minVisibleY < minRenderedY && this._packs[0].itemTo * this._rowHeight < this._visibleRect.maxY()) // need to render above, and pack 1 is not enough to cover the area
+            // || prefferedPackSize is not enough to cover the area above/below, can this actually happen?
+        ) { 
+            // this happens a) on first render b) on scroll jumps c) on container resize
+            // render both packs, move them to be at the center of visible area
+            // startAt = minVisibleY + (maxVisibleY - minVisibleY - prefferedPackSize*this._rowHeight*2) / 2;
+            startAt = minVisibleY - this._visibleRectExt / 2;
+            itemFrom = MAX(0, Math.round(startAt / this._rowHeight));
+            itemTo = MIN(this._data.length, itemFrom + prefferedPackSize);
+            
+            this._renderPack(this._packs[0], itemFrom, itemTo);
+            this._renderPack(this._packs[1], itemTo, itemTo);
+            // this._renderPack(this._packs[1], itemTo, MIN(this._data.length, itemTo + prefferedPackSize));
+        } else if (maxVisibleY > maxRenderedY && this._packs[1].itemTo > this._packs[1].itemFrom) { // we need to render below current area
+            // this happens on normal scroll down
+            // re-render bottom, swap
+            itemFrom = this._packs[1].itemTo;
+            itemTo   = MIN(this._data.length, this._packs[1].itemTo + prefferedPackSize);
+            
+            this._renderPack(this._packs[0], itemFrom, itemTo);
+            this._swapPacks();
+        } else if (maxVisibleY > maxRenderedY) { // we need to render below current area
+            itemFrom = this._packs[0].itemTo;
+            itemTo   = MIN(this._data.length, this._packs[1].itemTo + prefferedPackSize);
+            
+            this._renderPack(this._packs[1], itemFrom, itemTo);
+        } else if (minVisibleY < minRenderedY) { // we need to render above current area
+            // this happens on normal scroll up
+            // re-render top, swap
+            itemFrom = MAX(this._packs[0].itemFrom - prefferedPackSize, 0);
+            itemTo   = this._packs[0].itemFrom;
+            
+            this._renderPack(this._packs[1], itemFrom, itemTo);
+            this._swapPacks();
+        } else {
+            updated = false;
+        }
+        if (updated && /MSIE 7/.test(ua)) this.dom().className += '';
+    };
+    
+    this._bindToDom = function(name) {
+        return Focusable._bindToDom.call(this, name) || Base._bindToDom.call(this, name);
+    };
+    
+    this._focus = function(e) {
+        Focusable._focus.call(this, e);
+        if (this._selectedIndexes.length == 0 && this._data.length > 0) {
+            this.selectedIndexes([0]);
+        } else {
+            this.selectedIndexes(this.selectedIndexes());
+        }
+    };
+    
+    this._blur = function(e) {
+        Focusable._blur.call(this, e);
+        this.selectedIndexes(this.selectedIndexes());
+    };
+    
+});
+
+uki.Collection.addAttrs(['data','selectedIndex']);
+
+uki.view.declare('uki.view.ScrollableList', uki.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 selectedIndexes selectedIndex selectedIndexes selectedRows multiselect contentDraggable draggable textSelectable'.split(' '), 
+        function(i, name) {
+            uki.delegateProp(this, name, '_list');
+        }, this);
+    
+});
+
+include('list/render.js');

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

@@ -0,0 +1,113 @@
+uki.view.declare('uki.view.Popup', uki.view.Container, function(Base) {
+    
+    this._setup = function() {
+        Base._setup.call(this);
+        uki.extend(this, {
+            _offset: 2,
+            _relativeTo: null,
+            _horizontal: false,
+            _flipOnResize: true,
+            _defaultBackground: 'theme(popup-normal)'
+        });
+    };
+    
+    this._createDom = function() {
+        Base._createDom.call(this);
+        this.hideOnClick(true);
+    };
+    
+    uki.addProps(this, ['offset', 'relativeTo', 'horizontal', 'flipOnResize']);
+    
+    this.hideOnClick = function(state) {
+        if (state === undefined) return this._clickHandler;
+        if (state != !!this._clickHandler) {
+            if (state) {
+                this._clickHandler = this._clickHandler || uki.proxy(function(e) {
+                    if (uki.dom.contains(this._relativeTo.dom(), e.target)) return;
+                    if (uki.dom.contains(this.dom(), e.target)) return;
+                    this.hide();
+                }, this);
+                uki.dom.bind(doc.body, 'mousedown', this._clickHandler);
+                uki.dom.bind(root, 'resize', this._clickHandler);
+            } else {
+                uki.dom.unbind(doc.body, 'mousedown', this._clickHandler);
+                uki.dom.unbind(root, 'resize', this._clickHandler);
+                this._clickHandler = false;
+            }
+        }
+        return this;
+    };
+    
+    this.toggle = function() {
+        if (this.parent() && this.visible()) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    };
+    
+    this.show = function() {
+        this.visible(true);
+        if (!this.parent()) {
+            new uki.Attachment( root, this );
+        } else {
+            this.rect(this._recalculateRect());
+            this.layout(this._rect);
+        }
+        this.trigger('toggle', { source: this });
+    };
+    
+    this.hide = function() {
+        this.visible(false);
+        this.trigger('toggle', { source: this });
+    };
+    
+    this.parentResized = function() {
+        this.rect(this._recalculateRect());
+    };
+    
+    this._resizeSelf = function(newRect) {
+        this._rect = this._normalizeRect(newRect);
+        return true;
+    };
+    
+    this._layoutDom = function(rect) {
+        return Base._layoutDom.call(this, rect);
+    };
+    
+    this._recalculateRect = function() {
+        if (!this.visible()) return this._rect;
+        var relativeOffset = uki.dom.offset(this._relativeTo.dom()),
+            relativeRect = this._relativeTo.rect(),
+            rect = this.rect().clone(),
+            attachment = uki.view.top(this),
+            attachmentRect = attachment.rect(),
+            attachmentOffset = uki.dom.offset(attachment.dom()),
+            position = new Point(),
+            hOffset = this._horizontal ? this._offset : 0,
+            vOffset = this._horizontal ? 0 : this._offset;
+
+        relativeOffset.offset(-attachmentOffset.x, -attachmentOffset.y);
+
+        if (this._anchors & ANCHOR_RIGHT) {
+            position.x = relativeOffset.x + relativeRect.width - (this._horizontal ? 0 : rect.width) + hOffset;
+        } else {
+            position.x = relativeOffset.x - (this._horizontal ? rect.width : 0) - hOffset;
+        }
+        
+        if (this._anchors & ANCHOR_BOTTOM) {
+            position.y = relativeOffset.y + (this._horizontal ? relativeRect.height : 0) - rect.height - vOffset;
+        } else {
+            position.y = relativeOffset.y + (this._horizontal ? 0 : relativeRect.height) + vOffset;
+        }
+        
+        return new Rect(position.x, position.y, rect.width, rect.height);
+    };
+});
+
+
+uki.each(['show', 'hide', 'toggle'], function(i, name) {
+    uki.fn[name] = function() {
+        this.each(function() { this[name](); });
+    };
+});

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

@@ -0,0 +1,57 @@
+include('checkbox.js');
+
+(function() {
+    var manager = uki.view.declare('uki.view.Radio', uki.view.Checkbox, function(base) {
+        
+        this._backgroundPrefix = 'radio-';
+        
+        this.group = uki.newProp('_group', function(g) {
+            manager.unregisterGroup(this);
+            this._group = g;
+            manager.registerGroup(this);
+            manager.clearGroup(this);
+        });
+
+        this.value = this.checked = uki.newProp('_checked', function(state) {
+            this._checked = !!state;
+            if (state) manager.clearGroup(this);
+            this._updateBg();
+        });
+
+        this._mouseup = function() {
+            if (!this._down) return;
+            this._down = false;
+            if (!this._checked && !this._disabled) {
+                this.checked(!this._checked);
+                this.trigger('change', {checked: this._checked, source: this});
+            }
+        }
+    });
+    
+    
+    manager.groups = {};
+
+    manager.registerGroup = function(radio) {
+        var group = radio.group();
+        if (!manager.groups[group]) {
+            manager.groups[group] = [radio];
+        } else {
+            manager.groups[group].push(radio);
+        }
+    };
+
+    manager.unregisterGroup = function(radio) {
+        var group = radio.group();
+        if (manager.groups[group]) manager.groups[group] = uki.grep(manager.groups[group], function(registered) {
+            return registered != radio;
+        });
+    };
+
+    manager.clearGroup = function(radio) {
+        uki.each(manager.groups[radio.group()] || [], function(i, registered) {
+            if (registered == radio) return;
+            if (registered.checked()) registered.checked(false);
+        });
+    };    
+    
+})();