XUL <radiogroup> and <radio> are now implemented completely in JS/XBL,

deprecate 'iconic' classes of <checkbox> and <radio>
This commit is contained in:
ben%netscape.com 2000-05-16 12:08:35 +00:00
parent ae730e9df0
commit a849595f80
6 changed files with 105 additions and 116 deletions

View File

@ -1,4 +1,5 @@
xul.css
xulBindings.xml
menulistBindings.xml
htmlBindings.xml
htmlBindings.xml
radioBindings.xml

View File

@ -35,6 +35,7 @@ endif
EXPORT_CHROME = xul.css \
htmlBindings.xml \
xulBindings.xml \
radioBindings.xml \
menulistBindings.xml \
$(NULL)

View File

@ -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

View 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>

View File

@ -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);

View File

@ -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">