X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=Roo%2FElement.js;h=a8e9cd88f029efa5c5f9d4f62abd8842dae37775;hp=fef561b3145140abed7bbfed148a32be51e9e85a;hb=refs%2Fheads%2Fwip_leon_T7094_logo_image_upload_in_boilerplate;hpb=e2f3f95937a0262710ebbdf11f3f122a1d6fdfbd diff --git a/Roo/Element.js b/Roo/Element.js index fef561b314..a8e9cd88f0 100644 --- a/Roo/Element.js +++ b/Roo/Element.js @@ -85,9 +85,13 @@ if(opt.anim.isAnimated()){ * @param {String/HTMLElement} element * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class). */ - Roo.Element = function(element, forceNew){ + Roo.Element = function(element, forceNew) + { var dom = typeof element == "string" ? document.getElementById(element) : element; + + this.listeners = {}; + if(!dom){ // invalid id/element return null; } @@ -107,6 +111,8 @@ if(opt.anim.isAnimated()){ * @type String */ this.id = id || Roo.id(dom); + + return this; // assumed for cctor? }; var El = Roo.Element; @@ -614,7 +620,11 @@ if(opt.anim.isAnimated()){ } }else{ if(className && !this.hasClass(className)){ - this.dom.className = this.dom.className + " " + className; + if (this.dom instanceof SVGElement) { + this.dom.className.baseVal =this.dom.className.baseVal + " " + className; + } else { + this.dom.className = this.dom.className + " " + className; + } } } return this; @@ -643,7 +653,9 @@ if(opt.anim.isAnimated()){ * @return {Roo.Element} this */ removeClass : function(className){ - if(!className || !this.dom.className){ + + var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className; + if(!className || !cn){ return this; } if(className instanceof Array){ @@ -657,8 +669,11 @@ if(opt.anim.isAnimated()){ re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g"); this.classReCache[className] = re; } - this.dom.className = - this.dom.className.replace(re, " "); + if (this.dom instanceof SVGElement) { + this.dom.className.baseVal = cn.replace(re, " "); + } else { + this.dom.className = cn.replace(re, " "); + } } } return this; @@ -687,6 +702,9 @@ if(opt.anim.isAnimated()){ * @return {Boolean} True if the class exists, else false */ hasClass : function(className){ + if (this.dom instanceof SVGElement) { + return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1; + } return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1; }, @@ -1168,20 +1186,67 @@ if(opt.anim.isAnimated()){ * @param {Object} scope (optional) The scope (this object) of the fn * @param {Object} options (optional)An object with standard {@link Roo.EventManager#addListener} options */ - addListener : function(eventName, fn, scope, options){ - if (this.dom) { - Roo.EventManager.on(this.dom, eventName, fn, scope || this, options); + addListener : function(eventName, fn, scope, options) + { + if (eventName == 'dblclick') { // doublclick (touchstart) - faked on touch. + this.addListener('touchstart', this.onTapHandler, this); + } + + // we need to handle a special case where dom element is a svg element. + // in this case we do not actua + if (!this.dom) { + return; + } + + if (this.dom instanceof SVGElement && !(this.dom instanceof SVGSVGElement)) { + if (typeof(this.listeners[eventName]) == 'undefined') { + this.listeners[eventName] = new Roo.util.Event(this, eventName); + } + this.listeners[eventName].addListener(fn, scope, options); + return; } + + + Roo.EventManager.on(this.dom, eventName, fn, scope || this, options); + + }, - + tapedTwice : false, + onTapHandler : function(event) + { + if(!this.tapedTwice) { + this.tapedTwice = true; + var s = this; + setTimeout( function() { + s.tapedTwice = false; + }, 300 ); + return; + } + event.preventDefault(); + var revent = new MouseEvent('dblclick', { + view: window, + bubbles: true, + cancelable: true + }); + + this.dom.dispatchEvent(revent); + //action on double tap goes below + + }, + /** * Removes an event handler from this element * @param {String} eventName the type of event to remove * @param {Function} fn the method the event invokes + * @param {Function} scope (needed for svg fake listeners) * @return {Roo.Element} this */ - removeListener : function(eventName, fn){ + removeListener : function(eventName, fn, scope){ Roo.EventManager.removeListener(this.dom, eventName, fn); + if (typeof(this.listeners) == 'undefined' || typeof(this.listeners[eventName]) == 'undefined') { + return this; + } + this.listeners[eventName].removeListener(fn, scope); return this; }, @@ -1191,6 +1256,7 @@ if(opt.anim.isAnimated()){ */ removeAllListeners : function(){ E.purgeElement(this.dom); + this.listeners = {}; return this; }, @@ -1200,6 +1266,7 @@ if(opt.anim.isAnimated()){ }); }, + /** * Set the opacity of the element * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc @@ -2104,7 +2171,7 @@ if(opt.anim.isAnimated()){ * Puts a mask over this element to disable user interaction. Requires core.css. * This method can only be applied to elements which accept child nodes. * @param {String} msg (optional) A message to display in the mask - * @param {String} msgCls (optional) A css class to apply to the msg element + * @param {String} msgCls (optional) A css class to apply to the msg element - use no-spinner to hide the spinner on bootstrap * @return {Element} The mask element */ mask : function(msg, msgCls) @@ -2304,7 +2371,7 @@ if(opt.anim.isAnimated()){ /** * @private */ - fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate + fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate /** * Sizes this element to its parent element's dimensions performing @@ -2317,7 +2384,7 @@ if(opt.anim.isAnimated()){ Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists - return; + return this; } var p = Roo.get(targetParent || this.dom.parentNode); this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));