OSDN Git Service

Version 0.6.31, async parser, add X.Dom.Builder.js.
[pettanr/clientJs.git] / 0.6.x / js / dom / 15_XDomStyle.js
index 45c2d45..31ddc30 100644 (file)
@@ -132,19 +132,30 @@ _GRNERAL
                        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,
 
@@ -843,35 +854,40 @@ X.Dom.Style.SPECIAL_FIX =
        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 ?
@@ -936,14 +952,23 @@ X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */
        var XDomStyle = X.Dom.Style,
                args = arguments,
                css  = this._css,
-               p, valOrUnit, name, v, 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 ];
+                       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();
@@ -957,6 +982,9 @@ X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */
                        name = XDomStyle.camelize( nameOrObj );
                        v    = args[ 1 ];
                        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 ];
                        } else {
@@ -964,7 +992,11 @@ X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */
                        };
                        delete this._cssText;
                        this._dirty |= X.Dom.Dirty.CSS;
-                       // parent でなく this._root!
+                       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;
                };
@@ -987,15 +1019,19 @@ X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */
 X.Dom.Node.prototype.cssText = function( v ){
        var obj, i, l, attr, name;
        if( X.Type.isString( v ) ){
+               delete this._css;
                obj = {};
                v   = v.split( ';' );
-               delete this._css;
                for( i = 0, l = v.length; i < l; ++i ){
                        attr = v[ i ].split( ':' );
                        ( 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;
 };
 
@@ -1011,54 +1047,65 @@ X.Dom.Node.prototype._getCharSize =
                (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.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       = {},
@@ -1092,7 +1139,7 @@ X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT, function(){
                };
                return ret;
        })();
-               
+       
        X.Dom.Style.SPECIAL_FIX_PROP =
                // ~IE8
                X.UA.IE && X.UA.IE < 9 ?
@@ -1132,13 +1179,13 @@ X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
 
        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( '' );
+       xnode.cssText( '' ).empty();
 } );