uki 1.1.1 → 1.1.2

data/frameworks/uki/spec/unit/selector.spec.js

@@ -1,7 +1,7 @@
 describe 'uki.Selector'
     it 'should tokenize expression'
-        tokens = uki.Selector.tokenize('label > * > project.views.CustomView Label[name^="wow"]')[0];
-        tokens.should_eql ['label', '>', '*', '>', 'project.views.CustomView', 'Label[name^="wow"]']
+        tokens = uki.Selector.tokenize('label > * > project.views.CustomView Label[ name ^= "wow"]')[0];
+        tokens.should_eql ['label', '>', '*', '>', 'project.views.CustomView', 'Label[ name ^= "wow"]']
     end
     
     it 'should copy find to uki'
@@ -16,7 +16,8 @@ describe 'uki.Selector'
                         { view: 'Box', rect: '10 10 100 100', name: 'third', someAttribute: true, childViews: [
                             { view: 'Label', rect: '10 10 100 100', name: 'label1', someAttribute: false }
                         ]},
-                        { view: 'Label', rect: '200 10 100 100', name: 'label2' }
+                        { view: 'Label', rect: '200 10 100 100', name: 'label2' },
+                        { view: 'Label', rect: '400 10 100 100', name: 'label3' }
                     ]}
                 ]}
             ]);
@@ -25,26 +26,29 @@ describe 'uki.Selector'
 
         it 'by *'
             elements = uki.Selector.find('*', tree);
-            elements.length.should.be 4
+            elements.length.should.be 5
             uki.attr(elements[0], 'name').should.be 'second'
             uki.attr(elements[1], 'name').should.be 'third'
             uki.attr(elements[2], 'name').should.be 'label1'
             uki.attr(elements[3], 'name').should.be 'label2'
+            uki.attr(elements[4], 'name').should.be 'label3'
         end
     
         it 'by * *'
             elements = uki.Selector.find('* *', tree);
-            elements.length.should.be 3
+            elements.length.should.be 4
             uki.attr(elements[0], 'name').should.be 'third'
             uki.attr(elements[1], 'name').should.be 'label1'
             uki.attr(elements[2], 'name').should.be 'label2'
+            uki.attr(elements[3], 'name').should.be 'label3'
         end
     
         it 'by full typeName()'
             elements = uki.Selector.find('uki.view.Label', tree);
-            elements.length.should.be 2
+            elements.length.should.be 3
             uki.attr(elements[0], 'name').should.be 'label1'
             uki.attr(elements[1], 'name').should.be 'label2'
+            uki.attr(elements[2], 'name').should.be 'label3'
         end
     
         it 'by contracted typeName()'
@@ -74,9 +78,10 @@ describe 'uki.Selector'
         
         it 'by ^= attribute'
             elements = uki.Selector.find('[name^="label"]', tree);
-            elements.length.should.be 2
+            elements.length.should.be 3
             uki.attr(elements[0], 'name').should.be 'label1'
             uki.attr(elements[1], 'name').should.be 'label2'
+            uki.attr(elements[2], 'name').should.be 'label3'
         end
         
         it 'by $= attribute'
@@ -87,9 +92,10 @@ describe 'uki.Selector'
         
         it 'by ~= attribute'
             elements = uki.Selector.find('*[name~="abe"]', tree);
-            elements.length.should.be 2
+            elements.length.should.be 3
             uki.attr(elements[0], 'name').should.be 'label1'
             uki.attr(elements[1], 'name').should.be 'label2'
+            uki.attr(elements[2], 'name').should.be 'label3'
         end
         
         it 'by attribute presence'
@@ -100,16 +106,18 @@ describe 'uki.Selector'
         
         it 'direct children with >'
             elements = uki.Selector.find('>', [tree[0].childViews()[0]]);
-            elements.length.should.be 2
+            elements.length.should.be 3
             uki.attr(elements[0], 'name').should.be 'third'
             uki.attr(elements[1], 'name').should.be 'label2'
+            uki.attr(elements[2], 'name').should.be 'label3'
         end
         
         it 'direct children with > *'
             elements = uki.Selector.find('> *', [tree[0].childViews()[0]]);
-            elements.length.should.be 2
+            elements.length.should.be 3
             uki.attr(elements[0], 'name').should.be 'third'
             uki.attr(elements[1], 'name').should.be 'label2'
+            uki.attr(elements[2], 'name').should.be 'label3'
         end
         
         it 'right after with +'
@@ -118,11 +126,19 @@ describe 'uki.Selector'
             uki.attr(elements[0], 'name').should.be 'label2'
         end
         
+        it 'right after with ~'
+            elements = uki.Selector.find('Box ~ Label', tree);
+            elements.length.should.be 2
+            uki.attr(elements[0], 'name').should.be 'label2'
+            uki.attr(elements[1], 'name').should.be 'label3'
+        end
+        
         it 'direct children within container >'
             elements = uki.Selector.find('Box > Label', tree);
-            elements.length.should.be 2
+            elements.length.should.be 3
             uki.attr(elements[0], 'name').should.be 'label2'
-            uki.attr(elements[1], 'name').should.be 'label1'
+            uki.attr(elements[1], 'name').should.be 'label3'
+            uki.attr(elements[2], 'name').should.be 'label1'
         end
         
         it 'by :eq modifier'

data/frameworks/uki/spec/unit/utils.spec.js

@@ -173,4 +173,18 @@ describe 'uki.utils'
         uki.unique(a).should.eql [x, y, z]
     end
     
+    
+    it 'should dasherize cammelcased literals'
+        uki.dasherize('WebkitBorderRadius').should.eql '-webkit-border-radius'
+        uki.dasherize('X').should.eql '-x'
+        uki.dasherize('').should.eql ''
+    end
+    
+    it 'should camalize dashed literals'
+        uki.camalize('-webkit-border-radius').should.eql 'WebkitBorderRadius'
+        uki.camalize('-x').should.eql 'X'
+        uki.camalize('foo_bar').should.eql 'fooBar'
+        uki.camalize('').should.eql ''
+    end
+    
 end

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

@@ -8,19 +8,21 @@ include('uki-core/dom/event.js');
 include('uki-core/dom/dnd.js');
 include('uki-core/dom/w3cdnd.js');
 include('uki-core/dom/offset.js');
-include('uki-core/dom/nativeLayout.js');
+include('uki-core/dom/browser.js');
 
 include('uki-core/attachment.js');
 include('uki-core/builder.js');
 include('uki-core/selector.js');
 
 include('uki-core/image.js');
+include('uki-core/after.js');
 
 include('uki-core/background.js');
 include('uki-core/background/null.js');
 include('uki-core/background/sliced9.js');
 include('uki-core/background/css.js');
 include('uki-core/background/cssBox.js');
+include('uki-core/background/linearGradient.js');
 include('uki-core/background/rows.js');
 include('uki-core/background/multi.js');
 

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

@@ -0,0 +1,57 @@
+include('uki.js');
+
+/**
+ * Executes callback at or after the end of processing.
+ * Example: execute flow layout after all child views were added.
+ * Runs either at the end of event handling or after a timeout.
+ * Each callback (by huid) is executed once
+ * @function
+ * @param {function()} callback
+ */
+uki.after = (function() {
+    var after = function(callback) {
+        callback.huid = callback.huid || uki.guid++;
+        if (after._bound[callback.huid]) return;
+        after._bound[callback.huid] = true;
+        after._queue.push(callback);
+        if (!after._running) after._startTimer();
+    };
+    
+    after._bound = {};
+    after._running = false;
+    after._timer = 0;
+    after._queue = [];
+    
+    after.start = function() {
+        after._clearTimer();
+        after._running++;
+    };
+    
+    after.stop = function() {
+        if (--after._running) return;
+        after._runCallbacks();
+    };
+    
+    
+    
+    after._runCallbacks = function() {
+        after._clearTimer();
+        var queue = after._queue;
+        after._queue = [];
+        after._bound = {};
+        for (var i=0; i < queue.length; i++) queue[i]();
+    };
+    
+    after._startTimer = function() {
+        if (after._timer) return;
+        after._timer = setTimeout(after._runCallbacks, 1);
+    };
+    
+    after._clearTimer = function() {
+        if (!after._timer) return;
+        clearTimeout(after._timer);
+        after._timer = 0;
+    };
+    
+    return after;
+})();

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

@@ -1,5 +1,6 @@
 include('const.js');
 include('utils.js');
+include('after.js');
 include('dom.js');
 include('geometry.js');
 include('view/observable.js');
@@ -86,9 +87,12 @@ include('view/observable.js');
         /**
          * uki.view.Base api
          */
-        parent: function() {
-            return null;
-        },
+        parent: uki.F,
+        
+        /**
+         * uki.view.Base api
+         */
+        childResized: uki.F,
         
         /**
          * On window resize resizes and layout its child view
@@ -149,10 +153,15 @@ include('view/observable.js');
             uki.dom.bind(root, 'resize', function() {
                 if (!timeout) {
                     timeout = true;
-                    setTimeout(function() {
+                    setTimeout(function(i,len) {
+                        uki.after.start();
+                        
                         timeout = false;
-                        uki.each(self.instances, function() { this.layout(); });
-                    }, 1)
+						for (i=0,len=self.instances.length;i<len;i++)
+							self.instances[i].layout();
+							
+                        uki.after.stop();
+                    }, 1);
                 }
             });
         }

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

@@ -2,9 +2,9 @@ include('uki.js');
 
 (function() {
     var nullRegexp = /^\s*null\s*$/,
-        themeRegexp  = /theme\s*\(\s*([^)]*\s*)\)/,
-        rowsRegexp = /rows\s*\(\s*([^)]*\s*)\)/,
-        cssBoxRegexp = /cssBox\s*\(\s*([^)]*\s*)\)/;
+        themeRegexp  = /theme\s*\(\s*(.*\s*)\)/,
+        rowsRegexp = /rows\s*\(\s*(.*\s*)\)/,
+        cssBoxRegexp = /cssBox\s*\(\s*(.*\s*)\)/;
         
     /**
      * Transforms a bg string into a background object
@@ -24,6 +24,7 @@ include('uki.js');
             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] );

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

@@ -11,6 +11,7 @@ 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._options = uki.browser.css(this._options);
     };
     
     this.attachTo = function(comp) {

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

@@ -36,16 +36,18 @@ uki.background.CssBox = uki.newClass(new function() {
 
         this._container = uki.createElement(
             'div', 
-            options + ';position:absolute;overflow:hidden;z-index:' + (ext.zIndex || '-1') + ';' + 
-            'left:' + inset.left + 'px;top:' + inset.top + 'px;right:' + inset.right + 'px;bottom:' + inset.bottom + 'px',
+            'position:absolute;overflow:hidden;z-index:' + (ext.zIndex || '-1') + ';' + 
+            'left:' + inset.left + 'px;top:' + inset.top + 'px;right:' + inset.right + 'px;bottom:' + inset.bottom + 'px;' +
+            uki.browser.css(options),
             ext.innerHTML
         );
+        this._container.className = 'uki-background-CssBox';
         this._attached = false;
     };
     
     this.attachTo = function(comp) {
         this._comp = comp;
-        this._comp.dom().appendChild(this._container);
+        this._comp.dom().insertBefore(this._container, this._comp.dom().firstChild);
 
         if (uki.supportNativeLayout) return;
         

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

@@ -0,0 +1,112 @@
+include('../background.js');
+
+/**
+ * Adds a div with given cssText to dom()
+ *
+ * @class
+ */
+uki.background.LinearGradient = uki.newClass(uki.background.CssBox, new function() {
+    
+    var CANVAS_GRADIENT_SIZE = 200;
+    
+    /**
+     * @param options Object { startColor: '#FFFFFF', endColor: '#CCCCCC', horizontal: true, css: 'border: 1px solid #CCC' }
+     */
+    this.init = function(options) {
+        this._options = options;
+        var inset = this._inset = uki.geometry.Inset.create(this._options.inset) || new uki.geometry.Inset();
+        
+        this._container = this._createContainer();
+        var clone = this._container.cloneNode(true);
+        clone.style.cssText += ';width:100px;height:100px;';
+        uki.dom.probe(clone, uki.proxy(function(c) {
+            this._insetWidth = c.offsetWidth - 100 + inset.width();
+            this._insetHeight = c.offsetHeight - 100 + inset.height();
+        }, this));
+        this._container.style.cssText += ';left:' + inset.left + 'px;top:' + inset.top + 'px;right:' + inset.right + 'px;bottom:' + inset.bottom + 'px;';
+
+        this._attached = false;
+    };
+    
+    var urlCache = {};
+    function getGradientURL (startColor, endColor, horizontal, stops) {
+        var key = startColor + endColor + (horizontal ? 1 : 0) + uki.map(stops, function(stop) { return stop.pos + '-' + stop.color; });
+        if (!urlCache[key]) {
+        
+            var canvas = document.createElement('canvas');
+            canvas.width = canvas.height = CANVAS_GRADIENT_SIZE;
+        
+            var context = canvas.getContext('2d'),
+                gradient = context.createLinearGradient(0, 0, horizontal ? CANVAS_GRADIENT_SIZE : 0, horizontal ? 0 : CANVAS_GRADIENT_SIZE);
+
+            gradient.addColorStop(0, startColor);
+            gradient.addColorStop(1, endColor);
+            for (var i=0; i < stops.length; i++) {
+                gradient.addColorStop(stops[i].pos, stops[i].color);
+            };
+            context.fillStyle = gradient;
+            context.fillRect(0, 0, CANVAS_GRADIENT_SIZE, CANVAS_GRADIENT_SIZE);
+            urlCache[key] = canvas.toDataURL && canvas.toDataURL();
+        }
+        return urlCache[key];
+    }
+    
+    function mosFilter (horizontal, startColor, endColor) {
+        return 'filter:progid:DXImageTransform.Microsoft.gradient(gradientType=' + (horizontal ? '1' : '0') + ', startColorstr=#FF' + startColor.substr(1) + ', endColorstr=#FF' + endColor.substr(1) + ');';
+    }
+    
+    
+    this._createContainer = function() {
+        var startColor = this._options.startColor || '#FFFFFF',
+            endColor   = this._options.endColor   || '#CCCCCC',
+            horizontal = this._options.horizontal,
+            stops      = this._options.stops      || [],
+            css        = '',
+            i          = 0,
+            cssProp    = uki.browser.cssLinearGradient(),
+            url;
+            
+        if (cssProp == '-moz-linear-gradient' || cssProp == 'linear-gradient') {
+            css += 'background-image:' + cssProp + '(' + (horizontal ? 'left' : 'top') + ', ' + startColor;
+            for (;i<stops.length;i++) {
+                css += ',' + stops[i].color + ' ' + (stops[i].pos * 100) + '%';
+            }
+            css += ', ' + endColor + ');';
+        } else if (cssProp == '-webkit-gradient') {
+            css += 'background-image:' + cssProp + '(linear, 0% 0%, ' + (horizontal ? '100% 0%' : '0% 100%') + ', from(' + startColor + '), to(' + endColor + ')';
+            for (;i<stops.length;i++) {
+                css += ',color-stop(' + (stops[i].pos * 100) + '%,' + stops[i].color +')';
+            }
+            css += ');';
+        } else if (!uki.browser.canvas() && uki.browser.cssFilter() && stops.length == 0) {
+            css += mosFilter(horizontal, startColor, endColor);
+        }
+        
+        var container = uki.createElement('div', uki.browser.css(this._options.css) + ';position:absolute;overflow:hidden;z-index:' + (this._options.zIndex || '-1') + ';' + css, this._options.innerHTML);
+        container.className = 'uki-background-CssBox';
+        if (css) return container;
+        
+        if (uki.browser.canvas() && (url = getGradientURL(startColor, endColor, horizontal, stops))) {
+            var img = uki.createElement('img', 'position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;');
+            img.src = url;
+            container.appendChild(img);
+        } else if (uki.browser.cssFilter() && stops.length > 0) {
+            stops.unshift({ pos: 0, color: startColor });
+            stops.push({ pos: 1, color: endColor });
+            var child;
+            for (;i<stops.length-1;i++) {
+                child = uki.createElement('div', 'position:absolute;z-index:-1' + 
+                    ';left:'   + (horizontal ? stops[i].pos * 100 - (i && 1) + '%' : '0') +
+                    ';top:'    + (horizontal ? '0' : stops[i].pos * 100 - (i && 1) + '%') +
+                    ';width:'  + (horizontal ? (stops[i+1].pos - stops[i].pos) * 100 + 1 + '%' : '100%') +
+                    ';height:' + (horizontal ? '100%' : (stops[i+1].pos - stops[i].pos) * 100 + 1 + '%') +
+                    ';' + mosFilter(horizontal, stops[i].color, stops[i+1].color)
+                );
+                container.appendChild(child);
+            }
+        }
+        return container;
+    };
+    
+    /**#@-*/
+});

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

@@ -8,12 +8,12 @@ uki.background.Multi = uki.newClass({
         this._bgs = Array.prototype.slice.call(arguments, 0);
     },
     attachTo: function(comp) {
-        for (var i=0; i < this._bgs.length; i++) {
+        for (var i=0, $this$_bgs$length = this._bgs.length; i < $this$_bgs$length; i++) {
             this._bgs[i].attachTo(comp);
         };
     },
     detach: function() {
-        for (var i=0; i < this._bgs.length; i++) {
+        for (var i=0, $this$_bgs$length = this._bgs.length; i < $this$_bgs$length; i++) {
             this._bgs[i].detach();
         };
     }

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

@@ -28,6 +28,7 @@ uki.background.Rows = uki.newClass(new function() {
                 'div', 
                 'position:absolute;left:0;top:0;width:100%;z-index:-1'
             );
+            this._container.className = 'uki-background-Rows' ;
         }
         this._layoutHandler = this._layoutHandler || uki.proxy(function(e) { this.layout(e.rect, e.visibleRect); }, this);
         this._comp.dom().appendChild(this._container);