michael@0: <?xml version="1.0"?>
michael@0: <!-- This Source Code Form is subject to the terms of the Mozilla Public
michael@0:    - License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
michael@0: 
michael@0: 
michael@0: <bindings id="numberboxBindings"
michael@0:    xmlns="http://www.mozilla.org/xbl"
michael@0:    xmlns:html="http://www.w3.org/1999/xhtml"
michael@0:    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0:    xmlns:xbl="http://www.mozilla.org/xbl">
michael@0: 
michael@0:   <binding id="numberbox"
michael@0:            extends="chrome://global/content/bindings/textbox.xml#textbox">
michael@0: 
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/numberbox.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content>
michael@0:       <xul:hbox class="textbox-input-box numberbox-input-box" flex="1" xbl:inherits="context,disabled,focused">
michael@0:         <html:input class="numberbox-input textbox-input" anonid="input"
michael@0:                     xbl:inherits="value,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey"/>
michael@0:       </xul:hbox>
michael@0:       <xul:spinbuttons anonid="buttons" xbl:inherits="disabled,hidden=hidespinbuttons"/>
michael@0:     </content>
michael@0: 
michael@0:     <implementation>
michael@0:       <field name="_valueEntered">false</field>
michael@0:       <field name="_spinButtons">null</field>
michael@0:       <field name="_value">0</field>
michael@0:       <field name="decimalSymbol">"."</field>
michael@0: 
michael@0:       <property name="spinButtons" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:             if (!this._spinButtons)
michael@0:               this._spinButtons = document.getAnonymousElementByAttribute(this, "anonid", "buttons");
michael@0:             return this._spinButtons;
michael@0:           ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="value" onget="return '' + this.valueNumber"
michael@0:                              onset="return this.valueNumber = val;"/>
michael@0: 
michael@0:       <property name="valueNumber">
michael@0:         <getter>
michael@0:           if (this._valueEntered) {
michael@0:             var newval = this.inputField.value;
michael@0:             newval = newval.replace(this.decimalSymbol, ".");
michael@0:             this._validateValue(newval, false);
michael@0:           }
michael@0:           return this._value;
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this._validateValue(val, false);
michael@0:           return val;
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="wrapAround">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           return (this.getAttribute('wraparound') == 'true')
michael@0:         ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (val)
michael@0:             this.setAttribute('wraparound', 'true');
michael@0:           else
michael@0:             this.removeAttribute('wraparound');
michael@0:           this._enableDisableButtons();
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="min">
michael@0:         <getter>
michael@0:           var min = this.getAttribute("min");
michael@0:           return min ? Number(min) : 0;
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (typeof val == "number") {
michael@0:             this.setAttribute("min", val);
michael@0:             if (this.valueNumber < val)
michael@0:               this._validateValue(val, false);
michael@0:           }
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="max">
michael@0:         <getter>
michael@0:           var max = this.getAttribute("max");
michael@0:           return max ? Number(max) : Infinity;
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (typeof val != "number")
michael@0:             return val;
michael@0:           var min = this.min;
michael@0:           if (val < min)
michael@0:             val = min;
michael@0:           this.setAttribute("max", val);
michael@0:           if (this.valueNumber > val)
michael@0:             this._validateValue(val, false);
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="decimalPlaces">
michael@0:         <getter>
michael@0:           var places = this.getAttribute("decimalplaces");
michael@0:           return places ? Number(places) : 0;
michael@0:         </getter>
michael@0:         <setter>
michael@0:           if (typeof val == "number") {
michael@0:             this.setAttribute("decimalplaces", val);
michael@0:             this._validateValue(this.valueNumber, false);
michael@0:           }
michael@0:           return val;
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="increment">
michael@0:         <getter>
michael@0:           var increment = this.getAttribute("increment");
michael@0:           return increment ? Number(increment) : 1;
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (typeof val == "number")
michael@0:             this.setAttribute("increment", val);
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="decrease">
michael@0:         <body>
michael@0:           return this._validateValue(this.valueNumber - this.increment, true);
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="increase">
michael@0:         <body>
michael@0:           return this._validateValue(this.valueNumber + this.increment, true);
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_modifyUp">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:             if (this.disabled || this.readOnly)
michael@0:               return;
michael@0:             var oldval = this.valueNumber;
michael@0:             var newval = this.increase();
michael@0:             this.inputField.select();
michael@0:             if (oldval != newval)
michael@0:               this._fireChange();
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0:       <method name="_modifyDown">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:             if (this.disabled || this.readOnly)
michael@0:               return;
michael@0:             var oldval = this.valueNumber;
michael@0:             var newval = this.decrease();
michael@0:             this.inputField.select();
michael@0:             if (oldval != newval)
michael@0:               this._fireChange();
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_enableDisableButtons">
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:             var buttons = this.spinButtons;
michael@0:             if (this.wrapAround) {
michael@0:               buttons.decreaseDisabled = buttons.increaseDisabled = false;
michael@0:             }
michael@0:             else if (this.disabled || this.readOnly) {
michael@0:               buttons.decreaseDisabled = buttons.increaseDisabled = true;
michael@0:             }
michael@0:             else {
michael@0:               buttons.decreaseDisabled = (this.valueNumber <= this.min);
michael@0:               buttons.increaseDisabled = (this.valueNumber >= this.max);
michael@0:             }
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_validateValue">
michael@0:         <parameter name="aValue"/>
michael@0:         <parameter name="aIsIncDec"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:             aValue = Number(aValue) || 0;
michael@0: 
michael@0:             var min = this.min;
michael@0:             var max = this.max;
michael@0:             var wrapAround = this.wrapAround &&
michael@0:                              min != -Infinity && max != Infinity;
michael@0:             if (aValue < min)
michael@0:               aValue = (aIsIncDec && wrapAround ? max : min);
michael@0:             else if (aValue > max)
michael@0:               aValue = (aIsIncDec && wrapAround ? min : max);
michael@0: 
michael@0:             var places = this.decimalPlaces;
michael@0:             aValue = (places == Infinity) ? "" + aValue : aValue.toFixed(places);
michael@0: 
michael@0:             this._valueEntered = false;
michael@0:             this._value = Number(aValue);
michael@0:             this.inputField.value = aValue.replace(/\./, this.decimalSymbol);
michael@0: 
michael@0:             if (!wrapAround)
michael@0:               this._enableDisableButtons();
michael@0: 
michael@0:             return aValue;
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_fireChange">
michael@0:         <body>
michael@0:           var evt = document.createEvent("Events");
michael@0:           evt.initEvent("change", true, true);
michael@0:           this.dispatchEvent(evt);
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <constructor><![CDATA[
michael@0:         if (this.max < this.min)
michael@0:           this.max = this.min;
michael@0: 
michael@0:         var dsymbol = (Number(5.4)).toLocaleString().match(/\D/);
michael@0:         if (dsymbol != null)
michael@0:           this.decimalSymbol = dsymbol[0];
michael@0: 
michael@0:         var value = this.inputField.value || 0;
michael@0:         this._validateValue(value, false);
michael@0:       ]]></constructor>
michael@0: 
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="input" phase="capturing">
michael@0:         this._valueEntered = true;
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress">
michael@0:         <![CDATA[
michael@0:           if (!event.ctrlKey && !event.metaKey && !event.altKey && event.charCode) {
michael@0:             if (event.charCode == this.decimalSymbol.charCodeAt(0) &&
michael@0:                 this.decimalPlaces &&
michael@0:                 String(this.inputField.value).indexOf(this.decimalSymbol) == -1)
michael@0:               return;
michael@0: 
michael@0:             if (event.charCode == 45 && this.min < 0)
michael@0:               return;
michael@0: 
michael@0:             if (event.charCode < 48 || event.charCode > 57)
michael@0:               event.preventDefault();
michael@0:           }
michael@0:         ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_UP">
michael@0:         this._modifyUp();
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="keypress" keycode="VK_DOWN">
michael@0:         this._modifyDown();
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="up" preventdefault="true">
michael@0:         this._modifyUp();
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="down" preventdefault="true">
michael@0:         this._modifyDown();
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="change">
michael@0:         if (event.originalTarget == this.inputField) {
michael@0:           var newval = this.inputField.value;
michael@0:           newval = newval.replace(this.decimalSymbol, ".");
michael@0:           this._validateValue(newval, false);
michael@0:         }
michael@0:       </handler>
michael@0:     </handlers>
michael@0: 
michael@0:   </binding>
michael@0: 
michael@0: </bindings>