knobs look way better

This commit is contained in:
Mark McDowall 2013-06-28 01:20:15 -07:00
parent f7c340d795
commit acf16f6bd3
6 changed files with 47 additions and 22 deletions

View file

@ -1,8 +1,20 @@
<div class="quality-size-item">
<h2 class="center-block">{{name}}</h2>
<div class="size">
<div class="size-value-wrapper">
<div>
<span class="label label-large label-warning x-size-thirty"
name="thirtyMinuteSize"
title="Maximum size for a 30 minute episode in Megabytes">
</span>
</div>
<div>
<span class="label label-large label-info x-size-sixty"
name="sixtyMinuteSize"
title="Maximum size for a 60 minute episode in Megabytes">
</span>
</div>
</div>
<input type="text" name="maxSize" class="knob x-knob" />
</div>
<div class="size-value">30 minute limit: <span name="thirtyMinuteSize" class="thirty-minute-size"></span>MB</div>
<div class="size-value">60 minute limit: <span name="sixtyMinuteSize" class="sixty-minute-size"></span>MB</div>
</div>

View file

@ -8,33 +8,33 @@ define(['marionette', 'Mixins/AsModelBoundView', 'jquery.knob'], function (Mario
ui: {
knob : '.x-knob',
thirtyMinuteSize: '.thirty-minute-size',
sixtyMinuteSize : '.sixty-minute-size'
thirtyMinuteSize: '.x-size-thirty',
sixtyMinuteSize : '.x-size-sixty'
},
events: {
'change .x-knob': '_changeMaxSize'
// 'change .x-knob': '_changeMaxSize'
},
initialize: function (options) {
this.qualityProfileCollection = options.qualityProfiles;
this.model.on('change:maxSize', this._changeMaxSize, this)
},
onRender: function () {
this.ui.knob.knob({
min : 0,
max : 200,
step : 10,
cursor : 25,
width : 100,
stopper : true
min : 0,
max : 200,
step : 10,
cursor : 25,
width : 150,
stopper : true,
displayInput : false
});
},
_changeMaxSize: function (e, value) {
this.model.set({
maxSize: value
});
_changeMaxSize: function (e) {
var value = this.model.get('maxSize');
this.ui.thirtyMinuteSize.html(value * 30);
this.ui.sixtyMinuteSize.html(value * 60);