michael@0: <?xml version="1.0" encoding="UTF-8"?>
michael@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: <bindings id="spinbuttonsBindings"
michael@0:    xmlns="http://www.mozilla.org/xbl"
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="spinbuttons"
michael@0:            extends="chrome://global/content/bindings/general.xml#basecontrol">
michael@0: 
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/spinbuttons.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content>
michael@0:       <xul:vbox class="spinbuttons-box" flex="1">
michael@0:         <xul:button anonid="increaseButton" type="repeat" flex="1"
michael@0:                     class="spinbuttons-button spinbuttons-up"
michael@0:                     xbl:inherits="disabled,disabled=increasedisabled"/>
michael@0:         <xul:button anonid="decreaseButton" type="repeat" flex="1"
michael@0:                     class="spinbuttons-button spinbuttons-down"
michael@0:                     xbl:inherits="disabled,disabled=decreasedisabled"/>
michael@0:       </xul:vbox>
michael@0:     </content>
michael@0: 
michael@0:     <implementation>
michael@0:       <property name="_increaseButton" readonly="true">
michael@0:         <getter>
michael@0:           return document.getAnonymousElementByAttribute(this, "anonid", "increaseButton");
michael@0:         </getter>
michael@0:       </property>
michael@0:       <property name="_decreaseButton" readonly="true">
michael@0:         <getter>
michael@0:           return document.getAnonymousElementByAttribute(this, "anonid", "decreaseButton");
michael@0:         </getter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="increaseDisabled"
michael@0:                 onget="return this._increaseButton.getAttribute('disabled') == 'true';"
michael@0:                 onset="if (val) this._increaseButton.setAttribute('disabled', 'true');
michael@0:                        else this._increaseButton.removeAttribute('disabled'); return val;"/>
michael@0:       <property name="decreaseDisabled"
michael@0:                 onget="return this._decreaseButton.getAttribute('disabled') == 'true';"
michael@0:                 onset="if (val) this._decreaseButton.setAttribute('disabled', 'true');
michael@0:                        else this._decreaseButton.removeAttribute('disabled'); return val;"/>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="mousedown">
michael@0:         <![CDATA[
michael@0:           // on the Mac, the native theme draws the spinbutton as a single widget
michael@0:           // so a state attribute is set based on where the mouse button was pressed
michael@0:           if (event.originalTarget == this._increaseButton)
michael@0:             this.setAttribute("state", "up");
michael@0:           else if (event.originalTarget == this._decreaseButton)
michael@0:             this.setAttribute("state", "down");
michael@0:         ]]>
michael@0:       </handler>
michael@0:       
michael@0:       <handler event="mouseup">
michael@0:         this.removeAttribute("state");
michael@0:       </handler>
michael@0:       <handler event="mouseout">
michael@0:         this.removeAttribute("state");
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="command">
michael@0:         <![CDATA[
michael@0:           var eventname;
michael@0:           if (event.originalTarget == this._increaseButton)
michael@0:             eventname = "up";
michael@0:           else if (event.originalTarget == this._decreaseButton)
michael@0:             eventname = "down";
michael@0: 
michael@0:           var evt = document.createEvent("Events");
michael@0:           evt.initEvent(eventname, true, true);
michael@0:           var cancel = this.dispatchEvent(evt);
michael@0:           
michael@0:           if (this.hasAttribute("on" + eventname)) {
michael@0:             var fn = new Function("event", this.getAttribute("on" + eventname));
michael@0:             if (fn.call(this, event) == false)
michael@0:               cancel = true;
michael@0:           }
michael@0: 
michael@0:           return !cancel;
michael@0:         ]]>
michael@0:       </handler>
michael@0: 
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0: </bindings>