1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/content/widgets/numberbox.xml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,304 @@
1.4 +<?xml version="1.0"?>
1.5 +<!-- This Source Code Form is subject to the terms of the Mozilla Public
1.6 + - License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
1.8 +
1.9 +
1.10 +<bindings id="numberboxBindings"
1.11 + xmlns="http://www.mozilla.org/xbl"
1.12 + xmlns:html="http://www.w3.org/1999/xhtml"
1.13 + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
1.14 + xmlns:xbl="http://www.mozilla.org/xbl">
1.15 +
1.16 + <binding id="numberbox"
1.17 + extends="chrome://global/content/bindings/textbox.xml#textbox">
1.18 +
1.19 + <resources>
1.20 + <stylesheet src="chrome://global/skin/numberbox.css"/>
1.21 + </resources>
1.22 +
1.23 + <content>
1.24 + <xul:hbox class="textbox-input-box numberbox-input-box" flex="1" xbl:inherits="context,disabled,focused">
1.25 + <html:input class="numberbox-input textbox-input" anonid="input"
1.26 + xbl:inherits="value,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey"/>
1.27 + </xul:hbox>
1.28 + <xul:spinbuttons anonid="buttons" xbl:inherits="disabled,hidden=hidespinbuttons"/>
1.29 + </content>
1.30 +
1.31 + <implementation>
1.32 + <field name="_valueEntered">false</field>
1.33 + <field name="_spinButtons">null</field>
1.34 + <field name="_value">0</field>
1.35 + <field name="decimalSymbol">"."</field>
1.36 +
1.37 + <property name="spinButtons" readonly="true">
1.38 + <getter>
1.39 + <![CDATA[
1.40 + if (!this._spinButtons)
1.41 + this._spinButtons = document.getAnonymousElementByAttribute(this, "anonid", "buttons");
1.42 + return this._spinButtons;
1.43 + ]]>
1.44 + </getter>
1.45 + </property>
1.46 +
1.47 + <property name="value" onget="return '' + this.valueNumber"
1.48 + onset="return this.valueNumber = val;"/>
1.49 +
1.50 + <property name="valueNumber">
1.51 + <getter>
1.52 + if (this._valueEntered) {
1.53 + var newval = this.inputField.value;
1.54 + newval = newval.replace(this.decimalSymbol, ".");
1.55 + this._validateValue(newval, false);
1.56 + }
1.57 + return this._value;
1.58 + </getter>
1.59 + <setter>
1.60 + this._validateValue(val, false);
1.61 + return val;
1.62 + </setter>
1.63 + </property>
1.64 +
1.65 + <property name="wrapAround">
1.66 + <getter>
1.67 + <![CDATA[
1.68 + return (this.getAttribute('wraparound') == 'true')
1.69 + ]]>
1.70 + </getter>
1.71 + <setter>
1.72 + <![CDATA[
1.73 + if (val)
1.74 + this.setAttribute('wraparound', 'true');
1.75 + else
1.76 + this.removeAttribute('wraparound');
1.77 + this._enableDisableButtons();
1.78 + return val;
1.79 + ]]>
1.80 + </setter>
1.81 + </property>
1.82 +
1.83 + <property name="min">
1.84 + <getter>
1.85 + var min = this.getAttribute("min");
1.86 + return min ? Number(min) : 0;
1.87 + </getter>
1.88 + <setter>
1.89 + <![CDATA[
1.90 + if (typeof val == "number") {
1.91 + this.setAttribute("min", val);
1.92 + if (this.valueNumber < val)
1.93 + this._validateValue(val, false);
1.94 + }
1.95 + return val;
1.96 + ]]>
1.97 + </setter>
1.98 + </property>
1.99 +
1.100 + <property name="max">
1.101 + <getter>
1.102 + var max = this.getAttribute("max");
1.103 + return max ? Number(max) : Infinity;
1.104 + </getter>
1.105 + <setter>
1.106 + <![CDATA[
1.107 + if (typeof val != "number")
1.108 + return val;
1.109 + var min = this.min;
1.110 + if (val < min)
1.111 + val = min;
1.112 + this.setAttribute("max", val);
1.113 + if (this.valueNumber > val)
1.114 + this._validateValue(val, false);
1.115 + return val;
1.116 + ]]>
1.117 + </setter>
1.118 + </property>
1.119 +
1.120 + <property name="decimalPlaces">
1.121 + <getter>
1.122 + var places = this.getAttribute("decimalplaces");
1.123 + return places ? Number(places) : 0;
1.124 + </getter>
1.125 + <setter>
1.126 + if (typeof val == "number") {
1.127 + this.setAttribute("decimalplaces", val);
1.128 + this._validateValue(this.valueNumber, false);
1.129 + }
1.130 + return val;
1.131 + </setter>
1.132 + </property>
1.133 +
1.134 + <property name="increment">
1.135 + <getter>
1.136 + var increment = this.getAttribute("increment");
1.137 + return increment ? Number(increment) : 1;
1.138 + </getter>
1.139 + <setter>
1.140 + <![CDATA[
1.141 + if (typeof val == "number")
1.142 + this.setAttribute("increment", val);
1.143 + return val;
1.144 + ]]>
1.145 + </setter>
1.146 + </property>
1.147 +
1.148 + <method name="decrease">
1.149 + <body>
1.150 + return this._validateValue(this.valueNumber - this.increment, true);
1.151 + </body>
1.152 + </method>
1.153 +
1.154 + <method name="increase">
1.155 + <body>
1.156 + return this._validateValue(this.valueNumber + this.increment, true);
1.157 + </body>
1.158 + </method>
1.159 +
1.160 + <method name="_modifyUp">
1.161 + <body>
1.162 + <![CDATA[
1.163 + if (this.disabled || this.readOnly)
1.164 + return;
1.165 + var oldval = this.valueNumber;
1.166 + var newval = this.increase();
1.167 + this.inputField.select();
1.168 + if (oldval != newval)
1.169 + this._fireChange();
1.170 + ]]>
1.171 + </body>
1.172 + </method>
1.173 + <method name="_modifyDown">
1.174 + <body>
1.175 + <![CDATA[
1.176 + if (this.disabled || this.readOnly)
1.177 + return;
1.178 + var oldval = this.valueNumber;
1.179 + var newval = this.decrease();
1.180 + this.inputField.select();
1.181 + if (oldval != newval)
1.182 + this._fireChange();
1.183 + ]]>
1.184 + </body>
1.185 + </method>
1.186 +
1.187 + <method name="_enableDisableButtons">
1.188 + <body>
1.189 + <![CDATA[
1.190 + var buttons = this.spinButtons;
1.191 + if (this.wrapAround) {
1.192 + buttons.decreaseDisabled = buttons.increaseDisabled = false;
1.193 + }
1.194 + else if (this.disabled || this.readOnly) {
1.195 + buttons.decreaseDisabled = buttons.increaseDisabled = true;
1.196 + }
1.197 + else {
1.198 + buttons.decreaseDisabled = (this.valueNumber <= this.min);
1.199 + buttons.increaseDisabled = (this.valueNumber >= this.max);
1.200 + }
1.201 + ]]>
1.202 + </body>
1.203 + </method>
1.204 +
1.205 + <method name="_validateValue">
1.206 + <parameter name="aValue"/>
1.207 + <parameter name="aIsIncDec"/>
1.208 + <body>
1.209 + <![CDATA[
1.210 + aValue = Number(aValue) || 0;
1.211 +
1.212 + var min = this.min;
1.213 + var max = this.max;
1.214 + var wrapAround = this.wrapAround &&
1.215 + min != -Infinity && max != Infinity;
1.216 + if (aValue < min)
1.217 + aValue = (aIsIncDec && wrapAround ? max : min);
1.218 + else if (aValue > max)
1.219 + aValue = (aIsIncDec && wrapAround ? min : max);
1.220 +
1.221 + var places = this.decimalPlaces;
1.222 + aValue = (places == Infinity) ? "" + aValue : aValue.toFixed(places);
1.223 +
1.224 + this._valueEntered = false;
1.225 + this._value = Number(aValue);
1.226 + this.inputField.value = aValue.replace(/\./, this.decimalSymbol);
1.227 +
1.228 + if (!wrapAround)
1.229 + this._enableDisableButtons();
1.230 +
1.231 + return aValue;
1.232 + ]]>
1.233 + </body>
1.234 + </method>
1.235 +
1.236 + <method name="_fireChange">
1.237 + <body>
1.238 + var evt = document.createEvent("Events");
1.239 + evt.initEvent("change", true, true);
1.240 + this.dispatchEvent(evt);
1.241 + </body>
1.242 + </method>
1.243 +
1.244 + <constructor><![CDATA[
1.245 + if (this.max < this.min)
1.246 + this.max = this.min;
1.247 +
1.248 + var dsymbol = (Number(5.4)).toLocaleString().match(/\D/);
1.249 + if (dsymbol != null)
1.250 + this.decimalSymbol = dsymbol[0];
1.251 +
1.252 + var value = this.inputField.value || 0;
1.253 + this._validateValue(value, false);
1.254 + ]]></constructor>
1.255 +
1.256 + </implementation>
1.257 +
1.258 + <handlers>
1.259 + <handler event="input" phase="capturing">
1.260 + this._valueEntered = true;
1.261 + </handler>
1.262 +
1.263 + <handler event="keypress">
1.264 + <![CDATA[
1.265 + if (!event.ctrlKey && !event.metaKey && !event.altKey && event.charCode) {
1.266 + if (event.charCode == this.decimalSymbol.charCodeAt(0) &&
1.267 + this.decimalPlaces &&
1.268 + String(this.inputField.value).indexOf(this.decimalSymbol) == -1)
1.269 + return;
1.270 +
1.271 + if (event.charCode == 45 && this.min < 0)
1.272 + return;
1.273 +
1.274 + if (event.charCode < 48 || event.charCode > 57)
1.275 + event.preventDefault();
1.276 + }
1.277 + ]]>
1.278 + </handler>
1.279 +
1.280 + <handler event="keypress" keycode="VK_UP">
1.281 + this._modifyUp();
1.282 + </handler>
1.283 +
1.284 + <handler event="keypress" keycode="VK_DOWN">
1.285 + this._modifyDown();
1.286 + </handler>
1.287 +
1.288 + <handler event="up" preventdefault="true">
1.289 + this._modifyUp();
1.290 + </handler>
1.291 +
1.292 + <handler event="down" preventdefault="true">
1.293 + this._modifyDown();
1.294 + </handler>
1.295 +
1.296 + <handler event="change">
1.297 + if (event.originalTarget == this.inputField) {
1.298 + var newval = this.inputField.value;
1.299 + newval = newval.replace(this.decimalSymbol, ".");
1.300 + this._validateValue(newval, false);
1.301 + }
1.302 + </handler>
1.303 + </handlers>
1.304 +
1.305 + </binding>
1.306 +
1.307 +</bindings>
