Quality size sliders are implemented. Limits are calculated based on MB/Minute.

This commit is contained in:
Mark McDowall
2011-09-15 21:42:30 -07:00
parent 4b2427ade7
commit 8c06dde28a
10 changed files with 188 additions and 31 deletions
+75 -1
View File
@@ -23,6 +23,50 @@ Settings
<span class="small">@Html.DescriptionFor(m => m.DefaultQualityProfileId)</span>
</label>
@Html.DropDownListFor(m => m.DefaultQualityProfileId, Model.QualityProfileSelectList, new { @class = "inputClass" })
<div class="sliders">
<div class="slider-container">
<b>SDTV</b>
<div id="sdtv-slider" class="slider"></div>
@Html.HiddenFor(m => m.SdtvMaxSize, new { @class="slider-value" })
30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
</div>
<div class="slider-container">
<b>DVD</b>
<div id="dvd-slider" class="slider"></div>
@Html.HiddenFor(m => m.DvdMaxSize, new { @class = "slider-value" })
30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
</div>
<div class="slider-container">
<b>HDTV</b>
<div id="hdtv-slider" class="slider"></div>
@Html.HiddenFor(m => m.HdtvMaxSize, new { @class = "slider-value" })
30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
</div>
<div class="slider-container">
<b>WEBDL</b>
<div id="webdl-slider" class="slider"></div>
@Html.HiddenFor(m => m.WebdlMaxSize, new { @class = "slider-value" })
30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
</div>
<div class="slider-container">
<b>Bluray 720p</b>
<div id="bluray720p-slider" class="slider"></div>
@Html.HiddenFor(m => m.Bluray720pMaxSize, new { @class = "slider-value" })
30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
</div>
<div class="slider-container">
<b>Bluray 1080p</b>
<div id="bluray1080p-slider" class="slider"></div>
@Html.HiddenFor(m => m.Bluray1080pMaxSize, new { @class = "slider-value" })
30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
</div>
</div>
</div>
<div id="bottom" class="clearfix">
@@ -48,7 +92,7 @@ Settings
</div>
}
@section Scripts{
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/Plugins/MicrosoftAjax.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"
type="text/javascript"></script>
<script src="../../Scripts/settingsForm.js" type="text/javascript"></script>
@@ -156,5 +200,35 @@ Settings
$(allowedString).empty().val(result);
});
var sliderOptions = {
min: 0,
max: 200,
value: 0,
step: 1,
create: function( event, ui ) {
var startingValue = $(this).siblings('.slider-value').val();
$(this).siblings('.30-minute').text(startingValue * 30);
$(this).siblings('.60-minute').text(startingValue * 60);
},
slide: function( event, ui ) {
$(this).siblings('.slider-value').val(ui.value);
$(this).siblings('.30-minute').text(ui.value * 30);
$(this).siblings('.60-minute').text(ui.value * 60);
}
};
$(document).ready(function () {
setupSliders();
});
function setupSliders() {
$(".slider").each(function() {
var localOptions = sliderOptions;
localOptions["value"] = $(this).siblings('.slider-value').val();
$(this).empty().slider(localOptions);
});
}
</script>
}