mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-13 21:35:39 +00:00
XUL <radiogroup> and <radio> are now implemented completely in JS/XBL,
deprecate 'iconic' classes of <checkbox> and <radio>
This commit is contained in:
parent
ae730e9df0
commit
a849595f80
@ -1,4 +1,5 @@
|
||||
xul.css
|
||||
xulBindings.xml
|
||||
menulistBindings.xml
|
||||
htmlBindings.xml
|
||||
htmlBindings.xml
|
||||
radioBindings.xml
|
||||
|
@ -35,6 +35,7 @@ endif
|
||||
EXPORT_CHROME = xul.css \
|
||||
htmlBindings.xml \
|
||||
xulBindings.xml \
|
||||
radioBindings.xml \
|
||||
menulistBindings.xml \
|
||||
$(NULL)
|
||||
|
||||
|
@ -30,6 +30,7 @@ include <$(DEPTH)\config\rules.mak>
|
||||
install::
|
||||
$(MAKE_INSTALL) htmlBindings.xml $(DISTXUL)
|
||||
$(MAKE_INSTALL) xulBindings.xml $(DISTXUL)
|
||||
$(MAKE_INSTALL) radioBindings.xml $(DISTXUL)
|
||||
$(MAKE_INSTALL) menulistBindings.xml $(DISTXUL)
|
||||
$(MAKE_INSTALL) xul.css $(DISTXUL)
|
||||
|
||||
@ -37,5 +38,6 @@ clobber::
|
||||
$(RM) $(DISTXUL)\htmlBindings.xml
|
||||
$(RM) $(DISTXUL)\xulBindings.xml
|
||||
$(RM) $(DISTXUL)\menulistBindings.xml
|
||||
$(RM) $(DISTXUL)\radioBindings.xml
|
||||
$(RM) $(DISTXUL)\xul.css
|
||||
|
||||
|
87
xpfe/global/resources/skin/radioBindings.xml
Normal file
87
xpfe/global/resources/skin/radioBindings.xml
Normal file
@ -0,0 +1,87 @@
|
||||
<?xml version="1.0"?>
|
||||
|
||||
<bindings id="xulBindings"
|
||||
xmlns="http://www.mozilla.org/xbl"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<binding id="radio" extends="resource:/chrome/xulBindings.xml#checkbox">
|
||||
<interface>
|
||||
<property name="data" onset="this.setAttribute('data',val); return val;"
|
||||
onget="return this.getAttribute('data');"/>
|
||||
<property name="group" onset="this.setAttribute('group',val); return val;"
|
||||
onget="return this.getAttribute('group');"/>
|
||||
</interface>
|
||||
<handlers>
|
||||
<handler type="command">
|
||||
dump("*** this.checked = " + this.checked + "\n");
|
||||
if( !this.checked ) this.checked = true;
|
||||
</handler>
|
||||
</handlers>
|
||||
</binding>
|
||||
|
||||
<binding id="radiogroup">
|
||||
|
||||
<interface>
|
||||
<property name="data" onset="this.setAttribute('data',val); return val;"
|
||||
onget="return this.getAttribute('data');"/>
|
||||
<property name="selectedItem">
|
||||
<getter>
|
||||
<![CDATA[
|
||||
var groupElements = aRadioGroupElement.getElementsByAttribute( "group", aRadioGroupElement.id );
|
||||
for( var i = 0; i < groupElements.length; i++ )
|
||||
{
|
||||
if( groupElements[i].checked ||
|
||||
groupElements[i].getAttribute( "checked" ) == "true" )
|
||||
return groupElements[i];
|
||||
}
|
||||
]]>
|
||||
</getter>
|
||||
<setter>
|
||||
<![CDATA[
|
||||
var aDOMElement = val;
|
||||
this.data = aDOMElement.data;
|
||||
|
||||
aDOMElement.checked = true;
|
||||
|
||||
// uncheck all other group nodes
|
||||
var groupElements = this.getElementsByAttribute( "group", aDOMElement.group );
|
||||
for( var i = 0; i < groupElements.length; i++ )
|
||||
{
|
||||
if( groupElements[i] != aDOMElement && groupElements[i].checked )
|
||||
{
|
||||
dump("*** unchecking element " + i + "\n");
|
||||
groupElements[i].checked = false;
|
||||
groupElements[i].removeAttribute( "checked" );
|
||||
}
|
||||
}
|
||||
return val;
|
||||
]]>
|
||||
</setter>
|
||||
</property>
|
||||
</interface>
|
||||
<handlers>
|
||||
<handler type="click">
|
||||
try
|
||||
{
|
||||
if( event.target.nodeName == "radio" )
|
||||
this.selectedItem = event.target;
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
}
|
||||
</handler>
|
||||
<handler type="keypress" key=" ">
|
||||
try
|
||||
{
|
||||
if( event.target.nodeName == "radio" )
|
||||
this.selectedItem = event.target;
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
}
|
||||
</handler>
|
||||
</handlers>
|
||||
</binding>
|
||||
|
||||
</bindings>
|
@ -264,21 +264,15 @@ checkbox {
|
||||
behavior: url(resource:/chrome/xulBindings.xml#checkbox);
|
||||
}
|
||||
|
||||
checkbox.iconic {
|
||||
behavior: url(resource:/chrome/xulBindings.xml#checkbox-iconic);
|
||||
}
|
||||
radio
|
||||
{
|
||||
behavior : url(resource:/chrome/radioBindings.xml#radio);
|
||||
}
|
||||
|
||||
radio {
|
||||
behavior: url(resource:/chrome/xulBindings.xml#radio);
|
||||
}
|
||||
|
||||
radio.iconic {
|
||||
behavior: url(resource:/chrome/xulBindings.xml#radio-iconic);
|
||||
}
|
||||
|
||||
radiogroup {
|
||||
behavior: url(resource:/chrome/xulBindings.xml#radiogroup);
|
||||
}
|
||||
radiogroup
|
||||
{
|
||||
behavior : url(resource:/chrome/radioBindings.xml#radiogroup);
|
||||
}
|
||||
|
||||
button, button.left {
|
||||
behavior: url(resource:/chrome/xulBindings.xml#buttonleft);
|
||||
|
@ -176,9 +176,12 @@
|
||||
<content>
|
||||
<xul:box flex="1" class="internal-box" autostretch="never">
|
||||
<xul:box class="checkmark-box" autostretch="never">
|
||||
<xul:image inherits="src"/>
|
||||
<xul:image class="checkbox-check"/>
|
||||
</xul:box>
|
||||
<xul:html inherits="value" flex="1"/>
|
||||
<xul:image class="checkbox-icon" inherits="src"/>
|
||||
<xul:html inherits="value,accesskey,crop" flex="1">
|
||||
<children/>
|
||||
</xul:html>
|
||||
</xul:box>
|
||||
</content>
|
||||
<interface>
|
||||
@ -195,105 +198,6 @@
|
||||
</handlers>
|
||||
</binding>
|
||||
|
||||
<binding id="checkbox-iconic" extends="resource:/chrome/xulBindings.xml#checkbox">
|
||||
<content>
|
||||
<xul:box flex="1" class="internal-box" autostretch="never">
|
||||
<xul:box class="checkmark-box" autostretch="never">
|
||||
<xul:image/>
|
||||
</xul:box>
|
||||
<xul:image inherits="src" class="icon" />
|
||||
<xul:html inherits="value" flex="1"/>
|
||||
</xul:box>
|
||||
</content>
|
||||
</binding>
|
||||
|
||||
<!-- radio/radiogroup code -->
|
||||
<xul:script language="javascript">
|
||||
<![CDATA[
|
||||
var XULRadioGroup =
|
||||
{
|
||||
setSelectedItem:
|
||||
function ( aDOMElement )
|
||||
{
|
||||
dump("*** setting the selected item\n");
|
||||
// set information on the group node
|
||||
dump("*** current group is: " + aDOMElement.group + "\n");
|
||||
var currentGroup = document.getElementById( aDOMElement.group );
|
||||
currentGroup.selectedItem = aDOMElement;
|
||||
currentGroup.data = aDOMElement.data;
|
||||
dump("*** setting data: " + aDOMElement.data + "\n");
|
||||
|
||||
// uncheck all other group nodes
|
||||
var groupElements = currentGroup.getElementsByAttribute( "group", aDOMElement.group );
|
||||
for( var i = 0; i < groupElements.length; i++ )
|
||||
{
|
||||
dump("*** unchecking element " + i + "\n");
|
||||
if( groupElements[i] != this && groupElements[i].checked )
|
||||
{
|
||||
groupElements[i].checked = false;
|
||||
groupElements[i].removeAttribute( "checked" );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getSelectedItem:
|
||||
function ( aRadioGroupElement )
|
||||
{
|
||||
var groupElements = aRadioGroupElement.getElementsByAttribute( "group", aRadioGroupElement.id );
|
||||
for( var i = 0; i < groupElements.length; i++ )
|
||||
{
|
||||
if( groupElements[i].checked ||
|
||||
groupElements[i].getAttribute( "checked" ) == "true" )
|
||||
return groupElements[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
]]>
|
||||
</xul:script>
|
||||
|
||||
<binding id="radio" extends="resource:/chrome/xulBindings.xml#checkbox">
|
||||
<interface>
|
||||
<property name="data" onset="this.setAttribute('data',val); return val;"
|
||||
onget="return this.getAttribute('data');"/>
|
||||
<property name="group" onset="this.setAttribute('group',val); return val;"
|
||||
onget="return this.getAttribute('group');"/>
|
||||
<property name="checked" onset="this.setAttribute('checked',val); return val;"
|
||||
onget="return this.getAttribute('checked');"/>
|
||||
</interface>
|
||||
<!--
|
||||
<handlers>
|
||||
<handler type="command" value="document.getElementById(this.group).selectedItem = this;"/>
|
||||
</handlers>
|
||||
-->
|
||||
</binding>
|
||||
|
||||
<binding id="radio-iconic" extends="resource:/chrome/xulBindings.xml#radio">
|
||||
<content>
|
||||
<xul:box flex="1" class="internal-box" autostretch="never">
|
||||
<xul:box class="checkmark-box" autostretch="never">
|
||||
<xul:image/>
|
||||
</xul:box>
|
||||
<xul:image inherits="src" class="icon" />
|
||||
<xul:html inherits="value" flex="1"/>
|
||||
</xul:box>
|
||||
</content>
|
||||
</binding>
|
||||
|
||||
<binding id="radiogroup">
|
||||
<interface>
|
||||
<property name="data" onset="this.setAttribute('data',val); return val;"
|
||||
onget="return this.getAttribute('data');"/>
|
||||
<!--
|
||||
<property name="selectedItem" onset="XULRadioGroup.setSelectedItem(val); return val;"
|
||||
onget="return XULRadioGroup.getSelectedItem(this);"/>
|
||||
-->
|
||||
</interface>
|
||||
<handlers>
|
||||
<handler type="mouseup" value="try { this.selectedItem = event.target; this.data = event.target.data; } catch (e) {}"/>
|
||||
<handler type="keypress" key=" " value="try { this.selectedItem = event.target; this.data = event.target.data; } catch (e) {}"/>
|
||||
</handlers>
|
||||
</binding>
|
||||
|
||||
<!-- XUL <button>s -->
|
||||
<binding id="buttonleft" extends="resource:/chrome/xulBindings.xml#basetext">
|
||||
<content excludes="observes,template">
|
||||
|
Loading…
Reference in New Issue
Block a user