return me._DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
},
+/*
+ * CSS における display, position, float プロパティの相互関係
+ * http://d.hatena.ne.jp/elm200/20080201/1201874740
+ *
+ * CSS21:9.7 Relationships between ’display’, ’position’, and ’float’
+ * http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
+ *
+ * display:none? -yes-> 非表示
+ * ↓
+ * position:absolute? -yes-> float:none,display:block;
+ * ↓
+ * float:none? -no-> display:block;
+ * ↓
+ * display:そのまま
+ *
+ *
+display position float
+block static|relative none
+block static|relative right|left
+block absolute none
+inline static|relative none
+
+_DISPLAY_NONE
+_ABSOLUTE_BOX
+_FLOAT_BOX
+_GRNERAL
+ */
objToCssText : function( obj ){
var css = [],
me = X.Dom.Style,
VENDER_PREFIX = me.VENDER_PREFIX,
FIX_PROP = me.SPECIAL_FIX_PROP,
SPECIAL_FIX = me.SPECIAL_FIX,
+ n = -1,
p, name, sp;
for( p in obj ){
name = uncamelize( p );
if( FIX_PROP[ name ] ){
sp = 1;
} else {
- css[ css.length ] = [ VENDER_PREFIX[ name ] || name, obj[ p ] ].join( ':' );
+ css[ ++n ] = [ VENDER_PREFIX[ name ] || name, obj[ p ] ].join( ':' );
};
};
- sp && ( css[ css.length ] = SPECIAL_FIX( obj ) );
+ sp && ( css[ ++n ] = 'filter:' + SPECIAL_FIX( obj ) );
return css.join( ';' );
},
+ IE_FILTER_FIX :
+ X.UA.IE && X.UA.IE < 9 ?
+ {
+ opacity : 1,
+ textShadow : 1
+ } :
+ 9 <= X.UA.IE && X.UA.IE < 10 ? // == 9
+ {} :
+ {},
+
_UNIT_RATIO : null,
_FONT_SIZE_RATIO : null,
X.UA.IE && X.UA.IE < 9 ?
(function( obj ){
var test = X.Dom.Style.SPECIAL_FIX_PROP,
- filters = [], p, id, v;
+ filters = [],
+ n = -1,
+ p, id, v, dir;
for( p in obj ){
if( !( id = test[ p ] ) ) continue;
v = obj[ p ];
switch( id ){
case 1 : //'filter' :
- filters[ filters.length ] = v;
+ filters[ ++n ] = v;
break;
case 2 : //'opacity' :
- filters[ filters.length ] = 'aplha(opacity=' + v +')';
+ filters[ ++n ] = 'alpha(opacity=' + v * 100 +')';
break;
case 3 : //'boxShadow' :
// box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
// スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可
// shadow(color=#cccccc, strength=10, direction=135);
- parseValue( 'boxShadow', v, 'px' );
- dir = Math.atan2( ary[1], ary[0] ) * 180 / Math.PI + 90;
+ v = X.Dom.Style._getProperty( this, css, 'px', 'boxShadow' );
+ dir = Math.atan2( v[ 1 ], v[ 0 ] ) * 180 / Math.PI + 90;
dir += dir < 0 ? 360 : 0;
+ filters[ ++n ] = 'shadow(color=' + v[ 4 ] + ',strength=' + v[ 3 ] + ',direction=' + dir + ')';
break;
case 4 : //'textShadow' :
//text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none
//glow(Color=yellow,Strength=10);
//どうやらCSSのbackgroundプロパティと同時に使えないようです。
+
+
break;
case 5 : //'backgroundImage' :
//
};
};
- if( filters ) return filters.join( ' ' );
+ return filters.join( ' ' );
}) :
// IE9 textShadow に filter を使用
X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
// unitID, name 単位指定のプロパティ取得 geter
// obj setter
// name, value setter
+
X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
var XDomStyle = X.Dom.Style,
args = arguments,
css = this._css,
- p, valOrUnit, name, v, node, camelize, unit;
+ p, name, v, camelize, unit, ieFix;
if( this._xnodeType !== 1 ) return this;
// setter:object
if( X.Type.isObject( nameOrObj ) ){
if( !css ) css = this._css = {};
camelize = XDomStyle.camelize;
+ ieFix = X.Dom.Style.IE_FILTER_FIX;
for( p in nameOrObj ){
- css[ camelize( p ) ] = nameOrObj[ p ];
- };
- this._cssText = XDomStyle.objToCssText( this._css );
- if( node = this._ie4getRawNode ? this._ie4getRawNode() : this._rawNode ){
- if( this._cssText ){
- node.style.cssText = this._cssText;
- this._styleText = ' style="' + this._cssText + '"';
- } else {
- node.removeAttribute( 'style' );
- delete this._cssText;
- delete this._styleText;
+ if( ieFix[ p ] ){
+ this._dirty |= X.Dom.Dirty.IE_FILTER;
+ };
+ v = nameOrObj[ p ];
+ v || v === 0 ? css[ camelize( p ) ] = v : delete css[ camelize( p ) ];
+ if( p === 'display' ){
+ v === 'none' ? ( this._state |= X.Dom.State.IE5_DISPLAY_NONE_FIX ) : ( this._state &= ~X.Dom.State.IE5_DISPLAY_NONE_FIX );
+ v === 'none' ? ( this._state |= X.Dom.State.DISPLAY_NONE ) : ( this._state &= ~X.Dom.State.DISPLAY_NONE );
};
};
+ this._dirty |= X.Dom.Dirty.CSS;
+ this.parent && this._reserveUpdate();
+ delete this._cssText;
return this;
} else
if( 1 < args.length ){
if( !css ) css = this._css = {};
name = XDomStyle.camelize( nameOrObj );
v = args[ 1 ];
- node = this._ie4getRawNode ? this._ie4getRawNode() : this._rawNode;
if( css[ name ] === v ) return this;
+ if( X.Dom.Style.IE_FILTER_FIX[ name ] ){
+ this._dirty |= X.Dom.Dirty.IE_FILTER;
+ };
if( !v && v !== 0 ){
delete css[ name ];
- if( node ){
- node.style[ name ] = ''; // val
- };
- this._cssText = XDomStyle.objToCssText( css );
- if( !this._cssText ){
- delete this._cssText;
- delete this._styleText;
- node && node.removeAttribute( 'style' );
- };
- return this;
- };
- if( node ){
- node.style[ name ] = v; // val
- };
- if( !css[ name ] ){
- this._cssText = [ this._cssText, this._cssText ? ';' : '', XDomStyle.uncamelize( nameOrObj ), ':', v ].join( '' );
- css[ name ] = v;
} else {
css[ name ] = v;
- this._cssText = XDomStyle.objToCssText( css );
};
- this._styleText = ' style="' + this._cssText + '"';
+ delete this._cssText;
+ this._dirty |= X.Dom.Dirty.CSS;
+ if( name === 'display' ){
+ v === 'none' ? ( this._state |= X.Dom.State.IE5_DISPLAY_NONE_FIX ) : ( this._state &= ~X.Dom.State.IE5_DISPLAY_NONE_FIX );
+ v === 'none' ? ( this._state |= X.Dom.State.DISPLAY_NONE ) : ( this._state &= ~X.Dom.State.DISPLAY_NONE );
+ };
+ // parent でなく this._root! でなくて this._state & in tree
+ this.parent && this._reserveUpdate();
return this;
};
// getter unit
// unit 付の値取得は fontSize と 画像サイズが確定していないと正確に取れない。内部のみにする?
if( !css ) return;
- if( !X.Dom.Style._GET_VALUE_WITH_UNIT[ name = XDomStyle.camelize( args[ 1 ] ) ] ) return null;
+ if( !XDomStyle._GET_VALUE_WITH_UNIT[ name = XDomStyle.camelize( args[ 1 ] ) ] ) return null;
p = XDomStyle._getProperty( this, css, unit, name );
v = p.pxTo( unit );
p.kill();
};
X.Dom.Node.prototype.cssText = function( v ){
- var camelize, obj, i, l, attr, name;
+ var obj, i, l, attr, name;
if( X.Type.isString( v ) ){
- camelize = X.Dom.Style.camelize;
+ delete this._css;
obj = {};
v = v.split( ';' );
- delete this._css;
for( i = 0, l = v.length; i < l; ++i ){
attr = v[ i ].split( ':' );
- name = camelize( attr[ 0 ] );
- name && ( obj[ name ] = attr[ 1 ] || true );
+ ( name = attr[ 0 ] ) && ( obj[ name ] = attr[ 1 ] || true );
};
return this.css( obj );
};
+ // getter
+ if( this._dirty & X.Dom.Dirty.CSS && !( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){
+ delete this._cssText;
+ };
return this._cssText;
};
/*
- * ã\81\93ã\81\93ã\81§ã\81¯ HTMLElement ã\81\8bã\81®ã\83\81ã\83£ã\83\83ã\82¯ã\81¯è¡\8cã\82\8fã\81ªã\81\84ï¼\81
+ * ここでは HTMLElement のチャックは行わない!
*/
X.Dom.Node.prototype._getCharSize =
window.getComputedStyle ?
(function(){
return parseInt( document.defaultView.getComputedStyle( this._rawNode, null ).fontSize );
}) :
- X.UA.IE && 5 <= X.UA.IE ?
+ X.UA.IE && 5.5 <= X.UA.IE ?
(function(){
+ if( this === Node.root && X.Dom.Event._lastFontSize ) return X.Dom.Event._lastFontSize;
var font = this._rawNode.currentStyle.fontSize,
vu = X.Dom.Style._Util._splitValueAndUnit( font ),
v = vu[ 0 ],
- u = vu[ 1 ];
+ u = vu[ 1 ],
+ elm;
+ if( v === 0 ){
+ if( v = X.Dom.Style._FONT_SIZE_RATIO[ font ] ) return v;
+ } else {
+ if( u = X.Dom.Style._UNIT_RATIO[ u ] ) return v / u;
+ };
switch( u ){
case 'px' :
return v;
case 'em' :
// body まで辿ってしまった場合は?
- return this.parent._getCharSize() * v;
+ if( this.parent ) return this.parent._getCharSize() * v;
+ break;
case '%' :
// body まで辿ってしまった場合は?
- return this.parent._getCharSize() * v / 100;
+ if( this.parent ) return this.parent._getCharSize() * v / 100;
+ break;
};
- return v === 0 ?
- ( X.Dom.Style._FONT_SIZE_RATIO[ font ] || 0 ) :
- v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
- // appendChild
- // removeChild
+ elm = document.createElement( 'div' );
+ Node._systemNode._rawNode.appendChild( elm );
+ elm.style.cssText = 'position:absolute;top:0;left:0;overflow:hidden;line-height:1;height:1em;';
+ elm.innerText = 'X';
+ v = elm.offsetHeight;
+ Node._systemNode._rawNode.removeChild( elm );
+ return v;
}) :
- document.removeChild ?
+ document.getElementById ?
(function(){
var elm = document.createElement( 'span' ),
v;
- elm.style.cssText = 'display:block;position:absolute;top:0;left:0;visivility:hidden;line-height:1;height:1em;';
- elm.innerHTML = 'X';
this._rawNode.appendChild( elm );
+ elm.style.cssText = 'display:block;position:absolute;top:0;left:0;visivility:hidden;line-height:1;height:1em;';
+ elm.innerHTML = 'X';
v = elm.offsetHeight;
this._rawNode.removeChild( elm );
return v;
}) :
X.UA.IE ?
(function(){
- var elm = this._rawNode, v;
+ var elm = this._rawNode || this._ie4getRawNode(), v;
elm.insertAdjacentHTML( 'BeforeEnd', '<span style="visivility:hidden;line-height:1;">X</span>' );
elm = elm.children[ elm.children.length - 1 ];
v = elm.offsetHeight;
elm.outerHTML = '';
- return v;
+ return v * 0.75;
}) :
(function(){
});
X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT, function(){
- var testStyle = X.Dom._root;
+ var testStyle = X.Dom._root.style;
X.Dom.Style.VENDER_PREFIX = (function(){
var ret = {},
};
return ret;
})();
-
+
X.Dom.Style.SPECIAL_FIX_PROP =
// ~IE8
X.UA.IE && X.UA.IE < 9 ?
output = X.Dom.Style._FONT_SIZE_RATIO = {},
list = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );
- base = xnode.css( 'lineHeight', 1 ).text( 'X' ).height();
+ xnode.css( { lineHeight : '100%', height : '1em' } ).text( 'X' );
for( i = list.length; i; ){
size = list[ --i ];
- output[ size ] = xnode.css( 'fontSize', size ).height() / base;
+ output[ size ] = xnode.css( 'fontSize', size ).height();// / base;
};
- xnode.empty().cssText( '' );
-} );
\ No newline at end of file
+ xnode.cssText( '' ).empty();
+} );
+