[Summary view] [Print] [Text view]

   1  <component lightWeight="true">
   2  <attach event="onpropertychange" onevent="checkPropertyChange()" />
   3  <attach event="ondetach" onevent="restore()" />
   4  <script>
   5  //<![CDATA[
   6  
   7  var doc = element.document;
   8  
   9  function init() {
  10      updateBorderBoxWidth();
  11      updateBorderBoxHeight();
  12  }
  13  
  14  function restore() {
  15      element.runtimeStyle.width = "";
  16      element.runtimeStyle.height = "";
  17  }
  18  
  19  /* border width getters */
  20  function getBorderWidth(sSide) {
  21      if (element.currentStyle["border" + sSide + "Style"] == "none")
  22          return 0;
  23      var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
  24      return n || 0;
  25  }
  26  
  27  function getBorderLeftWidth() { return getBorderWidth("Left"); }
  28  function getBorderRightWidth() { return getBorderWidth("Right"); }
  29  function getBorderTopWidth() { return getBorderWidth("Top"); }
  30  function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
  31  /* end border width getters */
  32  
  33  /* padding getters */
  34  function getPadding(sSide) {
  35      var n = parseInt(element.currentStyle["padding" + sSide]);
  36      return n || 0;
  37  }
  38  
  39  function getPaddingLeft() { return getPadding("Left"); }
  40  function getPaddingRight() { return getPadding("Right"); }
  41  function getPaddingTop() { return getPadding("Top"); }
  42  function getPaddingBottom() { return getPadding("Bottom"); }
  43  /* end padding getters */
  44  
  45  function getBoxSizing() {
  46      var s = element.style;
  47      var cs = element.currentStyle
  48  
  49      if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
  50          return s.boxSizing;
  51      if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
  52          return s["box-sizing"];
  53      if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
  54          return cs.boxSizing;
  55      if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
  56          return cs["box-sizing"];
  57      return getDocumentBoxSizing();
  58  }
  59  
  60  function getDocumentBoxSizing() {
  61      if (doc.compatMode == null || doc.compatMode == "BackCompat")
  62          return "border-box";
  63      return "content-box"
  64  }
  65  
  66  /* width and height setters */
  67  function setBorderBoxWidth(n) {
  68      element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
  69          getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
  70  }
  71  
  72  function setBorderBoxHeight(n) {
  73      element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
  74          getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
  75  }
  76  
  77  function setContentBoxWidth(n) {
  78      element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
  79          getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
  80  }
  81  
  82  function setContentBoxHeight(n) {
  83      element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
  84          getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
  85  }
  86  /* end width and height setters */
  87  
  88  function updateBorderBoxWidth() {
  89      element.runtimeStyle.width = "";
  90      if (getDocumentBoxSizing() == getBoxSizing())
  91          return;
  92      var csw = element.currentStyle.width;
  93      if (csw != "auto" && csw.indexOf("px") != -1) {
  94          if (getBoxSizing() == "border-box")
  95              setBorderBoxWidth(parseInt(csw));
  96          else
  97              setContentBoxWidth(parseInt(csw));
  98      }
  99  }
 100  
 101  function updateBorderBoxHeight() {
 102      element.runtimeStyle.height = "";    
 103      if (getDocumentBoxSizing() == getBoxSizing())
 104          return;
 105      var csh = element.currentStyle.height;
 106      if (csh != "auto" && csh.indexOf("px") != -1) {
 107          if (getBoxSizing() == "border-box")
 108              setBorderBoxHeight(parseInt(csh));
 109          else
 110              setContentBoxHeight(parseInt(csh));
 111      }
 112  }
 113  
 114  function checkPropertyChange() {
 115      var pn = event.propertyName;
 116      var undef;
 117  
 118      if (pn == "style.boxSizing" && element.style.boxSizing == "") {
 119          element.style.removeAttribute("boxSizing");
 120          element.runtimeStyle.boxSizing = undef;        
 121      }
 122  
 123  
 124      switch (pn) {
 125          case "style.width":
 126          case "style.borderLeftWidth":
 127          case "style.borderLeftStyle":
 128          case "style.borderRightWidth":
 129          case "style.borderRightStyle":
 130          case "style.paddingLeft":
 131          case "style.paddingRight":
 132              updateBorderBoxWidth();
 133              break;
 134          
 135          case "style.height":
 136          case "style.borderTopWidth":
 137          case "style.borderTopStyle":
 138          case "style.borderBottomWidth":
 139          case "style.borderBottomStyle":
 140          case "style.paddingTop":
 141          case "style.paddingBottom":
 142              updateBorderBoxHeight();
 143              break;
 144          
 145          case "className":
 146          case "style.boxSizing":
 147              updateBorderBoxWidth();
 148              updateBorderBoxHeight();
 149              break;
 150      }
 151  }
 152  
 153  init();
 154  
 155  //]]>
 156  </script>
 157  </component>