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