uki 1.0.0

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

@@ -0,0 +1,130 @@
+include('../dom.js');
+
+(function() {
+    var self;
+    
+    if ( doc.documentElement["getBoundingClientRect"] ) {
+    	self = uki.dom.offset = function( elem ) {
+    		if ( !elem || elem == root ) return new Point();
+    		if ( elem === elem.ownerDocument.body ) return self.bodyOffset( elem );
+    		self.boxModel === undefined && self.initializeBoxModel();
+    		var box  = elem.getBoundingClientRect(), 
+    		    doc = elem.ownerDocument, 
+    		    body = doc.body, 
+    		    docElem = doc.documentElement,
+    			clientTop = docElem.clientTop || body.clientTop || 0, 
+    			clientLeft = docElem.clientLeft || body.clientLeft || 0,
+    			top  = box.top  + (self.pageYOffset || self.boxModel && docElem.scrollTop  || body.scrollTop ) - clientTop,
+    			left = box.left + (self.pageXOffset || self.boxModel && docElem.scrollLeft || body.scrollLeft) - clientLeft;
+
+    		return new Point(left, top);
+    	};
+    } else {
+    	self = uki.dom.offset = function( elem ) {
+    		if ( !elem || elem == root ) return new Point();
+    		if ( elem === elem.ownerDocument.body ) return self.bodyOffset( elem );
+    		self.initialized || self.initialize();
+
+    		var offsetParent = elem.offsetParent, 
+    		    prevOffsetParent = elem,
+    			doc = elem.ownerDocument, 
+    			computedStyle, 
+    			docElem = doc.documentElement,
+    			body = doc.body, 
+    			defaultView = doc.defaultView,
+    			prevComputedStyle = defaultView.getComputedStyle(elem, null),
+    			top = elem.offsetTop, 
+    			left = elem.offsetLeft;
+
+    		while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {
+    			computedStyle = defaultView.getComputedStyle(elem, null);
+    			top -= elem.scrollTop; 
+    			left -= elem.scrollLeft;
+			
+    			if ( elem === offsetParent ) {
+    				top += elem.offsetTop; 
+    				left += elem.offsetLeft;
+				
+    				if ( self.doesNotAddBorder && !(self.doesAddBorderForTableAndCells && (/^t(able|d|h)$/i).test(elem.tagName)) ) {
+    					top  += parseInt( computedStyle.borderTopWidth,  10) || 0;
+    					left += parseInt( computedStyle.borderLeftWidth, 10) || 0;
+    				}
+    				prevOffsetParent = offsetParent; 
+    				offsetParent = elem.offsetParent;
+    			}
+    			if ( self.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) {
+    				top  += parseInt( computedStyle.borderTopWidth,  10) || 0;
+    				left += parseInt( computedStyle.borderLeftWidth, 10) || 0;
+    			}
+    			prevComputedStyle = computedStyle;
+    		}
+
+    		if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) {
+    			top  += body.offsetTop;
+    			left += body.offsetLeft;
+    		}
+
+    		if ( prevComputedStyle.position === "fixed" ) {
+    			top  += MAX(docElem.scrollTop, body.scrollTop);
+    			left += MAX(docElem.scrollLeft, body.scrollLeft);
+    		}
+
+    		return new Point(left, top);
+    	};
+    }
+
+    uki.extend(self, {
+    	initialize: function() {
+    		if ( this.initialized ) return;
+    		var body = doc.body, 
+    		    container = doc.createElement('div'), 
+    		    innerDiv, checkDiv, table, td, rules, prop, 
+    		    bodyMarginTop = body.style.marginTop,
+    			html = '<div style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;"><div></div></div><table style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;" cellpadding="0" cellspacing="0"><tr><td></td></tr></table>';
+
+    		rules = { position: 'absolute', top: 0, left: 0, margin: 0, border: 0, width: '1px', height: '1px', visibility: 'hidden' };
+    		for ( prop in rules ) container.style[prop] = rules[prop];
+
+    		container.innerHTML = html;
+    		body.insertBefore(container, body.firstChild);
+    		innerDiv = container.firstChild; 
+    		checkDiv = innerDiv.firstChild; 
+    		td = innerDiv.nextSibling.firstChild.firstChild;
+
+    		this.doesNotAddBorder = (checkDiv.offsetTop !== 5);
+    		this.doesAddBorderForTableAndCells = (td.offsetTop === 5);
+
+    		innerDiv.style.overflow = 'hidden'; 
+    		innerDiv.style.position = 'relative';
+    		this.subtractsBorderForOverflowNotVisible = (checkDiv.offsetTop === -5);
+
+    		body.style.marginTop = '1px';
+    		this.doesNotIncludeMarginInBodyOffset = (body.offsetTop === 0);
+    		body.style.marginTop = bodyMarginTop;
+		
+    		body.removeChild(container);
+    		this.boxModel === undefined && this.initializeBoxModel();
+    		this.initialized = true;
+    	},
+    	
+    	initializeBoxModel: function() {
+    	    if (this.boxModel !== undefined) return;
+    		var div = doc.createElement("div");
+    		div.style.width = div.style.paddingLeft = "1px";
+
+    		doc.body.appendChild( div );
+    		this.boxModel = div.offsetWidth === 2;
+    		doc.body.removeChild( div ).style.display = 'none';
+    	},
+
+    	bodyOffset: function(body) {
+    		self.initialized || self.initialize();
+    		var top = body.offsetTop, left = body.offsetLeft;
+    		if ( uki.dom.doesNotIncludeMarginInBodyOffset ) {
+    			top  += parseInt( uki.dom.elem.currentStyle(body).marginTop, 10 ) || 0;
+    			left += parseInt( uki.dom.elem.currentStyle(body).marginLeft, 10 ) || 0;
+    		}
+    		return new Point(left, top);
+    	}
+    });    
+})();

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

@@ -0,0 +1,333 @@
+include('event.js');
+
+(function() {
+    
+    var dnd = uki.dom.dnd,
+        retriggering = false;
+        
+    // common properties
+    uki.extend(dnd, {
+        dragDelta: 5,
+        initNativeDnD: function() {
+            // moz needs the drag image to be appended to document
+            // so create an offscreen container to hold drag images.
+            // note that it can't have overflow:hidden, since drag image will be cutted to container
+            var container = uki.createElement('div', 'position: absolute;left:-999em;');
+            doc.body.appendChild(container);
+            dnd.dragImageContainer = container;
+            dnd.initNativeDnD = uki.F;
+            return true;
+        },
+        dragImageContainer: null,
+        dataTransfer: null,
+        target: null,
+        dragOver: null
+    });
+    
+    
+    function viewToDom (element) {
+        if (uki.isFunction(element.dom)) {
+            if (element.parent().length) return element.dom();
+            var container = uki.createElement('div', 'width:1px;height:1px;position:absolute;left:-999em;top:0');
+            doc.body.appendChild(container);
+            element.attachTo(container);
+            return container;
+        }
+        return element;
+    }
+    
+    var dataTransferProps = ['dropEffect', 'effectAllowed', 'types', 'files'];
+    
+    uki.dom.DataTransferWrapper = uki.newClass(new function() {
+        this.init = function(dataTransfer) {
+            this.dataTransfer = dataTransfer;
+            for (var i = dataTransferProps.length - 1; i >= 0; i--){
+                this[ dataTransferProps[i] ] = dataTransfer[ dataTransferProps[i] ];
+            };
+        };
+        
+        this.setData = function(format, data) {
+            return this.dataTransfer.setData(format, data);
+        };
+        
+        this.clearData = function(format) {
+            return this.dataTransfer.clearData(format);
+        };
+        
+        this.getData = function(format) {
+            return this.dataTransfer.getData(format);
+        };
+        
+        this.setDragImage = function(image, x, y) {
+            dnd.initNativeDnD();
+            image = viewToDom(image);
+            var clone = image.cloneNode(true),
+                style = clone.style;
+            style.left = style.right = style.top = style.bottom = '';
+            style.position = 'static';
+            dnd.dragImageContainer.appendChild(clone);
+            setTimeout(function() {
+                dnd.dragImageContainer.removeChild(clone);
+            }, 1);
+            return this.dataTransfer.setDragImage(clone, x, y);
+        };
+    })
+        
+    // w3c spec based dataTransfer implementation
+    uki.dom.DataTransfer = uki.newClass(new function() {
+        this.init = function() {
+            uki.extend(this, {
+                dropEffect: 'none',
+                effectAllowed: 'none',
+                types: [],
+                files: [],
+                dragImage: new Image(),
+                imagePosition: new Point(),
+                data: {}
+            });
+        };
+
+        this.setData = function(format, data) {
+            this.data[format] = data;
+            if (uki.inArray(format, this.types) == -1) this.types.push(format);
+        };
+
+        this.clearData = function(format) {
+            if (format) {
+                delete this.data[format];
+                this.types = uki.grep(this.types, function(x) { return x != format; });
+            } else {
+                this.data = {};
+                this.types = [];
+            }
+        };
+
+        this.getData = function(format) {
+            return this.data[format];
+        };
+
+        this.setDragImage = function(image, x, y) {
+            this._dragImage = this._initDragImage(image);
+            this._imagePosition = new Point(x || 0, y || 0);
+        };
+
+        this.update = function(e) {
+            if (!this._dragImage) return;
+            this._dragImage.style.left = e.pageX - this._imagePosition.x + 'px';
+            this._dragImage.style.top = e.pageY -  this._imagePosition.y + 'px';
+        };
+
+        this.cleanup = function() {
+            this._dragImage && this._dragImage.parentNode.removeChild(this._dragImage);
+            this._dragImage = undefined;
+        };
+
+        this._initDragImage = function(image) {
+            image = viewToDom(image);
+            var clone = image.cloneNode(true),
+                style = clone.style;
+
+            style.left = style.right = style.top = style.bottom = '';
+            style.position = 'absolute';
+            style.left = '-999em';
+            style.zIndex = '9999';
+            doc.body.appendChild(clone);
+            return clone;
+        };
+    });
+
+
+    var bindW3CDrag = {
+        setup: function() {
+            if (this.__w3cdragbound) {
+                this.__w3cdragbound++;
+            } else {
+                this.__w3cdragbound = 1;
+        		uki.dom.bind( this, 'draggesture', drag );
+            }
+        },
+        teardown: function() {
+            this.__w3cdragbound--;
+            if (!this.__draggesturebound) uki.dom.unbind( this, 'draggesture', drag );
+        }
+    };
+    
+    if (dnd.nativeDnD) {
+        uki.extend(uki.dom.special, {
+            dragstart: {
+                setup: function() {
+                    this.addEventListener('dragstart', nativeDragWrapper, false);
+                },
+                teardown: function() {
+                    this.removeEventListener('dragstart', nativeDragWrapper, false);
+                }
+            }
+        })
+        
+    } else {
+        uki.extend(uki.dom.special, {
+            dragstart: bindW3CDrag,
+            drag: bindW3CDrag,
+            dragend: bindW3CDrag
+        });
+        
+        uki.each({
+            dragover: 'mousemove',
+            drop: 'mouseup'
+        }, function( source, target ){
+            
+            var handler = function(e) {
+         	    if (dnd.dataTransfer && retriggering) {
+         	        e.type = source;
+         	        e.dataTransfer = dnd.dataTransfer;
+         	        uki.dom.handler.apply(this, arguments);
+                 }
+         	};
+         	
+        	uki.dom.special[ source ] = {
+        		setup: function() {
+        			uki.dom.bind( this, target, handler );
+        		},
+        		teardown: function(){
+        		    uki.dom.unbind( this, target, handler );
+        		}
+        	};			   
+        });
+        
+    	uki.dom.special.dragenter = {
+    		setup: function() {
+    			uki.dom.bind( this, 'mousemove', dragenter );
+    		},
+    		teardown: function(){
+    		    uki.dom.unbind( this, 'mousemove', dragenter );
+    		}
+    	};			   
+    	uki.dom.special.dragleave = { setup: function() {}, teardown: function() {} }
+    }
+    
+    function nativeDragWrapper (e) {
+        e = new uki.dom.Event(e);
+        var dataTransfer = e.dataTransfer;
+        e.dataTransfer = new uki.dom.DataTransferWrapper(dataTransfer);
+        uki.dom.handler.apply(this, arguments);
+        dataTransfer.effectAllowed = e.dataTransfer.effectAllowed;
+    }
+
+    function startW3Cdrag (element) {
+        uki.dom.bind( element, 'draggestureend', dragend );
+    }
+
+    function stopW3Cdrag (element) {
+        dnd.dataTransfer.cleanup();
+        dnd.dragOver = dnd.dataTransfer = dnd.target = null;
+        uki.dom.unbind( element, 'draggestureend', dragend );
+    }
+    
+    function dragenter (e) {
+        if (!dnd.dataTransfer || e.domEvent.__dragOver) return;
+        e.domEvent.__dragOver = true;
+        if (dnd.dragOver == this) return;
+        dnd.dragOver = this;
+        e.type = 'dragenter';
+        uki.dom.handler.apply(this, arguments);
+    }
+    
+    function drag (e) {
+        if (retriggering) {
+            if (!e.domEvent.__dragOver && dnd.dragOver) {
+                e.type = 'dragleave';
+                uki.dom.handler.apply(dnd.dragOver, arguments);
+                dnd.dragOver = null;
+            }
+            return;
+        };
+        
+        if (dnd.dataTransfer) { // dragging
+            e.type = 'drag';
+            e.target = dnd.target;
+        } else if (e.dragOffset.x > dnd.dragDelta || e.dragOffset.y > dnd.dragDelta) { // start drag
+            var target = e.target,
+                parent = this.parentNode;
+            try {
+                while (target && target != parent && !target.getAttribute('draggable')) target = target.parentNode;
+            } catch (ex) { target = null; }
+            if (target && target.getAttribute('draggable')) {
+                dnd.target = e.target = target;
+                e.type = 'dragstart';
+                dnd.dataTransfer = e.dataTransfer = new uki.dom.DataTransfer(e.domEvent.dataTransfer);
+                startW3Cdrag(this);
+            } else {
+                return;
+            }
+        } else {
+            return;
+        }
+        uki.dom.handler.apply(this, arguments);
+        if (e.isDefaultPrevented()) {
+            stopW3Cdrag(this);
+        } else {
+            retriggerMouseEvent(e);
+        }
+        
+    }
+    
+    var props = 'detail screenX screenY clientX clientY ctrlKey altKey shiftKey metaKey button'.split(' ');
+    
+    function retriggerMouseEvent (e) {
+        var imageStyle = dnd.dataTransfer._dragImage.style,
+            type = e.domEvent.type, target;
+        e.stopPropagation();
+        e.preventDefault();
+        imageStyle.left = '-999em';
+        target = doc.elementFromPoint(e.pageX, e.pageY);
+        dnd.dataTransfer.update(e);
+        
+        try {
+            var newEvent;
+            retriggering = true;
+            try {
+                if (doc.createEventObject) {
+                    newEvent = doc.createEventObject();
+                	for ( var i = props.length, prop; i; ){
+                		prop = uki.dom.props[ --i ];
+                		newEvent[ prop ] = e.domEvent[ prop ];
+                	}
+                    target.fireEvent('on' + type, newEvent)
+                } else {
+                    newEvent = doc.createEvent('MouseEvents');   
+                    newEvent.initMouseEvent(
+                        type,
+                        true,
+                        true,
+                        doc.defaultView,
+                        e.detail, 
+                        e.screenX,  
+                        e.screenY, 
+                        e.clientX, 
+                        e.clientY, 
+                        e.ctrlKey, 
+                        e.altKey, 
+                        e.shiftKey,
+                        e.metaKey,
+                        e.button, 
+                        null
+                    );
+                    target.dispatchEvent(newEvent)
+                }
+            } catch (e) {}
+            retriggering = false;
+        } catch (e) {}
+    }
+
+    function dragend (e) {
+        if (retriggering) return;
+        if (dnd.dataTransfer) { // drag started
+            e.type = 'dragend';
+            e.target = dnd.target;
+            e.dataTransfer = dnd.dataTransfer;
+            uki.dom.handler.apply(this, arguments);
+            retriggerMouseEvent(e);
+            stopW3Cdrag(this);
+        }
+    }
+})();

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

@@ -0,0 +1,109 @@
+include('const.js');
+include('uki.js');
+include('utils.js');
+
+/**
+ * Basic utils to work with the dom tree
+ * @namespace
+ * @author voloko
+ */
+uki.dom = {
+    guid: 1,
+    
+    /**
+     * Convenience wrapper around document.createElement
+     * Creates dom element with given tagName, cssText and innerHTML
+     *
+     * @param {string} tagName
+     * @param {string=} cssText
+     * @param {string=} innerHTML
+     * @returns {Element} created element
+     */
+    createElement: function(tagName, cssText, innerHTML) {
+        var e = doc.createElement(tagName);            
+        if (cssText) e.style.cssText = cssText;
+        if (innerHTML) e.innerHTML = innerHTML;
+        e[expando] = uki.dom.guid++;
+        return e;
+    },
+    
+    /**
+     * Adds a probe element to page dom tree, callbacks, removes the element
+     *
+     * @param {Element} dom Probing dom element
+     * @param {function(Element)} callback
+     */
+    probe: function(dom, callback) {
+        var target = doc.body;
+        target.appendChild(dom);
+        var result = callback(dom);
+        target.removeChild(dom);
+        return result;
+    },
+    
+    /**
+     * Assigns layout style properties to an element
+     *
+     * @param {CSSStyleDeclaration} style Target declaration
+     * @param {object} layout Properties to assign
+     * @param {object=} prevLayout If given assigns only difference between layout and prevLayout
+     */
+    layout: function(style, layout, prevLayout) {
+        prevLayout = prevLayout || {};
+        if (prevLayout.left   != layout.left)   style.left   = layout.left + PX;
+        if (prevLayout.top    != layout.top)    style.top    = layout.top + PX;
+        if (prevLayout.right  != layout.right)  style.right  = layout.right + PX;
+        if (prevLayout.bottom != layout.bottom) style.bottom = layout.bottom + PX;
+        if (prevLayout.width  != layout.width)  style.width  = MAX(layout.width, 0) + PX;
+        if (prevLayout.height != layout.height) style.height = MAX(layout.height, 0) + PX;
+        return layout;
+    },
+    
+    /**
+     * Computed style for a give element
+     *
+     * @param {Element} el
+     * @returns {CSSStyleDeclaration} style declaration
+     */
+    computedStyle: function(el) {
+        if (doc && doc.defaultView && doc.defaultView.getComputedStyle) {
+            return doc.defaultView.getComputedStyle( el, null );
+        } else if (el.currentStyle) {
+            return el.currentStyle;
+        }
+    },
+    
+    /**
+     * Checks if parent contains child
+     *
+     * @param {Element} parent 
+     * @param {Element} child 
+     * @return {Boolean}
+     */
+    contains: function(parent, child) {
+        try {
+            if (parent.contains) return parent.contains(child);
+            if (parent.compareDocumentPosition) return !!(parent.compareDocumentPosition(child) & 16);
+        } catch (e) {}
+        while ( child && child != parent ) {
+            try { child = child.parentNode } catch(e) { child = null };
+        }
+        return parent == child;
+    },
+    
+    createStylesheet: function(code) {
+        var style = doc.createElement('style');
+        doc.getElementsByTagName('head')[0].appendChild(style);
+        if (style.styleSheet) { //IE
+            style.styleSheet.cssText = code;
+        } else {
+            style.appendChild(document.createTextNode(code));
+        }
+        return style;
+    }
+    
+};
+
+uki.each(['createElement'], function(i, name) {
+    uki[name] = uki.dom[name];
+});