7 boxSizingEnabled : false,
\r
9 // TODO: offsetLeft, offsetTop の基準位置
\r
18 X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
\r
20 var node = Node._systemNode,
\r
22 // http://jsdo.it/imaya/kTYg
\r
23 body = document.body,
\r
24 defaultOverflow = document.body.style.overflow,
\r
27 body.style.overflow = 'hidden';
\r
28 w = body.clientWidth;
\r
29 h = body.clientHeight;
\r
31 body.style.overflow = 'scroll';
\r
32 w -= body.clientWidth;
\r
33 h -= body.clientHeight;
\r
35 if( !w ) w = body.offsetWidth - body.clientWidth;
\r
36 if( !h ) h = body.offsetHeight - body.clientHeight;
\r
37 body.style.overflow = defaultOverflow;
\r
39 X.Dom.BoxModel.vScrollbarSize = w;
\r
40 X.Dom.BoxModel.hScrollbarSize = h;
\r
43 node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );
\r
45 X.Dom.BoxModel.defaultBoxModel = node.width() === 10 ?
\r
46 X.Dom.BoxModel.BORDER_BOX :
\r
47 X.Dom.BoxModel.CONTENT_BOX;
\r
49 if( X.Dom.BoxModel.defaultBoxModel === X.Dom.BoxModel.CONTENT_BOX ){
\r
50 X.Dom.BoxModel.boxSizingEnabled = node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' +
\r
51 '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
60 //.cssText( 'width:90px;height:90px;overflow:auto;' )
\r
61 .html( '<div style="width:100px;height:100px;"></div>' );
\r
64 X.Dom.BoxModel.vScrollbarSize = 90 - node._rawNode.clientWidth;
\r
65 X.Dom.BoxModel.hScrollbarSize = 90 - node._rawNode.clientHeight;*/
\r
67 X.Dom.BoxModel.absoluteOffset =
\r
68 node.cssText( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' )
\r
69 .firstChild().cssText( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' )
\r
72 node.cssText( '' ).empty();
\r
75 /* --------------------------------------
\r
77 * display:blobk かつ overflow:hidden かつ size(px,em)が設定されていたら、再描画しないでその値を返す
\r
81 * getBoundingClientRect
\r
83 Node.prototype.width = function(){
\r
84 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
85 console.log( 'xnode.width() : no parent' );
\r
88 Node.root._updateTimerID && Node.root._startUpdate();
\r
90 console.log( 'xnode.width() : not belong tree.' );
\r
93 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
94 if( X.Dom.DOM_W3C ){
\r
95 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
96 return this._rawNode.offsetWidth;
\r
98 if( X.Dom.DOM_IE4 ){
\r
99 return ( this._rawNode || this._ie4getRawNode() ).offsetWidth;
\r
105 Node.prototype.height = function(){
\r
106 if( !this.parent ){
\r
107 console.log( 'xnode.height() : no parent' );
\r
110 Node.root._updateTimerID && Node.root._startUpdate();
\r
112 console.log( 'xnode.height() : not belong tree.' );
\r
115 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
116 if( X.Dom.DOM_W3C ){
\r
117 // this.css( X.Dom.Style.Unit.px, 'height' );
\r
118 return this._rawNode.offsetHeight;
\r
120 if( X.Dom.DOM_IE4 ){
\r
121 return ( this._rawNode || this._ie4getRawNode() ).offsetHeight;
\r
127 Node.prototype.scrollWidth = function(){
\r
128 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
129 console.log( 'xnode.width() : no parent' );
\r
132 Node.root._updateTimerID && Node.root._startUpdate();
\r
134 console.log( 'xnode.width() : not belong tree.' );
\r
137 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
138 if( X.Dom.DOM_W3C ){
\r
139 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
140 return this._rawNode.scrollWidth;
\r
142 if( X.Dom.DOM_IE4 ){
\r
143 return ( this._rawNode || this._ie4getRawNode() ).scrollWidth;
\r
149 Node.prototype.scrollHeight = function(){
\r
150 if( !this.parent ){
\r
151 console.log( 'xnode.height() : no parent' );
\r
154 Node.root._updateTimerID && Node.root._startUpdate();
\r
156 console.log( 'xnode.height() : not belong tree.' );
\r
159 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
160 if( X.Dom.DOM_W3C ){
\r
161 // this.css( X.Dom.Style.Unit.px, 'height' );
\r
162 return this._rawNode.scrollHeight;
\r
164 if( X.Dom.DOM_IE4 ){
\r
165 return ( this._rawNode || this._ie4getRawNode() ).scrollHeight;
\r
171 Node.prototype.scrollLeft = function(){
\r
172 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
173 console.log( 'xnode.scrollLeft() : no parent' );
\r
176 Node.root._updateTimerID && Node.root._startUpdate();
\r
178 console.log( 'xnode.scrollLeft() : not belong tree.' );
\r
181 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
182 if( X.Dom.DOM_W3C ){
\r
183 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
184 return this._rawNode.scrollLeft;
\r
186 if( X.Dom.DOM_IE4 ){
\r
187 return ( this._rawNode || this._ie4getRawNode() ).scrollLeft;
\r
193 Node.prototype.scrollTop = function(){
\r
194 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
195 console.log( 'xnode.scrollTop() : no parent' );
\r
198 Node.root._updateTimerID && Node.root._startUpdate();
\r
200 console.log( 'xnode.scrollTop() : not belong tree.' );
\r
203 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
204 if( X.Dom.DOM_W3C ){
\r
205 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
206 return this._rawNode.scrollTop;
\r
208 if( X.Dom.DOM_IE4 ){
\r
209 return ( this._rawNode || this._ie4getRawNode() ).scrollTop;
\r
215 /* --------------------------------------
\r
217 * position:absolute かつ x か y が設定されていたら、再描画しないで css オブジェクトから計算した値を返す。 float は?
\r
218 * position:absolute の指定で自動で top,left を補う必要あり? -> X.Dom.Style
\r
219 * 親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。
\r
220 * transformX, Y は加える? アニメーション中は?
\r
222 // X.Dom.Style.transform,
\r
223 Node.prototype.x = function(){
\r
224 if( !this.parent ){
\r
225 console.log( 'xnode.x() : no parent' );
\r
228 Node.root._updateTimerID && Node.root._startUpdate();
\r
230 console.log( 'xnode.x() : not belong tree.' );
\r
233 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
234 if( X.Dom.DOM_W3C ){
\r
235 // this.css( X.Dom.Style.Unit.px, 'left' );
\r
236 // this.css( X.Dom.Style.Unit.px, 'translateX' );
\r
237 return this._rawNode.offsetLeft;
\r
239 if( X.Dom.DOM_IE4 ){
\r
240 return ( this._rawNode || this._ie4getRawNode() ).offsetLeft;
\r
246 Node.prototype.y = function(){
\r
247 if( !this.parent ){
\r
248 console.log( 'xnode.y() : no parent' );
\r
251 Node.root._updateTimerID && Node.root._startUpdate();
\r
253 console.log( 'xnode.y() : not belong tree.' );
\r
256 if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;
\r
257 if( X.Dom.DOM_W3C ){
\r
258 // this.css( X.Dom.Style.Unit.px, 'top' );
\r
259 // this.css( X.Dom.Style.Unit.px, 'transisitonY' );
\r
260 return this._rawNode.offsetTop;
\r
262 if( X.Dom.DOM_IE4 ){
\r
263 return ( this._rawNode || this._ie4getRawNode() ).offsetTop;
\r