X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F02_dom%2F06_XNodeCSS.js;h=a951a50c9e2c10493c20470cc236dd2e21f5fc5e;hb=f74335422a0ae2d66e3ce9bfa03f0c77a107e8d1;hp=9a9d85b4bab90f7751ce48d2e71f078941026a30;hpb=2956150a7c2798e60639b36d69b0c13f6b20a62a;p=pettanr%2FclientJs.git diff --git a/0.6.x/js/02_dom/06_XNodeCSS.js b/0.6.x/js/02_dom/06_XNodeCSS.js index 9a9d85b..a951a50 100644 --- a/0.6.x/js/02_dom/06_XNodeCSS.js +++ b/0.6.x/js/02_dom/06_XNodeCSS.js @@ -190,7 +190,7 @@ function X_Node_CSS_parseColor( x ){ var rgb, r, g, b; if( X_Type_isNumber( x ) ){ - return ( 0x0 <= x && x <= 0xFFFFFF ) ? x : undefined; + return ( 0x0 <= x && x <= 0xFFFFFF ) ? x : NaN; } else if( !X_Type_isString( x ) ) return; @@ -239,9 +239,9 @@ function X_Node_CSS_parseColor( x ){ b *= 2.55; }; } else { - return undefined; + return NaN; }; - return isFinite( r + b + g ) ? ( r << 16 ) + ( g << 8 ) + b : undefined; + return X_Type_isFinite( r + b + g ) ? ( r << 16 ) + ( g << 8 ) + b : NaN; }; function X_Node_CSS_objToCssText( that, skipFilter ){ @@ -251,7 +251,7 @@ function X_Node_CSS_objToCssText( that, skipFilter ){ n = -1, p, v, specialFix, filterFix; - that[ '_flags' ] &= ~X_Node_State.OLD_CSSTEXT; + that[ '_flags' ] &= ~X_NodeFlags_OLD_CSSTEXT; if( !obj ){ // Opera7.5 未満? delete that[ '_cssText' ]; @@ -299,7 +299,7 @@ function X_Node_CSS_objToCssText( that, skipFilter ){ var X_Node_CSS_FILTER_FIX_PROPS = - X_UA[ 'ActiveX' ] && X_UA[ 'IE' ] < 9 && !X_UA[ 'MacIE' ] ? + X_UA[ 'ActiveX' ] && X_UA[ 'IE' ] < 9 ? { 'opacity' : 2, 'boxShadow' : 3, @@ -330,7 +330,7 @@ function X_Node_CSS_objToIEFilterText( that, opt_css ){ filters[ ++n ] = v; break; case 2 : //'opacity' : - filters[ ++n ] = 'alpha(opacity=' + ( v * 100 | 0 ) +')'; + if( v !== 1 ) filters[ ++n ] = 'alpha(opacity=' + ( v * 100 | 0 ) +')'; break; case 3 : //'boxShadow' : // TODO カンマ区切りの複数指定 @@ -416,8 +416,8 @@ function X_Node_CSS_objToIEFilterText( that, opt_css ){ }; function X_Node_CSS_onAfterUpdateForIEFilterFix(){ - if( this[ '_flags' ] & X_Node_State.IN_TREE ){ // 要素があり、要素がツリーに属している - this[ '_flags' ] |= X_Node_State.DIRTY_IE_FILTER; + if( this[ '_flags' ] & X_NodeFlags_IN_TREE ){ // 要素があり、要素がツリーに属している + this[ '_flags' ] |= X_NodeFlags_DIRTY_IE_FILTER; X_Node_reserveUpdate(); }; }; @@ -517,7 +517,7 @@ function X_Node_CSS__splitValueAndUnit( v ){ * // setter - 2 * node.css( 'color', 0x666666 ); */ -Node.prototype[ 'css' ] = function( nameOrObj /* value */ ){ +function X_Node_css( nameOrObj /* value */ ){ var args = arguments, css = this[ '_css' ], p, name, v, plain, camelize, flags; @@ -536,9 +536,9 @@ Node.prototype[ 'css' ] = function( nameOrObj /* value */ ){ if( css[ name ] === v ) continue; flags = X_Node_CSS_setStyle( css, flags, name, v ); }; - flags |= X_Node_State.DIRTY_CSS | X_Node_State.OLD_CSSTEXT; + flags |= X_NodeFlags_DIRTY_CSS | X_NodeFlags_OLD_CSSTEXT; this[ '_flags' ] = flags; - flags & X_Node_State.IN_TREE && X_Node_reserveUpdate(); + flags & X_NodeFlags_IN_TREE && X_Node_reserveUpdate(); delete this[ '_cssText' ]; return this; } else @@ -548,8 +548,8 @@ Node.prototype[ 'css' ] = function( nameOrObj /* value */ ){ name = X_Node_CSS_camelize( nameOrObj ); v = args[ 1 ]; if( css[ name ] === v ) return this; - this[ '_flags' ] = X_Node_CSS_setStyle( css, this[ '_flags' ], name, v ) | X_Node_State.DIRTY_CSS | X_Node_State.OLD_CSSTEXT; - this[ '_flags' ] & X_Node_State.IN_TREE && X_Node_reserveUpdate(); + this[ '_flags' ] = X_Node_CSS_setStyle( css, this[ '_flags' ], name, v ) | X_NodeFlags_DIRTY_CSS | X_NodeFlags_OLD_CSSTEXT; + this[ '_flags' ] & X_NodeFlags_IN_TREE && X_Node_reserveUpdate(); delete this[ '_cssText' ]; return this; }; @@ -563,7 +563,7 @@ Node.prototype[ 'css' ] = function( nameOrObj /* value */ ){ function X_Node_CSS_setStyle( css, flags, name, newValue ){ if( X_Node_CSS_FILTER_FIX_PROPS && X_Node_CSS_FILTER_FIX_PROPS[ name ] ){ - flags |= X_Node_State.DIRTY_IE_FILTER; + flags |= X_NodeFlags_DIRTY_IE_FILTER; }; if( !newValue && newValue !== 0 ){ delete css[ name ]; @@ -574,49 +574,49 @@ function X_Node_CSS_setStyle( css, flags, name, newValue ){ switch( name ){ case 'display' : console.log( newValue ); - newValue === 'none' ? ( flags |= X_Node_State.STYLE_IS_DISPLAY_NONE ) : ( flags &= ~X_Node_State.STYLE_IS_DISPLAY_NONE ); + newValue === 'none' ? ( flags |= X_NodeFlags_STYLE_IS_DISPLAY_NONE ) : ( flags &= ~X_NodeFlags_STYLE_IS_DISPLAY_NONE ); return flags; case 'visibility' : // すでに opacity:0 で invisible - if( flags & X_Node_State.STYLE_IS_INVISIBLE && css[ 'opacity' ] == 0 ) return flags; - newValue === 'hidden' ? ( flags |= X_Node_State.STYLE_IS_INVISIBLE ) : ( flags &= ~X_Node_State.STYLE_IS_INVISIBLE ); + if( flags & X_NodeFlags_STYLE_IS_INVISIBLE && css[ 'opacity' ] == 0 ) return flags; + newValue === 'hidden' ? ( flags |= X_NodeFlags_STYLE_IS_INVISIBLE ) : ( flags &= ~X_NodeFlags_STYLE_IS_INVISIBLE ); return flags; case 'opacity' : // すでに visibility:hidden で invisible - if( flags & X_Node_State.STYLE_IS_INVISIBLE && css[ 'visibility' ] === 'hidden' ) return flags; + if( flags & X_NodeFlags_STYLE_IS_INVISIBLE && css[ 'visibility' ] === 'hidden' ) return flags; newValue == 0 ? // 0 or "0" - ( flags |= X_Node_State.STYLE_IS_INVISIBLE ) : ( flags &= ~X_Node_State.STYLE_IS_INVISIBLE ); + ( flags |= X_NodeFlags_STYLE_IS_INVISIBLE ) : ( flags &= ~X_NodeFlags_STYLE_IS_INVISIBLE ); return flags; case 'overflow' : - newValue === 'hidden' ? ( flags |= X_Node_State.STYLE_IS_NO_OVERFLOW ) : ( flags &= ~X_Node_State.STYLE_IS_NO_OVERFLOW ); + newValue === 'hidden' ? ( flags |= X_NodeFlags_STYLE_IS_NO_OVERFLOW ) : ( flags &= ~X_NodeFlags_STYLE_IS_NO_OVERFLOW ); return flags; case 'position' : - newValue === 'absolute' ? ( flags |= X_Node_State.STYLE_IS_POS_ABSOLUTE ) : ( flags &= ~X_Node_State.STYLE_IS_POS_ABSOLUTE ); + newValue === 'absolute' ? ( flags |= X_NodeFlags_STYLE_IS_POS_ABSOLUTE ) : ( flags &= ~X_NodeFlags_STYLE_IS_POS_ABSOLUTE ); return flags; case 'width' : newValue = X_Node_CSS__splitValueAndUnit( newValue ); if( newValue[ 1 ] !== '%' ){ - flags |= X_Node_State.STYLE_IS_WIDTH_LENGTH; - flags &= ~X_Node_State.STYLE_IS_WIDTH_PCT; + flags |= X_NodeFlags_STYLE_IS_WIDTH_LENGTH; + flags &= ~X_NodeFlags_STYLE_IS_WIDTH_PCT; } else { - flags &= ~X_Node_State.STYLE_IS_WIDTH_LENGTH; - flags |= X_Node_State.STYLE_IS_WIDTH_PCT; + flags &= ~X_NodeFlags_STYLE_IS_WIDTH_LENGTH; + flags |= X_NodeFlags_STYLE_IS_WIDTH_PCT; }; return flags; case 'height' : newValue = X_Node_CSS__splitValueAndUnit( newValue ); if( newValue[ 1 ] !== '%' ){ - flags |= X_Node_State.STYLE_IS_HEIGHT_LENGTH; - flags &= ~X_Node_State.STYLE_IS_HEIGHT_PCT; + flags |= X_NodeFlags_STYLE_IS_HEIGHT_LENGTH; + flags &= ~X_NodeFlags_STYLE_IS_HEIGHT_PCT; } else { - flags &= ~X_Node_State.STYLE_IS_HEIGHT_LENGTH; - flags |= X_Node_State.STYLE_IS_HEIGHT_PCT; + flags &= ~X_NodeFlags_STYLE_IS_HEIGHT_LENGTH; + flags |= X_NodeFlags_STYLE_IS_HEIGHT_PCT; }; return flags; @@ -626,19 +626,29 @@ function X_Node_CSS_setStyle( css, flags, name, newValue ){ return flags; }; -Node.prototype[ 'cssText' ] = function( v ){ +/** + * cssText の getter と setter。setter の場合 css と異なり全ての style が書き変わる。 + * @alias Node.prototype.cssText + * @param {string=} v cssText 文字列名 + * @return {Node|string} getter の場合は cssText 文字列を、setter の場合は自身を返す。(メソッドチェーン) + * @example // getter + * node.cssText(); + * // setter + * node.cssText('color:red;width:20px'); + */ +function X_Node_cssText( v ){ var obj, i, l, attr, name; - if( v === this[ '_cssText' ] && ( this[ '_flags' ] & X_Node_State.OLD_CSSTEXT ) === 0 ){ + if( v === this[ '_cssText' ] && ( ( this[ '_flags' ] & X_NodeFlags_OLD_CSSTEXT ) === 0 ) ){ return this; }; if( v === '' ){ delete this[ '_css' ]; delete this[ '_cssText' ]; - this[ '_flags' ] |= X_Node_State.DIRTY_CSS | X_Node_State.DIRTY_IE_FILTER; - this[ '_flags' ] &= ~X_Node_State.OLD_CSSTEXT; - this[ '_flags' ] & X_Node_State.IN_TREE && X_Node_reserveUpdate(); + this[ '_flags' ] |= X_NodeFlags_DIRTY_CSS | X_NodeFlags_DIRTY_IE_FILTER; + this[ '_flags' ] &= ~X_NodeFlags_OLD_CSSTEXT; + this[ '_flags' ] & X_NodeFlags_IN_TREE && X_Node_reserveUpdate(); return this; } else if( X_Type_isString( v ) ){ @@ -652,7 +662,7 @@ Node.prototype[ 'cssText' ] = function( v ){ return this[ 'css' ]( obj ); }; // getter - this[ '_flags' ] & X_Node_State.OLD_CSSTEXT && X_Node_CSS_objToCssText( this ); + this[ '_flags' ] & X_NodeFlags_OLD_CSSTEXT && X_Node_CSS_objToCssText( this ); return this[ '_cssText' ]; }; @@ -779,11 +789,14 @@ var X_Node_CSS_Support = {}, * @namespace X.CSS */ X[ 'CSS' ] = { - + /** + * @alias X.CSS.VENDER_PREFIX + */ 'VENDER_PREFIX' : X_Node_CSS_VENDER_PREFIX, - // iscroll で使用 - 'uncamelize' : X_Node_CSS_uncamelize, - + + /** + * @alias X.CSS.Support + */ 'Support' : X_Node_CSS_Support }; @@ -815,7 +828,7 @@ X[ 'CSS' ] = { for( j = vendors.length; j; ){ v = vendors[ --j ]; if( testStyle[ v + prop ] !== undefined ){ - if( v === 'ms' ) v = 'Ms';// for ie9 + if( v === 'ms' && !( 10 <= X_UA[ 'IEHost' ] ) ) v = 'Ms';// for ie9, 但し ie11 のieには不要 if( v === 'o' ) v = 'O';//for opera12 X_Node_CSS_VENDER_PREFIX[ search ] = v + prop; break; @@ -827,41 +840,62 @@ X[ 'CSS' ] = { }; testStyle.cssText = 'background:rgba(0,0,0,0.5);border-color:transparent'; +/** + * 色指定に rgba() が使用できるか? + * @alias X.CSS.Support.rgba + * @type {boolean} + */ X_Node_CSS_Support[ 'rgba' ] = !!testStyle[ 'background' ]; + +/** + * 色指定に transparent が使用できるか? + * @alias X.CSS.Support.transparent + * @type {boolean} + */ X_Node_CSS_Support[ 'transparent' ] = !!testStyle[ 'borderColor' ]; // TODO border による三角形の可否 // 2:完全、 1:透過に非対応(IE7-) 0:borderの描画が非標準で三角形が作れない - - /* - * chrome 1+, ff3.5(1.9.1), ie9+, opera10.5+, Safari3+(522) - */ + if( prop = X_Node_CSS_VENDER_PREFIX[ 'boxShadow' ] ){ testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0'; + + /** + * boxShadow が使用できるか? + * chrome 1+, ff3.5(1.9.1), ie9+, opera10.5+, Safari3+(522) + * @alias X.CSS.Support.boxShadow + * @type {boolean} + */ X_Node_CSS_Support[ 'boxShadow' ] = !!testStyle[ prop ]; - /* + testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0, 0 0'; + + /** + * boxShadow の複数指定が使用できるか?
* chrome 4+, ff3.5(1.9.1), ie9+, opera10.5+, Safari5+(533) + * @alias X.CSS.Support.boxShadowMulti + * @type {boolean} */ - testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0, 0 0'; X_Node_CSS_Support[ 'boxShadowMulti' ] = !!testStyle[ prop ]; - /* - * https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow - * この値を用いる場合には、spread-radius を省略出来ません。box-shadow が効かないケースに遭遇した時はこの事を思い出して下さい。 - * chrome 4+, ff3.5(1.9.1), ie9+, opera10.5+, Safari5+(533) + testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0 inset'; + + /** + * https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
+ * この値を用いる場合には、spread-radius を省略出来ません。box-shadow が効かないケースに遭遇した時はこの事を思い出して下さい。
+ * chrome 4+, ff3.5(1.9.1), ie9+, opera10.5+, Safari5+(533)
* - * http://unformedbuilding.com/articles/considerations-when-using-the-box-shadow/ - * box-shadow:inset と border-radius を指定しているときの Google Chrome の表示 - * このバグは Windows と Linux で発生するようです。 - * Windows 版 Chrome 10.0.648.127 で修正されているのを確認しました。 + * http://unformedbuilding.com/articles/considerations-when-using-the-box-shadow/
+ * box-shadow:inset と border-radius を指定しているときの Google Chrome の表示
+ * このバグは Windows と Linux で発生するようです。
+ * Windows 版 Chrome 10.0.648.127 で修正されているのを確認しました。
+ * @alias X.CSS.Support.boxShadowInset + * @type {boolean} */ - testStyle.cssText = X_Node_CSS_uncamelize( prop ) + ':0 0 inset'; X_Node_CSS_Support[ 'boxShadowInset' ] = testStyle[ prop ] && testStyle[ prop ].indexOf( 'inset' ) !== -1; }; - testStyle.cssText = temp; })();