<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js">// @tag dom,core
|
<span id='Ext-dom-AbstractElement_style'>/**
|
</span> */
|
Ext.define('Ext.dom.AbstractElement_style', {
|
|
override: 'Ext.dom.AbstractElement'
|
|
}, function() {
|
// local style camelizing for speed
|
var Element = this,
|
wordsRe = /\w/g,
|
spacesRe = /\s+/,
|
transparentRe = /^(?:transparent|(?:rgba[(](?:\s*\d+\s*[,]){3}\s*0\s*[)]))$/i,
|
// In some browsers, currently IE10 and older chrome versions, when ClassList is
|
// supported most elements will have the classList attribute, but some svg elements
|
// will still not have it present, so in a small amount of cases we'll still need
|
// to check at run time whether we can use it.
|
hasClassList = Ext.supports.ClassList,
|
PADDING = 'padding',
|
MARGIN = 'margin',
|
BORDER = 'border',
|
LEFT_SUFFIX = '-left',
|
RIGHT_SUFFIX = '-right',
|
TOP_SUFFIX = '-top',
|
BOTTOM_SUFFIX = '-bottom',
|
WIDTH = '-width',
|
// special markup used throughout Ext when box wrapping elements
|
borders = {l: BORDER + LEFT_SUFFIX + WIDTH, r: BORDER + RIGHT_SUFFIX + WIDTH, t: BORDER + TOP_SUFFIX + WIDTH, b: BORDER + BOTTOM_SUFFIX + WIDTH},
|
paddings = {l: PADDING + LEFT_SUFFIX, r: PADDING + RIGHT_SUFFIX, t: PADDING + TOP_SUFFIX, b: PADDING + BOTTOM_SUFFIX},
|
margins = {l: MARGIN + LEFT_SUFFIX, r: MARGIN + RIGHT_SUFFIX, t: MARGIN + TOP_SUFFIX, b: MARGIN + BOTTOM_SUFFIX},
|
internalFly = new Element.Fly();
|
|
|
Ext.override(Element, {
|
|
<span id='Ext-dom-AbstractElement-property-styleHooks'> /**
|
</span> * This shared object is keyed by style name (e.g., 'margin-left' or 'marginLeft'). The
|
* values are objects with the following properties:
|
*
|
* * `name` (String) : The actual name to be presented to the DOM. This is typically the value
|
* returned by {@link #normalize}.
|
* * `get` (Function) : A hook function that will perform the get on this style. These
|
* functions receive "(dom, el)" arguments. The `dom` parameter is the DOM Element
|
* from which to get ths tyle. The `el` argument (may be null) is the Ext.Element.
|
* * `set` (Function) : A hook function that will perform the set on this style. These
|
* functions receive "(dom, value, el)" arguments. The `dom` parameter is the DOM Element
|
* from which to get ths tyle. The `value` parameter is the new value for the style. The
|
* `el` argument (may be null) is the Ext.Element.
|
*
|
* The `this` pointer is the object that contains `get` or `set`, which means that
|
* `this.name` can be accessed if needed. The hook functions are both optional.
|
* @private
|
*/
|
styleHooks: {},
|
|
// private
|
addStyles : function(sides, styles){
|
var totalSize = 0,
|
sidesArr = (sides || '').match(wordsRe),
|
i,
|
len = sidesArr.length,
|
side,
|
styleSides = [];
|
|
if (len == 1) {
|
totalSize = Math.abs(parseFloat(this.getStyle(styles[sidesArr[0]])) || 0);
|
} else if (len) {
|
for (i = 0; i < len; i++) {
|
side = sidesArr[i];
|
styleSides.push(styles[side]);
|
}
|
//Gather all at once, returning a hash
|
styleSides = this.getStyle(styleSides);
|
|
for (i=0; i < len; i++) {
|
side = sidesArr[i];
|
totalSize += Math.abs(parseFloat(styleSides[styles[side]]) || 0);
|
}
|
}
|
|
return totalSize;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-addCls'> /**
|
</span> * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
|
* @param {String/String[]} className The CSS classes to add separated by space, or an array of classes
|
* @return {Ext.dom.Element} this
|
* @method
|
*/
|
addCls: (function(){
|
var addWithClassList = function(className) {
|
//<debug warn>
|
if (String(className).indexOf('undefined') > -1) {
|
Ext.Logger.warn("called with an undefined className: " + className);
|
}
|
//</debug>
|
var me = this,
|
dom = me.dom,
|
trimRe = me.trimRe,
|
origClassName = className,
|
classList,
|
newCls,
|
i,
|
len,
|
cls;
|
|
if (typeof(className) == 'string') {
|
// split string on spaces to make an array of className
|
className = className.replace(trimRe, '').split(spacesRe);
|
}
|
|
// the gain we have here is that we can skip parsing className and use the
|
// classList.contains method, so now O(M) not O(M+N)
|
if (dom && className && !!(len = className.length)) {
|
if (!dom.className) {
|
dom.className = className.join(' ');
|
} else {
|
classList = dom.classList;
|
if (classList) {
|
for (i = 0; i < len; ++i) {
|
cls = className[i];
|
if (cls) {
|
if (!classList.contains(cls)) {
|
if (newCls) {
|
newCls.push(cls);
|
} else {
|
newCls = dom.className.replace(trimRe, '');
|
newCls = newCls ? [newCls, cls] : [cls];
|
}
|
}
|
}
|
}
|
|
if (newCls) {
|
dom.className = newCls.join(' '); // write to DOM once
|
}
|
} else {
|
addWithoutClassList(origClassName);
|
}
|
}
|
}
|
return me;
|
}, addWithoutClassList = function(className) {
|
//<debug warn>
|
if (String(className).indexOf('undefined') > -1) {
|
Ext.Logger.warn("called with an undefined className: '" + className + "'");
|
}
|
//</debug>
|
var me = this,
|
dom = me.dom,
|
elClasses;
|
|
if (dom && className && className.length) {
|
elClasses = Ext.Element.mergeClsList(dom.className, className);
|
if (elClasses.changed) {
|
dom.className = elClasses.join(' '); // write to DOM once
|
}
|
}
|
return me;
|
};
|
|
return hasClassList ? addWithClassList : addWithoutClassList;
|
})(),
|
|
|
<span id='Ext-dom-AbstractElement-method-removeCls'> /**
|
</span> * Removes one or more CSS classes from the element.
|
* @param {String/String[]} className The CSS classes to remove separated by space, or an array of classes
|
* @return {Ext.dom.Element} this
|
*/
|
removeCls: function(className) {
|
var me = this,
|
dom = me.dom,
|
classList,
|
len,
|
elClasses;
|
|
if (typeof(className) == 'string') {
|
// split string on spaces to make an array of className
|
className = className.replace(me.trimRe, '').split(spacesRe);
|
}
|
|
if (dom && dom.className && className && !!(len = className.length)) {
|
classList = dom.classList;
|
if (len === 1 && classList) {
|
if (className[0]) {
|
classList.remove(className[0]); // one DOM write
|
}
|
} else {
|
elClasses = Ext.Element.removeCls(dom.className, className);
|
if (elClasses.changed) {
|
dom.className = elClasses.join(' ');
|
}
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-radioCls'> /**
|
</span> * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
|
* @param {String/String[]} className The CSS class to add, or an array of classes
|
* @return {Ext.dom.Element} this
|
*/
|
radioCls: 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) {
|
internalFly.attach(v).removeCls(className);
|
}
|
}
|
return this.addCls(className);
|
},
|
|
<span id='Ext-dom-AbstractElement-method-toggleCls'> /**
|
</span> * 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.dom.Element} this
|
* @method
|
*/
|
toggleCls: (function(){
|
var toggleWithClassList = function(className){
|
var me = this,
|
dom = me.dom,
|
classList;
|
|
if (dom) {
|
className = className.replace(me.trimRe, '');
|
if (className) {
|
classList = dom.classList;
|
if (classList) {
|
classList.toggle(className);
|
} else {
|
toggleWithoutClassList(className);
|
}
|
}
|
}
|
|
return me;
|
}, toggleWithoutClassList = function(className){
|
return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
|
};
|
|
return hasClassList ? toggleWithClassList : toggleWithoutClassList;
|
})(),
|
|
<span id='Ext-dom-AbstractElement-method-hasCls'> /**
|
</span> * 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
|
* @method
|
*/
|
hasCls: (function(){
|
var hasClsWithClassList = function(className) {
|
var dom = this.dom,
|
out = false,
|
classList;
|
|
if (dom && className) {
|
classList = dom.classList;
|
if (classList) {
|
out = classList.contains(className);
|
} else {
|
out = hasClsWithoutClassList(className);
|
}
|
}
|
return out;
|
}, hasClsWithoutClassList = function(className){
|
var dom = this.dom;
|
return dom ? className && (' '+dom.className+' ').indexOf(' '+className+' ') !== -1 : false;
|
};
|
|
return hasClassList ? hasClsWithClassList : hasClsWithoutClassList;
|
})(),
|
|
<span id='Ext-dom-AbstractElement-method-replaceCls'> /**
|
</span> * 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.dom.Element} this
|
*/
|
replaceCls: function(oldClassName, newClassName){
|
return this.removeCls(oldClassName).addCls(newClassName);
|
},
|
|
<span id='Ext-dom-AbstractElement-method-isStyle'> /**
|
</span> * Checks if the current value of a style is equal to a given value.
|
* @param {String} style property whose value is returned.
|
* @param {String} value to check against.
|
* @return {Boolean} true for when the current value equals the given value.
|
*/
|
isStyle: function(style, val) {
|
return this.getStyle(style) == val;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getStyle'> /**
|
</span> * Returns a named style property based on computed/currentStyle (primary) and
|
* inline-style if primary is not available.
|
*
|
* @param {String/String[]} property The style property (or multiple property names
|
* in an array) whose value is returned.
|
* @param {Boolean} [inline=false] if `true` only inline styles will be returned.
|
* @return {String/Object} The current value of the style property for this element
|
* (or a hash of named style values if multiple property arguments are requested).
|
* @method
|
*/
|
getStyle: function (property, inline) {
|
var me = this,
|
dom = me.dom,
|
multiple = typeof property != 'string',
|
hooks = me.styleHooks,
|
prop = property,
|
props = prop,
|
len = 1,
|
domStyle, camel, values, hook, out, style, i;
|
|
if (multiple) {
|
values = {};
|
prop = props[0];
|
i = 0;
|
if (!(len = props.length)) {
|
return values;
|
}
|
}
|
|
if (!dom || dom.documentElement) {
|
return values || '';
|
}
|
|
domStyle = dom.style;
|
|
if (inline) {
|
style = domStyle;
|
} else {
|
// Caution: Firefox will not render "presentation" (ie. computed styles) in
|
// iframes that are display:none or those inheriting display:none. Similar
|
// issues with legacy Safari.
|
//
|
style = dom.ownerDocument.defaultView.getComputedStyle(dom, null);
|
|
// fallback to inline style if rendering context not available
|
if (!style) {
|
inline = true;
|
style = domStyle;
|
}
|
}
|
|
do {
|
hook = hooks[prop];
|
|
if (!hook) {
|
hooks[prop] = hook = { name: Element.normalize(prop) };
|
}
|
|
if (hook.get) {
|
out = hook.get(dom, me, inline, style);
|
} else {
|
camel = hook.name;
|
out = style[camel];
|
}
|
|
if (!multiple) {
|
return out;
|
}
|
|
values[prop] = out;
|
prop = props[++i];
|
} while (i < len);
|
|
return values;
|
},
|
|
getStyles: function () {
|
var props = Ext.Array.slice(arguments),
|
len = props.length,
|
inline;
|
|
if (len && typeof props[len-1] == 'boolean') {
|
inline = props.pop();
|
}
|
|
return this.getStyle(props, inline);
|
},
|
|
<span id='Ext-dom-AbstractElement-method-isTransparent'> /**
|
</span> * Returns true if the value of the given property is visually transparent. This
|
* may be due to a 'transparent' style value or an rgba value with 0 in the alpha
|
* component.
|
* @param {String} prop The style property whose value is to be tested.
|
* @return {Boolean} True if the style property is visually transparent.
|
*/
|
isTransparent: function (prop) {
|
var value = this.getStyle(prop);
|
return value ? transparentRe.test(value) : false;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-setStyle'> /**
|
</span> * 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] The value to apply to the given property, or null if an object was passed.
|
* @return {Ext.dom.Element} this
|
*/
|
setStyle: function(prop, value) {
|
var me = this,
|
dom = me.dom,
|
hooks = me.styleHooks,
|
style = dom.style,
|
name = prop,
|
hook;
|
|
// we don't promote the 2-arg form to object-form to avoid the overhead...
|
if (typeof name == 'string') {
|
hook = hooks[name];
|
if (!hook) {
|
hooks[name] = hook = { name: Element.normalize(name) };
|
}
|
value = (value == null) ? '' : value;
|
if (hook.set) {
|
hook.set(dom, value, me);
|
} else {
|
style[hook.name] = value;
|
}
|
if (hook.afterSet) {
|
hook.afterSet(dom, value, me);
|
}
|
} else {
|
for (name in prop) {
|
if (prop.hasOwnProperty(name)) {
|
hook = hooks[name];
|
if (!hook) {
|
hooks[name] = hook = { name: Element.normalize(name) };
|
}
|
value = prop[name];
|
value = (value == null) ? '' : value;
|
if (hook.set) {
|
hook.set(dom, value, me);
|
} else {
|
style[hook.name] = value;
|
}
|
if (hook.afterSet) {
|
hook.afterSet(dom, value, me);
|
}
|
}
|
}
|
}
|
|
return me;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getHeight'> /**
|
</span> * Returns the offset height of the element
|
* @param {Boolean} [contentHeight] true to get the height minus borders and padding
|
* @return {Number} The element's height
|
*/
|
getHeight: function(contentHeight) {
|
var dom = this.dom,
|
height = contentHeight ? (dom.clientHeight - this.getPadding("tb")) : dom.offsetHeight;
|
return height > 0 ? height: 0;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getWidth'> /**
|
</span> * Returns the offset width of the element
|
* @param {Boolean} [contentWidth] true to get the width minus borders and padding
|
* @return {Number} The element's width
|
*/
|
getWidth: function(contentWidth) {
|
var dom = this.dom,
|
width = contentWidth ? (dom.clientWidth - this.getPadding("lr")) : dom.offsetWidth;
|
return width > 0 ? width: 0;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-setWidth'> /**
|
</span> * Set the width of this Element.
|
* @param {Number/String} 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.
|
*
|
* @return {Ext.dom.Element} this
|
*/
|
setWidth: function(width) {
|
var me = this;
|
me.dom.style.width = Element.addUnits(width);
|
return me;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-setHeight'> /**
|
</span> * Set the height of this Element.
|
*
|
* // 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 : 500, // animation will have a duration of .5 seconds
|
* // will change the content to "finished"
|
* callback: function(){ this.{@link #update}("finished"); }
|
* });
|
*
|
* @param {Number/String} 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.
|
*
|
* @return {Ext.dom.Element} this
|
*/
|
setHeight: function(height) {
|
var me = this;
|
me.dom.style.height = Element.addUnits(height);
|
return me;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getBorderWidth'> /**
|
</span> * Gets the width of the border(s) for the specified side(s)
|
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
|
* passing `'lr'` would get the border **l**eft width + the border **r**ight width.
|
* @return {Number} The width of the sides passed added together
|
*/
|
getBorderWidth: function(side){
|
return this.addStyles(side, borders);
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getPadding'> /**
|
</span> * Gets the width of the padding(s) for the specified side(s)
|
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
|
* passing `'lr'` would get the padding **l**eft + the padding **r**ight.
|
* @return {Number} The padding of the sides passed added together
|
*/
|
getPadding: function(side){
|
return this.addStyles(side, paddings);
|
},
|
|
margins : margins,
|
|
<span id='Ext-dom-AbstractElement-method-applyStyles'> /**
|
</span> * More flexible version of {@link #setStyle} for setting style properties.
|
* @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
|
* a function which returns such a specification.
|
* @return {Ext.dom.Element} this
|
*/
|
applyStyles: function(styles) {
|
if (styles) {
|
var i,
|
len,
|
dom = this.dom;
|
|
if (typeof styles == 'function') {
|
styles = styles.call();
|
}
|
if (typeof styles == 'string') {
|
styles = Ext.util.Format.trim(styles).split(/\s*(?::|;)\s*/);
|
for (i = 0, len = styles.length; i < len;) {
|
dom.style[Element.normalize(styles[i++])] = styles[i++];
|
}
|
}
|
else if (typeof styles == 'object') {
|
this.setStyle(styles);
|
}
|
}
|
},
|
|
<span id='Ext-dom-AbstractElement-method-setSize'> /**
|
</span> * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
|
* @param {Number/String} 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.
|
* - A size object in the format `{width: widthValue, height: heightValue}`.
|
*
|
* @param {Number/String} 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.
|
*
|
* @return {Ext.dom.Element} this
|
*/
|
setSize: function(width, height) {
|
var me = this,
|
style = me.dom.style;
|
|
if (Ext.isObject(width)) {
|
// in case of object from getSize()
|
height = width.height;
|
width = width.width;
|
}
|
|
style.width = Element.addUnits(width);
|
style.height = Element.addUnits(height);
|
return me;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getViewSize'> /**
|
</span> * Returns the dimensions of the element available to lay content out in.
|
*
|
* If the element (or any ancestor element) has CSS style `display: none`, the dimensions will be zero.
|
*
|
* Example:
|
*
|
* var vpSize = Ext.getBody().getViewSize();
|
*
|
* // all Windows created afterwards will have a default value of 90% height and 95% width
|
* Ext.Window.override({
|
* width: vpSize.width * 0.9,
|
* height: vpSize.height * 0.95
|
* });
|
* // To handle window resizing you would have to hook onto onWindowResize.
|
*
|
* getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
|
* To obtain the size including scrollbars, use getStyleSize
|
*
|
* Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
|
*
|
* @return {Object} Object describing width and height.
|
* @return {Number} return.width
|
* @return {Number} return.height
|
*/
|
getViewSize: function() {
|
var doc = document,
|
dom = this.dom;
|
|
if (dom == doc || dom == doc.body) {
|
return {
|
width: Element.getViewportWidth(),
|
height: Element.getViewportHeight()
|
};
|
}
|
else {
|
return {
|
width: dom.clientWidth,
|
height: dom.clientHeight
|
};
|
}
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getSize'> /**
|
</span> * Returns the size of the element.
|
* @param {Boolean} [contentSize] true to get the width/size minus borders and padding
|
* @return {Object} An object containing the element's size:
|
* @return {Number} return.width
|
* @return {Number} return.height
|
*/
|
getSize: function(contentSize) {
|
var dom = this.dom;
|
return {
|
width: Math.max(0, contentSize ? (dom.clientWidth - this.getPadding("lr")) : dom.offsetWidth),
|
height: Math.max(0, contentSize ? (dom.clientHeight - this.getPadding("tb")) : dom.offsetHeight)
|
};
|
},
|
|
<span id='Ext-dom-AbstractElement-method-repaint'> /**
|
</span> * Forces the browser to repaint this element
|
* @return {Ext.dom.Element} this
|
*/
|
repaint: function() {
|
var dom = this.dom;
|
this.addCls(Ext.baseCSSPrefix + 'repaint');
|
setTimeout(function(){
|
internalFly.attach(dom).removeCls(Ext.baseCSSPrefix + 'repaint');
|
}, 1);
|
return this;
|
},
|
|
<span id='Ext-dom-AbstractElement-method-getMargin'> /**
|
</span> * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
|
* then it returns the calculated width of the sides (see getPadding)
|
* @param {String} [sides] Any combination of l, r, t, b to get the sum of those sides
|
* @return {Object/Number}
|
*/
|
getMargin: function(side){
|
var me = this,
|
hash = {t:"top", l:"left", r:"right", b: "bottom"},
|
key,
|
o,
|
margins;
|
|
if (!side) {
|
margins = [];
|
for (key in me.margins) {
|
if(me.margins.hasOwnProperty(key)) {
|
margins.push(me.margins[key]);
|
}
|
}
|
o = me.getStyle(margins);
|
if(o && typeof o == 'object') {
|
//now mixin nomalized values (from hash table)
|
for (key in me.margins) {
|
if(me.margins.hasOwnProperty(key)) {
|
o[hash[key]] = parseFloat(o[me.margins[key]]) || 0;
|
}
|
}
|
}
|
|
return o;
|
} else {
|
return me.addStyles(side, me.margins);
|
}
|
},
|
|
<span id='Ext-dom-AbstractElement-method-mask'> /**
|
</span> * 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] A message to display in the mask
|
* @param {String} [msgCls] A css class to apply to the msg element
|
*/
|
mask: function(msg, msgCls, transparent) {
|
var me = this,
|
dom = me.dom,
|
data = (me.$cache || me.getCache()).data,
|
el = data.mask,
|
mask,
|
size,
|
cls = '',
|
prefix = Ext.baseCSSPrefix;
|
|
me.addCls(prefix + 'masked');
|
if (me.getStyle("position") == "static") {
|
me.addCls(prefix + 'masked-relative');
|
}
|
if (el) {
|
el.remove();
|
}
|
if (msgCls && typeof msgCls == 'string' ) {
|
cls = ' ' + msgCls;
|
}
|
else {
|
cls = ' ' + prefix + 'mask-gray';
|
}
|
|
mask = me.createChild({
|
cls: prefix + 'mask' + ((transparent !== false) ? '' : (' ' + prefix + 'mask-gray')),
|
html: msg ? ('<div class="' + (msgCls || (prefix + 'mask-message')) + '">' + msg + '</div>') : ''
|
});
|
|
size = me.getSize();
|
|
data.mask = mask;
|
|
if (dom === document.body) {
|
size.height = window.innerHeight;
|
if (me.orientationHandler) {
|
Ext.EventManager.unOrientationChange(me.orientationHandler, me);
|
}
|
|
me.orientationHandler = function() {
|
size = me.getSize();
|
size.height = window.innerHeight;
|
mask.setSize(size);
|
};
|
|
Ext.EventManager.onOrientationChange(me.orientationHandler, me);
|
}
|
mask.setSize(size);
|
if (Ext.is.iPad) {
|
Ext.repaint();
|
}
|
},
|
|
<span id='Ext-dom-AbstractElement-method-unmask'> /**
|
</span> * Removes a previously applied mask.
|
*/
|
unmask: function() {
|
var me = this,
|
data = (me.$cache || me.getCache()).data,
|
mask = data.mask,
|
prefix = Ext.baseCSSPrefix;
|
|
if (mask) {
|
mask.remove();
|
delete data.mask;
|
}
|
me.removeCls([prefix + 'masked', prefix + 'masked-relative']);
|
|
if (me.dom === document.body) {
|
Ext.EventManager.unOrientationChange(me.orientationHandler, me);
|
delete me.orientationHandler;
|
}
|
}
|
});
|
|
|
Ext.onReady(function () {
|
var supports = Ext.supports,
|
styleHooks,
|
colorStyles, i, name, camel;
|
|
function fixTransparent (dom, el, inline, style) {
|
var value = style[this.name] || '';
|
return transparentRe.test(value) ? 'transparent' : value;
|
}
|
|
function fixRightMargin (dom, el, inline, style) {
|
var result = style.marginRight,
|
domStyle, display;
|
|
// Ignore cases when the margin is correctly reported as 0, the bug only shows
|
// numbers larger.
|
if (result != '0px') {
|
domStyle = dom.style;
|
display = domStyle.display;
|
domStyle.display = 'inline-block';
|
result = (inline ? style : dom.ownerDocument.defaultView.getComputedStyle(dom, null)).marginRight;
|
domStyle.display = display;
|
}
|
|
return result;
|
}
|
|
function fixRightMarginAndInputFocus (dom, el, inline, style) {
|
var result = style.marginRight,
|
domStyle, cleaner, display;
|
|
if (result != '0px') {
|
domStyle = dom.style;
|
cleaner = Element.getRightMarginFixCleaner(dom);
|
display = domStyle.display;
|
domStyle.display = 'inline-block';
|
result = (inline ? style : dom.ownerDocument.defaultView.getComputedStyle(dom, '')).marginRight;
|
domStyle.display = display;
|
cleaner();
|
}
|
|
return result;
|
}
|
|
styleHooks = Element.prototype.styleHooks;
|
|
// Ext.supports needs to be initialized (we run very early in the onready sequence),
|
// but it is OK to call Ext.supports.init() more times than necessary...
|
if (supports.init) {
|
supports.init();
|
}
|
|
// Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343
|
if (!supports.RightMargin) {
|
styleHooks.marginRight = styleHooks['margin-right'] = {
|
name: 'marginRight',
|
// TODO - Touch should use conditional compilation here or ensure that the
|
// underlying Ext.supports flags are set correctly...
|
get: (supports.DisplayChangeInputSelectionBug || supports.DisplayChangeTextAreaSelectionBug) ?
|
fixRightMarginAndInputFocus : fixRightMargin
|
};
|
}
|
|
if (!supports.TransparentColor) {
|
colorStyles = ['background-color', 'border-color', 'color', 'outline-color'];
|
for (i = colorStyles.length; i--; ) {
|
name = colorStyles[i];
|
camel = Element.normalize(name);
|
|
styleHooks[name] = styleHooks[camel] = {
|
name: camel,
|
get: fixTransparent
|
};
|
}
|
}
|
});
|
|
});
|
</pre>
|
</body>
|
</html>
|
