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 X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){\r
  17 \r
  18         var elm = Node._systemNode._rawNode || Node._systemNode._ie4getRawNode();\r
  19         elm.style.cssText = 'width:10px;padding:1px;border:2px solid #0;margin:4px;';\r
  20         \r
  21         X.Dom.BoxModel.defaultBoxModel = elm.offsetWidth === 10 ?\r
  22                 X.Dom.BoxModel.BORDER_BOX :\r
  23                 X.Dom.BoxModel.CONTENT_BOX;\r
  24         \r
  25         if( X.Dom.BoxModel.defaultBoxModel === X.Dom.BoxModel.CONTENT_BOX ){\r
  26                 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;';\r
  27                 \r
  28                 X.Dom.BoxModel.boxSizingEnabled = elm.offsetWidth === 10;\r
  29         };\r
  30         // padding\r
  31         // border\r
  32         // margin\r
  33         // top\r
  34 \r
  35         elm.style.cssText = 'width:90px;height:90px;overflow:auto;';\r
  36         elm.innerHTML = '<div style="width:100px;height:100px;"></div>';\r
  37         \r
  38         X.Dom.BoxModel.vScrollbarSize = 90 - elm.clientWidth;\r
  39         X.Dom.BoxModel.hScrollbarSize = 90 - elm.clientHeight;\r
  40 \r
  41         elm.style.cssText = 'position:absolute;top:0;left:0;margin:1px;border:2px solid #000;padding:4px;';\r
  42         elm.children[ 0 ].style.cssText = 'position:absolute;top:8px;left:8px;margin:16px;border:32px solid #666;padding:64px;';\r
  43 \r
  44         X.Dom.BoxModel.absoluteOffset = elm.children[ 0 ].offsetTop;\r
  45 \r
  46         elm.style.cssText = elm.innerHTML = '';\r
  47 });\r
  48 \r
  49 /* --------------------------------------\r
  50  * Width, Height\r
  51  *  display:blobk かつ overflow:hidden かつ size（px,em）が設定されていたら、再描画しないでその値を返す\r
  52  *  display:none なら 0\r
  53  */\r
  54 Node.prototype.width = function(){\r
  55         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
  56                 console.log( 'xnode.width() : no parent' );\r
  57                 return 0;\r
  58         };\r
  59         Node.root._updateTimerID && Node.root._startUpdate();\r
  60         if( !this._root ){\r
  61                 console.log( 'xnode.width() : not belong tree.' );\r
  62                 return 0;\r
  63         };\r
  64         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
  65         if( X.Dom.DOM_W3C ){\r
  66                 // this.css( X.Dom.Style.Unit.px, 'width' );\r
  67                 return this._rawNode.offsetWidth;\r
  68         } else\r
  69         if( X.Dom.DOM_IE4 ){\r
  70                 return ( this._rawNode || this._ie4getRawNode() ).offsetWidth;\r
  71         } else {\r
  72                 \r
  73         };\r
  74 };\r
  75 \r
  76 Node.prototype.height = function(){\r
  77         if( !this.parent ){\r
  78                 console.log( 'xnode.height() : no parent' );\r
  79                 return 0;\r
  80         };\r
  81         Node.root._updateTimerID && Node.root._startUpdate();\r
  82         if( !this._root ){\r
  83                 console.log( 'xnode.height() : not belong tree.' );\r
  84                 return 0;\r
  85         };\r
  86         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
  87         if( X.Dom.DOM_W3C ){\r
  88                 // this.css( X.Dom.Style.Unit.px, 'height' );\r
  89                 return this._rawNode.offsetHeight;\r
  90         } else\r
  91         if( X.Dom.DOM_IE4 ){\r
  92                 return ( this._rawNode || this._ie4getRawNode() ).offsetHeight;\r
  93         } else {\r
  94                 \r
  95         };\r
  96 };\r
  97 \r
  98 Node.prototype.scrollWidth = function(){\r
  99         if( !this.parent ){// todo : _state で tree に所属しているか？判定\r
 100                 console.log( 'xnode.width() : no parent' );\r
 101                 return 0;\r
 102         };\r
 103         Node.root._updateTimerID && Node.root._startUpdate();\r
 104         if( !this._root ){\r
 105                 console.log( 'xnode.width() : not belong tree.' );\r
 106                 return 0;\r
 107         };\r
 108         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
 109         if( X.Dom.DOM_W3C ){\r
 110                 // this.css( X.Dom.Style.Unit.px, 'width' );\r
 111                 return this._rawNode.scrollWidth;\r
 112         } else\r
 113         if( X.Dom.DOM_IE4 ){\r
 114                 return ( this._rawNode || this._ie4getRawNode() ).scrollWidth;\r
 115         } else {\r
 116                 \r
 117         };\r
 118 };\r
 119 \r
 120 Node.prototype.scrollHeight = function(){\r
 121         if( !this.parent ){\r
 122                 console.log( 'xnode.height() : no parent' );\r
 123                 return 0;\r
 124         };\r
 125         Node.root._updateTimerID && Node.root._startUpdate();\r
 126         if( !this._root ){\r
 127                 console.log( 'xnode.height() : not belong tree.' );\r
 128                 return 0;\r
 129         };\r
 130         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
 131         if( X.Dom.DOM_W3C ){\r
 132                 // this.css( X.Dom.Style.Unit.px, 'height' );\r
 133                 return this._rawNode.scrollHeight;\r
 134         } else\r
 135         if( X.Dom.DOM_IE4 ){\r
 136                 return ( this._rawNode || this._ie4getRawNode() ).scollHeight;\r
 137         } else {\r
 138                 \r
 139         };\r
 140 };\r
 141 \r
 142 \r
 143 /* --------------------------------------\r
 144  *  x, y\r
 145  *  position:absolute かつ x か y が設定されていたら、再描画しないで css オブジェクトから計算した値を返す。 float は?\r
 146  *  position:absolute の指定で自動で top,left を補う必要あり？ -> X.Dom.Style\r
 147  *  親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。\r
 148  * transformX, Y は加える？ アニメーション中は？\r
 149  */\r
 150 // X.Dom.Style.transform,\r
 151 Node.prototype.x = function(){\r
 152         if( !this.parent ){\r
 153                 console.log( 'xnode.x() : no parent' );\r
 154                 return 0;\r
 155         };\r
 156         Node.root._updateTimerID && Node.root._startUpdate();\r
 157         if( !this._root ){\r
 158                 console.log( 'xnode.x() : not belong tree.' );\r
 159                 return 0;\r
 160         };\r
 161         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
 162         if( X.Dom.DOM_W3C ){\r
 163                 // this.css( X.Dom.Style.Unit.px, 'left' );\r
 164                 // this.css( X.Dom.Style.Unit.px, 'translateX' );\r
 165                 return this._rawNode.offsetLeft;\r
 166         } else\r
 167         if( X.Dom.DOM_IE4 ){\r
 168                 return ( this._rawNode || this._ie4getRawNode() ).offsetLeft;\r
 169         } else {\r
 170                 \r
 171         };\r
 172 };\r
 173 \r
 174 Node.prototype.y = function(){\r
 175         if( !this.parent ){\r
 176                 console.log( 'xnode.y() : no parent' );\r
 177                 return 0;\r
 178         };\r
 179         Node.root._updateTimerID && Node.root._startUpdate();\r
 180         if( !this._root ){\r
 181                 console.log( 'xnode.y() : not belong tree.' );\r
 182                 return 0;\r
 183         };\r
 184         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
 185         if( X.Dom.DOM_W3C ){\r
 186                 // this.css( X.Dom.Style.Unit.px, 'top' );\r
 187                 // this.css( X.Dom.Style.Unit.px, 'transisitonY' );\r
 188                 return this._rawNode.offsetTop;\r
 189         } else\r
 190         if( X.Dom.DOM_IE4 ){\r
 191                 return ( this._rawNode || this._ie4getRawNode() ).offsetTop;            \r
 192         } else {\r
 193                 \r
 194         };\r
 195 };\r
 196 \r