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