add spinners in for the required fields in the preferences page

This commit is contained in:
Damien Churchill 2008-09-30 16:44:57 +00:00
parent df84e34660
commit 92608b436b
7 changed files with 42 additions and 25 deletions

View File

@ -2,27 +2,27 @@
<fieldset>
<legend>$_('Global Bandwidth Usage')</legend>
<label>$_('Max Connections'):</label>
<input type="text" name="max_connections_global" class="moouiSpinner" />
<input type="text" name="max_connections_global" rel="spinner" />
<br/>
<label>$_('Max Upload Slots'):</label>
<input type="text" name="max_upload_slots_global" class="moouiSpinner" />
<input type="text" name="max_upload_slots_global" rel="spinner" />
<br/>
<label>$_('Max Download Speed') (KiB/s):</label>
<input type="text" name="max_download_speed" class="moouiSpinner" />
<input type="text" name="max_download_speed" rel="spinner1" />
<br/>
<label>$_('Max Upload Speed') (KiB/s):</label>
<input type="text" name="max_upload_speed" class="moouiSpinner" />
<input type="text" name="max_upload_speed" rel="spinner1" />
<br/>
<label>$_('Max Half-Open Connections'):</label>
<input type="text" name="max_half_open_connections" class="moouiSpinner" />
<input type="text" name="max_half_open_connections" rel="spinner" />
<br/>
<label>$_('Max Conection Attempts per Second'):</label>
<input type="text" name="max_connections_per_second" class="moouiSpinner" />
<input type="text" name="max_connections_per_second" rel="spinner" />
<br/>
<label class="fluid">
@ -33,19 +33,19 @@
<fieldset>
<legend>$_('Per Torrent Bandwidth Usage')</legend>
<label>$_('Max Connections'):</label>
<input type="text" name="max_connections_per_torrent" class="moouiSpinner" />
<input type="text" name="max_connections_per_torrent" rel="spinner" />
<br/>
<label>$_('Max Upload Slots'):</label>
<input type="text" name="max_upload_slots_per_torrent" class="moouiSpinner" />
<input type="text" name="max_upload_slots_per_torrent" rel="spinner" />
<br/>
<label>$_('Max Download Speed') (KiB/s):</label>
<input type="text" name="max_download_speed_per_torrent" class="moouiSpinner" />
<input type="text" name="max_download_speed_per_torrent" rel="spinner1" />
<br/>
<label>$_('Max Upload Speed') (KiB/s):</label>
<input type="text" name="max_upload_speed_per_torrent" class="moouiSpinner" />
<input type="text" name="max_upload_speed_per_torrent" rel="spinner1" />
<br/>
</fieldset>
</form>

View File

@ -1,7 +1,7 @@
<form>
<fieldset>
<legend>$_('Port')</legend>
<label>$_('Daemon Port'):</label><input type="text" name="daemon_port" class="moouiSpinner" /><br/>
<label>$_('Daemon Port'):</label><input type="text" name="daemon_port" rel="spinner" /><br/>
</fieldset>
<fieldset>
<legend>$_('Connections')</legend>

View File

@ -9,11 +9,11 @@
<label class="fluid">
$_('From'):
</label>
<input type="text" name="start_listen_port" class="moouiSpinner" />
<input type="text" name="start_listen_port" rel="spinner" />
<label class="fluid">
$_('To'):
</label>
<input type="text" name="end_listen_port" class="moouiSpinner" /><br/>
<input type="text" name="end_listen_port" rel="spinner" /><br/>
</fieldset>
<fieldset>
@ -26,11 +26,11 @@
<label class="fluid">
$_('From'):
</label>
<input type="text" name="start_outgoing_port" class="moouiSpinner" />
<input type="text" name="start_outgoing_port" rel="spinner" />
<label class="fluid">
$_('To'):
</label>
<input type="text" name="end_outgoing_port" class="moouiSpinner" /><br/>
<input type="text" name="end_outgoing_port" rel="spinner" /><br/>
</fieldset>
<fieldset>

View File

@ -5,17 +5,17 @@
</fieldset>
<fieldset>
<legend>$_('Active Torrents')</legend>
<label>$_('Total active'):</label><input type="text" name="max_active_limit" class="moouiSpinner" /><br/>
<label>$_('Total active downloading'):</label><input type="text" name="max_active_downloading" class="moouiSpinner" /><br/>
<label>$_('Total active seeding'):</label><input type="text" name="max_active_seeding" class="moouiSpinner" /><br/>
<label>$_('Total active'):</label><input type="text" name="max_active_limit" rel="spinner" /><br/>
<label>$_('Total active downloading'):</label><input type="text" name="max_active_downloading" rel="spinner" /><br/>
<label>$_('Total active seeding'):</label><input type="text" name="max_active_seeding" rel="spinner" /><br/>
<label class="fluid"><input type="checkbox" name="dont_count_slow_torrents" />$_('Do not count slow torrents')</label>
</fieldset>
<fieldset>
<legend>$_('Seeding')</legend>
<label>$_('Share Ratio Limit'):</label><input type="text" name="share_ratio_limit" class="moouiSpinner" /><br/>
<label>$_('Seed Time Ratio'):</label><input type="text" name="stop_seed_ratio" class="moouiSpinner" /><br/>
<label>$_('Seed Time') (m):</label><input type="text" name="seed_time_limit" class="moouiSpinner" /><br/>
<label class="fluid"><input type="checkbox" name="stop_seed_at_ratio" />$_('Stop seeding when share ratio reaches'):</label><input type="text" name="stop_seed_ratio" class="moouiSpinner" />
<label>$_('Share Ratio Limit'):</label><input type="text" name="share_ratio_limit" rel="spinner2" /><br/>
<label>$_('Seed Time Ratio'):</label><input type="text" name="stop_seed_ratio" rel="spinner2" /><br/>
<label>$_('Seed Time') (m):</label><input type="text" name="seed_time_limit" rel="spinner" /><br/>
<label class="fluid"><input type="checkbox" name="stop_seed_at_ratio" />$_('Stop seeding when share ratio reaches'):</label><input type="text" name="stop_seed_ratio" rel="spinner2" />
<label class="fluid"><input type="checkbox" name="remote_seed_at_ratio" />$_('Remove torrent when share ratio reached')</label>
</fieldset>
</form>

View File

@ -20,7 +20,7 @@
</fieldset>
<fieldset>
<legend>$_('Server')</legend>
<label>$_('Port')</label><input type="text" name="port" /><br/>
<label>$_('Port')</label><input type="text" name="port" rel="spinner" /><br/>
</fieldset>
<fieldset>
<legend>$_('Password')</legend>

View File

@ -24,6 +24,19 @@ Deluge.Widgets.GenericPreferences = new Class({
this.core = true;
this.addEvent('loaded', function(e) {
this.form = this.element.getElement('form');
this.form.getElements('input[rel=spinner]').each(function(el) {
new Widgets.Spinner(el);
});
this.form.getElements('input[rel=spinner1]').each(function(el) {
new Widgets.Spinner(el, {
precision: 1
});
});
this.form.getElements('input[rel=spinner2]').each(function(el) {
new Widgets.Spinner(el, {
precision: 2
});
});
}.bindWithEvent(this));
},
@ -35,7 +48,11 @@ Deluge.Widgets.GenericPreferences = new Class({
this.inputs.each(function(input) {
if (!input.name) return;
if (!$defined(config[input.name])) return;
if (input.tagName.toLowerCase() == 'select') {
widget = $$W(input);
if (widget) {
widget.setValue(config[input.name]);
} else if (input.tagName.toLowerCase() == 'select') {
var value = config[input.name].toString();
input.getElements('option').each(function(option) {
if (option.value == value) {

View File

@ -98,7 +98,7 @@ el.getElements('li').each(function(item){var width=item.getSize().x
if(width>widest){widest=width}});el.setStyle('width',widest+2)
el.getElements('li ul').each(function(item){item.setStyle('left',widest-20)});},showPos:function(x,y){this.element.setStyles({'left':x,'top':y-2});this.element.inject(document.body)
this.element.addEvent('mouseleave',function(e){this.hide()}.bind(this));}})
Widgets.ProgressBar=new Class({Extends:Widgets.Base,initialize:function(){this.parent(new Element('div'));this.bound={onResize:this.onResize.bindWithEvent(this)};this.element.addClass('moouiProgressBar');this.bar=new Element('div').inject(this.element);this.textSpan=new Element('span').inject(this.bar);this.sets({width:200,height:20});this.addEvent('resize',this.bound.onResize);},onResize:function(){this.textSpan.setStyles({'width':this.width,'height':this.height});this.update(this.text,this.percent);},update:function(text,percent){if(this.text!=text){this.text=text;this.textSpan.set('text',text);};if(this.percent!=percent){this.percent=percent;this.bar.setStyles({'width':Math.floor(this.width/100.0*percent),'height':this.height});};}});Widgets.Spinner=new Class({Extends:Widgets.Base,options:{precision:0,step:1,limit:{high:200,low:-1}},initialize:function(input,options){this.parent(new Element('div'),options);this.bound={onMouseDown:this.onMouseDown.bindWithEvent(this),onMouseUp:this.onMouseUp.bindWithEvent(this),onMouseWheel:this.onMouseWheel.bindWithEvent(this),onKeyDown:this.onKeyDown.bindWithEvent(this),onKeyUp:this.onKeyUp.bindWithEvent(this),onChange:this.onChange.bindWithEvent(this)};value=0;this.keyDown=false;if(input){this.element.replaces(input);value=new Number(input.value);};this.input=(input)?input:new Element('input');this.input.store('moouiWidget',this);this.element.grab(this.input);this.element.addClass('moouiSpinner');this.element.addEvent('mousewheel',this.bound.onMouseWheel);this.input.addEvent('keydown',this.bound.onKeyDown);this.input.addEvent('change',this.bound.onChange);this.buttons=new Element('div').addClass('moouiSpinnerButtons');this.up=new Element('div').addClass('moouiSpinnerUp');this.down=new Element('div').addClass('moouiSpinnerDown');this.up.addEvent('mousedown',this.bound.onMouseDown);this.down.addEvent('mousedown',this.bound.onMouseDown);this.buttons.grab(this.up);this.buttons.grab(this.down);this.element.grab(this.buttons);this.setValue(value);},getPrecision:function(){return Math.pow(10,this.options.precision+1)/10;},setValue:function(value){if(this.options.limit){if(this.options.limit.low&&value<=this.options.limit.low){value=this.options.limit.low;this.down.setStyle('opacity','0.5');}else if(this.options.limit.high&&value>=this.options.limit.high){value=this.options.limit.high;this.up.setStyle('opacity','0.5');}else{this.up.setStyle('opacity','1');this.down.setStyle('opacity','1');};};this.value=new Number(value);this.input.set('value',this.value.toFixed(this.options.precision));this.settingValue=true;this.input.fireEvent('change');},changeValue:function(change){value=this.value+(change/this.getPrecision());this.setValue(value);},acceleratingChange:function(change){if(this.stop)return;this.changeValue(change);if(this.interval>100)this.interval-=100
Widgets.ProgressBar=new Class({Extends:Widgets.Base,initialize:function(){this.parent(new Element('div'));this.bound={onResize:this.onResize.bindWithEvent(this)};this.element.addClass('moouiProgressBar');this.bar=new Element('div').inject(this.element);this.textSpan=new Element('span').inject(this.bar);this.sets({width:200,height:20});this.addEvent('resize',this.bound.onResize);},onResize:function(){this.textSpan.setStyles({'width':this.width,'height':this.height});this.update(this.text,this.percent);},update:function(text,percent){if(this.text!=text){this.text=text;this.textSpan.set('text',text);};if(this.percent!=percent){this.percent=percent;this.bar.setStyles({'width':Math.floor(this.width/100.0*percent),'height':this.height});};}});Widgets.Spinner=new Class({Extends:Widgets.Base,options:{precision:0,step:1,limit:{high:null,low:null}},initialize:function(input,options){this.parent(new Element('div'),options);this.bound={onMouseDown:this.onMouseDown.bindWithEvent(this),onMouseUp:this.onMouseUp.bindWithEvent(this),onMouseWheel:this.onMouseWheel.bindWithEvent(this),onKeyDown:this.onKeyDown.bindWithEvent(this),onKeyUp:this.onKeyUp.bindWithEvent(this),onChange:this.onChange.bindWithEvent(this)};value=0;this.keyDown=false;if(input){this.element.replaces(input);value=new Number(input.value);};this.input=(input)?input:new Element('input');this.input.store('moouiWidget',this);this.element.grab(this.input);this.element.addClass('moouiSpinner');this.element.addEvent('mousewheel',this.bound.onMouseWheel);this.input.addEvent('keydown',this.bound.onKeyDown);this.input.addEvent('change',this.bound.onChange);this.buttons=new Element('div').addClass('moouiSpinnerButtons');this.up=new Element('div').addClass('moouiSpinnerUp');this.down=new Element('div').addClass('moouiSpinnerDown');this.up.addEvent('mousedown',this.bound.onMouseDown);this.down.addEvent('mousedown',this.bound.onMouseDown);this.buttons.grab(this.up);this.buttons.grab(this.down);this.element.grab(this.buttons);this.setValue(value);},getPrecision:function(){return Math.pow(10,this.options.precision+1)/10;},setValue:function(value){if(this.options.limit){if(this.options.limit.low&&value<=this.options.limit.low){value=this.options.limit.low;this.down.setStyle('opacity','0.5');}else if(this.options.limit.high&&value>=this.options.limit.high){value=this.options.limit.high;this.up.setStyle('opacity','0.5');}else{this.up.setStyle('opacity','1');this.down.setStyle('opacity','1');};};this.value=new Number(value);this.input.set('value',this.value.toFixed(this.options.precision));this.settingValue=true;this.input.fireEvent('change');},changeValue:function(change){value=this.value+(change/this.getPrecision());this.setValue(value);},acceleratingChange:function(change){if(this.stop)return;this.changeValue(change);if(this.interval>100)this.interval-=100
else if(this.interval>10)this.interval-=10
this.acceleratingChange.delay(this.interval,this,change);},onMouseDown:function(e){this.value=new Number(this.input.value);document.addEvent('mouseup',this.bound.onMouseUp);if(e.target.hasClass('moouiSpinnerUp'))change=this.options.step;else change=this.options.step*-1;this.interval=600;this.stop=false;this.acceleratingChange(change);},onMouseUp:function(e){this.stop=true;document.removeEvent('mouseup',this.bound.onMouseUp);},onKeyDown:function(e){if(e.key=='up'||e.key=='down'){if(this.keyDown)return;this.value=new Number(this.input.value);change=(e.key=='up')?this.options.step:this.options.step*-1;this.input.addEvent('keyup',this.bound.onKeyUp);this.interval=600;this.stop=false;this.keyDown=true;this.acceleratingChange(change);}else if($A(['left','right','backspace']).contains(e.key)){return;}else{e.key=(e.code==190)?'.':e.key;pattern=/[0-9]/;if(!this.input.value.match(/\./)&&this.options.precision>0){pattern=/[0-9\.]/;};if(!e.key.match(pattern)){e.stop();return;};};},onKeyUp:function(e){this.stop=true;this.keyDown=false;this.input.removeEvent('keyup',this.bound.onKeyUp);},onMouseWheel:function(e){this.changeValue(this.options.step*e.wheel);},onChange:function(e){if(this.settingValue){this.settingValue=false;return;};this.setValue(new Number(this.input.value));}});Widgets.SplitPane=new Class({Extends:Widgets.Base,options:{direction:'horizontal',name:null,splitSize:6,pane1:{},pane2:{}},initialize:function(element,pane1,pane2,options){this.parent(element,options);this.bound={onResize:this.onResize.bindWithEvent(this),onMouseDown:this.onMouseDown.bindWithEvent(this),onMouseMove:this.onMouseMove.bindWithEvent(this),onMouseUp:this.onMouseUp.bindWithEvent(this)};this.horizontal=(this.options.direction=='horizontal')?true:false;this.pane1=$W(pane1);this.pane2=$W(pane2);if(this.options.expand)this.expand();this.initPane(this.pane1,this.options.pane1);this.initPane(this.pane2,this.options.pane2);this.initSplitter();this.calculatePositions();this.setPosition(this.pane1);this.setPosition(this.splitter);this.setPosition(this.pane2);this.splitter.addEvent('mousedown',this.bound.onMouseDown);this.addEvent('resize',this.onResize.bindWithEvent(this));},initSplitter:function(){this.splitter=new Element('div').addClass('moouiSplitter');this.splitter.inject(this.pane1,'after');this.splitter.paneinfo={};if(this.horizontal){this.splitter.addClass('moouiSplitterVertical');}else{this.splitter.addClass('moouiSplitterHorizontal');};this.splitter.grab(new Element('div'));this.splitter.grab(new Element('div'));this.splitter.grab(new Element('div'));},onMouseDown:function(e){window.addEvent('mouseup',this.bound.onMouseUp);window.addEvent('mousemove',this.bound.onMouseMove);this.mouseStart={x:e.client.x,y:e.client.y};this.paneInfo={one:{startWidth:this.pane1.paneinfo.width,startHeight:this.pane1.paneinfo.height},two:{startWidth:this.pane2.paneinfo.width,startHeight:this.pane2.paneinfo.height}};},onMouseMove:function(e){if(this.horizontal){diff=e.client.x-this.mouseStart.x;p1width=this.paneInfo.one.startWidth+diff;p2width=this.paneInfo.two.startWidth-diff;if((this.pane1.paneinfo.min-this.pane1.element.modifiers.y)>p1width){this.pane1.paneinfo.width=this.pane1.paneinfo.min;this.pane2.paneinfo.width=this.paneInfo.two.startWidth+(this.paneInfo.one.startWidth-this.pane1.paneinfo.min);}else if((this.pane2.paneinfo.min-this.pane2.element.modifiers.y)>p2width){this.pane2.paneinfo.width=this.pane2.paneinfo.min;this.pane1.paneinfo.width=this.paneInfo.one.startWidth+(this.paneInfo.two.startWidth-this.pane2.paneinfo.min);}else{this.pane1.paneinfo.width=p1width;this.pane2.paneinfo.width=p2width;};}else{diff=e.client.y-this.mouseStart.y;p1height=this.paneInfo.one.startHeight+diff;p2height=this.paneInfo.two.startHeight-diff;if(this.pane1.paneinfo.min>p1height){this.pane1.paneinfo.height=this.pane1.paneinfo.min;this.pane2.paneinfo.height=this.paneInfo.two.startHeight+(this.paneInfo.one.startHeight-this.pane1.paneinfo.min);}else if(this.pane2.paneinfo.min>p2height){this.pane2.paneinfo.height=this.pane2.paneinfo.min;this.pane1.paneinfo.height=this.paneInfo.one.startHeight+(this.paneInfo.two.startHeight-this.pane2.paneinfo.min);}else{this.pane1.paneinfo.height=p1height;this.pane2.paneinfo.height=p2height;};};this.setPosition(this.pane1);this.setPosition(this.pane2);},onMouseUp:function(e){window.removeEvent('mouseup',this.bound.onMouseUp);window.removeEvent('mousemove',this.bound.onMouseMove);},initPane:function(pane,options){pane.addClass('moouiPane');pane.paneinfo={}
if(options){pane.paneinfo.min=(options.min)?options.min:0;pane.paneinfo.expand=(options.expand)?options.expand:false;};},calculatePositions:function(resized){if(resized){if(this.horizontal){this.calculateResize(resized,'width','height','x','y');}else{this.calculateResize(resized,'height','width','y','x');}}else{if(this.horizontal){this.calculateInitial('width','height','x','y');}else{this.calculateInitial('height','width','y','x');}}},calculateInitial:function(dm,ds,pm,ps){var size=this.getInnerSize();this.pane1.getSizeModifiers();this.pane2.getSizeModifiers();this.splitter.getSizeModifiers();if(this.pane1.paneinfo.expand){this.pane2.paneinfo[dm]=this.pane2.paneinfo.min;this.pane1.paneinfo[dm]=size[pm]-this.pane2.paneinfo.min-this.options.splitSize;this.pane1.paneinfo[dm]-=this.pane1.element.modifiers[pm]+this.pane2.element.modifiers[pm];}else{this.pane1.paneinfo[dm]=this.pane1.paneinfo.min;this.pane2.paneinfo[dm]=size[pm]-this.pane1.paneinfo.min-this.options.splitSize;this.pane2.paneinfo[dm]-=this.pane2.element.modifiers[pm]+this.pane1.element.modifiers[pm];}