CONTENT_BOX : 1,\r
PADDING_BOX : 2,\r
BORDER_BOX : 3,\r
- MARGIN_BOX : 4,\r
\r
defaultBoxModel : 0,\r
- boxSizingEnabled : false\r
+ boxSizingEnabled : false,\r
+ \r
+ // TODO: offsetLeft, offsetTop の基準位置\r
+ absoluteOffset : 0,\r
+ \r
+ vScrollbarSize : 0,\r
+ hScrollbarSize : 0\r
};\r
\r
X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){\r
\r
- var elm = Node._systemNode._rawNode || Node._systemNode._ie4getRawNode();\r
- elm.style.cssText = 'width:10px;padding:1px;border:2px solid #0;margin:4px;';\r
+ var node = Node._systemNode;\r
+ node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );\r
\r
- X.Dom.BoxModel.defaultBoxModel = elm.offsetWidth === 10 ?\r
+ X.Dom.BoxModel.defaultBoxModel = node.width() === 10 ?\r
X.Dom.BoxModel.BORDER_BOX :\r
X.Dom.BoxModel.CONTENT_BOX;\r
\r
if( X.Dom.BoxModel.defaultBoxModel === X.Dom.BoxModel.CONTENT_BOX ){\r
- elm.style.cssText += '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
- \r
- X.Dom.BoxModel.boxSizingEnabled = elm.offsetWidth === 10;\r
+ X.Dom.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
};\r
// padding\r
// border\r
// margin\r
// top\r
\r
+ node.cssText( 'width:90px;height:90px;overflow:auto;' )\r
+ .html( '<div style="width:100px;height:100px;"></div>' )\r
+ ._startUpdate();\r
+ \r
+ X.Dom.BoxModel.vScrollbarSize = 90 - node._rawNode.clientWidth;\r
+ X.Dom.BoxModel.hScrollbarSize = 90 - node._rawNode.clientHeight;\r
+\r
+ X.Dom.BoxModel.absoluteOffset =\r
+ node.cssText( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' )\r
+ .firstChild().cssText( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' )\r
+ .y();\r
\r
+ node.cssText( '' ).empty();\r
});\r
\r
/* --------------------------------------\r
* Width, Height\r
* display:blobk かつ overflow:hidden かつ size(px,em)が設定されていたら、再描画しないでその値を返す\r
* display:none なら 0\r
+ * \r
+ * getBoxObjectFor\r
+ * getBoundingClientRect\r
*/\r
Node.prototype.width = function(){\r
if( !this.parent ){// todo : _state で tree に所属しているか?判定\r
return 0;\r
};\r
if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
- if( document.getElementById ){\r
+ if( X.Dom.DOM_W3C ){\r
// this.css( X.Dom.Style.Unit.px, 'width' );\r
return this._rawNode.offsetWidth;\r
} else\r
- if( document.all ){\r
+ if( X.Dom.DOM_IE4 ){\r
return ( this._rawNode || this._ie4getRawNode() ).offsetWidth;\r
} else {\r
\r
return 0;\r
};\r
if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
- if( document.getElementById ){\r
+ if( X.Dom.DOM_W3C ){\r
// this.css( X.Dom.Style.Unit.px, 'height' );\r
return this._rawNode.offsetHeight;\r
} else\r
- if( document.all ){\r
+ if( X.Dom.DOM_IE4 ){\r
return ( this._rawNode || this._ie4getRawNode() ).offsetHeight;\r
} else {\r
\r
};\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
+ Node.root._updateTimerID && Node.root._startUpdate();\r
+ if( !this._root ){\r
+ console.log( 'xnode.width() : not belong tree.' );\r
+ return 0;\r
+ };\r
+ if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
+ if( X.Dom.DOM_W3C ){\r
+ // this.css( X.Dom.Style.Unit.px, 'width' );\r
+ return this._rawNode.scrollWidth;\r
+ } else\r
+ if( X.Dom.DOM_IE4 ){\r
+ return ( this._rawNode || this._ie4getRawNode() ).scrollWidth;\r
+ } else {\r
+ \r
+ };\r
+};\r
+\r
+Node.prototype.scrollHeight = function(){\r
+ if( !this.parent ){\r
+ console.log( 'xnode.height() : no parent' );\r
+ return 0;\r
+ };\r
+ Node.root._updateTimerID && Node.root._startUpdate();\r
+ if( !this._root ){\r
+ console.log( 'xnode.height() : not belong tree.' );\r
+ return 0;\r
+ };\r
+ if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
+ if( X.Dom.DOM_W3C ){\r
+ // this.css( X.Dom.Style.Unit.px, 'height' );\r
+ return this._rawNode.scrollHeight;\r
+ } else\r
+ if( X.Dom.DOM_IE4 ){\r
+ return ( this._rawNode || this._ie4getRawNode() ).scollHeight;\r
+ } else {\r
+ \r
+ };\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
+ Node.root._updateTimerID && Node.root._startUpdate();\r
+ if( !this._root ){\r
+ console.log( 'xnode.scrollLeft() : not belong tree.' );\r
+ return 0;\r
+ };\r
+ if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
+ if( X.Dom.DOM_W3C ){\r
+ // this.css( X.Dom.Style.Unit.px, 'width' );\r
+ return this._rawNode.scrollLeft;\r
+ } else\r
+ if( X.Dom.DOM_IE4 ){\r
+ return ( this._rawNode || this._ie4getRawNode() ).scrollLeft;\r
+ } else {\r
+ \r
+ };\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
+ Node.root._updateTimerID && Node.root._startUpdate();\r
+ if( !this._root ){\r
+ console.log( 'xnode.scrollTop() : not belong tree.' );\r
+ return 0;\r
+ };\r
+ if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
+ if( X.Dom.DOM_W3C ){\r
+ // this.css( X.Dom.Style.Unit.px, 'width' );\r
+ return this._rawNode.scrollTop;\r
+ } else\r
+ if( X.Dom.DOM_IE4 ){\r
+ return ( this._rawNode || this._ie4getRawNode() ).scrollTop;\r
+ } else {\r
+ \r
+ };\r
+};\r
+\r
/* --------------------------------------\r
* x, y\r
* position:absolute かつ x か y が設定されていたら、再描画しないで css オブジェクトから計算した値を返す。 float は?\r
return 0;\r
};\r
if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
- if( document.getElementById ){\r
+ if( X.Dom.DOM_W3C ){\r
// this.css( X.Dom.Style.Unit.px, 'left' );\r
// this.css( X.Dom.Style.Unit.px, 'translateX' );\r
return this._rawNode.offsetLeft;\r
} else\r
- if( document.all ){\r
+ if( X.Dom.DOM_IE4 ){\r
return ( this._rawNode || this._ie4getRawNode() ).offsetLeft;\r
} else {\r
\r
return 0;\r
};\r
if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
- if( document.getElementById ){\r
+ if( X.Dom.DOM_W3C ){\r
// this.css( X.Dom.Style.Unit.px, 'top' );\r
// this.css( X.Dom.Style.Unit.px, 'transisitonY' );\r
return this._rawNode.offsetTop;\r
} else\r
- if( document.all ){\r
+ if( X.Dom.DOM_IE4 ){\r
return ( this._rawNode || this._ie4getRawNode() ).offsetTop; \r
} else {\r
\r