Hatena::Groupmoz-addon

Ci.nsIZIGOROu

2008-01-19

(min|max)-(width|height)なHTC

| 04:14 |  (min|max)-(width|height)なHTC - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  (min|max)-(width|height)なHTC - Ci.nsIZIGOROu

もうみんな結構試してるから今更かもだけど、試しに暫定版を作った。

諸々問題あるけど、後で書く。

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<public:component xmlns="http://www.w3.org/1999/xhtml" xmlns:public="urn:HTMLComponent">
  <script type="text/javascript">
// <![CDATA[
  var handlers = (function() {
    var elementHandlers = function() {
      this.element = element;
    };

    elementHandlers.prototype = {
      parse: function(prop) {
        var result = (/^(([\d\.]+)(px|pt|%)?|auto)$/).exec(this.element.currentStyle[prop]);

        if (result) {
          if (result[2].length > 0) { // numeric
            if (result[3] != "" && result[3] != "px") 
              return { value: parseFloat(result[2]), unit: result[3] };
            else 
              return { value: parseInt(result[2]), unit: "px" };
          }
          else { // auto
            return { value: result[0], unit: result[0] };
          }
        }

        return {value: null, unit: null};
      },
      contentready: function(eventName) {
        this.minWidth = this.parse("min-width");
        this.maxWidth = this.parse("max-width");
        this.minHeight = this.parse("minHeight");
        this.maxHeight = this.parse("max-height");

        this.adjust();
      },
      resize: function() {
        this.adjust();
      },
      adjust: function() {
        if (this.maxWidth.value && this.element.offsetWidth > this.maxWidth.value)
          this.element.runtimeStyle.width = this.maxWidth.value;
        else if (this.minWidth.value && this.element.offsetWidth < this.minWidth.value)
          this.element.runtimeStyle.width = this.minWidth.value;

        if (this.maxHeight.value && this.element.offsetHeight > this.maxHeight.value)
          this.element.runtimeStyle.height = this.maxHeight.value;
        else if (this.minHeight.value && this.element.offsetHeight < this.minHeight.value)
          this.element.runtimeStyle.height = this.minHeight.value;
      }
    };
    return new elementHandlers();
  })();
// ]]>
  </script>
  <public:attach 
      event="oncontentready" 
      onevent="handlers.contentready(event);" 
      for="element"
        />
  <public:attach
      event="onresize"
      onevent="handlers.resize(event);"
      for="window"
      />
</public:component>

使い方は、

div#hoge {
  width: 80%;
  min-width: 400px;
  max-width: 600px;
  behavior: url(minmax.htc)
}

みたいな感じ。

今の所のTODO

  • ptとかmmとか色々単位系の変換ライブラリ必要。今の所pxしか考慮してない
  • IE7のときどうなるか試してない
  • JSでこのbehaviorが当たる要素を追加した時の挙動がおかしい
    • 一旦min/maxを忘れてレンダリングした後に、再度min/maxを当てるのが正しい?

MariliaMarilia2012/04/29 12:00That hits the target prefetcly. Thanks!

qmbtejhwotlqmbtejhwotl2012/04/29 18:23SRjl6q <a href="http://mnvwzqjkqyml.com/">mnvwzqjkqyml</a>

gcjijpgcjijp2012/05/02 14:48FsI1a5 , [url=http://vzmntdzdqjks.com/]vzmntdzdqjks[/url], [link=http://jnqyhzzjjthk.com/]jnqyhzzjjthk[/link], http://lugjtcycwtvi.com/