uki 1.1.1 → 1.1.2

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

@@ -1,2 +1,4 @@
 include('../more.js');
-uki.more.view = {};
+uki.more.view = {};
+
+uki.viewNamespaces.push('uki.more.view.');

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

@@ -0,0 +1,30 @@
+include('../view.js');
+
+uki.view.declare('uki.more.view.Form', uki.view.Container, function(Base) {
+    
+    this._setup = function() {
+        Base._setup.call(this);
+        uki.extend(this, {
+            _method: 'GET',
+            _action: ''
+        });
+    };
+    
+    this.action = uki.newProp('_action', function(action) {
+      this._dom.action = this._action = action;
+    });
+    this.method = uki.newProp('_method', function(method) {
+      this._dom.method = this._method = method;
+    });
+    
+    this.submit = function() { this._dom.submit(); }
+    this.reset = function() { this._dom.reset(); }
+    
+    this._createDom = function() {
+        this._dom = uki.createElement('form', Base.defaultCss);
+        this._initClassName();
+        this._dom.action = this._action;
+        this._dom.method = this._method;
+    };
+   
+});

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

@@ -0,0 +1,59 @@
+include('../view.js');
+
+uki.view.declare('uki.more.view.HTile', uki.view.VFlow, function(Base) {
+
+    function getTileGrid(childViews, maxWidth) {
+        var ti = {};
+
+        ti.width = uki.reduce(0, childViews, function(max, e) {
+            return (e.visible() && e.width() > max) ? e.width() : max
+        });
+
+        ti.height = uki.reduce(0, childViews, function(max, e) {
+            return (e.visible() && e.height() > max) ? e.height() : max
+        });
+
+        ti.across = Math.floor(maxWidth / ti.width);
+        if (ti.across <= 0 && ti.width >= 0) {
+            ti.across = 1
+        }
+
+        ti.down = Math.ceil(childViews.length / ti.across);
+
+        return ti;
+    }
+
+    this.contentsSize = function() {
+        var ti = getTileGrid(this._childViews, this.parent().width());
+        return new Size(this.contentsWidth(), ti.height * ti.down);
+    };
+
+    this._resizeChildViews = function(oldRect) {
+        var row = 0, col = 0;
+        var ti = getTileGrid(this._childViews, this.parent().width());
+        var view;
+
+        for (var i = 0, childViews = this.childViews(); i < childViews.length; i++) {
+            view = childViews[i];
+
+            view.parentResized(oldRect, this._rect);
+
+            view.rect().x = col * ti.width;
+            view.rect().y = row * ti.height;
+
+            if (view.visible()) {
+                if (this._hidePartlyVisible) {
+                    view.visible(view._rect.width + ti.width <= this._rect.width);
+                }
+                col++;
+                if (col >= ti.across) {
+                    col = 0;
+                    row++;
+                }
+            }
+        }
+        this.rect().width = col * ti.width;
+        this.rect().height = row * ti.height
+    };
+
+});

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

@@ -0,0 +1,3 @@
+include('nativeControl.js');
+
+uki.view.declare('uki.more.view.NativeButton', uki.more.view.NativeControl, function(Base) {});

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

@@ -0,0 +1,38 @@
+include('nativeControl.js');
+
+uki.view.declare('uki.more.view.NativeCheckbox', uki.more.view.NativeControl, function(Base) {
+    this.checked = function(value) {
+        if (value === undefined) return this._dom.checked;
+        this._dom.checked = this._dom.defaultChecked = value;
+        return this;
+    };
+    
+    this.value = this.checked;
+    
+    var inputSize;
+    function initInputSize () {
+        if (!inputSize) {
+            var input = uki.createElement('input', 'width:auto;height:auto;display:block;');
+            input.type = 'checkbox';
+            uki.dom.probe(input, function(input) {
+                inputSize = [input.offsetWidth, input.offsetHeight];
+            });
+        }
+    }
+    
+    this._setup = function() {
+        Base._setup.call(this);
+        this._type = 'checkbox';
+    };
+    
+    this._layoutDom = function(rect) {
+        initInputSize();
+        var l = {
+                left: rect.x + (rect.width - inputSize[0]) / 2,
+                top:  rect.y + (rect.height - inputSize[1]) / 2
+            };
+        
+        this._lastLayout = uki.dom.layout(this._dom.style, l, this._lastLayout);
+        return true;
+    };
+});

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

@@ -0,0 +1,40 @@
+include('../view.js');
+
+uki.view.declare('uki.more.view.NativeControl', uki.view.Base, uki.view.Focusable, function(Base, Focusable) {
+    this._setup = function() {
+        Base._setup.call(this);
+        this._type = 'button';
+    };
+    
+    uki.delegateProp(this, 'disabled', '_dom');
+    uki.delegateProp(this, 'value', '_dom');
+    
+    this.domName = function(name) {
+        if (name === undefined) return this._dom.name;
+        this._dom.setAttribute('name', name);
+        this._dom.name = name;
+        this._initClassName();
+        
+        if (/MSIE 6/.test(navigator.userAgent)) {
+            var clone = document.createElement('<input name="' + name + '" />');
+            clone.type = this._type; // type is not copied
+            clone.mergeAttributes(this._dom);
+            if (this._dom.parentNode) {
+                this._dom.parentNode.replaceChild(clone, this._dom);
+            }
+            this._dom = clone;
+        }
+        
+        return this;
+    };
+    
+    this._createDom = function() {
+        this._dom = uki.createElement('input', 'position:absolute;z-index:100;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;');
+        this._dom.type = this._type;
+        this._initFocusable(this._dom);
+    };
+    
+    this._bindToDom = function(name) {
+        return Focusable._bindToDom.call(this, name) || Base._bindToDom.call(this, name);
+    };
+});

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

@@ -0,0 +1,78 @@
+include('nativeControl.js');
+
+uki.view.declare('uki.more.view.NativeInput', uki.view.Base, uki.view.Focusable, function(Base,Focusable) {
+    this._createDom = function() {
+        Base._createDom.call(this);
+        this._dom.innerHTML = '<input type="text" style="position:absolute;z-index:100;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;width:100%;height:100%;" />'
+        this._input = this._dom.firstChild;
+        this._initFocusable(this._input);
+    };
+    
+    uki.delegateProp(this, 'name', '_input');
+    uki.delegateProp(this, 'disabled', '_input');
+    uki.delegateProp(this, 'value', '_input');
+    
+    this._layoutDom = function(rect) {
+        Base._layoutDom.apply(this, arguments);
+        this._lastInputLayout = uki.dom.layout(this._input.style, {width: rect.width}, this._lastInputLayout);
+        if (this._placeholderDom) {
+            this._placeholderDom.style.lineHeight = this._rect.height + 'px';
+        }
+    };
+    
+    function getInputOffset (input) {
+        var clone1 = input.cloneNode(input),
+            clone2 = input.cloneNode(input);
+        clone1.style.cssText += ';padding:0;border:0;overflow:hidden;width:auto;-moz-box-sizing:auto;-webkit-box-sizing:auto;box-sizing:auto;';
+        clone2.style.cssText += ';width:auto;-moz-box-sizing:auto;-webkit-box-sizing:auto;box-sizing:auto;'
+        return (uki.dom.probe(clone2, function(clone) { return clone.offsetWidth; }) - 
+            uki.dom.probe(clone1, function(clone) { return clone.offsetWidth; }))/2;
+    }
+    
+    function nativePlaceholder (node) {
+        return typeof node.placeholder == 'string';
+    }
+    
+    this.placeholder = uki.newProp('_placeholder', function(v) {
+        this._placeholder = v;
+        if (nativePlaceholder(this._dom)) {
+            this._dom.placeholder = v;
+        } else {
+            if (!this._placeholderDom) {
+                this._placeholderDom = uki.createElement('div', this.defaultCss + 'z-index:103;color:#999;cursor:text', v);
+                this._dom.appendChild(this._placeholderDom);
+                this._updatePlaceholderVis();
+                uki.each(['fontSize', 'fontFamily', 'fontWeight'], function(i, name) {
+                    this._placeholderDom.style[name] = this.style(name);
+                }, this);
+                this._placeholderDom.style.left = getInputOffset(this._input) + 'px';
+                
+                uki.dom.bind(this._placeholderDom, 'mousedown', uki.proxy(function(e) { 
+                    // e.preventDefault(); 
+                    setTimeout(uki.proxy(this.focus, this), 1);
+                }, this));
+            } else {
+                this._placeholderDom.innerHTML = v;
+            }
+        }
+    });    
+    
+    this._updatePlaceholderVis = function() {
+        if (this._placeholderDom) this._placeholderDom.style.display = this.value() ? 'none' : 'block';
+    };
+    
+    this._bindToDom = function(name) {
+        return Focusable._bindToDom.call(this, name) || Base._bindToDom.call(this, name);
+    };
+    
+    this._focus = function(e) {
+        if (this._placeholderDom) this._placeholderDom.style.display = 'none';
+        Focusable._focus.call(this, e);
+    };
+    
+    this._blur = function(e) {
+        this._updatePlaceholderVis();
+        Focusable._blur.call(this, e);
+    };
+    
+});

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

@@ -0,0 +1,29 @@
+include('nativeControl.js');
+
+uki.view.declare('uki.more.view.NativeSelect', uki.more.view.NativeControl, function(Base) {
+    
+    this._createDom = function() {
+        this._dom = uki.createElement('select', 'position:absolute;z-index:100;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;');
+        this._initClassName();
+        this._initFocusable(this._dom);
+    };
+    
+    uki.delegateProp(this, 'name', '_dom');
+    uki.delegateProp(this, 'disabled', '_dom');
+    uki.delegateProp(this, 'value', '_dom');
+    
+    this.options = function(val) {
+        if (val === undefined) return uki.map(this._dom.getElementsByTagName('option'), function(option) {
+            return { value: option.getAttribute('value'), html: option.innerHTML };
+        });
+                              
+        this._dom.innerHTML = '';
+        uki.each(val, function(i, option) {
+            var node = uki.createElement('option', '', option.text);
+            node.value = option.value;
+            node.selected = option.selected;
+            this._dom.appendChild(node);
+        }, this);
+    };
+    
+});

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

@@ -7,7 +7,7 @@ uki.view.declare('uki.more.view.RadioButton', uki.more.view.ToggleButton, functi
         manager.unregisterGroup(this);
         this._group = g;
         manager.registerGroup(this);
-        manager.clearGroup(this);
+        if (this.checked()) manager.clearGroup(this);
     });
     
     this.value = this.checked = uki.newProp('_checked', function(state) {

data/frameworks/uki/src/uki-more/more/view/select-theme.js

@@ -0,0 +1,55 @@
+include("../view.js");
+
+(function() {
+    function selectHandle (image, css) {
+        return new uki.background.CssBox((css || '') + 'background: url(' + uki.theme.imageSrc(image) + '); background-position: 100% 50%; background-repeat: no-repeat;');
+    }
+    
+    var theme = uki.extend({}, uki.theme.Base, {
+        backgrounds: {
+            // 'select-list': function() {
+            //     
+            // },
+            // 'select-popup': function() {
+            //     
+            // },
+            'select-normal': function() {
+                return new uki.background.Multi(
+                    selectHandle('select-handle-normal'),
+                    uki.theme.background('button-normal')
+                );
+            },
+            'select-hover': function() {
+                return new uki.background.Multi(
+                    selectHandle('select-handle-normal'),
+                    uki.theme.background('button-hover')
+                );
+            },
+            'select-checked-normal': function() {
+                return new uki.background.Multi(
+                    selectHandle('select-handle-normal'),
+                    uki.theme.background('button-down')
+                );
+            },
+            'select-disabled': function() {
+                return new uki.background.Multi(
+                    selectHandle('select-handle-normal', 'opacity:0.4;'),
+                    uki.theme.background('button-disabled')
+                );
+            },
+            
+            'select-popup': function() {
+                return uki.theme.background('popup-normal');
+            }
+        },
+        
+        imageSrcs: {
+            'select-handle-normal': function() {
+                return ["select-down-m.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAABkCAYAAABtnKvPAAAAeUlEQVRo3u3SMQ2AMBAFUCQgAQlIQUKTthq6IhEpOIAOTIWFABPvkr/c8IZ/15VStu6rgcPhcDgcDofD4XA4HA6HnybnvNRsF1ke4yGEoUJrA691379SS4xxavDx1c5TSvMBh08Oegv253A4HA6Hw+FwOBwOh8P/ie9z0RuWFOYPhAAAAABJRU5ErkJggg==", "select-down-m.gif"];
+            }
+        }
+    });
+    theme.backgrounds['select-checked-hover'] = theme.backgrounds['select-checked-normal'];
+    
+    uki.theme.register(theme);
+})();

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

@@ -0,0 +1,208 @@
+include('../view.js');
+
+uki.view.declare('uki.more.view.Select', uki.view.Checkbox, function(Base) {
+    this._backgroundPrefix = 'select-';
+    this._popupBackground = 'theme(select-popup)';
+    this._listBackground = 'theme(select-list)';
+    this._popupOffset = 0;
+    
+    this._setup = function() {
+        Base._setup.call(this);
+        this._inset = new uki.geometry.Inset(0, 20, 0, 4);
+        this._selectFirst = true;
+        this._focusable = true;
+        this._options = [];
+        this._maxPopupHeight = 200;
+        this._lastScroll = 0;
+    };
+    
+    this.Render = uki.newClass(uki.view.list.Render, function(Base) {
+        this.render = function(data, rect, i) {
+            return '<span style="line-height: 22px; text-align: left; white-space: nowrap; margin: 0 4px; cursor: default">' + data + '</span>';
+        }
+        
+        this.setSelected = function(container, data, state, focus) {
+            container.style.backgroundColor = state ? '#3875D7' : '';
+            container.style.color = state ? '#FFF' : '#000';
+        }
+    });
+    
+    this.selectFirst = uki.newProp('_selectFirst');
+    
+    this.opened = function() {
+        return this._popup.visible() && this._popup.parent();
+    };
+    
+    this.popupAnchors = function(v) {
+        if (v === undefined) return this._popup.anchors();
+        this._popup.anchors(v);
+        return this;
+    };
+    
+    this._createDom = function() {
+        Base._createDom.call(this);
+        this.style({ fontWeight: 'normal', textAlign: 'left' });
+        
+        this._label.style.overflow = 'hidden';
+        this._popup = uki(
+            { view: 'Popup', anchors: 'left top', rect: '100 100',  style: {zIndex: 1000}, offset: this._popupOffset,
+                background: this._popupBackground, relativeTo: this, visible: false, 
+                childViews: [
+                    { view: 'ScrollPane', rect: '100 100', anchors: 'left top right bottom', childViews: [
+                        { view: 'List', rect: '100 100', anchors: 'left top right bottom', rowHeight: 22, 
+                            textSelectable: false, focusable: true, background: this._listBackground,
+                            render: new this.Render(), style: { fontSize: '12px' } }
+                    ] }
+                ] }
+        )[0];
+        
+        this._popup.hide();
+        
+        this._list = uki('List', this._popup)[0];
+        this._scroll = uki('ScrollPane', this._popup)[0];
+        
+        this._popup.bind('toggle', uki.proxy(function(e) {
+            this._down = this._popup.visible();
+            if (this._popup.visible()) {
+                this._updateWidth();
+                this._scroll.scrollTop(this._lastScroll);
+            }
+            this._checked = this._popup.visible();
+            this._updateBg();
+        }, this));
+        
+        this.bind(this._list.keyPressEvent(), function(e) {
+            if (this.preventTransfer) {
+                this.preventTransfer = false;
+                return;
+            }
+            if (this._popup.visible()) {
+                this._list.trigger(e.type, e);
+            }
+        });
+        
+        this.bind('blur', function() { 
+            setTimeout(uki.proxy(function() {
+                if (!this._hasFocus && this.opened()) {
+                    this._lastScroll = this._scroll.scrollTop();
+                    this._popup.hide();
+                }
+            }, this), 50)
+        });
+        
+        // refocus on list click
+        this._list.bind('focus', uki.proxy(function() {
+            this._hasFocus = false;
+            this.focus();
+            // setTimeout(uki.proxy(this.focus, this), 5);
+        }, this));
+        
+        this._list.bind('click', uki.proxy(this.selectCurrent, this));
+    };
+    
+    this.contentsSize = function(autosize) {
+        var html = this.html(), size;
+        this.html(this._longestText);
+        size = Base.contentsSize.call(this, autosize);
+        this.html(html);
+        return size;
+    };
+
+    this._keydown = function(e) {
+        if ((e.which == 32 || e.which == 13) && this._popup.visible()) {
+            this.selectCurrent(e);
+        } else if ((e.which == 40 || e.which == 38) && !this._popup.visible()) {
+            this._popup.toggle();
+            e.preventDefault();
+            this.preventTransfer = true;
+        } else {
+            Base._keydown.call(this, e);
+        }
+    };
+    
+    this.selectCurrent = function(e) {
+        if (this.selectedIndex() == -1) {
+            this.text(this._selectFirst && this._options[0] ? this._options[0].text : '');
+        } else {
+            this.text(this._options[this.selectedIndex()].text);
+        }
+        this._lastScroll = this._scroll.scrollTop();
+        this._popup.hide();
+        if (e) this.trigger('change', { source: this });
+    };
+    
+    this.value = function(v) {
+        if (v === undefined) {
+            return this._options[this.selectedIndex()] ? this._options[this.selectedIndex()].value : undefined;
+        } else {
+            var index = -1,
+                option,
+                l = this._options.length,
+                i;
+            for (i=0; i < l; i++) {
+                option = this._options[i];
+                if (option.value == v) {
+                    index = i;
+                    break;
+                }
+            };
+            this.selectedIndex(index);
+            this.selectCurrent();
+        }
+    };
+    
+    this.maxPopupHeight = uki.newProp('_maxPopupHeight');
+    
+    this._updateWidth = function() {
+        if (this._widthCached || !this._options.length) return;
+        var source = this._list.dom().firstChild.firstChild.firstChild, /// omg!
+            html = source.innerHTML;
+            
+        source.innerHTML = this._longestText;
+        this._widthCached = source.offsetWidth + 8;
+        source.innerHTML = html;
+        this._popup.rect(new uki.geometry.Rect(
+            this._popup.rect().x,
+            this._popup.rect().y,
+            Math.max(this._widthCached, this.rect().width),
+            Math.min(this._maxPopupHeight, this._options.length * 22)
+        )).layout();
+    };
+    
+    this.options = uki.newProp('_options', function(o) {
+        this._options = o;
+        this._list
+            .data(uki.map(o, 'text'))
+            .selectedIndex(0);
+        
+        if (this._selectFirst && (o.length > 0)) this.text(o[0].text);
+        this._longestText = '';
+        uki.each(o, function(i, row) {
+            if (row.text.length > this._longestText.length) this._longestText = row.text;
+        }, this);
+        this._widthCached = false;
+        this._lastScroll = 0;
+    });
+    
+    uki.delegateProp(this, 'selectedIndex', '_list');
+    
+    this._updateBg = function() {
+        return Base._updateBg.call(this);
+    };
+    
+    this._mousedown = function(e) {
+        Base._mousedown.call(this, e);
+        if (this.disabled()) return;
+        this._popup.toggle();
+        this.trigger('toggle', { opened: this.opened() });
+        // if (this._popup.visible()) this._list.focus();
+    };
+    
+    this._mouseup = function(e) {
+        if (!this._down) return;
+        this._down = false;
+    };
+    
+});
+
+uki.Collection.addAttrs(['options']);