0.6.x/js/dom/13_XDomBoxModel.js

   1 X.Dom.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         vScrollbarSize   : 0,\r
  13         hScrollbarSize   : 0\r
  14 };\r
  15 \r
  16 \r
  17 \r
  18 X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){\r
  19 \r
  20         var node = Node._systemNode,\r
  21         \r
  22                 // http://jsdo.it/imaya/kTYg\r
  23                 body = document.body,\r
  24                 defaultOverflow = document.body.style.overflow,\r
  25                 width, height;\r
  26 \r
  27         body.style.overflow = 'hidden';\r
  28         w = body.clientWidth;\r
  29         h = body.clientHeight;\r
  30 \r
  31         body.style.overflow = 'scroll';\r
  32         w -= body.clientWidth;\r
  33         h -= body.clientHeight;\r
  34 \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
  38 \r
  39         X.Dom.BoxModel.vScrollbarSize = w;\r
  40         X.Dom.BoxModel.hScrollbarSize = h;\r
  41         //\r
  42         \r
  43         node.cssText( 'width:10px;padding:1px;border:2px solid #0;margin:4px;' );\r
  44         \r
  45         X.Dom.BoxModel.defaultBoxModel = node.width() === 10 ?\r
  46                 X.Dom.BoxModel.BORDER_BOX :\r
  47                 X.Dom.BoxModel.CONTENT_BOX;\r
  48         \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
  52                                                                                         .width() === 10;\r
  53         };\r
  54         // padding\r
  55         // border\r
  56         // margin\r
  57         // top\r
  58         \r
  59         node\r
  60                 //.cssText( 'width:90px;height:90px;overflow:auto;' )\r
  61                 .html( '<div style="width:100px;height:100px;"></div>' );\r
  62                 //._startUpdate();\r
  63         /*\r
  64         X.Dom.BoxModel.vScrollbarSize = 90 - node._rawNode.clientWidth;\r
  65         X.Dom.BoxModel.hScrollbarSize = 90 - node._rawNode.clientHeight;*/\r
  66 \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
  70                         .y();\r
  71 \r
  72         node.cssText( '' ).empty();\r
  73 });\r
  74 \r
  75 /* --------------------------------------\r
  76  * Width, Height\r
  77  *  display:blobk かつ overflow:hidden かつ size（px,em）が設定されていたら、再描画しないでその値を返す\r
  78  *  display:none なら 0\r
  79  * \r
  80  * getBoxObjectFor\r
  81  * getBoundingClientRect\r
  82  */\r
  83 Node.prototype.width = function(){\r
  84         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
  85                 console.log( 'xnode.width() : no parent' );\r
  86                 return 0;\r
  87         };\r
  88         Node.root._updateTimerID && Node.root._startUpdate();\r
  89         if( !this._root ){\r
  90                 console.log( 'xnode.width() : not belong tree.' );\r
  91                 return 0;\r
  92         };\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
  97         } else\r
  98         if( X.Dom.DOM_IE4 ){\r
  99                 return ( this._rawNode || this._ie4getRawNode() ).offsetWidth;\r
 100         } else {\r
 101                 \r
 102         };\r
 103 };\r
 104 \r
 105 Node.prototype.height = function(){\r
 106         if( !this.parent ){\r
 107                 console.log( 'xnode.height() : no parent' );\r
 108                 return 0;\r
 109         };\r
 110         Node.root._updateTimerID && Node.root._startUpdate();\r
 111         if( !this._root ){\r
 112                 console.log( 'xnode.height() : not belong tree.' );\r
 113                 return 0;\r
 114         };\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
 119         } else\r
 120         if( X.Dom.DOM_IE4 ){\r
 121                 return ( this._rawNode || this._ie4getRawNode() ).offsetHeight;\r
 122         } else {\r
 123                 \r
 124         };\r
 125 };\r
 126 \r
 127 Node.prototype.scrollWidth = function(){\r
 128         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
 129                 console.log( 'xnode.width() : no parent' );\r
 130                 return 0;\r
 131         };\r
 132         Node.root._updateTimerID && Node.root._startUpdate();\r
 133         if( !this._root ){\r
 134                 console.log( 'xnode.width() : not belong tree.' );\r
 135                 return 0;\r
 136         };\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
 141         } else\r
 142         if( X.Dom.DOM_IE4 ){\r
 143                 return ( this._rawNode || this._ie4getRawNode() ).scrollWidth;\r
 144         } else {\r
 145                 \r
 146         };\r
 147 };\r
 148 \r
 149 Node.prototype.scrollHeight = function(){\r
 150         if( !this.parent ){\r
 151                 console.log( 'xnode.height() : no parent' );\r
 152                 return 0;\r
 153         };\r
 154         Node.root._updateTimerID && Node.root._startUpdate();\r
 155         if( !this._root ){\r
 156                 console.log( 'xnode.height() : not belong tree.' );\r
 157                 return 0;\r
 158         };\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
 163         } else\r
 164         if( X.Dom.DOM_IE4 ){\r
 165                 return ( this._rawNode || this._ie4getRawNode() ).scrollHeight;\r
 166         } else {\r
 167                 \r
 168         };\r
 169 };\r
 170 \r
 171 Node.prototype.scrollLeft = function(){\r
 172         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
 173                 console.log( 'xnode.scrollLeft() : no parent' );\r
 174                 return 0;\r
 175         };\r
 176         Node.root._updateTimerID && Node.root._startUpdate();\r
 177         if( !this._root ){\r
 178                 console.log( 'xnode.scrollLeft() : not belong tree.' );\r
 179                 return 0;\r
 180         };\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
 185         } else\r
 186         if( X.Dom.DOM_IE4 ){\r
 187                 return ( this._rawNode || this._ie4getRawNode() ).scrollLeft;\r
 188         } else {\r
 189                 \r
 190         };\r
 191 };\r
 192 \r
 193 Node.prototype.scrollTop = function(){\r
 194         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
 195                 console.log( 'xnode.scrollTop() : no parent' );\r
 196                 return 0;\r
 197         };\r
 198         Node.root._updateTimerID && Node.root._startUpdate();\r
 199         if( !this._root ){\r
 200                 console.log( 'xnode.scrollTop() : not belong tree.' );\r
 201                 return 0;\r
 202         };\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
 207         } else\r
 208         if( X.Dom.DOM_IE4 ){\r
 209                 return ( this._rawNode || this._ie4getRawNode() ).scrollTop;\r
 210         } else {\r
 211                 \r
 212         };\r
 213 };\r
 214 \r
 215 /* --------------------------------------\r
 216  *  x, y\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
 221  */\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
 226                 return 0;\r
 227         };\r
 228         Node.root._updateTimerID && Node.root._startUpdate();\r
 229         if( !this._root ){\r
 230                 console.log( 'xnode.x() : not belong tree.' );\r
 231                 return 0;\r
 232         };\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
 238         } else\r
 239         if( X.Dom.DOM_IE4 ){\r
 240                 return ( this._rawNode || this._ie4getRawNode() ).offsetLeft;\r
 241         } else {\r
 242                 \r
 243         };\r
 244 };\r
 245 \r
 246 Node.prototype.y = function(){\r
 247         if( !this.parent ){\r
 248                 console.log( 'xnode.y() : no parent' );\r
 249                 return 0;\r
 250         };\r
 251         Node.root._updateTimerID && Node.root._startUpdate();\r
 252         if( !this._root ){\r
 253                 console.log( 'xnode.y() : not belong tree.' );\r
 254                 return 0;\r
 255         };\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
 261         } else\r
 262         if( X.Dom.DOM_IE4 ){\r
 263                 return ( this._rawNode || this._ie4getRawNode() ).offsetTop;            \r
 264         } else {\r
 265                 \r
 266         };\r
 267 };\r
 268 \r