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 /* --------------------------------------\r
  83  *  x, y\r
  84  *  position:absolute かつ x か y が設定されていたら、再描画しないで css オブジェクトから計算した値を返す。 float は?\r
  85  *  position:absolute の指定で自動で top,left を補う必要あり？ -> X.Dom.Style\r
  86  *  親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。\r
  87  * transformX, Y は加える？ アニメーション中は？\r
  88  */\r
  89 // X.Dom.Style.transform,\r
  90 Node.prototype.x = function(){\r
  91         if( !this.parent ){\r
  92                 console.log( 'xnode.x() : no parent' );\r
  93                 return 0;\r
  94         };\r
  95         Node.root._updateTimerID && Node.root._startUpdate();\r
  96         if( !this._root ){\r
  97                 console.log( 'xnode.x() : not belong tree.' );\r
  98                 return 0;\r
  99         };\r
 100         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
 101         if( document.getElementById ){\r
 102                 // this.css( X.Dom.Style.Unit.px, 'left' );\r
 103                 // this.css( X.Dom.Style.Unit.px, 'translateX' );\r
 104                 return this._rawNode.offsetLeft;\r
 105         } else\r
 106         if( document.all ){\r
 107                 return ( this._rawNode || this._ie4getRawNode() ).offsetLeft;\r
 108         } else {\r
 109                 \r
 110         };\r
 111 };\r
 112 \r
 113 Node.prototype.y = function(){\r
 114         if( !this.parent ){\r
 115                 console.log( 'xnode.y() : no parent' );\r
 116                 return 0;\r
 117         };\r
 118         Node.root._updateTimerID && Node.root._startUpdate();\r
 119         if( !this._root ){\r
 120                 console.log( 'xnode.y() : not belong tree.' );\r
 121                 return 0;\r
 122         };\r
 123         if( this._state & X.Dom.State.DISPLAY_NONE ) return 0;\r
 124         if( document.getElementById ){\r
 125                 // this.css( X.Dom.Style.Unit.px, 'top' );\r
 126                 // this.css( X.Dom.Style.Unit.px, 'transisitonY' );\r
 127                 return this._rawNode.offsetTop;\r
 128         } else\r
 129         if( document.all ){\r
 130                 return ( this._rawNode || this._ie4getRawNode() ).offsetTop;            \r
 131         } else {\r
 132                 \r
 133         };\r
 134 };\r
 135 \r