-X.Dom.BoxModel = {
- CONTENT_BOX : 1,
- PADDING_BOX : 2,
- BORDER_BOX : 3,
- MARGIN_BOX : 4,
-
- defaultBoxModel : 0,
- boxSizingEnabled : false
-};
-
-X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
-
- var elm = Node._systemNode._rawNode;
- elm.style.cssText = 'width:10px;padding:1px;border:2px solid #0;margin:4px;';
-
- X.Dom.BoxModel.defaultBoxModel = elm.offsetWidth === 10 ?
- X.Dom.BoxModel.BORDER_BOX :
- X.Dom.BoxModel.CONTENT_BOX;
-
- if( X.Dom.BoxModel.defaultBoxModel === X.Dom.BoxModel.CONTENT_BOX ){
- 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;';
-
- X.Dom.BoxModel.boxSizingEnabled = elm.offsetWidth === 10;
- };
-
-
- // padding
- // border
- // margin
- // top
-
-
-});
-
-/* --------------------------------------
- * Width, Height
- * overflow:hidden かつ width か height が設定されていたら、再描画しないでその値を返す
- */
-Node.prototype.width = function(){
- var elm;
- if( !this.parent ) return 0;
- if( document.getElementById ){
- // this.css( X.Dom.Style.Unit.px, 'width' );
- return ( elm = this._rawNode ) ? elm.offsetWidth : 0;
- } else
- if( document.all ){
- if( !( elm = this._ie4getRawNode() ) ) return 0;
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();
- return elm.offsetWidth;
- } else {
-
- };
-};
-
-Node.prototype.height = function(){
- var elm;
- if( !this.parent ) return 0;
- if( document.getElementById ){
- // this.css( X.Dom.Style.Unit.px, 'height' );
- return ( elm = this._rawNode ) ? elm.offsetHeight : 0;
- } else
- if( document.all ){
- if( !( elm = this._ie4getRawNode() ) ) return 0;
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();
- return elm.offsetHeight;
- } else {
-
- };
-};
-
-/* --------------------------------------
- * x, y
- * position:absolute かつ x か y が設定されていたら、再描画しないでその値を返す。
- * position:absolute の指定で自動で top,left を補う必要あり？
- * 親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。
- * transformX, Y は加える？ アニメーション中は？
- */
-// X.Dom.Style.transform,
-Node.prototype.x = function(){
- var elm;
- if( !this.parent ) return 0;
- if( document.getElementById ){
- // this.css( X.Dom.Style.Unit.px, 'left' );
- // this.css( X.Dom.Style.Unit.px, 'translateX' );
- return ( elm = this._rawNode ) ? elm.offsetLeft : 0;
- } else
- if( document.all ){
- if( !( elm = this._ie4getRawNode() ) ) return 0;
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();
- return elm.offsetLeft;
- } else {
-
- };
-};
-
-Node.prototype.y = function(){
- var elm;
- if( !this.parent ) return 0;
- if( document.getElementById ){
- // this.css( X.Dom.Style.Unit.px, 'top' );
- // this.css( X.Dom.Style.Unit.px, 'transisitonY' );
- return ( elm = this._rawNode ) ? elm.offsetTop : 0;
- } else
- if( document.all ){
- if( !( elm = this._ie4getRawNode() ) ) return 0;
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();
- return elm.offsetTop;
- } else {
-
- };
-};
\ No newline at end of file
+X.Dom.BoxModel = {\r
+ CONTENT_BOX : 1,\r
+ PADDING_BOX : 2,\r
+ BORDER_BOX : 3,\r
+ \r
+ defaultBoxModel : 0,\r
+ boxSizingEnabled : false,\r
+ \r
+ // TODO: offsetLeft, offsetTop の基準位置\r
+ absoluteOffset : 0,\r
+ \r
+ vScrollbarSize : 0,\r
+ hScrollbarSize : 0\r
+};\r
+\r
+\r
+\r
+X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){\r
+\r
+ var node = Node._systemNode,\r
+ \r
+ // http://jsdo.it/imaya/kTYg\r
+ body = document.body,\r
+ defaultOverflow = document.body.style.overflow,\r
+ width, height;\r
+\r
+ body.style.overflow = 'hidden';\r
+ w = body.clientWidth;\r
+ h = body.clientHeight;\r
+\r
+ body.style.overflow = 'scroll';\r
+ w -= body.clientWidth;\r
+ h -= body.clientHeight;\r
+\r
+ if( !w ) w = body.offsetWidth - body.clientWidth;\r
+ if( !h ) h = body.offsetHeight - body.clientHeight;\r
+ body.style.overflow = defaultOverflow; \r
+\r
+ X.Dom.BoxModel.vScrollbarSize = w;\r
+ X.Dom.BoxModel.hScrollbarSize = h;\r
+ if( h <= 0 ){ // ie6, ie11, firefox で 負の値が返る\r
+ console.log( 'invalid hScrollbarSize: ' + h );\r
+ X.Dom.BoxModel.hScrollbarSize = w;\r
+ };\r
+ //\r
+ \r
+ node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );\r
+ \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
+ 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
+ X.Dom.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
+\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
+ console.log( 'xnode.width() : no parent' );\r
+ return 0;\r
+ };\r
+ Node._body._updateTimerID && Node._body._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.offsetWidth;\r
+ } else\r
+ if( X.Dom.DOM_IE4 ){\r
+ return ( this._rawNode || this._ie4getRawNode() ).offsetWidth;\r
+ } else {\r
+ \r
+ };\r
+};\r
+\r
+Node.prototype.height = function(){\r
+ if( !this.parent ){\r
+ console.log( 'xnode.height() : no parent' );\r
+ return 0;\r
+ };\r
+ Node._body._updateTimerID && Node._body._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.offsetHeight;\r
+ } else\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._body._updateTimerID && Node._body._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._body._updateTimerID && Node._body._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() ).scrollHeight;\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._body._updateTimerID && Node._body._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._body._updateTimerID && Node._body._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
+ * position:absolute の指定で自動で top,left を補う必要あり？ -> X.Dom.Style\r
+ * 親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。\r
+ * transformX, Y は加える？ アニメーション中は？\r
+ */\r
+// X.Dom.Style.transform,\r
+Node.prototype.x = function(){\r
+ if( !this.parent ){\r
+ console.log( 'xnode.x() : no parent' );\r
+ return 0;\r
+ };\r
+ Node._body._updateTimerID && Node._body._startUpdate();\r
+ if( !this._root ){\r
+ console.log( 'xnode.x() : 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, 'left' );\r
+ // this.css( X.Dom.Style.Unit.px, 'translateX' );\r
+ return this._rawNode.offsetLeft;\r
+ } else\r
+ if( X.Dom.DOM_IE4 ){\r
+ return ( this._rawNode || this._ie4getRawNode() ).offsetLeft;\r
+ } else {\r
+ \r
+ };\r
+};\r
+\r
+Node.prototype.y = function(){\r
+ if( !this.parent ){\r
+ console.log( 'xnode.y() : no parent' );\r
+ return 0;\r
+ };\r
+ Node._body._updateTimerID && Node._body._startUpdate();\r
+ if( !this._root ){\r
+ console.log( 'xnode.y() : 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, 'top' );\r
+ // this.css( X.Dom.Style.Unit.px, 'transisitonY' );\r
+ return this._rawNode.offsetTop;\r
+ } else\r
+ if( X.Dom.DOM_IE4 ){\r
+ return ( this._rawNode || this._ie4getRawNode() ).offsetTop; \r
+ } else {\r
+ \r
+ };\r
+};\r
+\r
OSDN Git Service
