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="radioBindings"
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="radiogroup" role="xul:radiogroup"
michael@0:            extends="chrome://global/content/bindings/general.xml#basecontrol">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/radio.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <implementation implements="nsIDOMXULSelectControlElement">
michael@0:       <constructor>
michael@0:         <![CDATA[
michael@0:           if (this.getAttribute("disabled") == "true")
michael@0:             this.disabled = true;
michael@0: 
michael@0:           var children = this._getRadioChildren();
michael@0:           var length = children.length;
michael@0:           for (var i = 0; i < length; i++) {
michael@0:             if (children[i].getAttribute("selected") == "true") {
michael@0:               this.selectedIndex = i;
michael@0:               return;
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           var value = this.value;
michael@0:           if (value)
michael@0:             this.value = value;
michael@0:           else
michael@0:             this.selectedIndex = 0;
michael@0:         ]]>
michael@0:       </constructor>
michael@0: 
michael@0:       <property name="value" onget="return this.getAttribute('value');">
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:             this.setAttribute("value", val);
michael@0:             var children = this._getRadioChildren();
michael@0:             for (var i = 0; i < children.length; i++) {
michael@0:               if (String(children[i].value) == String(val)) {
michael@0:                 this.selectedItem = children[i];
michael@0:                 break;
michael@0:               }
michael@0:             }
michael@0:             return val;
michael@0:           ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0:       <property name="disabled">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           if (this.getAttribute('disabled') == 'true')
michael@0:             return true;
michael@0:           var children = this._getRadioChildren();
michael@0:           for (var i = 0; i < children.length; ++i) {
michael@0:             if (!children[i].hidden && !children[i].collapsed && !children[i].disabled)
michael@0:               return false;
michael@0:           }
michael@0:           return true;
michael@0:         ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (val)
michael@0:             this.setAttribute('disabled', 'true');
michael@0:           else
michael@0:             this.removeAttribute('disabled');
michael@0:           var children = this._getRadioChildren();
michael@0:           for (var i = 0; i < children.length; ++i) {
michael@0:             children[i].disabled = val;
michael@0:           }
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="itemCount" readonly="true"
michael@0:                 onget="return this._getRadioChildren().length"/>
michael@0: 
michael@0:       <property name="selectedIndex">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           var children = this._getRadioChildren();
michael@0:           for (var i = 0; i < children.length; ++i) {
michael@0:             if (children[i].selected)
michael@0:               return i;
michael@0:           }
michael@0:           return -1;
michael@0:         ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           this.selectedItem = this._getRadioChildren()[val];
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="selectedItem">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           var children = this._getRadioChildren();
michael@0:           for (var i = 0; i < children.length; ++i) {
michael@0:             if (children[i].selected)
michael@0:               return children[i];
michael@0:           }
michael@0:           return null;
michael@0:         ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           var focused = this.getAttribute("focused") == "true";
michael@0:           var alreadySelected = false;
michael@0: 
michael@0:           if (val) {
michael@0:             alreadySelected = val.getAttribute("selected") == "true";
michael@0:             val.setAttribute("focused", focused);
michael@0:             val.setAttribute("selected", "true");
michael@0:             this.setAttribute("value", val.value);
michael@0:           }
michael@0:           else {
michael@0:             this.removeAttribute("value");
michael@0:           }
michael@0: 
michael@0:           // uncheck all other group nodes
michael@0:           var children = this._getRadioChildren();
michael@0:           var previousItem = null;
michael@0:           for (var i = 0; i < children.length; ++i) {
michael@0:             if (children[i] != val) {
michael@0:               if (children[i].getAttribute("selected") == "true")
michael@0:                 previousItem = children[i];
michael@0: 
michael@0:               children[i].removeAttribute("selected");
michael@0:               children[i].removeAttribute("focused");
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           var event = document.createEvent("Events");
michael@0:           event.initEvent("select", false, true);
michael@0:           this.dispatchEvent(event);
michael@0: 
michael@0:           if (!alreadySelected && focused) {
michael@0:             // Only report if actual change
michael@0:             var myEvent;
michael@0:             if (val) {
michael@0:               myEvent = document.createEvent("Events");
michael@0:               myEvent.initEvent("RadioStateChange", true, true);
michael@0:               val.dispatchEvent(myEvent);
michael@0:             }
michael@0: 
michael@0:             if (previousItem) {
michael@0:               myEvent = document.createEvent("Events");
michael@0:               myEvent.initEvent("RadioStateChange", true, true);
michael@0:               previousItem.dispatchEvent(myEvent);
michael@0:             }
michael@0:           }
michael@0: 
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>        
michael@0:       </property>
michael@0:       
michael@0:       <property name="focusedItem">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           var children = this._getRadioChildren();
michael@0:           for (var i = 0; i < children.length; ++i) {
michael@0:             if (children[i].getAttribute("focused") == "true")
michael@0:               return children[i];
michael@0:           }
michael@0:           return null;
michael@0:         ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:         <![CDATA[
michael@0:           if (val) val.setAttribute("focused", "true");
michael@0:           
michael@0:           // unfocus all other group nodes
michael@0:           var children = this._getRadioChildren();
michael@0:           for (var i = 0; i < children.length; ++i) {
michael@0:             if (children[i] != val)
michael@0:               children[i].removeAttribute("focused");
michael@0:           }
michael@0:           return val;
michael@0:         ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0:       
michael@0:       <method name="checkAdjacentElement">
michael@0:         <parameter name="aNextFlag"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var currentElement = this.focusedItem || this.selectedItem;
michael@0:           var i;
michael@0:           var children = this._getRadioChildren();
michael@0:           for (i = 0; i < children.length; ++i ) {
michael@0:             if (children[i] == currentElement) 
michael@0:               break;
michael@0:           }
michael@0:           var index = i;
michael@0: 
michael@0:           if (aNextFlag) {
michael@0:             do {
michael@0:               if (++i == children.length)
michael@0:                 i = 0;
michael@0:               if (i == index)
michael@0:                 break;
michael@0:             }
michael@0:             while (children[i].hidden || children[i].collapsed || children[i].disabled);
michael@0:             // XXX check for display/visibility props too
michael@0: 
michael@0:             this.selectedItem = children[i];
michael@0:             children[i].doCommand();
michael@0:           }
michael@0:           else {              
michael@0:             do {
michael@0:               if (i == 0)
michael@0:                 i = children.length;
michael@0:               if (--i == index)
michael@0:                 break;
michael@0:             }
michael@0:             while (children[i].hidden || children[i].collapsed || children[i].disabled);
michael@0:             // XXX check for display/visibility props too
michael@0: 
michael@0:             this.selectedItem = children[i];
michael@0:             children[i].doCommand();
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0:       <field name="_radioChildren">null</field>
michael@0:       <method name="_getRadioChildren">
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (this._radioChildren)
michael@0:             return this._radioChildren;
michael@0: 
michael@0:           var radioChildren = [];
michael@0:           var doc = this.ownerDocument;
michael@0: 
michael@0:           if (this.hasChildNodes()) {
michael@0:             // Don't store the collected child nodes immediately,
michael@0:             // collecting the child nodes could trigger constructors
michael@0:             // which would blow away our list.
michael@0: 
michael@0:             const nsIDOMNodeFilter = Components.interfaces.nsIDOMNodeFilter;
michael@0:             var iterator = doc.createTreeWalker(this,
michael@0:                                                 nsIDOMNodeFilter.SHOW_ELEMENT,
michael@0:                                                 this._filterRadioGroup);
michael@0:             while (iterator.nextNode())
michael@0:               radioChildren.push(iterator.currentNode);
michael@0:             return this._radioChildren = radioChildren;
michael@0:           }
michael@0: 
michael@0:           // We don't have child nodes.
michael@0:           const XUL_NS = "http://www.mozilla.org/keymaster/"
michael@0:                        + "gatekeeper/there.is.only.xul";
michael@0:           var elems = doc.getElementsByAttribute("group", this.id);
michael@0:           for (var i = 0; i < elems.length; i++) {
michael@0:             if ((elems[i].namespaceURI == XUL_NS) &&
michael@0:                 (elems[i].localName == "radio")) {
michael@0:               radioChildren.push(elems[i]);
michael@0:             }
michael@0:           }
michael@0:           return this._radioChildren = radioChildren;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0:       <method name="_filterRadioGroup">
michael@0:         <parameter name="node"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           switch (node.localName) {
michael@0:             case "radio": return NodeFilter.FILTER_ACCEPT;
michael@0:             case "template":
michael@0:             case "radiogroup": return NodeFilter.FILTER_REJECT;
michael@0:             default: return NodeFilter.FILTER_SKIP;
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="getIndexOfItem">
michael@0:         <parameter name="item"/>
michael@0:         <body>
michael@0:           return this._getRadioChildren().indexOf(item);
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="getItemAtIndex">
michael@0:         <parameter name="index"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var children = this._getRadioChildren();
michael@0:           return (index >= 0 && index < children.length) ? children[index] : null;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="appendItem">
michael@0:         <parameter name="label"/>
michael@0:         <parameter name="value"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
michael@0:           var radio = document.createElementNS(XULNS, "radio");
michael@0:           radio.setAttribute("label", label);
michael@0:           radio.setAttribute("value", value);
michael@0:           this.appendChild(radio);
michael@0:           this._radioChildren = null;
michael@0:           return radio;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0:       
michael@0:       <method name="insertItemAt">
michael@0:         <parameter name="index"/>
michael@0:         <parameter name="label"/>
michael@0:         <parameter name="value"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
michael@0:           var radio = document.createElementNS(XULNS, "radio");
michael@0:           radio.setAttribute("label", label);
michael@0:           radio.setAttribute("value", value);
michael@0:           var before = this.getItemAtIndex(index);
michael@0:           if (before)
michael@0:             before.parentNode.insertBefore(radio, before);
michael@0:           else
michael@0:             this.appendChild(radio);
michael@0:           this._radioChildren = null;
michael@0:           return radio;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="removeItemAt">
michael@0:         <parameter name="index"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var remove = this.getItemAtIndex(index);
michael@0:           if (remove) {
michael@0:             remove.parentNode.removeChild(remove);
michael@0:             this._radioChildren = null;
michael@0:           }
michael@0:           return remove;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0:     </implementation>
michael@0:     
michael@0:     <handlers>
michael@0:       <handler event="mousedown">
michael@0:         if (this.disabled)
michael@0:           event.preventDefault();
michael@0:        </handler>
michael@0:      
michael@0:       <!-- keyboard navigation -->
michael@0:       <!-- Here's how keyboard navigation works in radio groups on Windows:
michael@0:            The group takes 'focus'
michael@0:            The user is then free to navigate around inside the group
michael@0:            using the arrow keys. Accessing previous or following radio buttons
michael@0:            is done solely through the arrow keys and not the tab button. Tab
michael@0:            takes you to the next widget in the tab order -->
michael@0:       <handler event="keypress" key=" " phase="target">
michael@0:          this.selectedItem = this.focusedItem;
michael@0:          this.selectedItem.doCommand();
michael@0:       </handler>
michael@0:       <handler event="keypress" keycode="VK_UP" phase="target">
michael@0:         this.checkAdjacentElement(false);
michael@0:         event.stopPropagation();
michael@0:       </handler>
michael@0:       <handler event="keypress" keycode="VK_LEFT" phase="target">
michael@0:         // left arrow goes back when we are ltr, forward when we are rtl
michael@0:         this.checkAdjacentElement(document.defaultView.getComputedStyle(
michael@0:                                     this, "").direction == "rtl");
michael@0:         event.stopPropagation();
michael@0:       </handler>
michael@0:       <handler event="keypress" keycode="VK_DOWN" phase="target">
michael@0:         this.checkAdjacentElement(true);
michael@0:         event.stopPropagation();
michael@0:       </handler>
michael@0:       <handler event="keypress" keycode="VK_RIGHT" phase="target">
michael@0:         // right arrow goes forward when we are ltr, back when we are rtl
michael@0:         this.checkAdjacentElement(document.defaultView.getComputedStyle(
michael@0:                                     this, "").direction == "ltr");
michael@0:         event.stopPropagation();
michael@0:       </handler>
michael@0: 
michael@0:       <!-- set a focused attribute on the selected item when the group
michael@0:            receives focus so that we can style it as if it were focused even though
michael@0:            it is not (Windows platform behaviour is for the group to receive focus,
michael@0:            not the item -->
michael@0:       <handler event="focus" phase="target">
michael@0:         <![CDATA[
michael@0:           this.setAttribute("focused", "true");
michael@0:           if (this.focusedItem)
michael@0:             return;
michael@0: 
michael@0:           var val = this.selectedItem;
michael@0:           if (!val || val.disabled || val.hidden || val.collapsed) {
michael@0:             var children = this._getRadioChildren();
michael@0:             for (var i = 0; i < children.length; ++i) {
michael@0:               if (!children[i].hidden && !children[i].collapsed && !children[i].disabled) {
michael@0:                 val = children[i];
michael@0:                 break;
michael@0:               }
michael@0:             }
michael@0:           }
michael@0:           this.focusedItem = val;
michael@0:         ]]>
michael@0:       </handler>
michael@0:       <handler event="blur" phase="target">
michael@0:         this.removeAttribute("focused");
michael@0:         this.focusedItem = null;
michael@0:       </handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="radio" role="xul:radiobutton"
michael@0:     extends="chrome://global/content/bindings/general.xml#control-item">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/radio.css"/>
michael@0:     </resources>
michael@0: 
michael@0:     <content>
michael@0:       <xul:image class="radio-check" xbl:inherits="disabled,selected"/>
michael@0:       <xul:hbox class="radio-label-box" align="center" flex="1">
michael@0:         <xul:image class="radio-icon" xbl:inherits="src"/>
michael@0:         <xul:label class="radio-label" xbl:inherits="xbl:text=label,accesskey,crop" flex="1"/>
michael@0:       </xul:hbox>
michael@0:     </content>
michael@0: 
michael@0:     <implementation implements="nsIDOMXULSelectControlItemElement">
michael@0:       <constructor>
michael@0:         <![CDATA[
michael@0:           // Just clear out the parent's cached list of radio children
michael@0:           var control = this.control;
michael@0:           if (control)
michael@0:             control._radioChildren = null;
michael@0:         ]]>
michael@0:       </constructor>
michael@0:       <destructor>
michael@0:         <![CDATA[
michael@0:           if (!this.radioGroup)
michael@0:             return;
michael@0: 
michael@0:           var radioList = this.radioGroup.mRadioChildren;
michael@0:           if (!radioList)
michael@0:             return;
michael@0:           for (var i = 0; i < radioList.length; ++i) {
michael@0:             if (radioList[i] == this) {
michael@0:               radioList.splice(i, 1);
michael@0:               return;
michael@0:             }
michael@0:           }
michael@0:         ]]>
michael@0:       </destructor>
michael@0:       <property name="selected" readonly="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:             return this.hasAttribute('selected');
michael@0:           ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0:       <property name="radioGroup" readonly="true" onget="return this.control"/>
michael@0:       <property name="control" readonly="true">
michael@0:         <getter>
michael@0:         <![CDATA[
michael@0:           const XUL_NS = "http://www.mozilla.org/keymaster/"
michael@0:                        + "gatekeeper/there.is.only.xul";
michael@0:           var parent = this.parentNode;
michael@0:           while (parent) {
michael@0:             if ((parent.namespaceURI == XUL_NS) &&
michael@0:                 (parent.localName == "radiogroup")) {
michael@0:               return parent;
michael@0:             }
michael@0:             parent = parent.parentNode;
michael@0:           }
michael@0: 
michael@0:           var group = this.getAttribute("group");
michael@0:           if (!group) {
michael@0:             return null;
michael@0:           }
michael@0: 
michael@0:           parent = this.ownerDocument.getElementById(group);
michael@0:           if (!parent ||
michael@0:               (parent.namespaceURI != XUL_NS) ||
michael@0:               (parent.localName != "radiogroup")) {
michael@0:             parent = null;
michael@0:           }
michael@0:           return parent;
michael@0:         ]]>
michael@0:         </getter>
michael@0:       </property>
michael@0:     </implementation>
michael@0:     <handlers>
michael@0:       <handler event="click" button="0">
michael@0:         <![CDATA[
michael@0:           if (!this.disabled)
michael@0:             this.control.selectedItem = this;
michael@0:          ]]>
michael@0:       </handler>
michael@0: 
michael@0:       <handler event="mousedown" button="0">
michael@0:         <![CDATA[
michael@0:           if (!this.disabled)
michael@0:             this.control.focusedItem = this;
michael@0:          ]]>
michael@0:       </handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: </bindings>