uki 1.0.0

data/frameworks/uki/src/uki-core/background/css.js

@@ -0,0 +1,37 @@
+include('../background.js');
+include('../image.js');
+
+/**
+ * Writes css properties to targets dom()
+ *
+ * @class
+ */
+uki.background.Css = uki.newClass(new function() {
+    
+    /**#@+ @memberOf uki.background.Css.prototype */
+    this.init = function(options) {
+        this._options = typeof options == 'string' ? {background: options} : options;
+    };
+    
+    this.attachTo = function(comp) {
+        this._comp = comp;
+        this._originalValues = {};
+        
+        uki.each(this._options, function(name, value) {
+            // this._originalValues[name] = dom.style[name];
+            // dom.style[name] = value;
+            this._originalValues[name] = comp.style(name);
+            comp.style(name, value);
+        }, this);
+    };
+    
+    this.detach = function() {
+        if (this._comp) {
+            uki.each(this._options, function(name, value) {
+                this._comp.style(name, this._originalValues[name]);
+            }, this);
+        }
+        
+    };
+    /**#@-*/
+});

data/frameworks/uki/src/uki-core/background/cssBox.js

@@ -0,0 +1,73 @@
+include('../background.js');
+include('../geometry.js');
+
+/**
+ * Adds a div with given cssText to dom()
+ *
+ * @class
+ */
+uki.background.CssBox = uki.newClass(new function() {
+    
+    var cache = {};
+    /** @ignore */
+    function getInsets(options) {
+        if (!cache[options]) {
+            uki.dom.probe(
+                uki.createElement('div', options + ';position:absolute;overflow:hidden;left:-999em;width:10px;height:10px;'), 
+                function(c) {
+                    cache[options] = new Inset(
+                        c.offsetHeight - 10,
+                        c.offsetWidth - 10
+                    );
+                }
+            );
+        }
+        return cache[options];
+    }
+    
+    /**#@+ @memberOf uki.background.CssBox.prototype */
+    
+    this.init = function(options, ext) {
+        this._options = options;
+        ext = ext || {};
+        this._inset = inset = Inset.create(ext.inset) || new Inset();
+        this._insetWidth  = getInsets(options).left + inset.left + inset.right;
+        this._insetHeight = getInsets(options).top + inset.top + inset.bottom;
+
+        this._container = uki.createElement(
+            'div', 
+            options + ';position:absolute;overflow:hidden;z-index:' + (ext.zIndex || '-1') + ';' + 
+            'left:' + inset.left + ';top:' + inset.top + 'px;right:' + inset.right + 'px;bottom:' + inset.bottom + 'px',
+            ext.innerHTML
+        );
+        this._attached = false;
+    };
+    
+    this.attachTo = function(comp) {
+        this._comp = comp;
+        this._comp.dom().appendChild(this._container);
+
+        if (uki.supportNativeLayout) return;
+        
+        this._layoutHandler = this._layoutHandler || uki.proxy(function(e) { this.layout(e.rect); }, this);
+        this._comp.bind('layout', this._layoutHandler);
+        this.layout(this._comp.rect());
+    };
+    
+    this.layout = function(size) {
+        this._prevLayout = uki.dom.layout(this._container.style, {
+            width: size.width - this._insetWidth,
+            height: size.height - this._insetHeight
+        }, this._prevLayout);
+    };
+    
+    this.detach = function() {
+        if (this._comp) {
+            this._comp.dom().removeChild(this._container);
+            if (!uki.supportNativeLayout) this._comp.unbind('layout', this._layoutHandler);
+            this._attached = false;
+        }
+    };
+    
+    /**#@-*/
+});

data/frameworks/uki/src/uki-core/background/multi.js

@@ -0,0 +1,20 @@
+include('../background.js');
+
+/**
+ * @class
+ */
+uki.background.Multi = uki.newClass({
+    init: function() {
+        this._bgs = Array.prototype.slice.call(arguments, 0);
+    },
+    attachTo: function(comp) {
+        for (var i=0; i < this._bgs.length; i++) {
+            this._bgs[i].attachTo(comp);
+        };
+    },
+    detach: function() {
+        for (var i=0; i < this._bgs.length; i++) {
+            this._bgs[i].detach();
+        };
+    }
+});

data/frameworks/uki/src/uki-core/background/null.js

@@ -0,0 +1,10 @@
+include('../background.js');
+
+/**
+ * @class
+ */
+uki.background.Base = uki.background.Null = uki.newClass({
+    init: uki.F,
+    attachTo: uki.F,
+    detach: uki.F
+});

data/frameworks/uki/src/uki-core/background/rows.js

@@ -0,0 +1,77 @@
+include('../background.js');
+
+/**
+ * Adds a div with colored rows to dom
+ *
+ * @class
+ */
+uki.background.Rows = uki.newClass(new function() {
+    var proto = this,
+        cache = [],
+        packSize = 100;
+    
+    /**#@+ @memberOf uki.background.Rows.prototype */
+    
+    proto.init = function(height, colors) {
+        this._height = height || 20;
+        this._colors = uki.isArray(colors) ? colors : colors.split(' ');
+        this._packSize = CEIL(packSize/this._colors.length)*this._colors.length;
+        this._renderedHeight = 0;
+        this._visibleExt = 200;
+        if (this._colors.length == 1) this._colors = this._colors.concat(['#FFF']);
+    };
+    
+    proto.attachTo = function(comp) {
+        this._comp && this.detach();
+        this._comp = comp;
+        if (!this._container) {
+            this._container = uki.createElement(
+                'div', 
+                'position:absolute;left:0;top:0;width:100%;z-index:-1'
+            );
+        }
+        this._layoutHandler = this._layoutHandler || uki.proxy(function(e) { this.layout(e.rect, e.visibleRect); }, this);
+        this._comp.dom().appendChild(this._container);
+        this._comp.bind('layout', this._layoutHandler);
+    };
+    
+    proto.layout = function(rect, visibleRect) {
+        var height = visibleRect ? visibleRect.height + this._visibleExt*2 : rect.maxY();
+        while (this._renderedHeight < height) {
+            var h = packSize * this._height,
+                c = uki.createElement('div', 'height:' + h + 'px;overflow:hidden;width:100%;', getPackHTML(this._height, this._colors));
+            this._renderedHeight += h;
+            this._container.appendChild(c);
+        }
+        if (visibleRect) {
+            this._container.style.top = CEIL((visibleRect.y - this._visibleExt)/this._height/this._colors.length)*this._height*this._colors.length + 'px';
+        }
+    };
+    
+    proto.detach = function() {
+        this._comp.dom().removeChild(this._container);
+        this._comp.unbind('layout', this._layoutHandler);
+        this._comp = null;
+    };
+    
+    /**#@-*/
+    
+    function getPackHTML (height, colors) {
+        var key = height + ' ' + colors.join(' '),
+            rows = [],
+            html = [],
+            i, l = colors.length;
+        if (!cache[key]) {
+            for (i=0; i < l; i++) {
+                rows[i] = ['<div style="height:', height, 'px;width:100%;overflow:hidden;', 
+                            (colors[i] ? 'background:' + colors[i] : ''),
+                            '"></div>'].join('');
+            };
+            for (i=0; i < packSize; i++) {
+                html[i] = rows[i%l];
+            };
+            cache[key] = html.join('');
+        }
+        return cache[key];
+    }
+});

data/frameworks/uki/src/uki-core/background/sliced9.js

@@ -0,0 +1,206 @@
+include('../background.js');
+include('../image.js');
+
+/**
+ * Adds a div with 9 sliced images in the corners, sides and center
+ *
+ * @class
+ */
+uki.background.Sliced9 = uki.newClass(new function() {
+    var nativeCss = ['MozBorderImage', 'WebkitBorderImage', 'borderImage'],
+        dom = uki.dom;
+        
+    var LEFT = 'left:',
+        TOP  = 'top:',
+        RIGHT = 'right:',
+        BOTTOM = 'bottom:',
+        WIDTH = 'width:',
+        HEIGHT = 'height:',
+        PX = 'px',
+        P100 = '100%';
+        
+    var cache = {};
+    
+    /**#@+ @memberOf uki.background.Sliced9.prototype */
+    
+    this.init = function(partSettings, inset, options) {
+        this._settings  = uki.extend({}, partSettings);
+        this._inset     = Inset.create(inset);
+        this._size      = null;
+        this._inited    = false;
+        
+        options = options || {};
+        this._fixedSize = Size.create(options.fixedSize) || new Size();
+        this._bgInset   = Inset.create(options.inset)    || new Inset();
+        this._zIndex    = options.zIndex || -1;
+
+        this._container = this._getContainer();
+        this._container.style.zIndex = this._zIndex;
+    };
+    
+    /** @ignore */
+    function makeDiv (name, style, setting, imgStyle, bgSettings) {
+        var inner = setting[3] ? img(setting, imgStyle) : '';
+        if (!setting[3]) style += bgStyle(setting, bgSettings);
+        return '<div class="' +  name + '" style="position:absolute;overflow:hidden;' + style + '">' + inner + '</div>';
+    }
+    
+    /** @ignore */
+    function bgStyle (setting, bgSettings) {
+        return ';background: url(' + uki.imageSrc(setting[0], setting[1], setting[2]) + ') ' + bgSettings;
+    }
+
+    /** @ignore */
+    function img (setting, style) {
+        return uki.imageHTML(setting[0], setting[1], setting[2], ' galleryimg="no" style="-webkit-user-drag:none;position:absolute;' + style + '"');
+    }
+    
+    /** @ignore */
+    this._getContainer = function() {
+        var key = this._getKey();
+        if (!cache[key]) {
+            return cache[key] = this._createContainer();
+        }
+        return cache[key].cloneNode(true);
+    };
+    
+    /** @ignore */
+    this._createContainer = function() {
+        var inset = this._inset,
+            bgInset = this._bgInset,
+            settings = this._settings,
+            width = inset.left + inset.right,
+            height = inset.top + inset.bottom,
+            css = [LEFT + bgInset.left + PX, RIGHT + bgInset.right + PX, TOP + bgInset.top + PX, BOTTOM + bgInset.bottom + PX].join(';'),
+            html = [];
+            
+        if (inset.top && inset.left) {
+            html[html.length] = makeDiv('tl',
+                [LEFT + 0, TOP + 0, WIDTH + inset.left + PX, HEIGHT + inset.top + PX].join(';'),
+                settings.c, [LEFT + 0, TOP + 0, WIDTH + width + PX, HEIGHT + height + PX].join(';'), 'top left'
+            );
+        }
+        if (inset.top) {
+            html[html.length] = makeDiv('t',
+                [LEFT + inset.left + PX, TOP + 0, HEIGHT + inset.top + PX, RIGHT + inset.right + PX].join(';'),
+                settings.h, [LEFT + 0, TOP + 0, WIDTH + P100, HEIGHT + height + PX].join(';'), 'repeat-x top'
+            );
+        }
+        if (inset.top && inset.right) {
+            html[html.length] = makeDiv('tr',
+                [RIGHT + 0, TOP + 0, WIDTH + inset.right + PX, HEIGHT + inset.top + PX].join(';'),
+                settings.c, [LEFT + '-' + inset.left + PX, TOP + 0, WIDTH + width + PX, HEIGHT + height + PX].join(';'), 'top right'
+            );
+        }
+        
+        if (inset.left) {
+            html[html.length] = makeDiv('l',
+                [LEFT + 0, TOP + inset.top + PX, WIDTH + inset.left + PX, BOTTOM + inset.bottom + PX].join(';'),
+                settings.v, [LEFT + 0, TOP + 0, HEIGHT + P100, WIDTH + width + PX].join(';'), 'repeat-y left'
+            );
+        }
+        if (settings.m) {
+            html[html.length] = makeDiv('m',
+                [LEFT + inset.left + PX, TOP + inset.top + PX, RIGHT + inset.left + PX, BOTTOM + inset.bottom + PX].join(';'),
+                settings.m, [LEFT + 0, TOP + 0, HEIGHT + P100, WIDTH + P100].join(';'), ''
+            );
+        }
+        if (inset.right) {
+            html[html.length] = makeDiv('r',
+                [RIGHT + 0, TOP + inset.top + PX, WIDTH + inset.right + PX, BOTTOM + inset.bottom + PX].join(';'),
+                settings.v, [LEFT + '-' + inset.left + PX, TOP + 0, HEIGHT + P100, WIDTH + width + PX].join(';'), 'repeat-y right'
+            );
+        }
+        
+        if (inset.bottom && inset.left) {
+            html[html.length] = makeDiv('bl',
+                [LEFT + 0, BOTTOM + 0, WIDTH + inset.left + PX, HEIGHT + inset.bottom + PX].join(';'),
+                settings.c, [LEFT + 0, TOP + '-' + inset.top + PX, WIDTH + width + PX, HEIGHT + height + PX].join(';'), 'left -' + inset.top + PX
+            );
+        }
+        if (inset.bottom) {
+            html[html.length] = makeDiv('b',
+                [LEFT + inset.left + PX, BOTTOM + 0, HEIGHT + inset.bottom + PX, RIGHT + inset.right + PX].join(';'),
+                settings.h, [LEFT + 0, TOP + '-' + inset.top + PX, WIDTH + P100, HEIGHT + height + PX].join(';'), 'repeat-x 0 -' + inset.top + PX
+            );
+        }
+        if (inset.bottom && inset.right) {
+            html[html.length] = makeDiv('br',
+                [RIGHT + 0, BOTTOM + 0, WIDTH + inset.right + PX, HEIGHT + inset.bottom + PX].join(';'),
+                settings.c, [LEFT + '-' + inset.left + PX, TOP + '-' + inset.top + PX, WIDTH + width + PX, HEIGHT + height + PX].join(';'), 'right -' + inset.top + PX
+            );
+        }
+        return uki.createElement('div', 'position:absolute;overflow:hidden;' + css, html.join(''));
+    };
+    
+    /** @ignore */
+    this._getKey = function() {
+        return uki.map(['v', 'h', 'm', 'c'], function(x) {
+            return this._settings[x] && this._settings[x][0] || '';
+        }, this).concat([this._inset, this._bgInset, this._fixedSize]).join(',');
+    };
+    
+    this.attachTo = function(comp) {
+        this._comp = comp;
+        
+        this._container.style.visibility = 'visible';
+        this._comp.dom().appendChild(this._container);
+        
+        if (!uki.supportNativeLayout) {
+            this._layoutHandler = this._layoutHandler || uki.proxy(function(e) {
+                if (this._size && this._size.eq(e.rect)) return;
+                this._size = e.rect;
+                this.layout();
+            }, this);
+            this._comp.bind('layout', this._layoutHandler);
+            this.layout();
+        }
+    };
+    
+    this.detach = function() {
+        if (this._comp) {
+            // this._comp.dom().removeChild(this._container);
+            this._container.style.visibility = 'hidden';
+            if (!uki.supportNativeLayout) this._comp.unbind('layout', this._layoutHandler);
+            this._size = this._comp = null;
+            this._attached = this._inited = false;
+        }
+    };
+    
+    this.layout = function(e) {
+        var size = this._comp.rect(),
+            parts = this._parts,
+            inset = this._inset,
+            bgInset = this._bgInset,
+            fixedSize = this._fixedSize,
+            width = FLOOR(fixedSize.width || size.width - bgInset.left - bgInset.right),
+            height = FLOOR(fixedSize.height || size.height - bgInset.top - bgInset.bottom),
+            insetWidth = inset.left + inset.right,
+            insetHeight = inset.top + inset.bottom;
+            
+        if (!parts) {
+            parts = {};
+            uki.each(this._container.childNodes, function() {
+                if (this.className) parts[this.className] = this;
+            });
+            this._parts = parts;
+        }
+        // parts.b.style.bottom = ''
+        // parts.b.style.top = '100%';
+        // parts.b.style.marginTop = - inset.bottom + 'px';
+        if (parts.t) dom.layout(parts.t.style, { width: width - insetWidth });
+        if (parts.b) dom.layout(parts.b.style, { width: width - insetWidth });
+        if (parts.l) dom.layout(parts.l.style, { height: height - insetHeight });
+        if (parts.r) dom.layout(parts.r.style, { height: height - insetHeight });
+        if (parts.m) dom.layout(parts.m.style, {
+            height: height - insetHeight,
+            width: width - insetWidth
+        });
+        dom.layout(this._container.style, {
+            width: width,
+            height: height
+        });
+    };
+    
+    /**#@-*/    
+});

data/frameworks/uki/src/uki-core/background.js

@@ -0,0 +1,35 @@
+include('uki.js');
+
+(function() {
+    var nullRegexp = /^\s*null\s*$/,
+        themeRegexp  = /theme\s*\(\s*([^)]*\s*)\)/,
+        rowsRegexp = /rows\s*\(\s*([^)]*\s*)\)/,
+        cssBoxRegexp = /cssBox\s*\(\s*([^)]*\s*)\)/;
+        
+    /**
+     * Transforms a bg string into a background object
+     * <p>Supported strings:<br />
+     *   theme(bg-name) Takes background with bg-name from uki.theme<br />
+     *   rows(30, #CCFFFF, #FFCCFF, #FFFFCC) Creates Rows background with 30px rowHeight and 3 colors<br />
+     *   cssBox(border:1px solid red;background:blue) Creates CssBox background with given cssText<br />
+     *   url(i.png) or #FFFFFF Creates Css background with single property</p>
+     *
+     * @param {String} bg
+     * @name uki.background
+     * @namespace
+     * @returns {uki.background.Base} created background
+     */
+    var self = uki.background = function(bg) {
+        if (typeof(bg) === 'string') {
+            var match;
+            /*jsl:ignore*/
+            if ( match = bg.match(nullRegexp) ) return new self.Null();
+            if ( match = bg.match(themeRegexp) ) return uki.theme.background( match[1] );
+            if ( match = bg.match(rowsRegexp) ) return new self.Rows( match[1].split(',')[0], match[1].split(/\s*,\s*/).slice(1) );
+            if ( match = bg.match(cssBoxRegexp) ) return new self.CssBox( match[1] );
+            /*jsl:end*/
+            return new self.Css(bg);
+        }
+        return bg;
+    };    
+})();

data/frameworks/uki/src/uki-core/builder.js

@@ -0,0 +1,68 @@
+include('uki.js');
+include('utils.js');
+include('collection.js');
+
+
+(function() {
+    
+    /**
+     * Creates uki view tree from JSON-like markup
+     *
+     * @example
+     * uki.build( {view: 'Button', rect: '100 100 100 24', text: 'Hello world' } )
+     * // Creates uki.view.Button with '100 100 100 24' passed to constructor, 
+     * // and calls text('Hello world') on it
+     *
+     * @function
+     * @name uki.build
+     *
+     * @param {object} ml JSON-like markup
+     * @returns {uki.view.Collection} collection of created elements
+     */
+    uki.build = function(ml) {
+        if (ml.length === undefined) ml = [ml];
+        return new uki.Collection(createMulti(ml));
+    };
+
+    function createMulti (ml) {
+        return uki.map(ml, function(mlRow) { return createSingle(mlRow); });
+    }
+
+    function createSingle (mlRow) {
+        if (uki.isFunction(mlRow.typeName)) {
+            return mlRow;
+        }
+
+        var c = mlRow.view || mlRow.type,
+            result;
+        if (uki.isFunction(c)) {
+            result = c();
+        } else if (typeof c === 'string') {
+            var parts = c.split('.'),
+                obj   = root;
+            if (!root[parts[0]] || parts[0] == 'Image') {
+                parts = ['uki', 'view'].concat(parts); // try with default prefix
+            }
+            for (var i=0; i < parts.length; i++) {
+                obj = obj[parts[i]];
+            };
+            if (!obj) throw 'No view of type ' + c + ' found';
+            result = new obj(mlRow.rect);
+        } else {
+            result = c;
+        }
+
+        copyAttrs(result, mlRow);
+        return result;
+    }
+
+    function copyAttrs(comp, mlRow) {
+        uki.each(mlRow, function(name, value) {
+            if (name == 'view' || name == 'type' || name == 'rect') return;
+            uki.attr(comp, name, value);
+        });
+        return comp;
+    }
+
+    uki.build.copyAttrs = copyAttrs;    
+})();