uki 1.1.1 → 1.1.2

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

@@ -3,6 +3,7 @@ include('../list.js');
 /**
  * Flyweight view rendering
  * Used in lists, tables, grids
+ * @class
  */
 uki.view.list.Render = uki.newClass({
     init: function() {},

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

@@ -1,3 +1,11 @@
+/**
+ * Popup
+ * 
+ * @author voloko
+ * @name uki.view.Popup
+ * @class
+ * @extends uki.view.Container
+ */
 uki.view.declare('uki.view.Popup', uki.view.Container, function(Base) {
     
     this._setup = function() {
@@ -16,8 +24,28 @@ uki.view.declare('uki.view.Popup', uki.view.Container, function(Base) {
         this.hideOnClick(true);
     };
     
+    /**
+    * @function
+    * @name uki.view.Popup#offset
+    */
+    /**
+    * @function
+    * @name uki.view.Popup#relativeTo
+    */
+    /**
+    * @function
+    * @name uki.view.Popup#horizontal
+    */
+    /**
+    * @function
+    * @name uki.view.Popup#flipOnResize
+    */
     uki.addProps(this, ['offset', 'relativeTo', 'horizontal', 'flipOnResize']);
     
+    /**
+    * @function
+    * @name uki.view.Popup#hideOnClick
+    */
     this.hideOnClick = function(state) {
         if (state === undefined) return this._clickHandler;
         if (state != !!this._clickHandler) {
@@ -38,6 +66,10 @@ uki.view.declare('uki.view.Popup', uki.view.Container, function(Base) {
         return this;
     };
     
+    /**
+    * @function
+    * @name uki.view.Popup#toggle
+    */
     this.toggle = function() {
         if (this.parent() && this.visible()) {
             this.hide();
@@ -46,6 +78,10 @@ uki.view.declare('uki.view.Popup', uki.view.Container, function(Base) {
         }
     };
     
+    /**
+    * @function
+    * @name uki.view.Popup#show
+    */
     this.show = function() {
         this.visible(true);
         if (!this.parent()) {
@@ -57,6 +93,10 @@ uki.view.declare('uki.view.Popup', uki.view.Container, function(Base) {
         this.trigger('toggle', { source: this });
     };
     
+    /**
+    * @function
+    * @name uki.view.Popup#hide
+    */
     this.hide = function() {
         this.visible(false);
         this.trigger('toggle', { source: this });
@@ -91,14 +131,18 @@ uki.view.declare('uki.view.Popup', uki.view.Container, function(Base) {
 
         if (this._anchors & ANCHOR_RIGHT) {
             position.x = relativeOffset.x + relativeRect.width - (this._horizontal ? 0 : rect.width) + hOffset;
-        } else {
+        } else if (this._anchors & ANCHOR_LEFT) {
             position.x = relativeOffset.x - (this._horizontal ? rect.width : 0) - hOffset;
+        } else {
+            position.x = relativeOffset.x + ((relativeRect.width - rect.width) >> 1) - hOffset;
         }
         
         if (this._anchors & ANCHOR_BOTTOM) {
             position.y = relativeOffset.y + (this._horizontal ? relativeRect.height : 0) - rect.height - vOffset;
-        } else {
+        } else if (this._anchors & ANCHOR_TOP) {
             position.y = relativeOffset.y + (this._horizontal ? 0 : relativeRect.height) + vOffset;
+        } else {
+            position.y = relativeOffset.y + ((relativeRect.height - rect.height) >> 1) + vOffset;
         }
         
         return new Rect(position.x, position.y, rect.width, rect.height);

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

@@ -1,23 +1,34 @@
 include('checkbox.js');
 
 (function() {
+    /**
+     * Radio button
+     *
+     * @author voloko
+     * @name uki.view.Radio
+     * @class
+     * @extends uki.view.Checkbox
+     */
     var manager = uki.view.declare('uki.view.Radio', uki.view.Checkbox, function(base) {
         
         this._backgroundPrefix = 'radio-';
         
+        /**
+        * @function
+        * @param {String} group
+        * @name uki.view.Popup#hide
+        */
         this.group = uki.newProp('_group', function(g) {
             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) {
-            var changed = this._checked != !!state;
             this._checked = !!state;
             if (state) manager.clearGroup(this);
             this._updateBg();
-            if (changed) this.trigger('change', {checked: this._checked, source: this});
         });
 
         this._mouseup = function() {
@@ -25,6 +36,7 @@ include('checkbox.js');
             this._down = false;
             if (!this._checked && !this._disabled) {
                 this.checked(!this._checked);
+                this.trigger('change', { checked: this._checked, source: this });
             }
         }
     });
@@ -51,7 +63,10 @@ include('checkbox.js');
     manager.clearGroup = function(radio) {
         uki.each(manager.groups[radio.group()] || [], function(i, registered) {
             if (registered == radio) return;
-            if (registered.checked()) registered.checked(false);
+            if (registered.checked()) {
+                registered.checked(false);
+                this.trigger('change', { checked: false, source: registered });
+            }
         });
     };    
     

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

@@ -19,39 +19,77 @@
     }
         
     /**
-     * Scroll pane. Pane with scrollbars with content overflowing the borders.
-     * Works consistently across all supported browsers.
-     */
+    * Scroll pane. 
+    * Pane with scrollbars with content overflowing the borders.
+    * Works consistently across all supported browsers.
+    *
+    * @author voloko
+    * @name uki.view.ScrollPane
+    * @class
+    * @extends uki.view.Container
+    */
     uki.view.declare('uki.view.ScrollPane', uki.view.Container, function(Base) {
-        this.typeName = function() {
-            return 'uki.view.ScrollPane';
-        };
-    
+        uki.extend(this, {
+            _scrollableY: true,
+            _scrollableX: false,
+            _scrollY: false,
+            _scrollX: false,
+            _sbY: false,
+            _sbX: false
+        });
+        
         this._setup = function() {
             Base._setup.call(this);
 
-            uki.extend(this, {
-                _clientRect: this.rect().clone(), // rect with scroll bars excluded
-                _rectForChild: this.rect().clone(),
-                _scrollableV: true,
-                _scrollableH: false,
-                _scrollV: false,
-                _scrollH: false,
-                _sbV: false,
-                _sbH: false
-            });
+            this._clientRect = this.rect().clone();
+            this._rectForChild = this.rect().clone();
         };
     
-        uki.addProps(this, ['scrollableV', 'scrollableH', 'scrollH', 'scrollV']);
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollableY
+        */
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollableX
+        */
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollX
+        */
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollY
+        */
+        uki.addProps(this, ['scrollableY', 'scrollableX', 'scrollX', 'scrollY']);
+        this.scrollV = this.scrollY;
+        this.scrollH = this.scrollX;
+        
+        this.scrollableV = this.scrollableY;
+        this.scrollableH = this.scrollableX;
     
         this.rectForChild = function() { return this._rectForChild; };
         this.clientRect = function() { return this._clientRect; };
     
+        /**
+        * @function
+        * @param {Number} dx
+        * @param {Number} dy
+        * @name uki.view.ScrollPane#scroll
+        */
         this.scroll = function(dx, dy) {
-            if (dx) this.scrollTop(this.scrollLeft() + dy);
+            if (dx) this.scrollLeft(this.scrollLeft() + dx);
             if (dy) this.scrollTop(this.scrollTop() + dy);
         };
     
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollTop
+        */
+        /**
+        * @function
+        * @name uki.view.ScrollPane#scrollLeft
+        */
         uki.each(['scrollTop', 'scrollLeft'], function(i, name) {
             this[name] = function(v) {
                 if (v == undefined) return this._dom[name];
@@ -61,6 +99,11 @@
             };
         }, this);
     
+        /**
+        * @function
+        * @return {uki.geometry.Rect}
+        * @name uki.view.ScrollPane#visibleRect
+        */
         this.visibleRect = function() {
             var tmpRect = this._clientRect.clone();
             tmpRect.x = this.rect().x + this.scrollLeft();
@@ -91,15 +134,15 @@
 
             var cw = this.contentsWidth(),
                 ch = this.contentsHeight(),
-                sh = this._scrollableH ? cw > this._rect.width : false,
-                sv = this._scrollableV ? ch > this._rect.height : false;
+                sx = this._scrollableX ? cw > this._rect.width : false,
+                sy = this._scrollableY ? ch > this._rect.height : false;
             
-            this._sbH = sh || this._scrollH;
-            this._sbV = sv || this._scrollV;
-            this._clientRect = new Rect( this._rect.width +  (sv ? -1 : 0) * scrollWidth,
-                                         this._rect.height + (sh ? -1 : 0) * scrollWidth );
-            this._rectForChild = new Rect( this._rect.width +  (sv && !widthIncludesScrollBar ? -1 : 0) * scrollWidth,
-                                           this._rect.height + (sh && !widthIncludesScrollBar ? -1 : 0) * scrollWidth );
+            this._sbX = sx || this._scrollX;
+            this._sbY = sy || this._scrollY;
+            this._clientRect = new Rect( this._rect.width +  (sy ? -1 : 0) * scrollWidth,
+                                         this._rect.height + (sx ? -1 : 0) * scrollWidth );
+            this._rectForChild = new Rect( this._rect.width +  ((sy && !widthIncludesScrollBar) ? -1 : 0) * scrollWidth,
+                                           this._rect.height + ((sx && !widthIncludesScrollBar) ? -1 : 0) * scrollWidth );
         };
     
         this._updateClientRects = function() {
@@ -128,19 +171,34 @@
         this._layoutDom = function(rect) {
             this._updateClientRects();
         
-            if (this._layoutScrollH !== this._sbH) {
-                this._dom.style.overflowX = this._sbH ? 'scroll' : 'hidden';
-                this._layoutScrollH = this._sbH;
+            if (this._layoutScrollX !== this._sbX) {
+                this._dom.style.overflowX = this._sbX ? 'scroll' : 'hidden';
+                this._layoutScrollX = this._sbX;
             }
 
-            if (this._layoutScrollV !== this._sbV) {
-                this._dom.style.overflowY = this._sbV ? 'scroll' : 'hidden';
-                this._layoutScrollV = this._sbV;
+            if (this._layoutScrollY !== this._sbY) {
+                this._dom.style.overflowY = this._sbY ? 'scroll' : 'hidden';
+                this._layoutScrollY = this._sbY;
             }
         
             Base._layoutDom.call(this, rect);
         };
+        
+        this.childResized = function() {
+            this._needsLayout = true;
+            uki.after(uki.proxy(this.layoutIfNeeded, this));
+        };
+
+        this._contentChanged = this.childResized;
+        
     });
 
     uki.view.ScrollPane.initScrollWidth = initScrollWidth;
 })();
+
+uki.Collection.addAttrs(['scrollTop', 'scrollLeft']);
+uki.fn.scroll = function(dx, dy) {
+    this.each(function() {
+        this.scroll(dx, dy);
+    });
+};

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

@@ -1,4 +1,15 @@
-uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(Base, Focusable) {
+/**
+* Horizontal Slider. 
+*
+* @author voloko
+* @name uki.view.Slider
+* @class
+* @extends uki.view.Base
+* @implements uki.view.Focusable
+*/
+uki.view.declare('uki.view.Slider', uki.view.Container, uki.view.Focusable, function(Base, Focusable) {
+    
+    this._handleSize = new Size(10,18);
     
     this._setup = function() {
         Base._setup.call(this);
@@ -11,6 +22,22 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
         });
     };
     
+    /**
+    * @function
+    * @name uki.view.Slider#min
+    */
+    /**
+    * @function
+    * @name uki.view.Slider#max
+    */
+    /**
+    * @function
+    * @name uki.view.Slider#values
+    */
+    /**
+    * @function
+    * @name uki.view.Slider#keyStep
+    */
     uki.addProps(this, ['min', 'max', 'values', 'keyStep']);
     
     this.values = uki.newProp('_values', function(val) {
@@ -20,74 +47,69 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
     });
     
     /**
-     * @fires event:change
-     */
+    * @function
+    * @fires event:change
+    * @name uki.view.Slider#value
+    */
     this.value = uki.newProp('_value', function(val) {
         this._value = MAX(this._min, MIN(this._max, val));
         this._position = this._val2pos(this._value);
         this._moveHandle();
-        this.trigger('change', {source: this, value: this._value});
     });
     
     this._pos2val = function(pos, cacheIndex) {
         if (this._values) {
-            var index = Math.round(1.0 * pos / this._rect.width * (this._values.length - 1));
+            var index = Math.round(1.0 * pos / (this._rect.width - this._handleSize.width) * (this._values.length - 1));
             if (cacheIndex) this._cachedIndex = index;
             return this._values[index];
         }
-        return pos / this._rect.width * (this._max - this._min);
+        return pos / (this._rect.width - this._handleSize.width) * (this._max - this._min) + this._min;
     };
     
     this._val2pos = function(val) {
         if (this._values) {
             var index = this._cachedIndex !== undefined ? this._cachedIndex : uki.binarySearch(val, this._values);
-            return index / (this._values.length - 1) * this._rect.width;
+            return index / (this._values.length - 1) * (this._rect.width - this._handleSize.width);
         }
-        return val / (this._max - this._min) * this._rect.width;
+        return (val - this._min) / (this._max - this._min) * (this._rect.width - this._handleSize.width);
     };
     
     this._createDom = function() {
         this._dom = uki.createElement('div', this.defaultCss + 'height:18px;-moz-user-select:none;-webkit-user-select:none;overflow:visible;');
-        this._handle = uki.createElement('div', this.defaultCss + 'overflow:hidden;cursor:default;background:url(' + uki.theme.image('x').src + ')');
-        this._bg = uki.theme.image('slider-handle');
-        this._focusBg = uki.theme.image('slider-focus');
-        this._focusBg.style.cssText += this._bg.style.cssText += this.defaultCss + 'top:0;left:0;z-index:-1;position:absolute;'; 
-        this._handle.appendChild(this._bg);
-        
+        this._initClassName();
+        this._handle = uki({ 
+            view: 'SliderHandle', 
+            rect: new Rect(0, (this._rect.height-this._handleSize.height)/2, this._handleSize.width, this._handleSize.height),
+            anchors: 'left top'
+        })[0];
+        this.appendChild(this._handle);
         
         uki.theme.background('slider-bar').attachTo(this);
-        this._initFocusable();
-        
-        uki.image.load([this._bg, this._focusBg], uki.proxy(this._afterHandleLoad, this) );
-    };
-    
-    this._afterHandleLoad = function() {
-        this._focusBg.style.cssText += ';z-index:10;margin-left:-' + (this._focusBg.width) / 2 + 'px;margin-top:-' + (this._focusBg.height-(this._bg.height/2)+1)/2 + 'px;';
-        this._handle.style.cssText += ';margin-left:-' + (this._bg.width / 2) + 'px;width:' +this._bg.width + 'px;height:' + (this._bg.height / 2) + 'px;';
-        this._dom.appendChild(this._handle);
-        
-        uki.each(['mouseenter', 'mouseleave', 'draggesturestart', 'draggesture', 'draggestureend'], function(i, name) {
-            uki.dom.bind(this._handle, name, uki.proxy(this['_' + name], this));
+        uki.each(['draggesturestart', 'draggesture', 'draggestureend'], function(i, name) {
+            this._handle.bind(name, uki.proxy(this['_' + name], this));
         }, this);
         
-        this.bind('click', this._click);
         this.bind(uki.view.List.prototype.keyPressEvent(), this._keypress);
+        this.bind('click', this._click);
+        
+        this._initFocusable();
     };
     
-    this._mouseenter = function() {
-        this._over = true;
-        this._bg.style.top = - this._bg.height / 2 + 'px';
+    this._focus = function(e) {
+        this._handle._focus();
+        Focusable._focus.call(this, e);
     };
-    
-    this._mouseleave = function() {
-        this._over = false;
-        this._bg.style.top = this._dragging ? (- this._bg.height / 2 + 'px') : 0;
+
+    this._blur = function(e) {
+        this._handle._blur();
+        Focusable._blur.call(this, e);
     };
     
     this._click = function(e) {
-        var x = e.pageX - uki.dom.offset(this._dom).x;
+        var x = e.pageX - uki.dom.offset(this._dom).x - this._handleSize.width/2;
         this.value(this._pos2val(x, true));
         this._cachedIndex = undefined;
+        this.trigger('change', {source: this, value: this._value});
     };
     
     this._keypress = function(e) {
@@ -99,13 +121,15 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
     };
     
     this._moveHandle = function() {
-        // this._focusBg.style.left = this._handle.style.left = 100.0*this._position/this._rect.width + '%';
-        this._focusBg.style.left = this._handle.style.left = this._position + 'px';
+        var rect = this._handle.rect().clone();
+        rect.x = this._position;
+        rect.y = (this._rect.height - this._handleSize.height) / 2;
+        this._handle.rect(rect).layout();
     };
     
     this._draggesturestart = function(e) {
         this._dragging = true;
-        this._initialPosition = new Point(parseInt(this._handle.style.left, 10), parseInt(this._handle.style.top, 10));
+        this._initialPosition = this._handle.rect().clone();
         return true;
     };
     
@@ -113,7 +137,7 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
      * @fires event:change
      */
     this._draggesture = function(e) {
-        var position = MAX(0, MIN(this._rect.width, this._initialPosition.x + e.dragOffset.x));
+        var position = MAX(0, MIN(this._rect.width - this._handleSize.width, this._initialPosition.x + e.dragOffset.x));
         this.value(this._pos2val(position, true));
         this._cachedIndex = undefined;
     };
@@ -121,26 +145,13 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
     this._draggestureend = function(e) {
         this._dragging = false;
         this._initialPosition = null;
-        if (!this._over) this._bg.style.top = 0;
         this.value(this._pos2val(this._position, true));
         this._cachedIndex = undefined;
-    };
-    
-    this._focus = function(e) {
-        this._dom.appendChild(this._focusBg);
-        this._focusBg.style.left = this._handle.style.left;
-        Focusable._focus.call(this, e);
-    };
-    
-    this._blur = function(e) {
-        this._dom.removeChild(this._focusBg);
-        Focusable._blur.call(this, e);
+        this.trigger('change', {source: this, value: this._value});
     };
     
     this._layoutDom = function(rect) {
-        var fixedRect = rect.clone();
-        fixedRect.height = 18;
-        Base._layoutDom.call(this, fixedRect);
+        Base._layoutDom.call(this, rect);
         this._position = this._val2pos(this._value);
         this._moveHandle();
         return true;
@@ -152,3 +163,5 @@ uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(
     };
     
 });
+
+uki.view.declare('uki.view.SliderHandle', uki.view.Button, { _backgroundPrefix: 'slider-handle-', _focusable: false });