0.6.x/js/dom/13_XDomBoxModel.js

   1 X.Dom.BoxModel = {
   2         CONTENT_BOX      : 1,
   3         PADDING_BOX      : 2,
   4         BORDER_BOX       : 3,
   5         MARGIN_BOX       : 4,
   6
   7         defaultBoxModel  : 0,
   8         boxSizingEnabled : false
   9 };
  10
  11 X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
  12
  13         var elm = Node._systemNode._rawNode;
  14         elm.style.cssText = 'width:10px;padding:1px;border:2px solid #0;margin:4px;';
  15
  16         X.Dom.BoxModel.defaultBoxModel = elm.offsetWidth === 10 ?
  17                 X.Dom.BoxModel.BORDER_BOX :
  18                 X.Dom.BoxModel.CONTENT_BOX;
  19
  20         if( X.Dom.BoxModel.defaultBoxModel === X.Dom.BoxModel.CONTENT_BOX ){
  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;';
  22
  23                 X.Dom.BoxModel.boxSizingEnabled = elm.offsetWidth === 10;
  24         };
  25
  26
  27         // padding
  28         // border
  29         // margin
  30         // top
  31
  32
  33 });
  34
  35 /* --------------------------------------
  36  *  Width, Height
  37  *  overflow:hidden かつ width か height が設定されていたら、再描画しないでその値を返す
  38  */
  39 Node.prototype.width = function(){
  40         var elm;
  41         if( !this.parent ) return 0;
  42         if( document.getElementById ){
  43                 // this.css( X.Dom.Style.Unit.px, 'width' );
  44                 return ( elm = this._rawNode ) ? elm.offsetWidth : 0;
  45         } else
  46         if( document.all ){
  47                 if( !( elm = this._ie4getRawNode() ) ) return 0;
  48                 Node.root._ie4reserved === true && Node.root._ie4startUpdate();
  49                 return elm.offsetWidth;
  50         } else {
  51
  52         };
  53 };
  54
  55 Node.prototype.height = function(){
  56         var elm;
  57         if( !this.parent ) return 0;
  58         if( document.getElementById ){
  59                 // this.css( X.Dom.Style.Unit.px, 'height' );
  60                 return ( elm = this._rawNode ) ? elm.offsetHeight : 0;
  61         } else
  62         if( document.all ){
  63                 if( !( elm = this._ie4getRawNode() ) ) return 0;
  64                 Node.root._ie4reserved === true && Node.root._ie4startUpdate();
  65                 return elm.offsetHeight;
  66         } else {
  67
  68         };
  69 };
  70
  71 /* --------------------------------------
  72  *  x, y
  73  *  position:absolute かつ x か y が設定されていたら、再描画しないでその値を返す。
  74  *  position:absolute の指定で自動で top,left を補う必要あり？
  75  *  親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。
  76  * transformX, Y は加える？ アニメーション中は？
  77  */
  78 // X.Dom.Style.transform,
  79 Node.prototype.x = function(){
  80         var elm;
  81         if( !this.parent ) return 0;
  82         if( document.getElementById ){
  83                 // this.css( X.Dom.Style.Unit.px, 'left' );
  84                 // this.css( X.Dom.Style.Unit.px, 'translateX' );
  85                 return ( elm = this._rawNode ) ? elm.offsetLeft : 0;
  86         } else
  87         if( document.all ){
  88                 if( !( elm = this._ie4getRawNode() ) ) return 0;
  89                 Node.root._ie4reserved === true && Node.root._ie4startUpdate();
  90                 return elm.offsetLeft;
  91         } else {
  92
  93         };
  94 };
  95
  96 Node.prototype.y = function(){
  97         var elm;
  98         if( !this.parent ) return 0;
  99         if( document.getElementById ){
 100                 // this.css( X.Dom.Style.Unit.px, 'top' );
 101                 // this.css( X.Dom.Style.Unit.px, 'transisitonY' );
 102                 return ( elm = this._rawNode ) ? elm.offsetTop : 0;
 103         } else
 104         if( document.all ){
 105                 if( !( elm = this._ie4getRawNode() ) ) return 0;
 106                 Node.root._ie4reserved === true && Node.root._ie4startUpdate();
 107                 return elm.offsetTop;
 108         } else {
 109
 110         };
 111 };