7 boxSizingEnabled : false,
\r
9 // TODO: offsetLeft, offsetTop の基準位置
\r
18 X.ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_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
41 if( h <= 0 ){ // ie6, ie11, firefox で 負の値が返る
\r
42 console.log( 'invalid hScrollbarSize: ' + h );
\r
43 X.Dom.BoxModel.hScrollbarSize = w;
\r
47 node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );
\r
49 X.Dom.BoxModel.defaultBoxModel = node.width() === 10 ?
\r
50 X.Dom.BoxModel.BORDER_BOX :
\r
51 X.Dom.BoxModel.CONTENT_BOX;
\r
53 if( X.Dom.BoxModel.defaultBoxModel === X.Dom.BoxModel.CONTENT_BOX ){
\r
54 X.Dom.BoxModel.boxSizingEnabled = node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' +
\r
55 '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
63 X.Dom.BoxModel.absoluteOffset =
\r
64 node.cssText( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' )
\r
65 .append( '<div></div>' )
\r
66 .firstChild().cssText( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' )
\r
69 node.cssText( '' ).empty();
\r
72 /* --------------------------------------
\r
74 * display:blobk かつ overflow:hidden かつ size(px,em)が設定されていたら、再描画しないでその値を返す
\r
78 * getBoundingClientRect
\r
80 Node.prototype.width = function(){
\r
81 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
82 console.log( 'xnode.width() : no parent' );
\r
85 Node._body._updateTimerID && Node._body._startUpdate();
\r
87 console.log( 'xnode.width() : not belong tree.' );
\r
90 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
92 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
93 return this._rawObject.offsetWidth;
\r
96 return ( this._rawObject || this._ie4getRawNode() ).offsetWidth;
\r
102 Node.prototype.height = function(){
\r
103 if( !this.parent ){
\r
104 console.log( 'xnode.height() : no parent' );
\r
107 Node._body._updateTimerID && Node._body._startUpdate();
\r
109 console.log( 'xnode.height() : not belong tree.' );
\r
112 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
113 if( X_UA_DOM.W3C ){
\r
114 // this.css( X.Dom.Style.Unit.px, 'height' );
\r
115 return this._rawObject.offsetHeight;
\r
117 if( X_UA_DOM.IE4 ){
\r
118 return ( this._rawObject || this._ie4getRawNode() ).offsetHeight;
\r
124 Node.prototype.clientWidth = function(){
\r
125 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
126 console.log( 'xnode.width() : no parent' );
\r
129 Node._body._updateTimerID && Node._body._startUpdate();
\r
131 console.log( 'xnode.width() : not belong tree.' );
\r
134 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
135 if( X_UA_DOM.W3C ){
\r
136 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
137 return this._rawObject.clientWidth;
\r
139 if( X_UA_DOM.IE4 ){
\r
140 return ( this._rawObject || this._ie4getRawNode() ).clientWidth;
\r
146 Node.prototype.clientHeight = function(){
\r
147 if( !this.parent ){
\r
148 console.log( 'xnode.height() : no parent' );
\r
151 Node._body._updateTimerID && Node._body._startUpdate();
\r
153 console.log( 'xnode.height() : not belong tree.' );
\r
156 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
157 if( X_UA_DOM.W3C ){
\r
158 // this.css( X.Dom.Style.Unit.px, 'height' );
\r
159 return this._rawObject.clientHeight;
\r
161 if( X_UA_DOM.IE4 ){
\r
162 return ( this._rawObject || this._ie4getRawNode() ).clientHeight;
\r
168 Node.prototype.scrollWidth = function(){
\r
169 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
170 console.log( 'xnode.width() : no parent' );
\r
173 Node._body._updateTimerID && Node._body._startUpdate();
\r
175 console.log( 'xnode.width() : not belong tree.' );
\r
178 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
179 if( X_UA_DOM.W3C ){
\r
180 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
181 return this._rawObject.scrollWidth;
\r
183 if( X_UA_DOM.IE4 ){
\r
184 return ( this._rawObject || this._ie4getRawNode() ).scrollWidth;
\r
190 Node.prototype.scrollHeight = function(){
\r
191 if( !this.parent ){
\r
192 console.log( 'xnode.height() : no parent' );
\r
195 Node._body._updateTimerID && Node._body._startUpdate();
\r
197 console.log( 'xnode.height() : not belong tree.' );
\r
200 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
201 if( X_UA_DOM.W3C ){
\r
202 // this.css( X.Dom.Style.Unit.px, 'height' );
\r
203 return this._rawObject.scrollHeight;
\r
205 if( X_UA_DOM.IE4 ){
\r
206 return ( this._rawObject || this._ie4getRawNode() ).scrollHeight;
\r
212 Node.prototype.scrollLeft = function(){
\r
213 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
214 console.log( 'xnode.scrollLeft() : no parent' );
\r
217 Node._body._updateTimerID && Node._body._startUpdate();
\r
219 console.log( 'xnode.scrollLeft() : not belong tree.' );
\r
222 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
223 if( X_UA_DOM.W3C ){
\r
224 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
225 return this._rawObject.scrollLeft;
\r
227 if( X_UA_DOM.IE4 ){
\r
228 return ( this._rawObject || this._ie4getRawNode() ).scrollLeft;
\r
234 Node.prototype.scrollTop = function(){
\r
235 if( !this.parent ){// todo : _state で tree に所属しているか?判定
\r
236 console.log( 'xnode.scrollTop() : no parent' );
\r
239 Node._body._updateTimerID && Node._body._startUpdate();
\r
241 console.log( 'xnode.scrollTop() : not belong tree.' );
\r
244 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
245 if( X_UA_DOM.W3C ){
\r
246 // this.css( X.Dom.Style.Unit.px, 'width' );
\r
247 return this._rawObject.scrollTop;
\r
249 if( X_UA_DOM.IE4 ){
\r
250 return ( this._rawObject || this._ie4getRawNode() ).scrollTop;
\r
256 /* --------------------------------------
\r
258 * position:absolute かつ x か y が設定されていたら、再描画しないで css オブジェクトから計算した値を返す。 float は?
\r
259 * position:absolute の指定で自動で top,left を補う必要あり? -> X.Dom.Style
\r
260 * 親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。
\r
261 * transformX, Y は加える? アニメーション中は?
\r
263 // X.Dom.Style.transform,
\r
264 Node.prototype.x = function(){
\r
265 if( !this.parent ){
\r
266 console.log( 'xnode.x() : no parent' );
\r
269 Node._body._updateTimerID && Node._body._startUpdate();
\r
271 console.log( 'xnode.x() : not belong tree.' );
\r
274 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
275 if( X_UA_DOM.W3C ){
\r
276 // this.css( X.Dom.Style.Unit.px, 'left' );
\r
277 // this.css( X.Dom.Style.Unit.px, 'translateX' );
\r
278 return this._rawObject.offsetLeft;
\r
280 if( X_UA_DOM.IE4 ){
\r
281 return ( this._rawObject || this._ie4getRawNode() ).offsetLeft;
\r
287 Node.prototype.y = function(){
\r
288 if( !this.parent ){
\r
289 console.log( 'xnode.y() : no parent' );
\r
292 Node._body._updateTimerID && Node._body._startUpdate();
\r
294 console.log( 'xnode.y() : not belong tree.' );
\r
297 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
298 if( X_UA_DOM.W3C ){
\r
299 // this.css( X.Dom.Style.Unit.px, 'top' );
\r
300 // this.css( X.Dom.Style.Unit.px, 'transisitonY' );
\r
301 return this._rawObject.offsetTop;
\r
303 if( X_UA_DOM.IE4 ){
\r
304 return ( this._rawObject || this._ie4getRawNode() ).offsetTop;
\r
310 Node.prototype.offset = function( /* xnodeParent */ ){
\r
311 var x = 0, y = 0, elm;
\r
313 if( !this.parent ){
\r
314 console.log( 'xnode.offset() : no parent' );
\r
315 return { x : 0, y : 0 };
\r
317 Node._body._updateTimerID && Node._body._startUpdate();
\r
319 console.log( 'xnode.offset() : not belong tree.' );
\r
320 return { x : 0, y : 0 };
\r
322 if( this._state & X_Node_State.DISPLAY_NONE ) return 0;
\r
324 if( X.Dom.Node._body === this || X.Dom.Node._html === this ){
\r
325 return { x : 0, y : 0 };
\r
328 if( X_UA_DOM.W3C ){
\r
329 elm = this._rawObject;
\r
331 if( X_UA_DOM.IE4 ){
\r
332 elm = this._rawObject || this._ie4getRawNode();
\r
337 while( elm && elm !== document.body ){
\r
338 x += elm.offsetLeft;
\r
339 y += elm.offsetTop;
\r
340 elm = elm.offsetParent || elm.parentNode || elm.parentElement;
\r
342 return { x : x, y : y };
\r