// TODO: offsetLeft, offsetTop の基準位置\r
X_Node_BoxModel_absoluteOffset;\r
\r
-\r
-\r
-\r
-\r
X_ViewPort[ 'listenOnce' ]( X_EVENT_INIT, function(){\r
var node = X_Node_systemNode;\r
\r
* getBoxObjectFor\r
* getBoundingClientRect\r
*/\r
-Node.prototype[ 'width' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
+\r
+function X_Node_BoxModel_mesure( that, name ){\r
+ var flags = that[ '_flags' ], elm;\r
+ \r
+ if( ( flags & X_NodeFlags_IN_TREE ) === 0 || flags & X_NodeFlags_STYLE_IS_DISPLAY_NONE ) return 0;\r
\r
X_Node_updateTimerID && X_Node_startUpdate();\r
\r
- if( X_UA_DOM.W3C ){\r
- // TODO width : length + overflow : hidden ならそれを返す? <- block or inline\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetWidth : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetWidth;\r
- } else {\r
- \r
- };\r
+ elm = that[ '_rawObject' ] || X_Node__ie4getRawNode && X_Node__ie4getRawNode( that );\r
+ return elm ? elm[ name ] : 0;\r
};\r
\r
-Node.prototype[ 'height' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
+/**\r
+ * 要素の幅。elm.offsetWidth\r
+ * @alias Node.prototype.width\r
+ * @return {number} \r
+ * @example node.width();\r
+ */\r
+function X_Node_width(){\r
+ return X_Node_BoxModel_mesure( this, 'offsetWidth' );\r
\r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'height' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetHeight : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetHeight;\r
- } else {\r
- \r
- };\r
+ // TODO width : length + overflow : hidden ならそれを返す? <- block or inline\r
+ // TODO TextNode どうする?\r
+ //if( X_UA_DOM.IE4 ) return elm ? elm.style.pixelWidth : 0;\r
+ //return elm ? elm.offsetWidth : 0;\r
};\r
\r
-Node.prototype[ 'clientWidth' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
+/**\r
+ * 要素の高さ。elm.offsetHeight\r
+ * @alias Node.prototype.height\r
+ * @return {number} \r
+ * @example node.height();\r
+ */\r
+function X_Node_height(){\r
+ return X_Node_BoxModel_mesure( this, 'offsetHeight' );\r
\r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].clientWidth : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).clientWidth;\r
- } else {\r
- \r
- };\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'height' );\r
+ //if( X_UA_DOM.IE4 ) return elm ? elm.style.pixelHeight : 0;\r
+ //return elm ? elm.offsetHeight : 0;\r
};\r
\r
-Node.prototype[ 'clientHeight' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
+/**\r
+ * 要素のコンテンツ領域の幅。elm.clientWidth\r
+ * @alias Node.prototype.clientWidth\r
+ * @return {number} \r
+ * @example node.clientWidth();\r
+ */\r
+function X_Node_clientWidth(){\r
+ return X_Node_BoxModel_mesure( this, 'clientWidth' );\r
\r
- X_Node_updateTimerID && X_Node_startUpdate();\r
-\r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'height' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].clientHeight : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).clientHeight;\r
- } else {\r
- \r
- };\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
+ //return elm ? elm.clientWidth : 0;\r
};\r
\r
-Node.prototype[ 'scrollWidth' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
+/**\r
+ * 要素のコンテンツ領域の高さ。elm.clientHeight\r
+ * @alias Node.prototype.clientHeight\r
+ * @return {number} \r
+ * @example node.clientHeight();\r
+ */\r
+function X_Node_clientHeight(){\r
+ return X_Node_BoxModel_mesure( this, 'clientHeight' );\r
\r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollWidth : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollWidth;\r
- } else {\r
- \r
- };\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'height' );\r
+ //return elm ? elm.clientHeight : 0;\r
};\r
\r
-Node.prototype[ 'scrollHeight' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
+/**\r
+ * 要素のスクロール領域の幅。elm.scrollWidth\r
+ * @alias Node.prototype.scrollWidth\r
+ * @return {number} \r
+ * @example node.scrollWidth();\r
+ */\r
+function X_Node_scrollWidth(){\r
+ return X_Node_BoxModel_mesure( this, 'scrollWidth' );\r
\r
- if( X_UA_DOM.W3C ){\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollHeight : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollHeight;\r
- } else {\r
- \r
- };\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
+ //return elm ? elm.scrollWidth : 0;\r
};\r
\r
-Node.prototype[ 'scrollLeft' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
+/**\r
+ * 要素のスクロール領域の高さ。elm.scrollHeight\r
+ * @alias Node.prototype.scrollHeight\r
+ * @return {number} \r
+ * @example node.scrollHeight();\r
+ */\r
+function X_Node_scrollHeight(){\r
+ return X_Node_BoxModel_mesure( this, 'scrollHeight' );\r
+};\r
\r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollLeft : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollLeft;\r
- } else {\r
- \r
- };\r
+/**\r
+ * 要素のスクロール位置。elm.scrollLeft\r
+ * @alias Node.prototype.scrollLeft\r
+ * @return {number} \r
+ * @example node.scrollLeft();\r
+ */\r
+function X_Node_scrollLeft(){\r
+ return X_Node_BoxModel_mesure( this, 'scrollLeft' );\r
};\r
\r
-Node.prototype[ 'scrollTop' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
- \r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].scrollTop : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).scrollTop;\r
- } else {\r
- \r
- };\r
+/**\r
+ * 要素のスクロール位置。elm.scrollTop\r
+ * @alias Node.prototype.scrollTop\r
+ * @return {number} \r
+ * @example node.scrollTop();\r
+ */\r
+function X_Node_scrollTop(){\r
+ return X_Node_BoxModel_mesure( this, 'scrollTop' );\r
};\r
\r
/* --------------------------------------\r
* position:absolute の指定で自動で top,left を補う必要あり？ -> X.Node.CSS\r
* 親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。\r
* transformX, Y は加える？ アニメーション中は？\r
+ * \r
+ * http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/ProbIE5.htm#StyleObject\r
*/\r
-// X_Node_CSS_transform,\r
-Node.prototype[ 'x' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
+// TODO X_Node_CSS_transform,\r
+\r
+/**\r
+ * 要素の親要素に対する位置。offsetLeft\r
+ * @alias Node.prototype.x\r
+ * @return {number} \r
+ * @example node.x();\r
+ */\r
+function X_Node_x(){\r
+ return X_Node_BoxModel_mesure( this, 'offsetLeft' );\r
\r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'left' );\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'translateX' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetLeft : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- // pixelLeft http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/ProbIE5.htm\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetLeft;\r
- } else {\r
- \r
- };\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'left' );\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'translateX' );\r
+ //if( X_UA_DOM.IE4 ) return elm ? elm.style.pixelLeft : 0;\r
+ //return elm ? elm.offsetLeft : 0;\r
};\r
\r
-Node.prototype[ 'y' ] = function(){\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return 0;\r
- \r
- X_Node_updateTimerID && X_Node_startUpdate();\r
+/**\r
+ * 要素の親要素に対する位置。offsetTop\r
+ * @alias Node.prototype.y\r
+ * @return {number} \r
+ * @example node.y();\r
+ */\r
+function X_Node_y(){\r
+ return X_Node_BoxModel_mesure( this, 'offsetTop' );\r
\r
- if( X_UA_DOM.W3C ){\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'top' );\r
- // this[ 'css' ]( X_Node_CSS_Unit.px, 'transisitonY' );\r
- return this[ '_rawObject' ] ? this[ '_rawObject' ].offsetTop : 0;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) ).offsetTop; \r
- } else {\r
- \r
- };\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'top' );\r
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'transisitonY' );\r
+ //if( X_UA_DOM.IE4 ) return elm ? elm.style.pixelTop : 0;\r
+ //return elm ? elm.offsetTop : 0;\r
};\r
\r
-Node.prototype[ 'offset' ] = function( /* xnodeParent */ ){\r
-\r
- if( ( this[ '_flags' ] & X_Node_State.IN_TREE ) === 0 || this[ '_flags' ] & X_Node_State.STYLE_IS_DISPLAY_NONE ) return { x : 0, y : 0 };\r
+/**\r
+ * 要素の親要素に対する位置。\r
+ * @alias Node.prototype.offset\r
+ * @return {object} { x: {number}, y : {number} }\r
+ * @example node.offset();\r
+ */\r
+function X_Node_offset( /* xnodeParent */ ){\r
+ var flags = this[ '_flags' ], elm;\r
\r
- if( X.Doc.body === this || X.Doc.html === this ){\r
+ if( ( flags & X_NodeFlags_IN_TREE ) === 0 || flags & X_NodeFlags_STYLE_IS_DISPLAY_NONE ) return { x : 0, y : 0 };\r
+ \r
+ if( X_Node_body === this || X_Node_html === this ){\r
return { x : 0, y : 0 };\r
};\r
\r
X_Node_updateTimerID && X_Node_startUpdate();\r
\r
- if( X_UA_DOM.W3C ){\r
- return this[ '_rawObject' ] ? X_Node_getPosition( this[ '_rawObject' ] ) : { x : 0, y : 0 };\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return X_Node_getPosition( this[ '_rawObject' ] || X_Node__ie4getRawNode( this ) );\r
- } else {\r
- \r
- };\r
+ elm = this[ '_rawObject' ] || X_Node__ie4getRawNode && X_Node__ie4getRawNode( this );\r
+ \r
+ return elm ? X_Node_getPosition( elm ) : { x : 0, y : 0 };\r
};\r
\r
// エレメントの座標取得 ～スクロール要素～\r
OSDN Git Service
