uki 1.0.0

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

@@ -0,0 +1,79 @@
+
+
+uki.view.declare('uki.more.view.SplitTable', uki.view.Table, function(base) {
+    var Rect = uki.geometry.Rect;
+    
+    
+    this._defaultHandlePosition = 200;
+    
+    this._createDom = function() {
+        Base._createDom.call(this);
+        var scrollWidth = uki.view.ScrollPane.initScrollWidth(),
+            bodyHeight = this.rect().height - this._headerHeight - scrollWidth,
+            contents = uki(
+            [
+                { 
+                    view: 'table.Header', 
+                    rect: new Rect(0, 0, this.rect().width, this._headerHeight), 
+                    anchors: 'top left right', 
+                    className: 'table-header' 
+                },
+                {
+                    view: 'ScrollPane',
+                    rect: new Rect(0, this._headerHeight, this.rect().width, bodyHeight),
+                    anchors: 'left top right bottom',
+                    className: 'table-v-scroll',
+                    childViews: [
+                        { 
+                            view: 'SplitPane', 
+                            rect: new Rect(this.rect().width, bodyHeight), 
+                            anchors: 'left top',
+                            handlePosition: this._defaultHandlePosition,
+                            handleWidth: 1,
+                            leftChildViews: [
+                                { 
+                                    view: 'List', 
+                                    rect: new Rect(this._defaultHandlePosition, bodyHeight), 
+                                    anchors: 'left top right bottom',
+                                    className: 'table-list-left' 
+                                }
+                            ],
+                            rightChildViews: [
+                                { 
+                                    view: 'ScrollPane', 
+                                    rect: new Rect(this.rect().width - this._defaultHandlePosition - 1, bodyHeight + scrollWidth), 
+                                    scrollableV: false,
+                                    scrollableH: true,
+                                    anchors: 'left top right bottom',
+                                    className: 'table-h-scroll',
+                                    childViews: [
+                                        { 
+                                            view: 'List', 
+                                            rect: new Rect(this.rect().width - this._defaultHandlePosition - 1, bodyHeight + scrollWidth), 
+                                            anchors: 'left top rect bottom' 
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                },
+                { 
+                    view: 'ScrollPane', 
+                    rect: new Rect(this._defaultHandlePosition + 1, bodyHeight + this._headerHeight, this.rect().width - this._defaultHandlePosition - 1, scrollWidth), 
+                    anchors: 'left bottom right',
+                    scrollableH: true,
+                    scrollableV: false,
+                    scrollH: true,
+                    className: 'table-h-scroll-bar'
+                 }
+            ]).appendTo(this);
+            
+        this._verticalScroll = uki('ScrollPane[className=table-v-scroll]', this)[0];
+        this._horizontalScroll = uki('ScrollPane[className=table-h-scroll]', this)[0];
+        this._horizontalScrollBar = uki('ScrollPane[className=table-h-scroll-bar]', this)[0];
+        this._leftList = uki('List:eq(0)', this)[0];
+        this._rightList = uki('List:eq(1)', this)[0];
+        this._splitPane = uki('SplitPane', this)[0];
+    };
+});

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

@@ -0,0 +1,24 @@
+uki.view.declare('uki.more.view.ToggleButton', uki.view.Button, function(Base) {
+    
+    this._setup = function() {
+        Base._setup.call(this);
+        this._focusable = false;
+    };
+    
+    this.value = this.checked = uki.newProp('_checked', function(state) {
+        this._checked = !!state;
+        this._updateBg();
+    });
+    
+    this._updateBg = function() {
+        var name = this._disabled ? 'disabled' : this._down || this._checked ? 'down' : this._over ? 'hover' : 'normal';
+        this._backgroundByName(name);
+    };
+    
+    this._mouseup = function(e) {
+        if (!this._down) return;
+        this._down = false;
+        if (!this._disabled) this.checked(!this.checked())
+    };
+    
+});

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

@@ -0,0 +1,53 @@
+// tree list render
+uki.more.view.treeList.Render = uki.newClass(uki.view.list.Render, new function() {
+    this._parentTemplate = new uki.theme.Template(
+        '<div class="${classPrefix}-row ${classPrefix}-${opened}" style="margin-left:${indent}px">' + 
+            '<div class="${classPrefix}-toggle"><i class="toggle-tree"></i></div>${text}' +
+        '</div>'
+    );
+
+    this._leafTemplate = new uki.theme.Template(
+        '<div class="${classPrefix}-row" style="margin-left:${indent}px">${text}</div>'
+    );
+    
+    this.initStyles = function() {
+        uki.more.view.treeList.Render.prototype.classPrefix = 'treeList-' + uki.dom.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; } ' +
+            '.${classPrefix}-toggle i { display: block; position:absolute; left: 0; top: 0; width:20px; height:18px; background: url(${imageSrc});} ' +
+            '.${classPrefix}-selected { background: #3875D7; } ' +
+            '.${classPrefix}-selected .${classPrefix}-row { color: #FFF; } ' +
+            '.${classPrefix}-selected i { left: -10px; } ' +
+            '.${classPrefix}-selected-blured { background: #CCCCCC; } ' +
+            '.${classPrefix}-opened i { top: -9px; }'
+        ).render({ 
+            classPrefix: this.classPrefix, 
+            imageSrc: 'i/arrows.png'  // should call uki.image here
+        });
+        uki.dom.createStylesheet(style);
+    };
+
+    this.render = function(row, rect, i) {
+        this.classPrefix || this.initStyles();
+        var text = row.data;
+        if (row.children && row.children.length) {
+            return this._parentTemplate.render({ 
+                text: text, 
+                indent: row.__indent*18 + 22,
+                classPrefix: this.classPrefix,
+                opened: row.__opened ? 'opened' : ''
+            });
+        } else {
+            return this._leafTemplate.render({ 
+                text: text, 
+                indent: row.__indent*18 + 22,
+                classPrefix: this.classPrefix
+            });
+        }
+    };
+    
+    this.setSelected = function(container, data, state, focus) {
+        container.className = !state ? '' : focus ? this.classPrefix + '-selected' : this.classPrefix + '-selected-blured';
+    };
+});

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

@@ -0,0 +1,110 @@
+include('../view.js');
+
+// really basic tree list implementation
+uki.more.view.treeList = {};
+
+uki.more.view.TreeList = uki.newClass(uki.view.List, new function() {
+    var Base = uki.view.List.prototype,
+        proto = this;
+
+    proto.typeName = function() { return 'uki.more.view.TreeList'; };
+    
+    proto._setup = function() {
+        Base._setup.call(this);
+        this._render = new uki.more.view.treeList.Render();
+    };
+    
+    proto.listData = Base.data;
+
+    proto.data = uki.newProp('_treeData', function(v) {
+        this._treeData = v;
+        this.listData(this._treeNodeToListData(v));
+    });
+
+    proto._treeNodeToListData = function(node, indent) {
+        indent = indent || 0;
+        return uki.map(node, function(row) {
+            row.__indent = indent;
+            return row;
+        });
+    };
+
+    proto.toggle = function(index) {
+        this._data[index].__opened ? this.close(index) : this.open(index);
+    };
+    
+    function recursiveLength (item) {
+        var children = item.children,
+            length = children.length;
+            
+        for (var i=0; i < children.length; i++) {
+            if (children[i].__opened) length += recursiveLength(children[i]);
+        };
+        return length;
+    }
+
+    proto.open = function(index, _skipUpdate) {
+        var selectedIndex = this._selectedIndex,
+            item = this._data[index],
+            children = item.children;
+            
+        if (!children || !children.length || (item.__opened && !_skipUpdate)) return 0;
+        var length = children.length;
+
+        item.__opened = true;
+        this._data.splice.apply(this._data, [index+1, 0].concat( this._treeNodeToListData(children, item.__indent + 1) ));
+        
+        for (var i=children.length - 1; i >= 0 ; i--) {
+            if (this._data[index+1+i].__opened) {
+                length += this.open(index+1+i, true);
+            }
+        };
+        if (!_skipUpdate) {
+            this.listData(this._data);
+            this.selectedIndex(selectedIndex <= index ? selectedIndex : selectedIndex + length);
+        }
+        return length;
+    };
+
+    proto.close = function(index) {
+        var selectedIndex = this._selectedIndex,
+            item = this._data[index],
+            children = item.children;
+            
+        if (!children || !children.length || !item.__opened) return;
+        var length = recursiveLength(item);
+
+        item.__opened = false;
+        this._data.splice(index+1, length);
+        this.listData(this._data);
+        this.selectedIndex(
+                            selectedIndex <= index ? selectedIndex : 
+                            selectedIndex >= index + length ? index - length :
+                            index
+                          );
+    };
+
+    proto._mousedown = function(e) {
+        if (e.domEvent.target.className.indexOf('toggle-tree') > -1) {
+            var o = uki.dom.offset(this._dom),
+                y = e.domEvent.pageY - o.y,
+                p = y / this._rowHeight << 0;
+            this.toggle(p);
+        } else {
+            Base._mousedown.call(this, e);
+        }
+    };
+
+    proto._keypress = function(e) {
+        Base._keypress.call(this, e);
+        e = e.domEvent;
+        if (e.which == 39 || e.keyCode == 39) { // RIGHT
+            this.open(this._selectedIndex);
+        } else if (e.which == 37 || e.keyCode == 37) { // LEFT
+            this.close(this._selectedIndex);
+        }
+    };
+
+});
+
+include('treeList/render.js');

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

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

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

@@ -0,0 +1 @@
+uki.more = {};

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

@@ -0,0 +1,4 @@
+include('uki-more/more/view/treeList.js');
+include('uki-more/more/view/multiselectList.js');
+include('uki-more/more/view/toggleButton.js');
+include('uki-more/more/view/radioButton.js');

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

@@ -0,0 +1,15 @@
+/*!
+ * uki JavaScript Library
+ * Licensed under the MIT license http://ukijs.org/LICENSE
+ *
+ * Copyright (c) 2010 Vladimir Kolesnikov
+ *
+ * Parts of code derived from jQuery JavaScript Library
+ * Copyright (c) 2009 John Resig
+ */
+(function() {
+    
+include('uki-core.js');
+include('uki-view.js');
+
+}());