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 ){\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( document.getElementById ){\r
  45                 // this.css( X.Dom.Style.Unit.px, 'width' );\r
  46                 return this._rawNode.offsetWidth;\r
  47         } else\r
  48         if( document.all ){\r
  49                 return ( this._rawNode || this._ie4getRawNode() ).offsetWidth;\r
  50         } else {\r
  51                 \r
  52         };\r
  53 };\r
  54 \r
  55 Node.prototype.height = function(){\r
  56         if( !this.parent ){\r
  57                 console.log( 'xnode.height() : no parent' );\r
  58                 return 0;\r
  59         };\r
  60         Node.root._updateTimerID && Node.root._startUpdate();\r
  61         if( document.getElementById ){\r
  62                 // this.css( X.Dom.Style.Unit.px, 'height' );\r
  63                 return this._rawNode.offsetHeight;\r
  64         } else\r
  65         if( document.all ){\r
  66                 return ( this._rawNode || this._ie4getRawNode() ).offsetHeight;\r
  67         } else {\r
  68                 \r
  69         };\r
  70 };\r
  71 \r
  72 /* --------------------------------------\r
  73  *  x, y\r
  74  *  position:absolute かつ x か y が設定されていたら、再描画しないで css オブジェクトから計算した値を返す。 float は?\r
  75  *  position:absolute の指定で自動で top,left を補う必要あり？ -> X.Dom.Style\r
  76  *  親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。\r
  77  * transformX, Y は加える？ アニメーション中は？\r
  78  */\r
  79 // X.Dom.Style.transform,\r
  80 Node.prototype.x = function(){\r
  81         if( !this.parent ){\r
  82                 console.log( 'xnode.x() : no parent' );\r
  83                 return 0;\r
  84         };\r
  85         Node.root._updateTimerID && Node.root._startUpdate();\r
  86         if( document.getElementById ){\r
  87                 // this.css( X.Dom.Style.Unit.px, 'left' );\r
  88                 // this.css( X.Dom.Style.Unit.px, 'translateX' );\r
  89                 return this._rawNode.offsetLeft;\r
  90         } else\r
  91         if( document.all ){\r
  92                 return ( this._rawNode || this._ie4getRawNode() ).offsetLeft;\r
  93         } else {\r
  94                 \r
  95         };\r
  96 };\r
  97 \r
  98 Node.prototype.y = function(){\r
  99         if( !this.parent ){\r
 100                 console.log( 'xnode.y() : no parent' );\r
 101                 return 0;\r
 102         };\r
 103         Node.root._updateTimerID && Node.root._startUpdate();\r
 104         if( document.getElementById ){\r
 105                 // this.css( X.Dom.Style.Unit.px, 'top' );\r
 106                 // this.css( X.Dom.Style.Unit.px, 'transisitonY' );\r
 107                 return this._rawNode.offsetTop;\r
 108         } else\r
 109         if( document.all ){\r
 110                 return ( this._rawNode || this._ie4getRawNode() ).offsetTop;            \r
 111         } else {\r
 112                 \r
 113         };\r
 114 };\r
 115 \r