縦型スライダーにしてみた

git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@4962 599a83e7-65a4-db11-8015-0010dcdd6dc2
This commit is contained in:
piro 2009-08-20 08:03:45 +00:00
parent a6831ad860
commit 3192810aac
2 changed files with 82 additions and 48 deletions

View File

@ -37,9 +37,9 @@ function init()
var gDropLinksOnRadioSet, var gDropLinksOnRadioSet,
gGroupBookmarkRadioSet, gGroupBookmarkRadioSet,
gOpenLinkInTabRadio, gOpenLinkInTabScale,
gLoadLocationBarToNewTabRadio, gLoadLocationBarToNewTabScale,
gLoadLocationBarToChildTabRadio, gLoadLocationBarToChildTabScale,
gLastStateIsVertical; gLastStateIsVertical;
var gTabbarPlacePositionInitialized = false; var gTabbarPlacePositionInitialized = false;
@ -58,22 +58,22 @@ function initTabPane()
'openGroupBookmark-deck' 'openGroupBookmark-deck'
); );
gOpenLinkInTabRadio = new RadioScaleSet( gOpenLinkInTabScale = new ScaleSet(
['extensions.treestyletab.openOuterLinkInNewTab', ['extensions.treestyletab.openOuterLinkInNewTab',
'extensions.treestyletab.openAnyLinkInNewTab'], 'extensions.treestyletab.openAnyLinkInNewTab'],
'openLinkInNewTab-radio', 'openLinkInNewTab-scale',
'openLinkInNewTab-labels' 'openLinkInNewTab-labels'
); );
gLoadLocationBarToNewTabRadio = new RadioScaleSet( gLoadLocationBarToNewTabScale = new ScaleSet(
['extensions.treestyletab.urlbar.loadDifferentDomainToNewTab', ['extensions.treestyletab.urlbar.loadDifferentDomainToNewTab',
'extensions.treestyletab.urlbar.loadSameDomainToNewTab'], 'extensions.treestyletab.urlbar.loadSameDomainToNewTab'],
'loadLocationBarToNewTab-radio', 'loadLocationBarToNewTab-scale',
'loadLocationBarToNewTab-labels' 'loadLocationBarToNewTab-labels'
); );
gLoadLocationBarToChildTabRadio = new RadioScaleSet( gLoadLocationBarToChildTabScale = new ScaleSet(
['extensions.treestyletab.urlbar.loadSameDomainToNewTab.asChild', ['extensions.treestyletab.urlbar.loadSameDomainToNewTab.asChild',
'extensions.treestyletab.urlbar.loadDifferentDomainToNewTab.asChild'], 'extensions.treestyletab.urlbar.loadDifferentDomainToNewTab.asChild'],
'loadLocationBarToChildTab-radio', 'loadLocationBarToChildTab-scale',
'loadLocationBarToChildTab-labels' 'loadLocationBarToChildTab-labels'
); );
@ -246,58 +246,70 @@ function updateCloseRootBehaviorCheck()
function RadioScaleSet(aPrefs, aRadio, aLabelsDeck) function ScaleSet(aPrefs, aScale, aLabelsContainer)
{ {
this.prefs = aPrefs.map(document.getElementById, document); this.prefs = aPrefs.map(document.getElementById, document);
this.radio = document.getElementById(aRadio); this.scale = document.getElementById(aScale);
this.labels = Array.slice(document.getElementById(aLabelsContainer).getElementsByTagName('label'));
this.radio.value = this.prefs[1].value ? 2 : this.scale.value = this.prefs[1].value ? 2 :
this.prefs[0].value ? 1 : this.prefs[0].value ? 1 :
0 ; 0 ;
this.updateLabels();
} }
RadioScaleSet.prototype = { ScaleSet.prototype = {
onChange : function() onChange : function()
{ {
var value = this.value; var value = this.value;
this.prefs[0].value = value > 0; this.prefs[0].value = value > 0;
this.prefs[1].value = value > 1; this.prefs[1].value = value > 1;
this.updateLabels();
}, },
set value(aValue) set value(aValue)
{ {
this.radio.value = aValue; this.scale.value = aValue;
this.onChange(); this.onChange();
return aValue; return aValue;
}, },
get value() get value()
{ {
return parseInt(this.radio.value); return parseInt(this.scale.value);
}, },
set disabled(aDisabled) set disabled(aDisabled)
{ {
if (aDisabled) { if (aDisabled) {
this.radio.setAttribute('disabled', true); this.scale.setAttribute('disabled', true);
Array.slice(this.radio.childNodes).forEach(function(aNode) { this.labels.forEach(function(aNode) {
aNode.setAttribute('disabled', true); aNode.setAttribute('disabled', true);
}); });
} }
else { else {
this.radio.removeAttribute('disabled'); this.scale.removeAttribute('disabled');
Array.slice(this.radio.childNodes).forEach(function(aNode) { this.updateLabels();
aNode.removeAttribute('disabled');
});
} }
}, },
get disabled() get disabled()
{ {
return this.radio.getAttribute('disabled') == 'true'; return this.scale.getAttribute('disabled') == 'true';
},
updateLabels : function()
{
this.labels.forEach(function(aLabel, aIndex) {
if (aIndex == this.value)
aLabel.removeAttribute('disabled');
else
aLabel.setAttribute('disabled', true);
}, this);
}, },
destroy : function() destroy : function()
{ {
this.prefs = null; this.prefs = null;
this.radio = null; this.scale = null;
this.labels = null;
} }
}; };

View File

@ -352,35 +352,57 @@
<tabpanel orient="vertical"> <tabpanel orient="vertical">
<groupbox> <groupbox>
<caption label="&config.link.caption;"/> <caption label="&config.link.caption;"/>
<radiogroup id="openLinkInNewTab-radio" <hbox align="stretch">
<scale id="openLinkInNewTab-scale"
orient="vertical" orient="vertical"
oncommand="gOpenLinkInTabRadio.onChange();"> min="0"
<radio value="0" label="&config.link.none;"/> max="2"
<radio value="1" label="&config.link.outer;"/> style="height:4em;"
<radio value="2" label="&config.link.any;"/> onchange="gOpenLinkInTabScale.onChange();"/>
</radiogroup> <vbox id="openLinkInNewTab-labels">
<label value="&config.link.none;" control="openLinkInNewTab-scale"/>
<spacer flex="1"/>
<label value="&config.link.outer;" control="openLinkInNewTab-scale"/>
<spacer flex="1"/>
<label value="&config.link.any;" control="openLinkInNewTab-scale"/>
</vbox>
</hbox>
</groupbox> </groupbox>
<groupbox> <groupbox>
<caption label="&config.urlbar.caption;"/> <caption label="&config.urlbar.caption;"/>
<radiogroup id="loadLocationBarToNewTab-radio" <hbox align="stretch">
<scale id="loadLocationBarToNewTab-scale"
orient="vertical" orient="vertical"
oncommand=" min="0"
gLoadLocationBarToNewTabRadio.onChange(); max="2"
gLoadLocationBarToChildTabRadio.disabled = gLoadLocationBarToNewTabRadio.value == 0; style="height:4em;"
"> onchange="
<radio value="0" label="&config.urlbar.none;"/> gLoadLocationBarToNewTabScale.onChange();
<radio value="1" label="&config.urlbar.outer;"/> gLoadLocationBarToChildTabScale.disabled = gLoadLocationBarToNewTabScale.value == 0;
<radio value="2" label="&config.urlbar.any;"/> "/>
</radiogroup> <vbox id="loadLocationBarToNewTab-labels">
<hbox align="center"> <label value="&config.urlbar.none;" control="loadLocationBarToNewTab-scale"/>
<spacer flex="1"/>
<label value="&config.urlbar.outer;" control="loadLocationBarToNewTab-scale"/>
<spacer flex="1"/>
<label value="&config.urlbar.any;" control="loadLocationBarToNewTab-scale"/>
</vbox>
</hbox>
<hbox align="stretch">
<spacer style="width:1em;"/> <spacer style="width:1em;"/>
<radiogroup id="loadLocationBarToChildTab-radio" <scale id="loadLocationBarToChildTab-scale"
orient="vertical" orient="vertical"
oncommand="gLoadLocationBarToChildTabRadio.onChange();"> min="0"
<radio value="0" label="&config.urlbar.asChild.none;"/> max="2"
<radio value="1" label="&config.urlbar.asChild.inner;"/> style="height:4em;"
<radio value="2" label="&config.urlbar.asChild.any;"/> onchange="gLoadLocationBarToChildTabScale.onChange();"/>
</radiogroup> <vbox id="loadLocationBarToChildTab-labels">
<label value="&config.urlbar.asChild.none;" control="loadLocationBarToChildTab-scale"/>
<spacer flex="1"/>
<label value="&config.urlbar.asChild.inner;" control="loadLocationBarToChildTab-scale"/>
<spacer flex="1"/>
<label value="&config.urlbar.asChild.any;" control="loadLocationBarToChildTab-scale"/>
</vbox>
</hbox> </hbox>
</groupbox> </groupbox>
</tabpanel> </tabpanel>