var X_Node_BoxModel = {\r
- CONTENT_BOX : 1,\r
- PADDING_BOX : 2,\r
- BORDER_BOX : 3,\r
- \r
- defaultBoxModel : 0,\r
- boxSizingEnabled : false,\r
+ CONTENT_BOX : 1,\r
+ PADDING_BOX : 2,\r
+ BORDER_BOX : 3\r
+ },\r
\r
+ X_Node_BoxModel_defaultBoxModel,\r
+ \r
+ X_Node_BoxModel_boxSizingEnabled,\r
// TODO: offsetLeft, offsetTop の基準位置\r
- absoluteOffset : 0\r
-};\r
-\r
+ X_Node_BoxModel_absoluteOffset;\r
\r
-\r
-X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){\r
+X_ViewPort[ 'listenOnce' ]( X_EVENT_INIT, function(){\r
var node = X_Node_systemNode;\r
\r
- node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );\r
+ node[ 'cssText' ]( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );\r
\r
- X_Node_BoxModel.defaultBoxModel = node.width() === 10 ?\r
+ X_Node_BoxModel_defaultBoxModel = node[ 'width' ]() === 10 ?\r
X_Node_BoxModel.BORDER_BOX :\r
X_Node_BoxModel.CONTENT_BOX;\r
\r
- if( X_Node_BoxModel.defaultBoxModel === X_Node_BoxModel.CONTENT_BOX ){\r
- X_Node_BoxModel.boxSizingEnabled = node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' +\r
+ if( X_Node_BoxModel_defaultBoxModel === X_Node_BoxModel.CONTENT_BOX ){\r
+ X_Node_BoxModel_boxSizingEnabled = node[ 'cssText' ]( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' +\r
'box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;' )\r
- .width() === 10;\r
+ [ 'width' ]() === 10;\r
+ };\r
+ \r
+ /*\r
+ * 古い Gekco、 Presto、 WebKit では影がレイアウトに影響します。たとえば、width が 100% のボックスに外向きの box-shadow を指定すると、横スクロールバーが表示されてしまいます。\r
+ * TODO boxShadow が有効な要素に対して offsetWidth 等の補正(?)\r
+ */\r
+ if( X_Node_CSS_Support[ 'boxShadow' ] &&\r
+ node[ 'cssText' ](\r
+ X_Node_CSS_uncamelize( X_Node_CSS_VENDER_PREFIX[ 'boxShadow' ] ) + ':10px 10px 0 0 #000;width:10px;'\r
+ )[ 'width' ]() !== 10\r
+ ){\r
+ console.log( node[ 'cssText' ]() + node[ 'width' ]() );\r
+ X_Node_CSS_Support[ 'boxShadowLayoutBug' ] = true;\r
};\r
+\r
// padding\r
// border\r
// margin\r
// top\r
\r
- X_Node_BoxModel.absoluteOffset =\r
- node.cssText( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' )\r
- .append( '<div></div>' )\r
- .firstChild().cssText( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' )\r
- .y();\r
+ X_Node_BoxModel_absoluteOffset =\r
+ node[ 'cssText' ]( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' )\r
+ [ 'append' ]( '<div></div>' )\r
+ [ 'firstChild' ]()\r
+ [ 'cssText' ]( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' )\r
+ [ 'y' ]();\r
\r
- node.cssText( '' ).empty();\r
+ node[ 'cssText' ]( '' )[ 'empty' ]();\r
});\r
\r
/* --------------------------------------\r
* getBoxObjectFor\r
* getBoundingClientRect\r
*/\r
-Node.prototype.width = function(){\r
- if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
- console.log( 'xnode.width() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.width() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'width' );\r
- return this._rawObject.offsetWidth;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetWidth;\r
- } else {\r
- \r
- };\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
+ 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.parent ){\r
- console.log( 'xnode.height() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.height() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'height' );\r
- return this._rawObject.offsetHeight;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetHeight;\r
- } else {\r
- \r
- };\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
+ // 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.parent ){// todo : _state で tree に所属しているか？判定\r
- console.log( 'xnode.width() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.width() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'width' );\r
- return this._rawObject.clientWidth;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).clientWidth;\r
- } else {\r
- \r
- };\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
+ // 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.parent ){\r
- console.log( 'xnode.height() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.height() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'height' );\r
- return this._rawObject.clientHeight;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).clientHeight;\r
- } else {\r
- \r
- };\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
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
+ //return elm ? elm.clientWidth : 0;\r
};\r
\r
-Node.prototype.scrollWidth = function(){\r
- if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
- console.log( 'xnode.width() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.width() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'width' );\r
- return this._rawObject.scrollWidth;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollWidth;\r
- } else {\r
- \r
- };\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
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'height' );\r
+ //return elm ? elm.clientHeight : 0;\r
};\r
\r
-Node.prototype.scrollHeight = function(){\r
- if( !this.parent ){\r
- console.log( 'xnode.height() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.height() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'height' );\r
- return this._rawObject.scrollHeight;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollHeight;\r
- } else {\r
- \r
- };\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
+ // this[ 'css' ]( X_Node_CSS_Unit.px, 'width' );\r
+ //return elm ? elm.scrollWidth : 0;\r
};\r
\r
-Node.prototype.scrollLeft = function(){\r
- if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
- console.log( 'xnode.scrollLeft() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.scrollLeft() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'width' );\r
- return this._rawObject.scrollLeft;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollLeft;\r
- } else {\r
- \r
- };\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
-Node.prototype.scrollTop = function(){\r
- if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
- console.log( 'xnode.scrollTop() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.scrollTop() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
- if( X_UA_DOM.W3C ){\r
- // this.css( X_Node_CSS_Unit.px, 'width' );\r
- return this._rawObject.scrollTop;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollTop;\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
+/**\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.parent ){\r
- console.log( 'xnode.x() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.x() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\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.offsetLeft;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetLeft;\r
- } else {\r
- \r
- };\r
-};\r
+// TODO X_Node_CSS_transform,\r
\r
-Node.prototype.y = function(){\r
- if( !this.parent ){\r
- console.log( 'xnode.y() : no parent' );\r
- return 0;\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.y() : not belong tree.' );\r
- return 0;\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\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.offsetTop;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetTop; \r
- } else {\r
- \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
+ // 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.offset = function( /* xnodeParent */ ){\r
- var x = 0, y = 0, elm;\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( !this.parent ){\r
- console.log( 'xnode.offset() : no parent' );\r
- return { x : 0, y : 0 };\r
- };\r
- X_Node_body._updateTimerID && X_Node_startUpdate();\r
- if( !this._root ){\r
- console.log( 'xnode.offset() : not belong tree.' );\r
- return { x : 0, y : 0 };\r
- };\r
- if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\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
+/**\r
+ * 要素の文書内の位置。引数に xnode を与えた場合、\r
+ * @alias Node.prototype.offset\r
+ * @return {object} { x: {number}, y : {number} }\r
+ * @example node.offset();\r
+ */\r
+function X_Node_offset( xnode ){\r
+ var flags = this[ '_flags' ],\r
+ offset = { x : 0, y : 0 },\r
+ obj, parent, elm;\r
\r
- if( X.Doc.body === this || X.Doc.html === this ){\r
- return { x : 0, y : 0 };\r
- };\r
+ if( ( flags & X_NodeFlags_IN_TREE ) === 0 || flags & X_NodeFlags_STYLE_IS_DISPLAY_NONE ) return offset;\r
\r
- if( X_UA_DOM.W3C ){\r
- elm = this._rawObject;\r
- } else\r
- if( X_UA_DOM.IE4 ){\r
- elm = this._rawObject || X_Node__ie4getRawNode( this ); \r
- } else {\r
- \r
- };\r
+ if( X_Node_body === this || X_Node_html === this ) return offset;\r
+\r
+ X_Node_updateTimerID && X_Node_startUpdate();\r
+\r
+ elm = this[ '_rawObject' ] || X_Node__ie4getRawNode && X_Node__ie4getRawNode( this );\r
\r
- while( elm && elm !== document.body ){\r
- x += elm.offsetLeft;\r
- y += elm.offsetTop;\r
- elm = elm.offsetParent || elm.parentNode || elm.parentElement;\r
- };\r
- return { x : x, y : y };\r
+ return elm ? X_Node_getPosition( elm ) : offset;\r
};\r
+\r
+// エレメントの座標取得 ～スクロール要素～\r
+// http://n-yagi.0r2.net/script/2009/07/post_16.html\r
+\r
+//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■\r
+// エレメントの絶対座標を得たい\r
+//------------------------------------------------------------------------------\r
+// 座標取得\r
+var X_Node_getPosition =\r
+ !X_UA[ 'IE4' ] && document.createElement( 'div' ).getBoundingClientRect ?\r
+ (\r
+ document.compatMode === 'CSS1Compat' && !X_UA[ 'Webkit' ] ? function( el ){\r
+ var pos = el.getBoundingClientRect(),\r
+ html = document.documentElement;\r
+ return { x:(pos.left + html.scrollLeft - html.clientLeft)\r
+ , y:(pos.top + html.scrollTop - html.clientTop) };\r
+ } :\r
+ function( el ){\r
+ var pos = el.getBoundingClientRect();\r
+ return { x:(pos.left + window.pageXOffset)\r
+ , y:(pos.top + window.pageYOffset) };\r
+ }\r
+ ) :\r
+ X_UA[ 'Opera' ] < 10 ?\r
+ function( el ){\r
+ var ex = 0;\r
+ var ey = 0;\r
+ do\r
+ { \r
+ ex += el.offsetLeft;\r
+ ey += el.offsetTop;\r
+ }\r
+ while( el = el.offsetParent );\r
+ //\r
+ return {x:ex,y:ey};\r
+ } :\r
+ function(target)\r
+ {\r
+ var ex = 0;\r
+ var ey = 0;\r
+ //\r
+ var el = target;\r
+ var bd = X_elmBody;\r
+ \r
+ do\r
+ { \r
+ ex += el.offsetLeft || 0;\r
+ ey += el.offsetTop || 0;\r
+ }\r
+ while( el = el.offsetParent );\r
+ // 要素内スクロール対応\r
+ el = target;\r
+ do\r
+ {\r
+ ex -= el.scrollLeft || 0;\r
+ ey -= el.scrollTop || 0;\r
+ el = el.parentNode;\r
+ }\r
+ while( el!=bd );\r
+ //\r
+ return {x:ex,y:ey};\r
+ };\r
+\r
+//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■\r
+\r
OSDN Git Service
