Quality Size knobbed, other quality changes

This commit is contained in:
Mark McDowall 2013-06-25 00:21:10 -07:00
commit f78f396940
25 changed files with 888 additions and 405 deletions

View file

@ -1,4 +1,4 @@
<fieldset>
<legend>Quality Size Limits</legend>
<div id="quality-sizes-container"/>
<ul class="quality-sizes"/>
</fieldset>

View file

@ -3,7 +3,7 @@
define(['marionette', 'Settings/Quality/Size/QualitySizeView'], function (Marionette, QualitySizeView) {
return Marionette.CompositeView.extend({
itemView : QualitySizeView,
itemViewContainer: '#quality-sizes-container',
itemViewContainer: '.quality-sizes',
template : 'Settings/Quality/Size/QualitySizeCollectionTemplate'
});
});

View file

@ -1,5 +1,8 @@
<b>{{name}}</b>
<div class="quality-slider-container">
<input type="text" class="span4 slider"/>
</div>
30 minute size: <span name="thirtyMinuteSize" class="thirty-minute-size"></span>MB | 60 minute size: <span name="sixtyMinuteSize" class="sixty-minute-size"></span>MB
<div class="quality-size-item">
<h2 class="center-block">{{name}}</h2>
<div class="size">
<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

@ -1,19 +1,19 @@
'use strict';
define(['marionette', 'bootstrap.slider'], function (Marionette) {
define(['marionette', 'Mixins/AsModelBoundView', 'jquery.knob'], function (Marionette, AsModelBoundView) {
return Marionette.ItemView.extend({
var view = Marionette.ItemView.extend({
template : 'Settings/Quality/Size/QualitySizeTemplate',
className: 'quality-size-item',
tagName : 'li',
ui: {
slider : '.slider',
knob : '.x-knob',
thirtyMinuteSize: '.thirty-minute-size',
sixtyMinuteSize : '.sixty-minute-size'
},
events: {
'slide .slider': 'slide'
'change .x-knob': '_changeMaxSize'
},
initialize: function (options) {
@ -21,23 +21,25 @@ define(['marionette', 'bootstrap.slider'], function (Marionette) {
},
onRender: function () {
var self = this;
this.ui.slider.slider({
min : 0,
max : 200,
step : 1,
value : self.model.get('maxSize'),
tooltip: 'hide'
this.ui.knob.knob({
min : 0,
max : 200,
step : 10,
cursor : 25,
width : 100,
stopper : true
});
},
slide: function (e) {
var newSize = e.value;
_changeMaxSize: function (e, value) {
this.model.set({
maxSize: value
});
this.model.set({ maxSize: newSize, thirtyMinuteSize: newSize * 30, sixtyMinuteSize: newSize * 60 });
this.ui.thirtyMinuteSize.html(newSize * 30);
this.ui.sixtyMinuteSize.html(newSize * 60);
this.ui.thirtyMinuteSize.html(value * 30);
this.ui.sixtyMinuteSize.html(value * 60);
}
});
return AsModelBoundView.call(view);
});