numberbox.xml - mozsearch

Enable keyboard shortcuts

<?xml version="1.0"?>

<!-- This Source Code Form is subject to the terms of the Mozilla Public

   - License, v. 2.0. If a copy of the MPL was not distributed with this

   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<bindings id="numberboxBindings"

   xmlns="http://www.mozilla.org/xbl"

   xmlns:html="http://www.w3.org/1999/xhtml"

   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

   xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="numberbox" extends="chrome://messenger/content/textbox.xml#textbox">

    <content>

      <xul:moz-input-box class="textbox-input-box numberbox-input-box" flex="1"

                         xbl:inherits="context,disabled,focused">

        <html:input class="numberbox-input textbox-input" anonid="input"

                    xbl:inherits="value,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey"/>

      </xul:moz-input-box>

      <xul:spinbuttons anonid="buttons" xbl:inherits="disabled,hidden=hidespinbuttons"/>

    </content>

    <implementation>

      <field name="_valueEntered">false</field>

      <field name="_spinButtons">null</field>

      <field name="_value">0</field>

      <property name="spinButtons" readonly="true">

        <getter>

          <![CDATA[

            if (!this._spinButtons)

              this._spinButtons = document.getAnonymousElementByAttribute(this, "anonid", "buttons");

            return this._spinButtons;

]]>

        </getter>

      </property>

      <property name="value" onget="return '' + this.valueNumber"

                             onset="return this.valueNumber = val;"/>

      <property name="valueNumber">

        <getter>

          if (this._valueEntered) {

            var newval = this.inputField.value;

            this._validateValue(newval);

          return this._value;

        </getter>

        <setter>

          this._validateValue(val);

          return val;

        </setter>

      </property>

      <property name="min">

        <getter>

          var min = this.getAttribute("min");

          return min ? Number(min) : 0;

        </getter>

        <setter>

        <![CDATA[

          if (typeof val == "number") {

            this.setAttribute("min", val);

            if (this.valueNumber < val)

              this._validateValue(val);

          return val;

]]>

        </setter>

      </property>

      <property name="max">

        <getter>

          var max = this.getAttribute("max");

          return max ? Number(max) : Infinity;

        </getter>

        <setter>

        <![CDATA[

          if (typeof val != "number")

            return val;

          var min = this.min;

          if (val < min)

            val = min;

          this.setAttribute("max", val);

          if (this.valueNumber > val)

            this._validateValue(val);

          return val;

]]>

        </setter>

      </property>

      <method name="_modifyUp">

        <body>

          <![CDATA[

            if (this.disabled || this.readOnly)

              return;

            var oldval = this.valueNumber;

            var newval = this._validateValue(this.valueNumber + 1);

            this.inputField.select();

            if (oldval != newval)

              this._fireChange();

]]>

        </body>

      </method>

      <method name="_modifyDown">

        <body>

          <![CDATA[

            if (this.disabled || this.readOnly)

              return;

            var oldval = this.valueNumber;

            var newval = this._validateValue(this.valueNumber - 1);

            this.inputField.select();

            if (oldval != newval)

              this._fireChange();

]]>

        </body>

      </method>

      <method name="_enableDisableButtons">

        <body>

          <![CDATA[

            var buttons = this.spinButtons;

            if (this.disabled || this.readOnly) {

              buttons.decreaseDisabled = buttons.increaseDisabled = true;

            } else {

              buttons.decreaseDisabled = (this.valueNumber <= this.min);

              buttons.increaseDisabled = (this.valueNumber >= this.max);

]]>

        </body>

      </method>

      <method name="_validateValue">

        <parameter name="aValue"/>

        <body>

          <![CDATA[

            aValue = Number(aValue) || 0;

            aValue = Math.round(aValue);

            var min = this.min;

            var max = this.max;

            if (aValue < min)

              aValue = min;

            else if (aValue > max)

              aValue = max;

            this._valueEntered = false;

            this._value = Number(aValue);

            this.inputField.value = aValue;

            this._enableDisableButtons();

            return aValue;

]]>

        </body>

      </method>

      <method name="_fireChange">

        <body>

          var evt = document.createEvent("Events");

          evt.initEvent("change", true, true);

          this.dispatchEvent(evt);

        </body>

      </method>

      <constructor><![CDATA[

        if (this.max < this.min)

          this.max = this.min;

        var value = this.inputField.value || 0;

        this._validateValue(value);

      ]]></constructor>

    </implementation>

    <handlers>

      <handler event="input" phase="capturing">

        this._valueEntered = true;

      </handler>

      <handler event="keypress">

        <![CDATA[

          if (!event.ctrlKey && !event.metaKey && !event.altKey && event.charCode) {

            if (event.charCode == 45 && this.min < 0)

              return;

            if (event.charCode < 48 || event.charCode > 57)

              event.preventDefault();

]]>

      </handler>

      <handler event="keypress" keycode="VK_UP">

        this._modifyUp();

      </handler>

      <handler event="keypress" keycode="VK_DOWN">

        this._modifyDown();

      </handler>

      <handler event="up" preventdefault="true">

        this._modifyUp();

      </handler>

      <handler event="down" preventdefault="true">

        this._modifyDown();

      </handler>

      <handler event="change">

        if (event.originalTarget == this.inputField) {

          var newval = this.inputField.value;

          this._validateValue(newval);

      </handler>

    </handlers>

  </binding>

</bindings>