X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/ext-core/src/core/Element.style.js
diff --git a/src/ext-core/src/core/Element.style.js b/src/ext-core/src/core/Element.style.js
deleted file mode 100644
index a99d3e72..00000000
--- a/src/ext-core/src/core/Element.style.js
+++ /dev/null
@@ -1,503 +0,0 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-/**
- * @class Ext.Element
- */
-Ext.Element.addMethods(function(){
- // local style camelizing for speed
- var supports = Ext.supports,
- propCache = {},
- camelRe = /(-[a-z])/gi,
- view = document.defaultView,
- opacityRe = /alpha\(opacity=(.*)\)/i,
- trimRe = /^\s+|\s+$/g,
- EL = Ext.Element,
- spacesRe = /\s+/,
- wordsRe = /\w/g,
- PADDING = "padding",
- MARGIN = "margin",
- BORDER = "border",
- LEFT = "-left",
- RIGHT = "-right",
- TOP = "-top",
- BOTTOM = "-bottom",
- WIDTH = "-width",
- MATH = Math,
- HIDDEN = 'hidden',
- ISCLIPPED = 'isClipped',
- OVERFLOW = 'overflow',
- OVERFLOWX = 'overflow-x',
- OVERFLOWY = 'overflow-y',
- ORIGINALCLIP = 'originalClip',
- // special markup used throughout Ext when box wrapping elements
- borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
- paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
- margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
- data = Ext.Element.data;
-
-
- // private
- function camelFn(m, a) {
- return a.charAt(1).toUpperCase();
- }
-
- function chkCache(prop) {
- return propCache[prop] || (propCache[prop] = prop == 'float' ? (supports.cssFloat ? 'cssFloat' : 'styleFloat') : prop.replace(camelRe, camelFn));
- }
-
- return {
- // private ==> used by Fx
- adjustWidth : function(width) {
- var me = this;
- var isNum = (typeof width == "number");
- if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
- width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
- }
- return (isNum && width < 0) ? 0 : width;
- },
-
- // private ==> used by Fx
- adjustHeight : function(height) {
- var me = this;
- var isNum = (typeof height == "number");
- if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
- height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
- }
- return (isNum && height < 0) ? 0 : height;
- },
-
-
- /**
- * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
- * @param {String/Array} className The CSS class to add, or an array of classes
- * @return {Ext.Element} this
- */
- addClass : function(className){
- var me = this,
- i,
- len,
- v,
- cls = [];
- // Separate case is for speed
- if (!Ext.isArray(className)) {
- if (typeof className == 'string' && !this.hasClass(className)) {
- me.dom.className += " " + className;
- }
- }
- else {
- for (i = 0, len = className.length; i < len; i++) {
- v = className[i];
- if (typeof v == 'string' && (' ' + me.dom.className + ' ').indexOf(' ' + v + ' ') == -1) {
- cls.push(v);
- }
- }
- if (cls.length) {
- me.dom.className += " " + cls.join(" ");
- }
- }
- return me;
- },
-
- /**
- * Removes one or more CSS classes from the element.
- * @param {String/Array} className The CSS class to remove, or an array of classes
- * @return {Ext.Element} this
- */
- removeClass : function(className){
- var me = this,
- i,
- idx,
- len,
- cls,
- elClasses;
- if (!Ext.isArray(className)){
- className = [className];
- }
- if (me.dom && me.dom.className) {
- elClasses = me.dom.className.replace(trimRe, '').split(spacesRe);
- for (i = 0, len = className.length; i < len; i++) {
- cls = className[i];
- if (typeof cls == 'string') {
- cls = cls.replace(trimRe, '');
- idx = elClasses.indexOf(cls);
- if (idx != -1) {
- elClasses.splice(idx, 1);
- }
- }
- }
- me.dom.className = elClasses.join(" ");
- }
- return me;
- },
-
- /**
- * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
- * @param {String/Array} className The CSS class to add, or an array of classes
- * @return {Ext.Element} this
- */
- radioClass : function(className){
- var cn = this.dom.parentNode.childNodes,
- v,
- i,
- len;
- className = Ext.isArray(className) ? className : [className];
- for (i = 0, len = cn.length; i < len; i++) {
- v = cn[i];
- if (v && v.nodeType == 1) {
- Ext.fly(v, '_internal').removeClass(className);
- }
- };
- return this.addClass(className);
- },
-
- /**
- * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
- * @param {String} className The CSS class to toggle
- * @return {Ext.Element} this
- */
- toggleClass : function(className){
- return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
- },
-
- /**
- * Checks if the specified CSS class exists on this element's DOM node.
- * @param {String} className The CSS class to check for
- * @return {Boolean} True if the class exists, else false
- */
- hasClass : function(className){
- return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
- },
-
- /**
- * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
- * @param {String} oldClassName The CSS class to replace
- * @param {String} newClassName The replacement CSS class
- * @return {Ext.Element} this
- */
- replaceClass : function(oldClassName, newClassName){
- return this.removeClass(oldClassName).addClass(newClassName);
- },
-
- isStyle : function(style, val) {
- return this.getStyle(style) == val;
- },
-
- /**
- * Normalizes currentStyle and computedStyle.
- * @param {String} property The style property whose value is returned.
- * @return {String} The current value of the style property for this element.
- */
- getStyle : function(){
- return view && view.getComputedStyle ?
- function(prop){
- var el = this.dom,
- v,
- cs,
- out,
- display;
-
- if(el == document){
- return null;
- }
- prop = chkCache(prop);
- out = (v = el.style[prop]) ? v :
- (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
-
- // Ignore cases when the margin is correctly reported as 0, the bug only shows
- // numbers larger.
- if(prop == 'marginRight' && out != '0px' && !supports.correctRightMargin){
- display = el.style.display;
- el.style.display = 'inline-block';
- out = view.getComputedStyle(el, '').marginRight;
- el.style.display = display;
- }
-
- if(prop == 'backgroundColor' && out == 'rgba(0, 0, 0, 0)' && !supports.correctTransparentColor){
- out = 'transparent';
- }
- return out;
- } :
- function(prop){
- var el = this.dom,
- m,
- cs;
-
- if(el == document) return null;
- if (prop == 'opacity') {
- if (el.style.filter.match) {
- if(m = el.style.filter.match(opacityRe)){
- var fv = parseFloat(m[1]);
- if(!isNaN(fv)){
- return fv ? fv / 100 : 0;
- }
- }
- }
- return 1;
- }
- prop = chkCache(prop);
- return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
- };
- }(),
-
- /**
- * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
- * are convert to standard 6 digit hex color.
- * @param {String} attr The css attribute
- * @param {String} defaultValue The default value to use when a valid color isn't found
- * @param {String} prefix (optional) defaults to #. Use an empty string when working with
- * color anims.
- */
- getColor : function(attr, defaultValue, prefix){
- var v = this.getStyle(attr),
- color = (typeof prefix != 'undefined') ? prefix : '#',
- h;
-
- if(!v || (/transparent|inherit/.test(v))) {
- return defaultValue;
- }
- if(/^r/.test(v)){
- Ext.each(v.slice(4, v.length -1).split(','), function(s){
- h = parseInt(s, 10);
- color += (h < 16 ? '0' : '') + h.toString(16);
- });
- }else{
- v = v.replace('#', '');
- color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
- }
- return(color.length > 5 ? color.toLowerCase() : defaultValue);
- },
-
- /**
- * Wrapper for setting style properties, also takes single object parameter of multiple styles.
- * @param {String/Object} property The style property to be set, or an object of multiple styles.
- * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
- * @return {Ext.Element} this
- */
- setStyle : function(prop, value){
- var tmp, style;
-
- if (typeof prop != 'object') {
- tmp = {};
- tmp[prop] = value;
- prop = tmp;
- }
- for (style in prop) {
- value = prop[style];
- style == 'opacity' ?
- this.setOpacity(value) :
- this.dom.style[chkCache(style)] = value;
- }
- return this;
- },
-
- /**
- * Set the opacity of the element
- * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
- * @param {Boolean/Object} animate (optional) a standard Element animation config object or true for
- * the default animation ({duration: .35, easing: 'easeIn'})
- * @return {Ext.Element} this
- */
- setOpacity : function(opacity, animate){
- var me = this,
- s = me.dom.style;
-
- if(!animate || !me.anim){
- if(Ext.isIE){
- var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
- val = s.filter.replace(opacityRe, '').replace(trimRe, '');
-
- s.zoom = 1;
- s.filter = val + (val.length > 0 ? ' ' : '') + opac;
- }else{
- s.opacity = opacity;
- }
- }else{
- me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
- }
- return me;
- },
-
- /**
- * Clears any opacity settings from this element. Required in some cases for IE.
- * @return {Ext.Element} this
- */
- clearOpacity : function(){
- var style = this.dom.style;
- if(Ext.isIE){
- if(!Ext.isEmpty(style.filter)){
- style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
- }
- }else{
- style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
- }
- return this;
- },
-
- /**
- * Returns the offset height of the element
- * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
- * @return {Number} The element's height
- */
- getHeight : function(contentHeight){
- var me = this,
- dom = me.dom,
- hidden = Ext.isIE && me.isStyle('display', 'none'),
- h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0;
-
- h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
- return h < 0 ? 0 : h;
- },
-
- /**
- * Returns the offset width of the element
- * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
- * @return {Number} The element's width
- */
- getWidth : function(contentWidth){
- var me = this,
- dom = me.dom,
- hidden = Ext.isIE && me.isStyle('display', 'none'),
- w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
- w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
- return w < 0 ? 0 : w;
- },
-
- /**
- * Set the width of this Element.
- * @param {Mixed} width The new width. This may be one of:
- * - A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
- * - A String used to set the CSS width style. Animation may not be used.
- *
-// change the height to 200px and animate with default configuration
-Ext.fly('elementId').setHeight(200, true);
-
-// change the height to 150px and animate with a custom configuration
-Ext.fly('elId').setHeight(150, {
- duration : .5, // animation will have a duration of .5 seconds
- // will change the content to "finished"
- callback: function(){ this.{@link #update}("finished"); }
-});
- *
- * @param {Mixed} height The new height. This may be one of:
- * - A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)
- * - A String used to set the CSS height style. Animation may not be used.
- *