yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove bootstrap logic from slider controller

Browse Source
This commit is contained in:
Mads Rasmussen
2018-11-26 13:46:47 +01:00
parent e169de917d
commit 16b57ac022
2 changed files with 17 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js
View File

@@ -1,4 +1,4 @@
function sliderController($scope, $log, $element, assetsService, angularHelper) {
function sliderController($scope) {
let sliderRef = null;
@@ -12,100 +12,23 @@
$scope.model.config.step = $scope.model.config.step ? parseFloat($scope.model.config.step) : 1;
}
function getValueForSlider(val) {
if (!angular.isArray(val)) {
val = val.toString().split(",");
}
var val1 = val[0];
var val2 = val.length > 1 ? val[1] : null;
//configure the model value based on if range is enabled or not
if ($scope.model.config.enableRange == true) {
var i1 = parseFloat(val1);
var i2 = parseFloat(val2);
return [
isNaN(i1) ? $scope.model.config.minVal : (i1 >= $scope.model.config.minVal ? i1 : $scope.model.config.minVal),
isNaN(i2) ? $scope.model.config.maxVal : (i2 >= i1 ? (i2 <= $scope.model.config.maxVal ? i2 : $scope.model.config.maxVal) : $scope.model.config.maxVal)
];
}
else {
return parseFloat(val1);
}
}
/** This creates the slider with the model values - it's called on startup and returns a reference to the slider object */
function createSlider() {
//the value that we'll give the slider - if it's a range, we store our value as a comma separated val but this slider expects an array
var sliderVal = null;
//configure the model value based on if range is enabled or not
if ($scope.model.config.enableRange == true) {
//If no value saved yet - then use default value
//If it contains a single value - then also create a new array value
if (!$scope.model.value || $scope.model.value.indexOf(",") == -1) {
sliderVal = getValueForSlider([$scope.model.config.initVal1, $scope.model.config.initVal2]);
}
else {
//this will mean it's a delimited value stored in the db, convert it to an array
sliderVal = getValueForSlider($scope.model.value.split(','));
}
}
else {
//If no value saved yet - then use default value
if ($scope.model.value) {
sliderVal = getValueForSlider($scope.model.value);
}
else {
sliderVal = getValueForSlider($scope.model.config.initVal1);
}
}
//initiate slider, add event handler and get the instance reference (stored in data)
var slider = $element.find('.slider-item').bootstrapSlider({
max: $scope.model.config.maxVal,
min: $scope.model.config.minVal,
step: $scope.model.config.step,
range: $scope.model.config.enableRange,
//set the slider val - we cannot do this with data- attributes when using ranges
value: sliderVal
});
slider.on('slideStop', function (e) {
var value = e.value;
angularHelper.safeApply($scope, function () {
$scope.model.value = getModelValueFromSlider(value);
});
}).data('slider');
return slider;
}
function getModelValueFromSlider(sliderVal) {
//Get the value from the slider and format it correctly, if it is a range we want a comma delimited value
if ($scope.model.config.enableRange == true) {
return sliderVal.join(",");
}
else {
return sliderVal.toString();
}
}
function setModelValue(values) {
$scope.model.value = values.toString();
$scope.model.value = values ? values.toString() : null;
}
$scope.setup = function(slider) {
sliderRef = slider;
};
$scope.update = function(values) {
$scope.end = function(values) {
setModelValue(values);
};
function init() {
// convert to array
$scope.sliderValue = $scope.model.value ? $scope.model.value.split(',') : null;
configureDefaults();
// format config to fit slider plugin
@@ -139,41 +62,19 @@
}
};
function filterPips(value, type) {
function filterPips(value) {
// show a pip for min and maximum value
return value === $scope.model.config.minVal || value === $scope.model.config.maxVal ? 1 : -1;
}
//tell the assetsService to load the bootstrap slider
//libs from the plugin folder
assetsService
.loadJs("lib/slider/js/bootstrap-slider.js")
.then(function () {
var slider = createSlider();
// Initialize model value if not set
if (!$scope.model.value) {
var sliderVal = slider.bootstrapSlider('getValue');
$scope.model.value = getModelValueFromSlider(sliderVal);
}
//watch for the model value being changed and update the slider value when it does
$scope.$watch("model.value", function (newVal, oldVal) {
if (newVal != oldVal) {
var sliderVal = getModelValueFromSlider(slider.bootstrapSlider('getValue'));
if (newVal !== sliderVal) {
slider.bootstrapSlider('setValue', getValueForSlider(newVal));
}
}
});
});
//load the separate css for the editor to avoid it blocking our js loading
assetsService.loadCss("lib/slider/bootstrap-slider.css", $scope);
assetsService.loadCss("lib/slider/bootstrap-slider-custom.css", $scope);
}
$scope.$watch('model.value', function(newValue, oldValue){
if(newValue && newValue !== oldValue) {
$scope.sliderValue = newValue.split(',');
sliderRef.noUiSlider.set($scope.sliderValue);
}
})
init();

13
src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html
View File

@@ -1,19 +1,12 @@
<div ng-controller="Umbraco.PropertyEditors.SliderController">
<input type="text" name="slider" class="slider-item" />
<div style="margin-top: 70px;">
<div style="padding-top: 50px; padding-bottom: 40px; width: 66.6%">
<umb-range-slider
ng-model="model.value"
ng-model="sliderValue"
options="sliderOptions"
on-setup="setup(slider)"
on-update="update(values)">
on-end="end(values)">
</umb-range-slider>
</div>
<h5>Value</h5>
{{model.value}}
<h5>config</h5>
<pre>{{model.config | json}}</pre>
</div>