X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F02_dom%2F04_XBoxModel.js;h=ed00a00b7ff3095c4a1fb78a3ead6e01269394a9;hb=5d1a420699bfb2a488fb7a33cb1f9d6ed3164ee4;hp=4ba647889b5023680f9921dd834eb496be862542;hpb=babda23632a3176d9fe546fbab6f79c1fef0e3d4;p=pettanr%2FclientJs.git diff --git a/0.6.x/js/02_dom/04_XBoxModel.js b/0.6.x/js/02_dom/04_XBoxModel.js index 4ba6478..ed00a00 100644 --- a/0.6.x/js/02_dom/04_XBoxModel.js +++ b/0.6.x/js/02_dom/04_XBoxModel.js @@ -1,30 +1,32 @@ var X_Node_BoxModel = { - CONTENT_BOX : 1, - PADDING_BOX : 2, - BORDER_BOX : 3, - - defaultBoxModel : 0, - boxSizingEnabled : false, + CONTENT_BOX : 1, + PADDING_BOX : 2, + BORDER_BOX : 3 + }, + + X_Node_BoxModel_defaultBoxModel, + X_Node_BoxModel_boxSizingEnabled, // TODO: offsetLeft, offsetTop の基準位置 - absoluteOffset : 0 -}; + X_Node_BoxModel_absoluteOffset; -X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){ + + +X_ViewPort[ 'listenOnce' ]( X_EVENT_INIT, function(){ var node = X_Node_systemNode; - node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' ); + node[ 'cssText' ]( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' ); - X_Node_BoxModel.defaultBoxModel = node.width() === 10 ? + X_Node_BoxModel_defaultBoxModel = node[ 'width' ]() === 10 ? X_Node_BoxModel.BORDER_BOX : X_Node_BoxModel.CONTENT_BOX; - if( X_Node_BoxModel.defaultBoxModel === X_Node_BoxModel.CONTENT_BOX ){ - X_Node_BoxModel.boxSizingEnabled = node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' + + if( X_Node_BoxModel_defaultBoxModel === X_Node_BoxModel.CONTENT_BOX ){ + X_Node_BoxModel_boxSizingEnabled = node[ 'cssText' ]( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' + 'box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;' ) - .width() === 10; + [ 'width' ]() === 10; }; /* @@ -32,11 +34,11 @@ X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){ * TODO boxShadow が有効な要素に対して offsetWidth 等の補正(?) */ if( X_Node_CSS_Support[ 'boxShadow' ] && - node.cssText( - X_Node_CSS_uncamelize( X_Node_CSS_VENDER_PREFIX[ 'boxShadow' ] ) + ':10px 10px 0 0 #000;width:10px;' - ).width() !== 10 - ){ - console.log( node.cssText() + node.width() ); + node[ 'cssText' ]( + X_Node_CSS_uncamelize( X_Node_CSS_VENDER_PREFIX[ 'boxShadow' ] ) + ':10px 10px 0 0 #000;width:10px;' + )[ 'width' ]() !== 10 + ){ + console.log( node[ 'cssText' ]() + node[ 'width' ]() ); X_Node_CSS_Support[ 'boxShadowLayoutBug' ] = true; }; @@ -45,14 +47,14 @@ X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){ // margin // top - X_Node_BoxModel.absoluteOffset = - node.cssText( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' ) - .append( '
' ) - .firstChild().cssText( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' ) - .y(); - + X_Node_BoxModel_absoluteOffset = + node[ 'cssText' ]( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' ) + [ 'append' ]( '
' ) + [ 'firstChild' ]() + [ 'cssText' ]( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' ) + [ 'y' ](); - node.cssText( '' ).empty(); + node[ 'cssText' ]( '' )[ 'empty' ](); }); /* -------------------------------------- @@ -63,128 +65,128 @@ X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){ * getBoxObjectFor * getBoundingClientRect */ -Node.prototype.width = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'width' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ // TODO width : length + overflow : hidden ならそれを返す? <- block or inline - return this._rawObject ? this._rawObject.offsetWidth : 0; + return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetWidth : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetWidth; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetWidth; } else { }; }; -Node.prototype.height = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'height' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'height' ); - return this._rawObject ? this._rawObject.offsetHeight : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'height' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetHeight : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetHeight; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetHeight; } else { }; }; -Node.prototype.clientWidth = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'clientWidth' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'width' ); - return this._rawObject ? this._rawObject.clientWidth : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].clientWidth : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).clientWidth; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).clientWidth; } else { }; }; -Node.prototype.clientHeight = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'clientHeight' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'height' ); - return this._rawObject ? this._rawObject.clientHeight : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'height' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].clientHeight : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).clientHeight; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).clientHeight; } else { }; }; -Node.prototype.scrollWidth = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'scrollWidth' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'width' ); - return this._rawObject ? this._rawObject.scrollWidth : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollWidth : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollWidth; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollWidth; } else { }; }; -Node.prototype.scrollHeight = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'scrollHeight' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - return this._rawObject ? this._rawObject.scrollHeight : 0; + return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollHeight : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollHeight; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollHeight; } else { }; }; -Node.prototype.scrollLeft = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'scrollLeft' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'width' ); - return this._rawObject ? this._rawObject.scrollLeft : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollLeft : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollLeft; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollLeft; } else { }; }; -Node.prototype.scrollTop = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'scrollTop' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'width' ); - return this._rawObject ? this._rawObject.scrollTop : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollTop : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollTop; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollTop; } else { }; @@ -198,44 +200,44 @@ Node.prototype.scrollTop = function(){ * transformX, Y は加える？ アニメーション中は？ */ // X_Node_CSS_transform, -Node.prototype.x = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'x' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'left' ); - // this.css( X_Node_CSS_Unit.px, 'translateX' ); - return this._rawObject ? this._rawObject.offsetLeft : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'left' ); + // this[ 'css' ]( X_Node_CSS_Unit.px, 'translateX' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetLeft : 0; } else if( X_UA_DOM.IE4 ){ // pixelLeft http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/ProbIE5.htm - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetLeft; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetLeft; } else { }; }; -Node.prototype.y = function(){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; +Node.prototype[ 'y' ] = function(){ + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0; X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - // this.css( X_Node_CSS_Unit.px, 'top' ); - // this.css( X_Node_CSS_Unit.px, 'transisitonY' ); - return this._rawObject ? this._rawObject.offsetTop : 0; + // this[ 'css' ]( X_Node_CSS_Unit.px, 'top' ); + // this[ 'css' ]( X_Node_CSS_Unit.px, 'transisitonY' ); + return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetTop : 0; } else if( X_UA_DOM.IE4 ){ - return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetTop; + return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetTop; } else { }; }; -Node.prototype.offset = function( /* xnodeParent */ ){ +Node.prototype[ 'offset' ] = function( /* xnodeParent */ ){ - if( ( this._flags & X_Node_State.IN_TREE ) === 0 || this._flags & X_Node_State.STYLE_IS_DISPLAY_NONE ) return { x : 0, y : 0 }; + if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return { x : 0, y : 0 }; if( X.Doc.body === this || X.Doc.html === this ){ return { x : 0, y : 0 }; @@ -244,10 +246,10 @@ Node.prototype.offset = function( /* xnodeParent */ ){ X_Node_updateTimerID && X_Node_startUpdate(); if( X_UA_DOM.W3C ){ - return this._rawObject ? X_Node_getPosition( this._rawObject ) : { x : 0, y : 0 }; + return this[ '_rawObject' ] ? X_Node_getPosition( this[ '_rawObject' ] ) : { x : 0, y : 0 }; } else if( X_UA_DOM.IE4 ){ - return X_Node_getPosition( this._rawObject || X_Node__ie4getRawNode( this ) ); + return X_Node_getPosition( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ); } else { }; @@ -269,7 +271,7 @@ var X_Node_getPosition = return { x:(pos.left + (body.scrollLeft||html.scrollLeft) - html.clientLeft) , y:(pos.top + (body.scrollTop||html.scrollTop) - html.clientTop) }; } : - X.UA.Opera < 10 ? + X_UA[ 'Opera' ] < 10 ? function( el ){ var ex = 0; var ey = 0;