0.6.x/js/02_dom/04_XBoxModel.js

   1 var X_Node_BoxModel = {\r
   2         CONTENT_BOX      : 1,\r
   3         PADDING_BOX      : 2,\r
   4         BORDER_BOX       : 3,\r
   5                 \r
   6         defaultBoxModel  : 0,\r
   7         boxSizingEnabled : false,\r
   8         \r
   9         // TODO: offsetLeft, offsetTop の基準位置\r
  10         absoluteOffset   : 0\r
  11 };\r
  12 \r
  13 \r
  14 \r
  15 X_ViewPort.listenOnce( X_TEMP.SYSTEM_EVENT_INIT, function(){\r
  16         var node = X_Node_systemNode;\r
  17         \r
  18         node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );\r
  19         \r
  20         X_Node_BoxModel.defaultBoxModel = node.width() === 10 ?\r
  21                 X_Node_BoxModel.BORDER_BOX :\r
  22                 X_Node_BoxModel.CONTENT_BOX;\r
  23         \r
  24         if( X_Node_BoxModel.defaultBoxModel === X_Node_BoxModel.CONTENT_BOX ){\r
  25                 X_Node_BoxModel.boxSizingEnabled = node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' +\r
  26                         '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
  27                                                                                         .width() === 10;\r
  28         };\r
  29         // padding\r
  30         // border\r
  31         // margin\r
  32         // top\r
  33 \r
  34         X_Node_BoxModel.absoluteOffset =\r
  35                 node.cssText( 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;' )\r
  36                         .append( '<div></div>' )\r
  37                         .firstChild().cssText( 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;' )\r
  38                         .y();\r
  39 \r
  40         node.cssText( '' ).empty();\r
  41 });\r
  42 \r
  43 /* --------------------------------------\r
  44  * Width, Height\r
  45  *  display:blobk かつ overflow:hidden かつ size（px,em）が設定されていたら、再描画しないでその値を返す\r
  46  *  display:none なら 0\r
  47  * \r
  48  * getBoxObjectFor\r
  49  * getBoundingClientRect\r
  50  */\r
  51 Node.prototype.width = function(){\r
  52         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
  53                 console.log( 'xnode.width() : no parent' );\r
  54                 return 0;\r
  55         };\r
  56         X_Node_updateTimerID && X_Node_startUpdate();\r
  57         if( !this._root ){\r
  58                 console.log( 'xnode.width() : not belong tree.' );\r
  59                 return 0;\r
  60         };\r
  61         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
  62         if( X_UA_DOM.W3C ){\r
  63                 // this.css( X_Node_CSS_Unit.px, 'width' );\r
  64                 return this._rawObject.offsetWidth;\r
  65         } else\r
  66         if( X_UA_DOM.IE4 ){\r
  67                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetWidth;\r
  68         } else {\r
  69                 \r
  70         };\r
  71 };\r
  72 \r
  73 Node.prototype.height = function(){\r
  74         if( !this.parent ){\r
  75                 console.log( 'xnode.height() : no parent' );\r
  76                 return 0;\r
  77         };\r
  78         X_Node_updateTimerID && X_Node_startUpdate();\r
  79         if( !this._root ){\r
  80                 console.log( 'xnode.height() : not belong tree.' );\r
  81                 return 0;\r
  82         };\r
  83         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
  84         if( X_UA_DOM.W3C ){\r
  85                 // this.css( X_Node_CSS_Unit.px, 'height' );\r
  86                 return this._rawObject.offsetHeight;\r
  87         } else\r
  88         if( X_UA_DOM.IE4 ){\r
  89                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetHeight;\r
  90         } else {\r
  91                 \r
  92         };\r
  93 };\r
  94 \r
  95 Node.prototype.clientWidth = function(){\r
  96         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
  97                 console.log( 'xnode.width() : no parent' );\r
  98                 return 0;\r
  99         };\r
 100         X_Node_updateTimerID && X_Node_startUpdate();\r
 101         if( !this._root ){\r
 102                 console.log( 'xnode.width() : not belong tree.' );\r
 103                 return 0;\r
 104         };\r
 105         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 106         if( X_UA_DOM.W3C ){\r
 107                 // this.css( X_Node_CSS_Unit.px, 'width' );\r
 108                 return this._rawObject.clientWidth;\r
 109         } else\r
 110         if( X_UA_DOM.IE4 ){\r
 111                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).clientWidth;\r
 112         } else {\r
 113                 \r
 114         };\r
 115 };\r
 116 \r
 117 Node.prototype.clientHeight = function(){\r
 118         if( !this.parent ){\r
 119                 console.log( 'xnode.height() : no parent' );\r
 120                 return 0;\r
 121         };\r
 122         X_Node_updateTimerID && X_Node_startUpdate();\r
 123         if( !this._root ){\r
 124                 console.log( 'xnode.height() : not belong tree.' );\r
 125                 return 0;\r
 126         };\r
 127         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 128         if( X_UA_DOM.W3C ){\r
 129                 // this.css( X_Node_CSS_Unit.px, 'height' );\r
 130                 return this._rawObject.clientHeight;\r
 131         } else\r
 132         if( X_UA_DOM.IE4 ){\r
 133                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).clientHeight;\r
 134         } else {\r
 135                 \r
 136         };\r
 137 };\r
 138 \r
 139 Node.prototype.scrollWidth = function(){\r
 140         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
 141                 console.log( 'xnode.width() : no parent' );\r
 142                 return 0;\r
 143         };\r
 144         X_Node_updateTimerID && X_Node_startUpdate();\r
 145         if( !this._root ){\r
 146                 console.log( 'xnode.width() : not belong tree.' );\r
 147                 return 0;\r
 148         };\r
 149         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 150         if( X_UA_DOM.W3C ){\r
 151                 // this.css( X_Node_CSS_Unit.px, 'width' );\r
 152                 return this._rawObject.scrollWidth;\r
 153         } else\r
 154         if( X_UA_DOM.IE4 ){\r
 155                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollWidth;\r
 156         } else {\r
 157                 \r
 158         };\r
 159 };\r
 160 \r
 161 Node.prototype.scrollHeight = function(){\r
 162         if( !this.parent ){\r
 163                 console.log( 'xnode.height() : no parent' );\r
 164                 return 0;\r
 165         };\r
 166         X_Node_updateTimerID && X_Node_startUpdate();\r
 167         if( !this._root ){\r
 168                 console.log( 'xnode.height() : not belong tree.' );\r
 169                 return 0;\r
 170         };\r
 171         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 172         if( X_UA_DOM.W3C ){\r
 173                 // this.css( X_Node_CSS_Unit.px, 'height' );\r
 174                 return this._rawObject.scrollHeight;\r
 175         } else\r
 176         if( X_UA_DOM.IE4 ){\r
 177                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollHeight;\r
 178         } else {\r
 179                 \r
 180         };\r
 181 };\r
 182 \r
 183 Node.prototype.scrollLeft = function(){\r
 184         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
 185                 console.log( 'xnode.scrollLeft() : no parent' );\r
 186                 return 0;\r
 187         };\r
 188         X_Node_updateTimerID && X_Node_startUpdate();\r
 189         if( !this._root ){\r
 190                 console.log( 'xnode.scrollLeft() : not belong tree.' );\r
 191                 return 0;\r
 192         };\r
 193         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 194         if( X_UA_DOM.W3C ){\r
 195                 // this.css( X_Node_CSS_Unit.px, 'width' );\r
 196                 return this._rawObject.scrollLeft;\r
 197         } else\r
 198         if( X_UA_DOM.IE4 ){\r
 199                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollLeft;\r
 200         } else {\r
 201                 \r
 202         };\r
 203 };\r
 204 \r
 205 Node.prototype.scrollTop = function(){\r
 206         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
 207                 console.log( 'xnode.scrollTop() : no parent' );\r
 208                 return 0;\r
 209         };\r
 210         X_Node_updateTimerID && X_Node_startUpdate();\r
 211         if( !this._root ){\r
 212                 console.log( 'xnode.scrollTop() : not belong tree.' );\r
 213                 return 0;\r
 214         };\r
 215         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 216         if( X_UA_DOM.W3C ){\r
 217                 // this.css( X_Node_CSS_Unit.px, 'width' );\r
 218                 return this._rawObject.scrollTop;\r
 219         } else\r
 220         if( X_UA_DOM.IE4 ){\r
 221                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).scrollTop;\r
 222         } else {\r
 223                 \r
 224         };\r
 225 };\r
 226 \r
 227 /* --------------------------------------\r
 228  *  x, y\r
 229  *  position:absolute かつ x か y が設定されていたら、再描画しないで css オブジェクトから計算した値を返す。 float は?\r
 230  *  position:absolute の指定で自動で top,left を補う必要あり？ -> X.Node.CSS\r
 231  *  親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。\r
 232  * transformX, Y は加える？ アニメーション中は？\r
 233  */\r
 234 // X_Node_CSS_transform,\r
 235 Node.prototype.x = function(){\r
 236         if( !this.parent ){\r
 237                 console.log( 'xnode.x() : no parent' );\r
 238                 return 0;\r
 239         };\r
 240         X_Node_updateTimerID && X_Node_startUpdate();\r
 241         if( !this._root ){\r
 242                 console.log( 'xnode.x() : not belong tree.' );\r
 243                 return 0;\r
 244         };\r
 245         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 246         if( X_UA_DOM.W3C ){\r
 247                 // this.css( X_Node_CSS_Unit.px, 'left' );\r
 248                 // this.css( X_Node_CSS_Unit.px, 'translateX' );\r
 249                 return this._rawObject.offsetLeft;\r
 250         } else\r
 251         if( X_UA_DOM.IE4 ){\r
 252                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetLeft;\r
 253         } else {\r
 254                 \r
 255         };\r
 256 };\r
 257 \r
 258 Node.prototype.y = function(){\r
 259         if( !this.parent ){\r
 260                 console.log( 'xnode.y() : no parent' );\r
 261                 return 0;\r
 262         };\r
 263         X_Node_updateTimerID && X_Node_startUpdate();\r
 264         if( !this._root ){\r
 265                 console.log( 'xnode.y() : not belong tree.' );\r
 266                 return 0;\r
 267         };\r
 268         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 269         if( X_UA_DOM.W3C ){\r
 270                 // this.css( X_Node_CSS_Unit.px, 'top' );\r
 271                 // this.css( X_Node_CSS_Unit.px, 'transisitonY' );\r
 272                 return this._rawObject.offsetTop;\r
 273         } else\r
 274         if( X_UA_DOM.IE4 ){\r
 275                 return ( this._rawObject || X_Node__ie4getRawNode( this ) ).offsetTop;          \r
 276         } else {\r
 277                 \r
 278         };\r
 279 };\r
 280 \r
 281 Node.prototype.offset = function( /* xnodeParent */ ){\r
 282         var x = 0, y = 0, elm;\r
 283         \r
 284         if( !this.parent ){\r
 285                 console.log( 'xnode.offset() : no parent' );\r
 286                 return { x : 0, y : 0 };\r
 287         };\r
 288         X_Node_updateTimerID && X_Node_startUpdate();\r
 289         if( !this._root ){\r
 290                 console.log( 'xnode.offset() : not belong tree.' );\r
 291                 return { x : 0, y : 0 };\r
 292         };\r
 293         if( this._state & X_Node_State.DISPLAY_NONE ) return 0;\r
 294         \r
 295         if( X.Doc.body === this || X.Doc.html === this ){\r
 296                 return { x : 0, y : 0 };\r
 297         };\r
 298         \r
 299         if( X_UA_DOM.W3C ){\r
 300                 elm = this._rawObject;\r
 301         } else\r
 302         if( X_UA_DOM.IE4 ){\r
 303                 elm = this._rawObject || X_Node__ie4getRawNode( this );         \r
 304         } else {\r
 305                 \r
 306         };\r
 307         \r
 308         while( elm && elm !== document.body ){\r
 309                 x += elm.offsetLeft;\r
 310                 y += elm.offsetTop;\r
 311                 elm = elm.offsetParent || elm.parentNode || elm.parentElement;\r
 312         };\r
 313         return { x : x, y : y };\r
 314 };\r