From aa621f687eb8e019ea7773c26758f0ebef901d9b Mon Sep 17 00:00:00 2001 From: Stephan Date: Tue, 13 Nov 2018 10:07:30 +0100 Subject: [PATCH 01/15] Refactor/fix registering controllers --- src/Umbraco.Core/Composing/TypeFinder.cs | 96 ++++++++++--------- src/Umbraco.Core/Composing/TypeLoader.cs | 9 ++ src/Umbraco.Web/LightInjectExtensions.cs | 93 ++++++++++++------ .../Runtime/WebRuntimeComponent.cs | 3 +- 4 files changed, 122 insertions(+), 79 deletions(-) diff --git a/src/Umbraco.Core/Composing/TypeFinder.cs b/src/Umbraco.Core/Composing/TypeFinder.cs index a42b84e0c5..9604f599cf 100644 --- a/src/Umbraco.Core/Composing/TypeFinder.cs +++ b/src/Umbraco.Core/Composing/TypeFinder.cs @@ -210,53 +210,55 @@ namespace Umbraco.Core.Composing /// NOTE the comma vs period... comma delimits the name in an Assembly FullName property so if it ends with comma then its an exact name match /// NOTE this means that "foo." will NOT exclude "foo.dll" but only "foo.*.dll" /// - internal static readonly string[] KnownAssemblyExclusionFilter = new[] - { - "mscorlib,", - "System.", - "Antlr3.", - "Autofac.", - "Autofac,", - "Castle.", - "ClientDependency.", - "DataAnnotationsExtensions.", - "DataAnnotationsExtensions,", - "Dynamic,", - "HtmlDiff,", - "Iesi.Collections,", - "Microsoft.", - "Newtonsoft.", - "NHibernate.", - "NHibernate,", - "NuGet.", - "RouteDebugger,", - "SqlCE4Umbraco,", - "umbraco.datalayer,", - "umbraco.interfaces,", - //"umbraco.providers,", - //"Umbraco.Web.UI,", - "umbraco.webservices", - "Lucene.", - "Examine,", - "Examine.", - "ServiceStack.", - "MySql.", - "HtmlAgilityPack.", - "TidyNet.", - "ICSharpCode.", - "CookComputing.", - "AutoMapper,", - "AutoMapper.", - "AzureDirectory,", - "itextsharp,", - "UrlRewritingNet.", - "HtmlAgilityPack,", - "MiniProfiler,", - "Moq,", - "nunit.framework,", - "TidyNet,", - "WebDriver," - }; + internal static readonly string[] KnownAssemblyExclusionFilter = { + "Antlr3.", + "AutoMapper,", + "AutoMapper.", + "Autofac,", // DI + "Autofac.", + "AzureDirectory,", + "Castle.", // DI, tests + "ClientDependency.", + "CookComputing.", + "CSharpTest.", // BTree for NuCache + "DataAnnotationsExtensions,", + "DataAnnotationsExtensions.", + "Dynamic,", + "Examine,", + "Examine.", + "HtmlAgilityPack,", + "HtmlAgilityPack.", + "HtmlDiff,", + "ICSharpCode.", + "Iesi.Collections,", // used by NHibernate + "LightInject.", // DI + "LightInject,", + "Lucene.", + "Markdown,", + "Microsoft.", + "MiniProfiler,", + "Moq,", + "MySql.", + "NHibernate,", + "NHibernate.", + "Newtonsoft.", + "NPoco,", + "NuGet.", + "RouteDebugger,", + "Semver.", + "Serilog.", + "Serilog,", + "ServiceStack.", + "SqlCE4Umbraco,", + "Superpower,", // used by Serilog + "System.", + "TidyNet,", + "TidyNet.", + "WebDriver,", + "itextsharp,", + "mscorlib,", + "nunit.framework,", + }; /// /// Finds any classes derived from the type T that contain the attribute TAttribute diff --git a/src/Umbraco.Core/Composing/TypeLoader.cs b/src/Umbraco.Core/Composing/TypeLoader.cs index 304638e017..f79c288e91 100644 --- a/src/Umbraco.Core/Composing/TypeLoader.cs +++ b/src/Umbraco.Core/Composing/TypeLoader.cs @@ -520,6 +520,8 @@ namespace Umbraco.Core.Composing // if not caching, or not IDiscoverable, directly get types if (cache == false || typeof(IDiscoverable).IsAssignableFrom(typeof(T)) == false) { + _logger.Logger.Debug("Running a full, non-cached, scan for type {TypeName} (slow).", typeof(T).FullName); + return GetTypesInternal( typeof (T), null, () => TypeFinder.FindClassesOfType(specificAssemblies ?? AssembliesToScan), @@ -559,6 +561,8 @@ namespace Umbraco.Core.Composing // if not caching, or not IDiscoverable, directly get types if (cache == false || typeof(IDiscoverable).IsAssignableFrom(typeof(T)) == false) { + _logger.Logger.Debug("Running a full, non-cached, scan for type {TypeName} / attribute {AttributeName} (slow).", typeof(T).FullName, typeof(TAttribute).FullName); + return GetTypesInternal( typeof (T), typeof (TAttribute), () => TypeFinder.FindClassesOfTypeWithAttribute(specificAssemblies ?? AssembliesToScan), @@ -595,6 +599,11 @@ namespace Umbraco.Core.Composing // do not cache anything from specific assemblies cache &= specificAssemblies == null; + if (cache == false) + { + _logger.Logger.Debug("Running a full, non-cached, scan for types / attribute {AttributeName} (slow).", typeof(TAttribute).FullName); + } + return GetTypesInternal( typeof (object), typeof (TAttribute), () => TypeFinder.FindClassesWithAttribute(specificAssemblies ?? AssembliesToScan), diff --git a/src/Umbraco.Web/LightInjectExtensions.cs b/src/Umbraco.Web/LightInjectExtensions.cs index 580dc4117d..7ea55587e0 100644 --- a/src/Umbraco.Web/LightInjectExtensions.cs +++ b/src/Umbraco.Web/LightInjectExtensions.cs @@ -1,49 +1,82 @@ -using System.Reflection; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Reflection; using System.Web.Http.Controllers; using System.Web.Mvc; using LightInject; -using Umbraco.Core; using Umbraco.Core.Composing; +using Umbraco.Web.Mvc; +using Umbraco.Web.WebApi; namespace Umbraco.Web { internal static class LightInjectExtensions { /// - /// Registers all IControllers using the TypeLoader for scanning and caching found instances for the calling assembly + /// Registers Umbraco controllers. /// - /// - /// - /// - public static void RegisterMvcControllers(this IServiceRegistry container, TypeLoader typeLoader, Assembly assembly) + public static void RegisterUmbracoControllers(this IServiceRegistry container, TypeLoader typeLoader, Assembly umbracoWebAssembly) { - //TODO: We've already scanned for UmbracoApiControllers and SurfaceControllers - should we scan again - // for all controllers? Seems like we should just do this once and then filter. That said here we are - // only scanning our own single assembly. Hrm. + // notes + // + // We scan and auto-registers: + // - every IController and IHttpController that *we* have in Umbraco.Web + // - PluginController and UmbracoApiController in every assembly + // + // We do NOT scan: + // - any IController or IHttpController (anything not PluginController nor UmbracoApiController), outside of Umbraco.Web + // which means that users HAVE to explicitly register their own non-Umbraco controllers + // + // This is because we try to achieve a balance between "simple" and "fast. Scanning for PluginController or + // UmbracoApiController is fast-ish because they both are IDiscoverable. Scanning for IController or IHttpController + // is a full, non-cached scan = expensive, we do it only for 1 assembly. + // + // TODO + // find a way to scan for IController *and* IHttpController in one single pass + // or, actually register them manually so don't require a full scan for these + // 5 are IController but not PluginController + // Umbraco.Web.Mvc.RenderMvcController + // Umbraco.Web.Install.Controllers.InstallController + // Umbraco.Web.Macros.PartialViewMacroController + // Umbraco.Web.Editors.PreviewController + // Umbraco.Web.Editors.BackOfficeController + // 9 are IHttpController but not UmbracoApiController + // Umbraco.Web.Controllers.UmbProfileController + // Umbraco.Web.Controllers.UmbLoginStatusController + // Umbraco.Web.Controllers.UmbRegisterController + // Umbraco.Web.Controllers.UmbLoginController + // Umbraco.Web.Mvc.RenderMvcController + // Umbraco.Web.Install.Controllers.InstallController + // Umbraco.Web.Macros.PartialViewMacroController + // Umbraco.Web.Editors.PreviewController + // Umbraco.Web.Editors.BackOfficeController - container.RegisterControllers(typeLoader, assembly); + // scan and register every IController in Umbraco.Web + var umbracoWebControllers = typeLoader.GetTypes(specificAssemblies: new[] { umbracoWebAssembly }); + //foreach (var controller in umbracoWebControllers.Where(x => !typeof(PluginController).IsAssignableFrom(x))) + // Current.Logger.Debug(typeof(LightInjectExtensions), "IController NOT PluginController: " + controller.FullName); + container.RegisterControllers(umbracoWebControllers); + + // scan and register every PluginController in everything (PluginController is IDiscoverable and IController) + var nonUmbracoWebPluginController = typeLoader.GetTypes().Where(x => x.Assembly != umbracoWebAssembly); + container.RegisterControllers(nonUmbracoWebPluginController); + + // scan and register every IHttpController in Umbraco.Web + var umbracoWebHttpControllers = typeLoader.GetTypes(specificAssemblies: new[] { umbracoWebAssembly }); + //foreach (var controller in umbracoWebControllers.Where(x => !typeof(UmbracoApiController).IsAssignableFrom(x))) + // Current.Logger.Debug(typeof(LightInjectExtensions), "IHttpController NOT UmbracoApiController: " + controller.FullName); + container.RegisterControllers(umbracoWebHttpControllers); + + // scan and register every UmbracoApiController in everything (UmbracoApiController is IDiscoverable and IHttpController) + var nonUmbracoWebApiControllers = typeLoader.GetTypes().Where(x => x.Assembly != umbracoWebAssembly); + container.RegisterControllers(nonUmbracoWebApiControllers); } - /// - /// Registers all IHttpController using the TypeLoader for scanning and caching found instances for the calling assembly - /// - /// - /// - /// - public static void RegisterApiControllers(this IServiceRegistry container, TypeLoader typeLoader, Assembly assembly) + private static void RegisterControllers(this IServiceRegistry container, IEnumerable controllerTypes) { - //TODO: We've already scanned for UmbracoApiControllers and SurfaceControllers - should we scan again - // for all controllers? Seems like we should just do this once and then filter. That said here we are - // only scanning our own single assembly. Hrm. - - container.RegisterControllers(typeLoader, assembly); - } - - private static void RegisterControllers(this IServiceRegistry container, TypeLoader typeLoader, Assembly assembly) - { - var types = typeLoader.GetTypes(specificAssemblies: new[] { assembly }); - foreach (var type in types) - container.Register(type, new PerRequestLifeTime()); + foreach (var controllerType in controllerTypes) + container.Register(controllerType, new PerRequestLifeTime()); } } } diff --git a/src/Umbraco.Web/Runtime/WebRuntimeComponent.cs b/src/Umbraco.Web/Runtime/WebRuntimeComponent.cs index 1af24db636..bd09cbe918 100644 --- a/src/Umbraco.Web/Runtime/WebRuntimeComponent.cs +++ b/src/Umbraco.Web/Runtime/WebRuntimeComponent.cs @@ -122,9 +122,8 @@ namespace Umbraco.Web.Runtime composition.Container.EnableMvc(); // does container.EnablePerWebRequestScope() composition.Container.ScopeManagerProvider = smp; // reverts - we will do it last (in WebRuntime) - composition.Container.RegisterMvcControllers(typeLoader, GetType().Assembly); + composition.Container.RegisterUmbracoControllers(typeLoader, GetType().Assembly); composition.Container.EnableWebApi(GlobalConfiguration.Configuration); - composition.Container.RegisterApiControllers(typeLoader, GetType().Assembly); composition.Container.RegisterCollectionBuilder() .Add(() => typeLoader.GetTypes()); // fixme which searchable trees?! From f24a347b01fb577f096bb3c71566500ff3a653f7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Nov 2018 10:06:00 +0100 Subject: [PATCH 02/15] load in new slider + basic setup --- src/Umbraco.Web.UI.Client/gulpfile.js | 8 + src/Umbraco.Web.UI.Client/package.json | 1 + .../components/umbrangeslider.directive.js | 148 ++++++++++++++++++ .../slider/slider.controller.js | 80 +++++----- .../views/propertyeditors/slider/slider.html | 14 ++ 5 files changed, 210 insertions(+), 41 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js diff --git a/src/Umbraco.Web.UI.Client/gulpfile.js b/src/Umbraco.Web.UI.Client/gulpfile.js index b773025e7c..0dd816ae16 100644 --- a/src/Umbraco.Web.UI.Client/gulpfile.js +++ b/src/Umbraco.Web.UI.Client/gulpfile.js @@ -349,6 +349,14 @@ gulp.task('dependencies', function () { "src": ["./node_modules/ng-file-upload/dist/ng-file-upload.min.js"], "base": "./node_modules/ng-file-upload/dist" }, + { + "name": "nouislider", + "src": [ + "./node_modules/nouislider/distribute/nouislider.min.js", + "./node_modules/nouislider/distribute/nouislider.min.css" + ], + "base": "./node_modules/nouislider/distribute" + }, { "name": "signalr", "src": ["./node_modules/signalr/jquery.signalR.js"], diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 69c046624f..d847e14e59 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -33,6 +33,7 @@ "lazyload-js": "1.0.0", "moment": "2.10.6", "ng-file-upload": "12.2.13", + "nouislider": "12.1.0", "npm": "^6.4.1", "signalr": "2.3.0", "tinymce": "4.7.13", diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js new file mode 100644 index 0000000000..c8a22693e3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js @@ -0,0 +1,148 @@ +(function() { + 'use strict'; + + var umbRangeSlider = { + template: '
', + controller: UmbRangeSliderController, + bindings: { + ngModel: '<', + options: '<', + onSetup: '&?', + onUpdate: '&?', + onSlide: '&?', + onSet: '&?', + onChange: '&?', + onStart: '&?', + onEnd: '&?' + } + }; + + function UmbRangeSliderController($element, $timeout, $scope, assetsService) { + + const ctrl = this; + let sliderInstance = null; + + ctrl.$onInit = function() { + + // load css file for the date picker + assetsService.loadCss('lib/nouislider/nouislider.min.css', $scope); + + // load the js file for the date picker + assetsService.loadJs('lib/nouislider/nouislider.min.js', $scope).then(function () { + // init date picker + grabElementAndRun(); + }); + + }; + + function grabElementAndRun() { + $timeout(function() { + const element = $element.find('.umb-range-slider')[0]; + setSlider(element); + }, 0, true); + } + + function setSlider(element) { + + sliderInstance = element; + + const defaultOptions = { + "start": [0], + "step": 1, + "range": { + "min": [0], + "max": [100] + } + }; + const options = ctrl.options ? ctrl.options : defaultOptions; + + // create new slider + noUiSlider.create(sliderInstance, options); + + if (ctrl.onSetup) { + ctrl.onSetup({ + slider: sliderInstance + }); + } + + // If has ngModel set the date + if (ctrl.ngModel) { + sliderInstance.noUiSlider.set(ctrl.ngModel); + } + + // destroy the flatpickr instance when the dom element is removed + angular.element(element).on('$destroy', function() { + sliderInstance.noUiSlider.off(); + }); + + setUpCallbacks(); + + // Refresh the scope + $scope.$applyAsync(); + } + + function setUpCallbacks() { + if(sliderInstance) { + + // bind hook for update + if(ctrl.onUpdate) { + sliderInstance.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) { + $timeout(function() { + ctrl.onUpdate({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + }); + }); + } + + // bind hook for slide + if(ctrl.onSlide) { + sliderInstance.noUiSlider.on('slide', function (values, handle, unencoded, tap, positions) { + $timeout(function() { + ctrl.onSlide({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + }); + }); + } + + // bind hook for set + if(ctrl.onSet) { + sliderInstance.noUiSlider.on('set', function (values, handle, unencoded, tap, positions) { + $timeout(function() { + ctrl.onSet({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + }); + }); + } + + // bind hook for change + if(ctrl.onChange) { + sliderInstance.noUiSlider.on('change', function (values, handle, unencoded, tap, positions) { + $timeout(function() { + ctrl.onChange({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + }); + }); + } + + // bind hook for start + if(ctrl.onStart) { + sliderInstance.noUiSlider.on('start', function (values, handle, unencoded, tap, positions) { + $timeout(function() { + ctrl.onStart({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + }); + }); + } + + // bind hook for end + if(ctrl.onEnd) { + sliderInstance.noUiSlider.on('end', function (values, handle, unencoded, tap, positions) { + $timeout(function() { + ctrl.onEnd({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + }); + }); + } + + } + } + + } + + angular.module('umbraco.directives').component('umbRangeSlider', umbRangeSlider); + +})(); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js index 588e2d2b03..f991700dd7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js @@ -1,50 +1,18 @@ function sliderController($scope, $log, $element, assetsService, angularHelper) { - var sliderRef = null; + let sliderRef = null; /** configure some defaults on init */ function configureDefaults() { - - if (!$scope.model.config.orientation) { - $scope.model.config.orientation = "horizontal"; - } - if (!$scope.model.config.enableRange) { - $scope.model.config.enableRange = false; - } - else { - $scope.model.config.enableRange = Object.toBoolean($scope.model.config.enableRange); - } - if (!$scope.model.config.initVal1) { - $scope.model.config.initVal1 = 0; - } - else { - $scope.model.config.initVal1 = parseFloat($scope.model.config.initVal1); - } - if (!$scope.model.config.initVal2) { - $scope.model.config.initVal2 = 0; - } - else { - $scope.model.config.initVal2 = parseFloat($scope.model.config.initVal2); - } - if (!$scope.model.config.minVal) { - $scope.model.config.minVal = 0; - } - else { - $scope.model.config.minVal = parseFloat($scope.model.config.minVal); - } - if (!$scope.model.config.maxVal) { - $scope.model.config.maxVal = 100; - } - else { - $scope.model.config.maxVal = parseFloat($scope.model.config.maxVal); - } - if (!$scope.model.config.step) { - $scope.model.config.step = 1; - } - else { - $scope.model.config.step = parseFloat($scope.model.config.step); - } + $scope.model.config.orientation = $scope.model.config.orientation ? $scope.model.config.orientation : "horizontal"; + $scope.model.config.enableRange = $scope.model.config.enableRange ? Object.toBoolean($scope.model.config.enableRange) : false; + $scope.model.config.initVal1 = $scope.model.config.initVal1 ? parseFloat($scope.model.config.initVal1) : 0; + $scope.model.config.initVal2 = $scope.model.config.initVal2 ? parseFloat($scope.model.config.initVal2) : 0; + $scope.model.config.minVal = $scope.model.config.minVal ? parseFloat($scope.model.config.minVal) : 0; + $scope.model.config.maxVal = $scope.model.config.maxVal ? parseFloat($scope.model.config.maxVal) : 100; + $scope.model.config.step = $scope.model.config.step ? parseFloat($scope.model.config.step) : 1; + if (!$scope.model.config.handle) { $scope.model.config.handle = "round"; @@ -209,10 +177,40 @@ } } + function setModelValue(values) { + $scope.model.value = values.toString(); + } + + $scope.setup = function(slider) { + sliderRef = slider; + }; + + $scope.update = function(values) { + setModelValue(values); + }; + function init() { configureDefaults(); + // format config to fit slider plugin + const start = $scope.model.config.enableRange ? [$scope.model.config.initVal1, $scope.model.config.initVal2] : [$scope.model.config.initVal1]; + const step = $scope.model.config.step; + const tooltips = $scope.model.config.enableRange ? [true, true] : [true]; + const min = $scope.model.config.minVal ? [$scope.model.config.minVal] : [$scope.model.config.minVal]; + const max = $scope.model.config.maxVal ? [$scope.model.config.maxVal] : [$scope.model.config.maxVal]; + + // setup default + $scope.sliderOptions = { + "start": start, + "step": step, + "tooltips": tooltips, + "range": { + "min": min, + "max": max + } + }; + //tell the assetsService to load the bootstrap slider //libs from the plugin folder assetsService diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html index 638ecead4b..4bbe6448ba 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html @@ -1,5 +1,19 @@ 
+ +
+ + +
+ +
Value
+ {{model.value}} +
config
+ 
{{model.config | json}}
From e54e1989babd64b2aa89d743d5ef52ca72763c99 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Nov 2018 10:52:48 +0100 Subject: [PATCH 03/15] format numbers to not have decimals --- .../src/views/propertyeditors/slider/slider.controller.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js index f991700dd7..442f35466e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js @@ -205,6 +205,14 @@ "start": start, "step": step, "tooltips": tooltips, + "format": { + to: function (value) { + return Math.round(value); + }, + from: function (value) { + return Math.round(value); + } + }, "range": { "min": min, "max": max From f4728e5b83231b9670779f762523523a3824192c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Nov 2018 11:18:23 +0100 Subject: [PATCH 04/15] add custom styling + add pips --- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../src/less/components/umb-range-slider.less | 39 +++++++++++++++++++ .../slider/slider.controller.js | 10 +++++ 3 files changed, 50 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index a3d5374491..faf8bb945b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -151,6 +151,7 @@ @import "components/umb-number-badge.less"; @import "components/umb-progress-circle.less"; @import "components/umb-stylesheet.less"; +@import "components/umb-range-slider.less"; @import "components/buttons/umb-button.less"; @import "components/buttons/umb-button-group.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less new file mode 100644 index 0000000000..1c21c5a148 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less @@ -0,0 +1,39 @@ + + +.umb-range-slider.noUi-target { + background: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + border-radius: 20px; + height: 10px; + border: none; +} + +.umb-range-slider .noUi-handle { + border-radius: 100px; + border: none; + box-shadow: none; + width: 20px !important; + height: 20px !important; + background-color: @turquoise; +} + +.umb-range-slider .noUi-handle::before { + display: none; +} + +.umb-range-slider .noUi-handle::after { + display: none; +} + +.umb-range-slider .noUi-handle { + right: -10px !important; // half the handle width +} + +.umb-range-slider .noUi-marker-large.noUi-marker-horizontal { + height: 10px; +} + +.umb-range-slider .noUi-marker.noUi-marker-horizontal { + width: 1px; +} + diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js index 442f35466e..e62e2e7e40 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js @@ -216,9 +216,19 @@ "range": { "min": min, "max": max + }, + "pips": { + mode: 'steps', + density: 100, + filter: filterPips } }; + function filterPips(value, type) { + // 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 From 6257416c4a3f3797c40ff6a396dcaed734fa8463 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Nov 2018 11:38:15 +0100 Subject: [PATCH 05/15] remove a bunch of slider prevalues. --- .../PropertyEditors/SliderConfiguration.cs | 36 ------------------- .../slider/handle.prevalues.html | 13 ------- .../slider/orientation.prevalues.html | 12 ------- .../slider/tooltip.prevalues.html | 13 ------- 4 files changed, 74 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/handle.prevalues.html delete mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/orientation.prevalues.html delete mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/tooltip.prevalues.html diff --git a/src/Umbraco.Core/PropertyEditors/SliderConfiguration.cs b/src/Umbraco.Core/PropertyEditors/SliderConfiguration.cs index b2bf99bdc6..55ca199121 100644 --- a/src/Umbraco.Core/PropertyEditors/SliderConfiguration.cs +++ b/src/Umbraco.Core/PropertyEditors/SliderConfiguration.cs @@ -8,9 +8,6 @@ [ConfigurationField("enableRange", "Enable range", "boolean")] public bool EnableRange { get; set; } - [ConfigurationField("orientation", "Orientation", "views/propertyeditors/slider/orientation.prevalues.html")] - public string Orientation { get; set; } - [ConfigurationField("initVal1", "Initial value", "number")] public int InitialValue { get; set; } @@ -25,38 +22,5 @@ [ConfigurationField("step", "Step increments", "number")] public int StepIncrements { get; set; } - - [ConfigurationField("precision", "Precision", "number", Description = "The number of digits shown after the decimal. Defaults to the number of digits after the decimal of step value.")] - public int Precision { get; set; } - - [ConfigurationField("handle", "Handle", "views/propertyeditors/slider/handle.prevalues.html", Description = "Handle shape. Default is 'round\'")] - public string Handle { get; set; } - - [ConfigurationField("tooltip", "Tooltip", "views/propertyeditors/slider/tooltip.prevalues.html", Description = "Whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always'")] - public string Tooltip { get; set; } - - [ConfigurationField("tooltipSplit", "Tooltip split", "boolean", Description = "If false show one tootip if true show two tooltips one for each handler")] - public bool TooltipSplit { get; set; } // fixme bool? - - [ConfigurationField("tooltipFormat", "Tooltip format", "textstring", Description = "The value wanted to be displayed in the tooltip. Use {0} and {1} for current values - {1} is only for range slider and if not using tooltip split.")] - public string TooltipFormat { get; set; } - - [ConfigurationField("tooltipPosition", "Tooltip position", "textstring", Description = "Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider.")] - public string TooltipPosition { get; set; } - - [ConfigurationField("reversed", "Reversed", "boolean", Description = "Whether or not the slider should be reversed")] - public bool Reversed { get; set; } // fixme bool? - - [ConfigurationField("ticks", "Ticks", "textstring", Description = "Comma-separated values. Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options.")] - public string Ticks { get; set; } - - [ConfigurationField("ticksPositions", "Ticks positions", "textstring", Description = "Comma-separated values. Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent.")] - public string TicksPositions { get; set; } - - [ConfigurationField("ticksLabels", "Ticks labels", "textstring", Description = "Comma-separated values. Defines the labels below the tick marks. Accepts HTML input.")] - public string TicksLabels { get; set; } - - [ConfigurationField("ticksSnapBounds", "Ticks snap bounds", "number", Description = "Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds.")] - public int TicksSnapBounds { get; set; } } } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/handle.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/handle.prevalues.html deleted file mode 100644 index 0821c5e757..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/handle.prevalues.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - - - - Required - - -
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/orientation.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/orientation.prevalues.html deleted file mode 100644 index 05fb6756d1..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/orientation.prevalues.html +++ /dev/null @@ -1,12 +0,0 @@ -
- - - - - Required - - -
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/tooltip.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/tooltip.prevalues.html deleted file mode 100644 index 415a39d3bd..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/tooltip.prevalues.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - - - - Required - - -
From e169de917da459506bcadfe6832d7acb32888eee Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Nov 2018 11:53:52 +0100 Subject: [PATCH 06/15] remove unused config --- .../slider/slider.controller.js | 85 ------------------- 1 file changed, 85 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js index e62e2e7e40..292ea888cd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js @@ -4,84 +4,12 @@ /** configure some defaults on init */ function configureDefaults() { - - $scope.model.config.orientation = $scope.model.config.orientation ? $scope.model.config.orientation : "horizontal"; $scope.model.config.enableRange = $scope.model.config.enableRange ? Object.toBoolean($scope.model.config.enableRange) : false; $scope.model.config.initVal1 = $scope.model.config.initVal1 ? parseFloat($scope.model.config.initVal1) : 0; $scope.model.config.initVal2 = $scope.model.config.initVal2 ? parseFloat($scope.model.config.initVal2) : 0; $scope.model.config.minVal = $scope.model.config.minVal ? parseFloat($scope.model.config.minVal) : 0; $scope.model.config.maxVal = $scope.model.config.maxVal ? parseFloat($scope.model.config.maxVal) : 100; $scope.model.config.step = $scope.model.config.step ? parseFloat($scope.model.config.step) : 1; - - - if (!$scope.model.config.handle) { - $scope.model.config.handle = "round"; - } - - if (!$scope.model.config.reversed) { - $scope.model.config.reversed = false; - } - else { - $scope.model.config.reversed = Object.toBoolean($scope.model.config.reversed); - } - - if (!$scope.model.config.tooltip) { - $scope.model.config.tooltip = "show"; - } - - if (!$scope.model.config.tooltipSplit) { - $scope.model.config.tooltipSplit = false; - } - else { - $scope.model.config.tooltipSplit = Object.toBoolean($scope.model.config.tooltipSplit); - } - - if ($scope.model.config.tooltipFormat) { - $scope.model.config.formatter = function (value) { - if (angular.isArray(value) && $scope.model.config.enableRange) { - return $scope.model.config.tooltipFormat.replace("{0}", value[0]).replace("{1}", value[1]); - } else { - return $scope.model.config.tooltipFormat.replace("{0}", value); - } - } - } - - if (!$scope.model.config.ticks) { - $scope.model.config.ticks = []; - } - else if (angular.isString($scope.model.config.ticks)) { - // returns comma-separated string to an array, e.g. [0, 100, 200, 300, 400] - $scope.model.config.ticks = _.map($scope.model.config.ticks.split(','), function (item) { - return parseInt(item.trim()); - }); - } - - if (!$scope.model.config.ticksPositions) { - $scope.model.config.ticksPositions = []; - } - else if (angular.isString($scope.model.config.ticksPositions)) { - // returns comma-separated string to an array, e.g. [0, 30, 60, 70, 90, 100] - $scope.model.config.ticksPositions = _.map($scope.model.config.ticksPositions.split(','), function (item) { - return parseInt(item.trim()); - }); - } - - if (!$scope.model.config.ticksLabels) { - $scope.model.config.ticksLabels = []; - } - else if (angular.isString($scope.model.config.ticksLabels)) { - // returns comma-separated string to an array, e.g. ['$0', '$100', '$200', '$300', '$400'] - $scope.model.config.ticksLabels = _.map($scope.model.config.ticksLabels.split(','), function (item) { - return item.trim(); - }); - } - - if (!$scope.model.config.ticksSnapBounds) { - $scope.model.config.ticksSnapBounds = 0; - } - else { - $scope.model.config.ticksSnapBounds = parseFloat($scope.model.config.ticksSnapBounds); - } } function getValueForSlider(val) { @@ -138,20 +66,7 @@ var slider = $element.find('.slider-item').bootstrapSlider({ max: $scope.model.config.maxVal, min: $scope.model.config.minVal, - orientation: $scope.model.config.orientation, - selection: $scope.model.config.reversed ? "after" : "before", step: $scope.model.config.step, - precision: $scope.model.config.precision, - tooltip: $scope.model.config.tooltip, - tooltip_split: $scope.model.config.tooltipSplit, - tooltip_position: $scope.model.config.tooltipPosition, - handle: $scope.model.config.handle, - reversed: $scope.model.config.reversed, - ticks: $scope.model.config.ticks, - ticks_positions: $scope.model.config.ticksPositions, - ticks_labels: $scope.model.config.ticksLabels, - ticks_snap_bounds: $scope.model.config.ticksSnapBounds, - formatter: $scope.model.config.formatter, range: $scope.model.config.enableRange, //set the slider val - we cannot do this with data- attributes when using ranges value: sliderVal From 16b57ac022765a703861a152eebbd8a446109844 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Nov 2018 13:46:47 +0100 Subject: [PATCH 07/15] remove bootstrap logic from slider controller --- .../slider/slider.controller.js | 127 ++---------------- .../views/propertyeditors/slider/slider.html | 13 +- 2 files changed, 17 insertions(+), 123 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js index 292ea888cd..c8813ee4c0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js @@ -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(); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html index 4bbe6448ba..c147b30b23 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html @@ -1,19 +1,12 @@ 
- - -
+
+ on-end="end(values)">
-
Value
- {{model.value}} -
config
- 
{{model.config | json}}
-
From d314361996d702ab997eb000766ae22012c8b7ab Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Nov 2018 14:28:51 +0100 Subject: [PATCH 08/15] delete bootstrap slider javascript and css files --- .../lib/slider/bootstrap-slider-custom.css | 79 - .../lib/slider/bootstrap-slider.css | 255 --- .../lib/slider/js/bootstrap-slider.js | 1553 ----------------- 3 files changed, 1887 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider-custom.css delete mode 100644 src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider.css delete mode 100644 src/Umbraco.Web.UI.Client/lib/slider/js/bootstrap-slider.js diff --git a/src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider-custom.css b/src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider-custom.css deleted file mode 100644 index e7a395d458..0000000000 --- a/src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider-custom.css +++ /dev/null @@ -1,79 +0,0 @@ -/* set default selection color */ -.slider-track .slider-selection { - background: #89cdef; -} - -/* custom styling for triangle */ -.slider.slider-horizontal .slider-tick.triangle, -.slider.slider-horizontal .slider-handle.triangle { - box-shadow: none; - border-width: 0 12px 15px 12px !important; - margin-left: -12px; - margin-top: -5px !important; -} - -.slider.slider-vertical .slider-tick.triangle, -.slider.slider-vertical .slider-handle.triangle { - box-shadow: none; - border-width: 12px 0 12px 15px !important; - margin-top: -12px; -} - -/* for custom handle remove box-shadow */ -.slider-track .slider-handle.custom { - box-shadow: none; - margin-left: -8px; -} - -/* for custom handle add text-shadow */ -.slider-track .slider-handle.custom::before { - text-shadow: 0 1px 2px rgba(0,0,0,.05); - color: #337ab7; - font-size: 26px; -} - -/* we make each tick a bit more clear */ -.slider .slider-tick { - background-image: -webkit-linear-gradient(top, #e6e6e6 0, #dedede 100%); - background-image: -o-linear-gradient(top, #e6e6e6 0, #dedede 100%); - background-image: linear-gradient(to bottom, #e6e6e6 0, #dedede 100%); -} - -.slider .slider-tick.in-selection { - background-image: -webkit-linear-gradient(top, #89cdef 0, #81bfde 100%); - background-image: -o-linear-gradient(top, #89cdef 0, #81bfde 100%); - background-image: linear-gradient(to bottom, #89cdef 0, #81bfde 100%); -} - -/* horizontal - triangle border-bottom color */ -.slider.slider-horizontal .slider-tick.triangle { - border-bottom-color: #dedede; -} -.slider.slider-horizontal .slider-handle.triangle { - border-bottom-color: #0480be; -} -.slider.slider-horizontal .slider-tick.triangle.in-selection { - border-bottom-color: #81bfde; -} - -/* vertical - triangle border-left color */ -.slider.slider-vertical .slider-tick.triangle { - border-left-color: #dedede; -} -.slider.slider-vertical .slider-handle.triangle { - border-left-color: #0480be; -} -.slider.slider-vertical .slider-tick.triangle.in-selection { - border-left-color: #81bfde; -} - -.slider.slider-horizontal { - width: 400px; - max-width: 100%; -} - -@media only screen and (max-width: 767px) { - .slider.slider-horizontal { - width: 100%; - } -} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider.css b/src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider.css deleted file mode 100644 index aa763b6bb6..0000000000 --- a/src/Umbraco.Web.UI.Client/lib/slider/bootstrap-slider.css +++ /dev/null @@ -1,255 +0,0 @@ -/*! ======================================================= - VERSION 5.2.6 -========================================================= */ -/*! ========================================================= - * bootstrap-slider.js - * - * Maintainers: - * Kyle Kemp - * - Twitter: @seiyria - * - Github: seiyria - * Rohit Kalkur - * - Twitter: @Rovolutionary - * - Github: rovolution - * - * ========================================================= - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================= */ -.slider { - display: inline-block; - vertical-align: middle; - position: relative; -} -.slider.slider-horizontal { - width: 210px; - height: 20px; -} -.slider.slider-horizontal .slider-track { - height: 10px; - width: 100%; - margin-top: -5px; - top: 50%; - left: 0; -} -.slider.slider-horizontal .slider-selection, -.slider.slider-horizontal .slider-track-low, -.slider.slider-horizontal .slider-track-high { - height: 100%; - top: 0; - bottom: 0; -} -.slider.slider-horizontal .slider-tick, -.slider.slider-horizontal .slider-handle { - margin-left: -10px; - margin-top: -5px; -} -.slider.slider-horizontal .slider-tick.triangle, -.slider.slider-horizontal .slider-handle.triangle { - border-width: 0 10px 10px 10px; - width: 0; - height: 0; - border-bottom-color: #0480be; - margin-top: 0; -} -.slider.slider-horizontal .slider-tick-label-container { - white-space: nowrap; - margin-top: 20px; -} -.slider.slider-horizontal .slider-tick-label-container .slider-tick-label { - padding-top: 4px; - display: inline-block; - text-align: center; -} -.slider.slider-vertical { - height: 210px; - width: 20px; -} -.slider.slider-vertical .slider-track { - width: 10px; - height: 100%; - margin-left: -5px; - left: 50%; - top: 0; -} -.slider.slider-vertical .slider-selection { - width: 100%; - left: 0; - top: 0; - bottom: 0; -} -.slider.slider-vertical .slider-track-low, -.slider.slider-vertical .slider-track-high { - width: 100%; - left: 0; - right: 0; -} -.slider.slider-vertical .slider-tick, -.slider.slider-vertical .slider-handle { - margin-left: -5px; - margin-top: -10px; -} -.slider.slider-vertical .slider-tick.triangle, -.slider.slider-vertical .slider-handle.triangle { - border-width: 10px 0 10px 10px; - width: 1px; - height: 1px; - border-left-color: #0480be; - margin-left: 0; -} -.slider.slider-vertical .slider-tick-label-container { - white-space: nowrap; -} -.slider.slider-vertical .slider-tick-label-container .slider-tick-label { - padding-left: 4px; -} -.slider.slider-disabled .slider-handle { - background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); - background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); - background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0); -} -.slider.slider-disabled .slider-track { - background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); - background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); - background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0); - cursor: not-allowed; -} -.slider input { - display: none; -} -.slider .tooltip.top { - margin-top: -36px; -} -.slider .tooltip-inner { - white-space: nowrap; -} -.slider .hide { - display: none; -} -.slider-track { - position: absolute; - cursor: pointer; - background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%); - background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%); - background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - border-radius: 4px; -} -.slider-selection { - position: absolute; - background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); - background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); - background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - border-radius: 4px; -} -.slider-selection.tick-slider-selection { - background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); - background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); - background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); -} -.slider-track-low, -.slider-track-high { - position: absolute; - background: transparent; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - border-radius: 4px; -} -.slider-handle { - position: absolute; - width: 20px; - height: 20px; - background-color: #337ab7; - background-image: -webkit-linear-gradient(top, #149bdf 0%, #0480be 100%); - background-image: -o-linear-gradient(top, #149bdf 0%, #0480be 100%); - background-image: linear-gradient(to bottom, #149bdf 0%, #0480be 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); - filter: none; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - border: 0px solid transparent; -} -.slider-handle.round { - border-radius: 50%; -} -.slider-handle.triangle { - background: transparent none; -} -.slider-handle.custom { - background: transparent none; -} -.slider-handle.custom::before { - line-height: 20px; - font-size: 20px; - content: '\2605'; - color: #726204; -} -.slider-tick { - position: absolute; - width: 20px; - height: 20px; - background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); - background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); - background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - filter: none; - opacity: 0.8; - border: 0px solid transparent; -} -.slider-tick.round { - border-radius: 50%; -} -.slider-tick.triangle { - background: transparent none; -} -.slider-tick.custom { - background: transparent none; -} -.slider-tick.custom::before { - line-height: 20px; - font-size: 20px; - content: '\2605'; - color: #726204; -} -.slider-tick.in-selection { - background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%); - background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%); - background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0); - opacity: 1; -} diff --git a/src/Umbraco.Web.UI.Client/lib/slider/js/bootstrap-slider.js b/src/Umbraco.Web.UI.Client/lib/slider/js/bootstrap-slider.js deleted file mode 100644 index 3ae97f4fd6..0000000000 --- a/src/Umbraco.Web.UI.Client/lib/slider/js/bootstrap-slider.js +++ /dev/null @@ -1,1553 +0,0 @@ -/*! ======================================================= - VERSION 5.2.6 -========================================================= */ -/*! ========================================================= - * bootstrap-slider.js - * - * Maintainers: - * Kyle Kemp - * - Twitter: @seiyria - * - Github: seiyria - * Rohit Kalkur - * - Twitter: @Rovolutionary - * - Github: rovolution - * - * ========================================================= - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================= */ - - -/** - * Bridget makes jQuery widgets - * v1.0.1 - * MIT license - */ - -(function(root, factory) { - if(typeof define === "function" && define.amd) { - define(["jquery"], factory); - } - else if(typeof module === "object" && module.exports) { - var jQuery; - try { - jQuery = require("jquery"); - } - catch (err) { - jQuery = null; - } - module.exports = factory(jQuery); - } - else { - root.Slider = factory(root.jQuery); - } -}(this, function($) { - // Reference to Slider constructor - var Slider; - - - (function( $ ) { - - 'use strict'; - - // -------------------------- utils -------------------------- // - - var slice = Array.prototype.slice; - - function noop() {} - - // -------------------------- definition -------------------------- // - - function defineBridget( $ ) { - - // bail if no jQuery - if ( !$ ) { - return; - } - - // -------------------------- addOptionMethod -------------------------- // - - /** - * adds option method -> $().plugin('option', {...}) - * @param {Function} PluginClass - constructor class - */ - function addOptionMethod( PluginClass ) { - // don't overwrite original option method - if ( PluginClass.prototype.option ) { - return; - } - - // option setter - PluginClass.prototype.option = function( opts ) { - // bail out if not an object - if ( !$.isPlainObject( opts ) ){ - return; - } - this.options = $.extend( true, this.options, opts ); - }; - } - - - // -------------------------- plugin bridge -------------------------- // - - // helper function for logging errors - // $.error breaks jQuery chaining - var logError = typeof console === 'undefined' ? noop : - function( message ) { - console.error( message ); - }; - - /** - * jQuery plugin bridge, access methods like $elem.plugin('method') - * @param {String} namespace - plugin name - * @param {Function} PluginClass - constructor class - */ - function bridge( namespace, PluginClass ) { - // add to jQuery fn namespace - $.fn[ namespace ] = function( options ) { - if ( typeof options === 'string' ) { - // call plugin method when first argument is a string - // get arguments for method - var args = slice.call( arguments, 1 ); - - for ( var i=0, len = this.length; i < len; i++ ) { - var elem = this[i]; - var instance = $.data( elem, namespace ); - if ( !instance ) { - logError( "cannot call methods on " + namespace + " prior to initialization; " + - "attempted to call '" + options + "'" ); - continue; - } - if ( !$.isFunction( instance[options] ) || options.charAt(0) === '_' ) { - logError( "no such method '" + options + "' for " + namespace + " instance" ); - continue; - } - - // trigger method with arguments - var returnValue = instance[ options ].apply( instance, args); - - // break look and return first value if provided - if ( returnValue !== undefined && returnValue !== instance) { - return returnValue; - } - } - // return this if no return value - return this; - } else { - var objects = this.map( function() { - var instance = $.data( this, namespace ); - if ( instance ) { - // apply options & init - instance.option( options ); - instance._init(); - } else { - // initialize new instance - instance = new PluginClass( this, options ); - $.data( this, namespace, instance ); - } - return $(this); - }); - - if(!objects || objects.length > 1) { - return objects; - } else { - return objects[0]; - } - } - }; - - } - - // -------------------------- bridget -------------------------- // - - /** - * converts a Prototypical class into a proper jQuery plugin - * the class must have a ._init method - * @param {String} namespace - plugin name, used in $().pluginName - * @param {Function} PluginClass - constructor class - */ - $.bridget = function( namespace, PluginClass ) { - addOptionMethod( PluginClass ); - bridge( namespace, PluginClass ); - }; - - return $.bridget; - - } - - // get jquery from browser global - defineBridget( $ ); - - })( $ ); - - - /************************************************* - - BOOTSTRAP-SLIDER SOURCE CODE - - **************************************************/ - - (function($) { - - var ErrorMsgs = { - formatInvalidInputErrorMsg : function(input) { - return "Invalid input value '" + input + "' passed in"; - }, - callingContextNotSliderInstance : "Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method" - }; - - var SliderScale = { - linear: { - toValue: function(percentage) { - var rawValue = percentage/100 * (this.options.max - this.options.min); - if (this.options.ticks_positions.length > 0) { - var minv, maxv, minp, maxp = 0; - for (var i = 0; i < this.options.ticks_positions.length; i++) { - if (percentage <= this.options.ticks_positions[i]) { - minv = (i > 0) ? this.options.ticks[i-1] : 0; - minp = (i > 0) ? this.options.ticks_positions[i-1] : 0; - maxv = this.options.ticks[i]; - maxp = this.options.ticks_positions[i]; - - break; - } - } - if (i > 0) { - var partialPercentage = (percentage - minp) / (maxp - minp); - rawValue = minv + partialPercentage * (maxv - minv); - } - } - - var value = this.options.min + Math.round(rawValue / this.options.step) * this.options.step; - if (value < this.options.min) { - return this.options.min; - } else if (value > this.options.max) { - return this.options.max; - } else { - return value; - } - }, - toPercentage: function(value) { - if (this.options.max === this.options.min) { - return 0; - } - - if (this.options.ticks_positions.length > 0) { - var minv, maxv, minp, maxp = 0; - for (var i = 0; i < this.options.ticks.length; i++) { - if (value <= this.options.ticks[i]) { - minv = (i > 0) ? this.options.ticks[i-1] : 0; - minp = (i > 0) ? this.options.ticks_positions[i-1] : 0; - maxv = this.options.ticks[i]; - maxp = this.options.ticks_positions[i]; - - break; - } - } - if (i > 0) { - var partialPercentage = (value - minv) / (maxv - minv); - return minp + partialPercentage * (maxp - minp); - } - } - - return 100 * (value - this.options.min) / (this.options.max - this.options.min); - } - }, - - logarithmic: { - /* Based on http://stackoverflow.com/questions/846221/logarithmic-slider */ - toValue: function(percentage) { - var min = (this.options.min === 0) ? 0 : Math.log(this.options.min); - var max = Math.log(this.options.max); - var value = Math.exp(min + (max - min) * percentage / 100); - value = this.options.min + Math.round((value - this.options.min) / this.options.step) * this.options.step; - /* Rounding to the nearest step could exceed the min or - * max, so clip to those values. */ - if (value < this.options.min) { - return this.options.min; - } else if (value > this.options.max) { - return this.options.max; - } else { - return value; - } - }, - toPercentage: function(value) { - if (this.options.max === this.options.min) { - return 0; - } else { - var max = Math.log(this.options.max); - var min = this.options.min === 0 ? 0 : Math.log(this.options.min); - var v = value === 0 ? 0 : Math.log(value); - return 100 * (v - min) / (max - min); - } - } - } - }; - - - /************************************************* - - CONSTRUCTOR - - **************************************************/ - Slider = function(element, options) { - createNewSlider.call(this, element, options); - return this; - }; - - function createNewSlider(element, options) { - - /* - The internal state object is used to store data about the current 'state' of slider. - - This includes values such as the `value`, `enabled`, etc... - */ - this._state = { - value: null, - enabled: null, - offset: null, - size: null, - percentage: null, - inDrag: false, - over: false - }; - - - if(typeof element === "string") { - this.element = document.querySelector(element); - } else if(element instanceof HTMLElement) { - this.element = element; - } - - /************************************************* - - Process Options - - **************************************************/ - options = options ? options : {}; - var optionTypes = Object.keys(this.defaultOptions); - - for(var i = 0; i < optionTypes.length; i++) { - var optName = optionTypes[i]; - - // First check if an option was passed in via the constructor - var val = options[optName]; - // If no data attrib, then check data atrributes - val = (typeof val !== 'undefined') ? val : getDataAttrib(this.element, optName); - // Finally, if nothing was specified, use the defaults - val = (val !== null) ? val : this.defaultOptions[optName]; - - // Set all options on the instance of the Slider - if(!this.options) { - this.options = {}; - } - this.options[optName] = val; - } - - /* - Validate `tooltip_position` against 'orientation` - - if `tooltip_position` is incompatible with orientation, swith it to a default compatible with specified `orientation` - -- default for "vertical" -> "right" - -- default for "horizontal" -> "left" - */ - if(this.options.orientation === "vertical" && (this.options.tooltip_position === "top" || this.options.tooltip_position === "bottom")) { - - this.options.tooltip_position = "right"; - - } - else if(this.options.orientation === "horizontal" && (this.options.tooltip_position === "left" || this.options.tooltip_position === "right")) { - - this.options.tooltip_position = "top"; - - } - - function getDataAttrib(element, optName) { - var dataName = "data-slider-" + optName.replace(/_/g, '-'); - var dataValString = element.getAttribute(dataName); - - try { - return JSON.parse(dataValString); - } - catch(err) { - return dataValString; - } - } - - /************************************************* - - Create Markup - - **************************************************/ - - var origWidth = this.element.style.width; - var updateSlider = false; - var parent = this.element.parentNode; - var sliderTrackSelection; - var sliderTrackLow, sliderTrackHigh; - var sliderMinHandle; - var sliderMaxHandle; - - if (this.sliderElem) { - updateSlider = true; - } else { - /* Create elements needed for slider */ - this.sliderElem = document.createElement("div"); - this.sliderElem.className = "slider"; - - /* Create slider track elements */ - var sliderTrack = document.createElement("div"); - sliderTrack.className = "slider-track"; - - sliderTrackLow = document.createElement("div"); - sliderTrackLow.className = "slider-track-low"; - - sliderTrackSelection = document.createElement("div"); - sliderTrackSelection.className = "slider-selection"; - - sliderTrackHigh = document.createElement("div"); - sliderTrackHigh.className = "slider-track-high"; - - sliderMinHandle = document.createElement("div"); - sliderMinHandle.className = "slider-handle min-slider-handle"; - - sliderMaxHandle = document.createElement("div"); - sliderMaxHandle.className = "slider-handle max-slider-handle"; - - sliderTrack.appendChild(sliderTrackLow); - sliderTrack.appendChild(sliderTrackSelection); - sliderTrack.appendChild(sliderTrackHigh); - - /* Create ticks */ - this.ticks = []; - if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) { - for (i = 0; i < this.options.ticks.length; i++) { - var tick = document.createElement('div'); - tick.className = 'slider-tick'; - - this.ticks.push(tick); - sliderTrack.appendChild(tick); - } - - sliderTrackSelection.className += " tick-slider-selection"; - } - - sliderTrack.appendChild(sliderMinHandle); - sliderTrack.appendChild(sliderMaxHandle); - - this.tickLabels = []; - if (Array.isArray(this.options.ticks_labels) && this.options.ticks_labels.length > 0) { - this.tickLabelContainer = document.createElement('div'); - this.tickLabelContainer.className = 'slider-tick-label-container'; - - for (i = 0; i < this.options.ticks_labels.length; i++) { - var label = document.createElement('div'); - var noTickPositionsSpecified = this.options.ticks_positions.length === 0; - var tickLabelsIndex = (this.options.reversed && noTickPositionsSpecified) ? (this.options.ticks_labels.length - (i + 1)) : i; - label.className = 'slider-tick-label'; - label.innerHTML = this.options.ticks_labels[tickLabelsIndex]; - - this.tickLabels.push(label); - this.tickLabelContainer.appendChild(label); - } - } - - - var createAndAppendTooltipSubElements = function(tooltipElem) { - var arrow = document.createElement("div"); - arrow.className = "tooltip-arrow"; - - var inner = document.createElement("div"); - inner.className = "tooltip-inner"; - - tooltipElem.appendChild(arrow); - tooltipElem.appendChild(inner); - - }; - - /* Create tooltip elements */ - var sliderTooltip = document.createElement("div"); - sliderTooltip.className = "tooltip tooltip-main"; - createAndAppendTooltipSubElements(sliderTooltip); - - var sliderTooltipMin = document.createElement("div"); - sliderTooltipMin.className = "tooltip tooltip-min"; - createAndAppendTooltipSubElements(sliderTooltipMin); - - var sliderTooltipMax = document.createElement("div"); - sliderTooltipMax.className = "tooltip tooltip-max"; - createAndAppendTooltipSubElements(sliderTooltipMax); - - - /* Append components to sliderElem */ - this.sliderElem.appendChild(sliderTrack); - this.sliderElem.appendChild(sliderTooltip); - this.sliderElem.appendChild(sliderTooltipMin); - this.sliderElem.appendChild(sliderTooltipMax); - - if (this.tickLabelContainer) { - this.sliderElem.appendChild(this.tickLabelContainer); - } - - /* Append slider element to parent container, right before the original element */ - parent.insertBefore(this.sliderElem, this.element); - - /* Hide original element */ - this.element.style.display = "none"; - } - /* If JQuery exists, cache JQ references */ - if($) { - this.$element = $(this.element); - this.$sliderElem = $(this.sliderElem); - } - - /************************************************* - - Setup - - **************************************************/ - this.eventToCallbackMap = {}; - this.sliderElem.id = this.options.id; - - this.touchCapable = 'ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch); - - this.tooltip = this.sliderElem.querySelector('.tooltip-main'); - this.tooltipInner = this.tooltip.querySelector('.tooltip-inner'); - - this.tooltip_min = this.sliderElem.querySelector('.tooltip-min'); - this.tooltipInner_min = this.tooltip_min.querySelector('.tooltip-inner'); - - this.tooltip_max = this.sliderElem.querySelector('.tooltip-max'); - this.tooltipInner_max= this.tooltip_max.querySelector('.tooltip-inner'); - - if (SliderScale[this.options.scale]) { - this.options.scale = SliderScale[this.options.scale]; - } - - if (updateSlider === true) { - // Reset classes - this._removeClass(this.sliderElem, 'slider-horizontal'); - this._removeClass(this.sliderElem, 'slider-vertical'); - this._removeClass(this.tooltip, 'hide'); - this._removeClass(this.tooltip_min, 'hide'); - this._removeClass(this.tooltip_max, 'hide'); - - // Undo existing inline styles for track - ["left", "top", "width", "height"].forEach(function(prop) { - this._removeProperty(this.trackLow, prop); - this._removeProperty(this.trackSelection, prop); - this._removeProperty(this.trackHigh, prop); - }, this); - - // Undo inline styles on handles - [this.handle1, this.handle2].forEach(function(handle) { - this._removeProperty(handle, 'left'); - this._removeProperty(handle, 'top'); - }, this); - - // Undo inline styles and classes on tooltips - [this.tooltip, this.tooltip_min, this.tooltip_max].forEach(function(tooltip) { - this._removeProperty(tooltip, 'left'); - this._removeProperty(tooltip, 'top'); - this._removeProperty(tooltip, 'margin-left'); - this._removeProperty(tooltip, 'margin-top'); - - this._removeClass(tooltip, 'right'); - this._removeClass(tooltip, 'top'); - }, this); - } - - if(this.options.orientation === 'vertical') { - this._addClass(this.sliderElem,'slider-vertical'); - this.stylePos = 'top'; - this.mousePos = 'pageY'; - this.sizePos = 'offsetHeight'; - } else { - this._addClass(this.sliderElem, 'slider-horizontal'); - this.sliderElem.style.width = origWidth; - this.options.orientation = 'horizontal'; - this.stylePos = 'left'; - this.mousePos = 'pageX'; - this.sizePos = 'offsetWidth'; - - } - this._setTooltipPosition(); - /* In case ticks are specified, overwrite the min and max bounds */ - if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) { - this.options.max = Math.max.apply(Math, this.options.ticks); - this.options.min = Math.min.apply(Math, this.options.ticks); - } - - if (Array.isArray(this.options.value)) { - this.options.range = true; - this._state.value = this.options.value; - } - else if (this.options.range) { - // User wants a range, but value is not an array - this._state.value = [this.options.value, this.options.max]; - } - else { - this._state.value = this.options.value; - } - - this.trackLow = sliderTrackLow || this.trackLow; - this.trackSelection = sliderTrackSelection || this.trackSelection; - this.trackHigh = sliderTrackHigh || this.trackHigh; - - if (this.options.selection === 'none') { - this._addClass(this.trackLow, 'hide'); - this._addClass(this.trackSelection, 'hide'); - this._addClass(this.trackHigh, 'hide'); - } - - this.handle1 = sliderMinHandle || this.handle1; - this.handle2 = sliderMaxHandle || this.handle2; - - if (updateSlider === true) { - // Reset classes - this._removeClass(this.handle1, 'round triangle'); - this._removeClass(this.handle2, 'round triangle hide'); - - for (i = 0; i < this.ticks.length; i++) { - this._removeClass(this.ticks[i], 'round triangle hide'); - } - } - - var availableHandleModifiers = ['round', 'triangle', 'custom']; - var isValidHandleType = availableHandleModifiers.indexOf(this.options.handle) !== -1; - if (isValidHandleType) { - this._addClass(this.handle1, this.options.handle); - this._addClass(this.handle2, this.options.handle); - - for (i = 0; i < this.ticks.length; i++) { - this._addClass(this.ticks[i], this.options.handle); - } - } - - this._state.offset = this._offset(this.sliderElem); - this._state.size = this.sliderElem[this.sizePos]; - this.setValue(this._state.value); - - /****************************************** - - Bind Event Listeners - - ******************************************/ - - // Bind keyboard handlers - this.handle1Keydown = this._keydown.bind(this, 0); - this.handle1.addEventListener("keydown", this.handle1Keydown, false); - - this.handle2Keydown = this._keydown.bind(this, 1); - this.handle2.addEventListener("keydown", this.handle2Keydown, false); - - this.mousedown = this._mousedown.bind(this); - if (this.touchCapable) { - // Bind touch handlers - this.sliderElem.addEventListener("touchstart", this.mousedown, false); - } - this.sliderElem.addEventListener("mousedown", this.mousedown, false); - - - // Bind tooltip-related handlers - if(this.options.tooltip === 'hide') { - this._addClass(this.tooltip, 'hide'); - this._addClass(this.tooltip_min, 'hide'); - this._addClass(this.tooltip_max, 'hide'); - } - else if(this.options.tooltip === 'always') { - this._showTooltip(); - this._alwaysShowTooltip = true; - } - else { - this.showTooltip = this._showTooltip.bind(this); - this.hideTooltip = this._hideTooltip.bind(this); - - this.sliderElem.addEventListener("mouseenter", this.showTooltip, false); - this.sliderElem.addEventListener("mouseleave", this.hideTooltip, false); - - this.handle1.addEventListener("focus", this.showTooltip, false); - this.handle1.addEventListener("blur", this.hideTooltip, false); - - this.handle2.addEventListener("focus", this.showTooltip, false); - this.handle2.addEventListener("blur", this.hideTooltip, false); - } - - if(this.options.enabled) { - this.enable(); - } else { - this.disable(); - } - } - - - - /************************************************* - - INSTANCE PROPERTIES/METHODS - - - Any methods bound to the prototype are considered - part of the plugin's `public` interface - - **************************************************/ - Slider.prototype = { - _init: function() {}, // NOTE: Must exist to support bridget - - constructor: Slider, - - defaultOptions: { - id: "", - min: 0, - max: 10, - step: 1, - precision: 0, - orientation: 'horizontal', - value: 5, - range: false, - selection: 'before', - tooltip: 'show', - tooltip_split: false, - handle: 'round', - reversed: false, - enabled: true, - formatter: function(val) { - if (Array.isArray(val)) { - return val[0] + " : " + val[1]; - } else { - return val; - } - }, - natural_arrow_keys: false, - ticks: [], - ticks_positions: [], - ticks_labels: [], - ticks_snap_bounds: 0, - scale: 'linear', - focus: false, - tooltip_position: null - }, - - getElement: function() { - return this.sliderElem; - }, - - getValue: function() { - if (this.options.range) { - return this._state.value; - } - else { - return this._state.value[0]; - } - }, - - setValue: function(val, triggerSlideEvent, triggerChangeEvent) { - if (!val) { - val = 0; - } - var oldValue = this.getValue(); - this._state.value = this._validateInputValue(val); - var applyPrecision = this._applyPrecision.bind(this); - - if (this.options.range) { - this._state.value[0] = applyPrecision(this._state.value[0]); - this._state.value[1] = applyPrecision(this._state.value[1]); - - this._state.value[0] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[0])); - this._state.value[1] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[1])); - } - else { - this._state.value = applyPrecision(this._state.value); - this._state.value = [ Math.max(this.options.min, Math.min(this.options.max, this._state.value))]; - this._addClass(this.handle2, 'hide'); - if (this.options.selection === 'after') { - this._state.value[1] = this.options.max; - } else { - this._state.value[1] = this.options.min; - } - } - - if (this.options.max > this.options.min) { - this._state.percentage = [ - this._toPercentage(this._state.value[0]), - this._toPercentage(this._state.value[1]), - this.options.step * 100 / (this.options.max - this.options.min) - ]; - } else { - this._state.percentage = [0, 0, 100]; - } - - this._layout(); - var newValue = this.options.range ? this._state.value : this._state.value[0]; - - if(triggerSlideEvent === true) { - this._trigger('slide', newValue); - } - if( (oldValue !== newValue) && (triggerChangeEvent === true) ) { - this._trigger('change', { - oldValue: oldValue, - newValue: newValue - }); - } - this._setDataVal(newValue); - - return this; - }, - - destroy: function(){ - // Remove event handlers on slider elements - this._removeSliderEventHandlers(); - - // Remove the slider from the DOM - this.sliderElem.parentNode.removeChild(this.sliderElem); - /* Show original element */ - this.element.style.display = ""; - - // Clear out custom event bindings - this._cleanUpEventCallbacksMap(); - - // Remove data values - this.element.removeAttribute("data"); - - // Remove JQuery handlers/data - if($) { - this._unbindJQueryEventHandlers(); - this.$element.removeData('slider'); - } - }, - - disable: function() { - this._state.enabled = false; - this.handle1.removeAttribute("tabindex"); - this.handle2.removeAttribute("tabindex"); - this._addClass(this.sliderElem, 'slider-disabled'); - this._trigger('slideDisabled'); - - return this; - }, - - enable: function() { - this._state.enabled = true; - this.handle1.setAttribute("tabindex", 0); - this.handle2.setAttribute("tabindex", 0); - this._removeClass(this.sliderElem, 'slider-disabled'); - this._trigger('slideEnabled'); - - return this; - }, - - toggle: function() { - if(this._state.enabled) { - this.disable(); - } else { - this.enable(); - } - return this; - }, - - isEnabled: function() { - return this._state.enabled; - }, - - on: function(evt, callback) { - this._bindNonQueryEventHandler(evt, callback); - return this; - }, - - off: function(evt, callback) { - if($) { - this.$element.off(evt, callback); - this.$sliderElem.off(evt, callback); - } else { - this._unbindNonQueryEventHandler(evt, callback); - } - }, - - getAttribute: function(attribute) { - if(attribute) { - return this.options[attribute]; - } else { - return this.options; - } - }, - - setAttribute: function(attribute, value) { - this.options[attribute] = value; - return this; - }, - - refresh: function() { - this._removeSliderEventHandlers(); - createNewSlider.call(this, this.element, this.options); - if($) { - // Bind new instance of slider to the element - $.data(this.element, 'slider', this); - } - return this; - }, - - relayout: function() { - this._layout(); - return this; - }, - - /******************************+ - - HELPERS - - - Any method that is not part of the public interface. - - Place it underneath this comment block and write its signature like so: - - _fnName : function() {...} - - ********************************/ - _removeSliderEventHandlers: function() { - // Remove keydown event listeners - this.handle1.removeEventListener("keydown", this.handle1Keydown, false); - this.handle2.removeEventListener("keydown", this.handle2Keydown, false); - - if (this.showTooltip) { - this.handle1.removeEventListener("focus", this.showTooltip, false); - this.handle2.removeEventListener("focus", this.showTooltip, false); - } - if (this.hideTooltip) { - this.handle1.removeEventListener("blur", this.hideTooltip, false); - this.handle2.removeEventListener("blur", this.hideTooltip, false); - } - - // Remove event listeners from sliderElem - if (this.showTooltip) { - this.sliderElem.removeEventListener("mouseenter", this.showTooltip, false); - } - if (this.hideTooltip) { - this.sliderElem.removeEventListener("mouseleave", this.hideTooltip, false); - } - this.sliderElem.removeEventListener("touchstart", this.mousedown, false); - this.sliderElem.removeEventListener("mousedown", this.mousedown, false); - }, - _bindNonQueryEventHandler: function(evt, callback) { - if(this.eventToCallbackMap[evt] === undefined) { - this.eventToCallbackMap[evt] = []; - } - this.eventToCallbackMap[evt].push(callback); - }, - _unbindNonQueryEventHandler: function(evt, callback) { - var callbacks = this.eventToCallbackMap[evt]; - if(callbacks !== undefined) { - for (var i = 0; i < callbacks.length; i++) { - if (callbacks[i] === callback) { - callbacks.splice(i, 1); - break; - } - } - } - }, - _cleanUpEventCallbacksMap: function() { - var eventNames = Object.keys(this.eventToCallbackMap); - for(var i = 0; i < eventNames.length; i++) { - var eventName = eventNames[i]; - this.eventToCallbackMap[eventName] = null; - } - }, - _showTooltip: function() { - if (this.options.tooltip_split === false ){ - this._addClass(this.tooltip, 'in'); - this.tooltip_min.style.display = 'none'; - this.tooltip_max.style.display = 'none'; - } else { - this._addClass(this.tooltip_min, 'in'); - this._addClass(this.tooltip_max, 'in'); - this.tooltip.style.display = 'none'; - } - this._state.over = true; - }, - _hideTooltip: function() { - if (this._state.inDrag === false && this.alwaysShowTooltip !== true) { - this._removeClass(this.tooltip, 'in'); - this._removeClass(this.tooltip_min, 'in'); - this._removeClass(this.tooltip_max, 'in'); - } - this._state.over = false; - }, - _layout: function() { - var positionPercentages; - - if(this.options.reversed) { - positionPercentages = [ 100 - this._state.percentage[0], this.options.range ? 100 - this._state.percentage[1] : this._state.percentage[1]]; - } - else { - positionPercentages = [ this._state.percentage[0], this._state.percentage[1] ]; - } - - this.handle1.style[this.stylePos] = positionPercentages[0]+'%'; - this.handle2.style[this.stylePos] = positionPercentages[1]+'%'; - - /* Position ticks and labels */ - if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) { - - var styleSize = this.options.orientation === 'vertical' ? 'height' : 'width'; - var styleMargin = this.options.orientation === 'vertical' ? 'marginTop' : 'marginLeft'; - var labelSize = this._state.size / (this.options.ticks.length - 1); - - if (this.tickLabelContainer) { - var extraMargin = 0; - if (this.options.ticks_positions.length === 0) { - if (this.options.orientation !== 'vertical') { - this.tickLabelContainer.style[styleMargin] = -labelSize/2 + 'px'; - } - - extraMargin = this.tickLabelContainer.offsetHeight; - } else { - /* Chidren are position absolute, calculate height by finding the max offsetHeight of a child */ - for (i = 0 ; i < this.tickLabelContainer.childNodes.length; i++) { - if (this.tickLabelContainer.childNodes[i].offsetHeight > extraMargin) { - extraMargin = this.tickLabelContainer.childNodes[i].offsetHeight; - } - } - } - if (this.options.orientation === 'horizontal') { - this.sliderElem.style.marginBottom = extraMargin + 'px'; - } - } - for (var i = 0; i < this.options.ticks.length; i++) { - - var percentage = this.options.ticks_positions[i] || this._toPercentage(this.options.ticks[i]); - - if (this.options.reversed) { - percentage = 100 - percentage; - } - - this.ticks[i].style[this.stylePos] = percentage + '%'; - - /* Set class labels to denote whether ticks are in the selection */ - this._removeClass(this.ticks[i], 'in-selection'); - if (!this.options.range) { - if (this.options.selection === 'after' && percentage >= positionPercentages[0]){ - this._addClass(this.ticks[i], 'in-selection'); - } else if (this.options.selection === 'before' && percentage <= positionPercentages[0]) { - this._addClass(this.ticks[i], 'in-selection'); - } - } else if (percentage >= positionPercentages[0] && percentage <= positionPercentages[1]) { - this._addClass(this.ticks[i], 'in-selection'); - } - - if (this.tickLabels[i]) { - this.tickLabels[i].style[styleSize] = labelSize + 'px'; - - if (this.options.orientation !== 'vertical' && this.options.ticks_positions[i] !== undefined) { - this.tickLabels[i].style.position = 'absolute'; - this.tickLabels[i].style[this.stylePos] = percentage + '%'; - this.tickLabels[i].style[styleMargin] = -labelSize/2 + 'px'; - } else if (this.options.orientation === 'vertical') { - this.tickLabels[i].style['marginLeft'] = this.sliderElem.offsetWidth + 'px'; - this.tickLabelContainer.style['marginTop'] = this.sliderElem.offsetWidth / 2 * -1 + 'px'; - } - } - } - } - - var formattedTooltipVal; - - if (this.options.range) { - formattedTooltipVal = this.options.formatter(this._state.value); - this._setText(this.tooltipInner, formattedTooltipVal); - this.tooltip.style[this.stylePos] = (positionPercentages[1] + positionPercentages[0])/2 + '%'; - - if (this.options.orientation === 'vertical') { - this._css(this.tooltip, 'margin-top', -this.tooltip.offsetHeight / 2 + 'px'); - } else { - this._css(this.tooltip, 'margin-left', -this.tooltip.offsetWidth / 2 + 'px'); - } - - if (this.options.orientation === 'vertical') { - this._css(this.tooltip, 'margin-top', -this.tooltip.offsetHeight / 2 + 'px'); - } else { - this._css(this.tooltip, 'margin-left', -this.tooltip.offsetWidth / 2 + 'px'); - } - - var innerTooltipMinText = this.options.formatter(this._state.value[0]); - this._setText(this.tooltipInner_min, innerTooltipMinText); - - var innerTooltipMaxText = this.options.formatter(this._state.value[1]); - this._setText(this.tooltipInner_max, innerTooltipMaxText); - - this.tooltip_min.style[this.stylePos] = positionPercentages[0] + '%'; - - if (this.options.orientation === 'vertical') { - this._css(this.tooltip_min, 'margin-top', -this.tooltip_min.offsetHeight / 2 + 'px'); - } else { - this._css(this.tooltip_min, 'margin-left', -this.tooltip_min.offsetWidth / 2 + 'px'); - } - - this.tooltip_max.style[this.stylePos] = positionPercentages[1] + '%'; - - if (this.options.orientation === 'vertical') { - this._css(this.tooltip_max, 'margin-top', -this.tooltip_max.offsetHeight / 2 + 'px'); - } else { - this._css(this.tooltip_max, 'margin-left', -this.tooltip_max.offsetWidth / 2 + 'px'); - } - } else { - formattedTooltipVal = this.options.formatter(this._state.value[0]); - this._setText(this.tooltipInner, formattedTooltipVal); - - this.tooltip.style[this.stylePos] = positionPercentages[0] + '%'; - if (this.options.orientation === 'vertical') { - this._css(this.tooltip, 'margin-top', -this.tooltip.offsetHeight / 2 + 'px'); - } else { - this._css(this.tooltip, 'margin-left', -this.tooltip.offsetWidth / 2 + 'px'); - } - } - - if (this.options.orientation === 'vertical') { - this.trackLow.style.top = '0'; - this.trackLow.style.height = Math.min(positionPercentages[0], positionPercentages[1]) +'%'; - - this.trackSelection.style.top = Math.min(positionPercentages[0], positionPercentages[1]) +'%'; - this.trackSelection.style.height = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%'; - - this.trackHigh.style.bottom = '0'; - this.trackHigh.style.height = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%'; - } - else { - this.trackLow.style.left = '0'; - this.trackLow.style.width = Math.min(positionPercentages[0], positionPercentages[1]) +'%'; - - this.trackSelection.style.left = Math.min(positionPercentages[0], positionPercentages[1]) +'%'; - this.trackSelection.style.width = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%'; - - this.trackHigh.style.right = '0'; - this.trackHigh.style.width = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%'; - - var offset_min = this.tooltip_min.getBoundingClientRect(); - var offset_max = this.tooltip_max.getBoundingClientRect(); - - if (offset_min.right > offset_max.left) { - this._removeClass(this.tooltip_max, 'top'); - this._addClass(this.tooltip_max, 'bottom'); - this.tooltip_max.style.top = 18 + 'px'; - } else { - this._removeClass(this.tooltip_max, 'bottom'); - this._addClass(this.tooltip_max, 'top'); - this.tooltip_max.style.top = this.tooltip_min.style.top; - } - } - }, - _removeProperty: function(element, prop) { - if (element.style.removeProperty) { - element.style.removeProperty(prop); - } else { - element.style.removeAttribute(prop); - } - }, - _mousedown: function(ev) { - if(!this._state.enabled) { - return false; - } - - this._state.offset = this._offset(this.sliderElem); - this._state.size = this.sliderElem[this.sizePos]; - - var percentage = this._getPercentage(ev); - - if (this.options.range) { - var diff1 = Math.abs(this._state.percentage[0] - percentage); - var diff2 = Math.abs(this._state.percentage[1] - percentage); - this._state.dragged = (diff1 < diff2) ? 0 : 1; - } else { - this._state.dragged = 0; - } - - this._state.percentage[this._state.dragged] = percentage; - this._layout(); - - if (this.touchCapable) { - document.removeEventListener("touchmove", this.mousemove, false); - document.removeEventListener("touchend", this.mouseup, false); - } - - if(this.mousemove){ - document.removeEventListener("mousemove", this.mousemove, false); - } - if(this.mouseup){ - document.removeEventListener("mouseup", this.mouseup, false); - } - - this.mousemove = this._mousemove.bind(this); - this.mouseup = this._mouseup.bind(this); - - if (this.touchCapable) { - // Touch: Bind touch events: - document.addEventListener("touchmove", this.mousemove, false); - document.addEventListener("touchend", this.mouseup, false); - } - // Bind mouse events: - document.addEventListener("mousemove", this.mousemove, false); - document.addEventListener("mouseup", this.mouseup, false); - - this._state.inDrag = true; - var newValue = this._calculateValue(); - - this._trigger('slideStart', newValue); - - this._setDataVal(newValue); - this.setValue(newValue, false, true); - - this._pauseEvent(ev); - - if (this.options.focus) { - this._triggerFocusOnHandle(this._state.dragged); - } - - return true; - }, - _triggerFocusOnHandle: function(handleIdx) { - if(handleIdx === 0) { - this.handle1.focus(); - } - if(handleIdx === 1) { - this.handle2.focus(); - } - }, - _keydown: function(handleIdx, ev) { - if(!this._state.enabled) { - return false; - } - - var dir; - switch (ev.keyCode) { - case 37: // left - case 40: // down - dir = -1; - break; - case 39: // right - case 38: // up - dir = 1; - break; - } - if (!dir) { - return; - } - - // use natural arrow keys instead of from min to max - if (this.options.natural_arrow_keys) { - var ifVerticalAndNotReversed = (this.options.orientation === 'vertical' && !this.options.reversed); - var ifHorizontalAndReversed = (this.options.orientation === 'horizontal' && this.options.reversed); - - if (ifVerticalAndNotReversed || ifHorizontalAndReversed) { - dir = -dir; - } - } - - var val = this._state.value[handleIdx] + dir * this.options.step; - if (this.options.range) { - val = [ (!handleIdx) ? val : this._state.value[0], - ( handleIdx) ? val : this._state.value[1]]; - } - - this._trigger('slideStart', val); - this._setDataVal(val); - this.setValue(val, true, true); - - this._setDataVal(val); - this._trigger('slideStop', val); - this._layout(); - - this._pauseEvent(ev); - - return false; - }, - _pauseEvent: function(ev) { - if(ev.stopPropagation) { - ev.stopPropagation(); - } - if(ev.preventDefault) { - ev.preventDefault(); - } - ev.cancelBubble=true; - ev.returnValue=false; - }, - _mousemove: function(ev) { - if(!this._state.enabled) { - return false; - } - - var percentage = this._getPercentage(ev); - this._adjustPercentageForRangeSliders(percentage); - this._state.percentage[this._state.dragged] = percentage; - this._layout(); - - var val = this._calculateValue(true); - this.setValue(val, true, true); - - return false; - }, - _adjustPercentageForRangeSliders: function(percentage) { - if (this.options.range) { - var precision = this._getNumDigitsAfterDecimalPlace(percentage); - precision = precision ? precision - 1 : 0; - var percentageWithAdjustedPrecision = this._applyToFixedAndParseFloat(percentage, precision); - if (this._state.dragged === 0 && this._applyToFixedAndParseFloat(this._state.percentage[1], precision) < percentageWithAdjustedPrecision) { - this._state.percentage[0] = this._state.percentage[1]; - this._state.dragged = 1; - } else if (this._state.dragged === 1 && this._applyToFixedAndParseFloat(this._state.percentage[0], precision) > percentageWithAdjustedPrecision) { - this._state.percentage[1] = this._state.percentage[0]; - this._state.dragged = 0; - } - } - }, - _mouseup: function() { - if(!this._state.enabled) { - return false; - } - if (this.touchCapable) { - // Touch: Unbind touch event handlers: - document.removeEventListener("touchmove", this.mousemove, false); - document.removeEventListener("touchend", this.mouseup, false); - } - // Unbind mouse event handlers: - document.removeEventListener("mousemove", this.mousemove, false); - document.removeEventListener("mouseup", this.mouseup, false); - - this._state.inDrag = false; - if (this._state.over === false) { - this._hideTooltip(); - } - var val = this._calculateValue(true); - - this._layout(); - this._setDataVal(val); - this._trigger('slideStop', val); - - return false; - }, - _calculateValue: function(snapToClosestTick) { - var val; - if (this.options.range) { - val = [this.options.min,this.options.max]; - if (this._state.percentage[0] !== 0){ - val[0] = this._toValue(this._state.percentage[0]); - val[0] = this._applyPrecision(val[0]); - } - if (this._state.percentage[1] !== 100){ - val[1] = this._toValue(this._state.percentage[1]); - val[1] = this._applyPrecision(val[1]); - } - } else { - val = this._toValue(this._state.percentage[0]); - val = parseFloat(val); - val = this._applyPrecision(val); - } - - if (snapToClosestTick) { - var min = [val, Infinity]; - for (var i = 0; i < this.options.ticks.length; i++) { - var diff = Math.abs(this.options.ticks[i] - val); - if (diff <= min[1]) { - min = [this.options.ticks[i], diff]; - } - } - if (min[1] <= this.options.ticks_snap_bounds) { - return min[0]; - } - } - - return val; - }, - _applyPrecision: function(val) { - var precision = this.options.precision || this._getNumDigitsAfterDecimalPlace(this.options.step); - return this._applyToFixedAndParseFloat(val, precision); - }, - _getNumDigitsAfterDecimalPlace: function(num) { - var match = (''+num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); - if (!match) { return 0; } - return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0)); - }, - _applyToFixedAndParseFloat: function(num, toFixedInput) { - var truncatedNum = num.toFixed(toFixedInput); - return parseFloat(truncatedNum); - }, - /* - Credits to Mike Samuel for the following method! - Source: http://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number - */ - _getPercentage: function(ev) { - if (this.touchCapable && (ev.type === 'touchstart' || ev.type === 'touchmove')) { - ev = ev.touches[0]; - } - - var eventPosition = ev[this.mousePos]; - var sliderOffset = this._state.offset[this.stylePos]; - var distanceToSlide = eventPosition - sliderOffset; - // Calculate what percent of the length the slider handle has slid - var percentage = (distanceToSlide / this._state.size) * 100; - percentage = Math.round(percentage / this._state.percentage[2]) * this._state.percentage[2]; - if (this.options.reversed) { - percentage = 100 - percentage; - } - - // Make sure the percent is within the bounds of the slider. - // 0% corresponds to the 'min' value of the slide - // 100% corresponds to the 'max' value of the slide - return Math.max(0, Math.min(100, percentage)); - }, - _validateInputValue: function(val) { - if (typeof val === 'number') { - return val; - } else if (Array.isArray(val)) { - this._validateArray(val); - return val; - } else { - throw new Error( ErrorMsgs.formatInvalidInputErrorMsg(val) ); - } - }, - _validateArray: function(val) { - for(var i = 0; i < val.length; i++) { - var input = val[i]; - if (typeof input !== 'number') { throw new Error( ErrorMsgs.formatInvalidInputErrorMsg(input) ); } - } - }, - _setDataVal: function(val) { - this.element.setAttribute('data-value', val); - this.element.setAttribute('value', val); - this.element.value = val; - }, - _trigger: function(evt, val) { - val = (val || val === 0) ? val : undefined; - - var callbackFnArray = this.eventToCallbackMap[evt]; - if(callbackFnArray && callbackFnArray.length) { - for(var i = 0; i < callbackFnArray.length; i++) { - var callbackFn = callbackFnArray[i]; - callbackFn(val); - } - } - - /* If JQuery exists, trigger JQuery events */ - if($) { - this._triggerJQueryEvent(evt, val); - } - }, - _triggerJQueryEvent: function(evt, val) { - var eventData = { - type: evt, - value: val - }; - this.$element.trigger(eventData); - this.$sliderElem.trigger(eventData); - }, - _unbindJQueryEventHandlers: function() { - this.$element.off(); - this.$sliderElem.off(); - }, - _setText: function(element, text) { - if(typeof element.innerText !== "undefined") { - element.innerText = text; - } else if(typeof element.textContent !== "undefined") { - element.textContent = text; - } - }, - _removeClass: function(element, classString) { - var classes = classString.split(" "); - var newClasses = element.className; - - for(var i = 0; i < classes.length; i++) { - var classTag = classes[i]; - var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)"); - newClasses = newClasses.replace(regex, " "); - } - - element.className = newClasses.trim(); - }, - _addClass: function(element, classString) { - var classes = classString.split(" "); - var newClasses = element.className; - - for(var i = 0; i < classes.length; i++) { - var classTag = classes[i]; - var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)"); - var ifClassExists = regex.test(newClasses); - - if(!ifClassExists) { - newClasses += " " + classTag; - } - } - - element.className = newClasses.trim(); - }, - _offsetLeft: function(obj){ - return obj.getBoundingClientRect().left; - }, - _offsetTop: function(obj){ - var offsetTop = obj.offsetTop; - while((obj = obj.offsetParent) && !isNaN(obj.offsetTop)){ - offsetTop += obj.offsetTop; - } - return offsetTop; - }, - _offset: function (obj) { - return { - left: this._offsetLeft(obj), - top: this._offsetTop(obj) - }; - }, - _css: function(elementRef, styleName, value) { - if ($) { - $.style(elementRef, styleName, value); - } else { - var style = styleName.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function (all, letter) { - return letter.toUpperCase(); - }); - elementRef.style[style] = value; - } - }, - _toValue: function(percentage) { - return this.options.scale.toValue.apply(this, [percentage]); - }, - _toPercentage: function(value) { - return this.options.scale.toPercentage.apply(this, [value]); - }, - _setTooltipPosition: function(){ - var tooltips = [this.tooltip, this.tooltip_min, this.tooltip_max]; - if (this.options.orientation === 'vertical'){ - var tooltipPos = this.options.tooltip_position || 'right'; - var oppositeSide = (tooltipPos === 'left') ? 'right' : 'left'; - tooltips.forEach(function(tooltip){ - this._addClass(tooltip, tooltipPos); - tooltip.style[oppositeSide] = '100%'; - }.bind(this)); - } else if(this.options.tooltip_position === 'bottom') { - tooltips.forEach(function(tooltip){ - this._addClass(tooltip, 'bottom'); - tooltip.style.top = 22 + 'px'; - }.bind(this)); - } else { - tooltips.forEach(function(tooltip){ - this._addClass(tooltip, 'top'); - tooltip.style.top = -this.tooltip.outerHeight - 14 + 'px'; - }.bind(this)); - } - } - }; - - /********************************* - - Attach to global namespace - - *********************************/ - if($) { - var namespace = $.fn.slider ? 'bootstrapSlider' : 'slider'; - $.bridget(namespace, Slider); - } - - })( $ ); - - return Slider; -})); From f8068801af229efdcf028e07b7a2eaa25d3ea61a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 26 Nov 2018 15:12:38 +0100 Subject: [PATCH 09/15] add docs --- .../components/umbrangeslider.directive.js | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js index c8a22693e3..c7b40da468 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js @@ -1,3 +1,62 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbRangeSlider +@restrict E +@scope + +@description +Added in Umbraco version 8.0 +This directive is a wrapper of the noUiSlider library. Use it to render a slider. +For extra details about options and events take a look here: https://refreshless.com/nouislider/ + +

Markup example

+
+	

+
+        
+        
+
+	

+
+ +

Controller example

+
+	(function () {
+		"use strict";
+
+		function Controller() {
+
+            var vm = this;
+
+            vm.value = [10];
+
+            vm.slideEnd = slideEnd;
+
+            function slideEnd(values) {
+            	// handle change
+            }
+
+        }
+
+		angular.module("umbraco").controller("My.Controller", Controller);
+
+	})();
+
+ +@param {object} ngModel (binding): Value for the slider. +@param {object} options (binding): Config object for the date picker. +@param {callback} onSetup (callback): onSetup gets triggered when the slider is initialized +@param {callback} onUpdate (callback): onUpdate fires every time the slider values are changed. +@param {callback} onSlide (callback): onSlide gets triggered when the handle is being dragged. +@param {callback} onSet (callback): onSet will trigger every time a slider stops changing. +@param {callback} onChange (callback): onChange fires when a user stops sliding, or when a slider value is changed by 'tap'. +@param {callback} onStart (callback): onStart fires when a handle is clicked (mousedown, or the equivalent touch events). +@param {callback} onEnd (callback): onEnd fires when a handle is released (mouseup etc), or when a slide is canceled due to other reasons. +**/ + + (function() { 'use strict'; From 4f7b9cd61aaa5625f32a7228bd79732a96d3c3c1 Mon Sep 17 00:00:00 2001 From: Robert Date: Tue, 27 Nov 2018 09:50:22 +0100 Subject: [PATCH 10/15] Update umbrangeslider.directive.js Updated comment --- .../common/directives/components/umbrangeslider.directive.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js index c7b40da468..0003658600 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js @@ -129,7 +129,7 @@ For extra details about options and events take a look here: https://refreshless sliderInstance.noUiSlider.set(ctrl.ngModel); } - // destroy the flatpickr instance when the dom element is removed + // destroy the slider instance when the dom element is removed angular.element(element).on('$destroy', function() { sliderInstance.noUiSlider.off(); }); @@ -204,4 +204,4 @@ For extra details about options and events take a look here: https://refreshless angular.module('umbraco.directives').component('umbRangeSlider', umbRangeSlider); -})(); \ No newline at end of file +})(); From c0f5158b030c797878c655d2a87a30a364c81444 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 27 Nov 2018 09:58:57 +0100 Subject: [PATCH 11/15] When a node is opened through a content picker don't allow editing doc type and template --- .../components/content/umbcontentnodeinfo.directive.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js index 78efc8f789..d2a429f813 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js @@ -1,7 +1,7 @@ (function () { 'use strict'; - function ContentNodeInfoDirective($timeout, $routeParams, logResource, eventsService, userService, localizationService, dateHelper, editorService, redirectUrlsResource) { + function ContentNodeInfoDirective($timeout, logResource, eventsService, userService, localizationService, dateHelper, editorService, redirectUrlsResource) { function link(scope, element, attrs, umbVariantContentCtrl) { @@ -17,10 +17,13 @@ function onInit() { + // if there are any infinite editors open we are in infinite editing + scope.isInfiniteMode = editorService.getNumberOfEditors() > 0 ? true : false; + userService.getCurrentUser().then(function(user){ // only allow change of media type if user has access to the settings sections angular.forEach(user.sections, function(section){ - if(section.alias === "settings") { + if(section.alias === "settings" && !scope.isInfiniteMode) { scope.allowChangeDocumentType = true; scope.allowChangeTemplate = true; } From e47566ca4ea36922b50ea1071f6cc46c5f5a90a0 Mon Sep 17 00:00:00 2001 From: Stephan Date: Tue, 27 Nov 2018 10:49:09 +0100 Subject: [PATCH 12/15] Fix build --- .../Persistence/Repositories/IDocumentBlueprintRepository.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Core/Persistence/Repositories/IDocumentBlueprintRepository.cs b/src/Umbraco.Core/Persistence/Repositories/IDocumentBlueprintRepository.cs index c52601d629..0148a882fd 100644 --- a/src/Umbraco.Core/Persistence/Repositories/IDocumentBlueprintRepository.cs +++ b/src/Umbraco.Core/Persistence/Repositories/IDocumentBlueprintRepository.cs @@ -1,5 +1,5 @@ namespace Umbraco.Core.Persistence.Repositories { - interface IDocumentBlueprintRepository : IDocumentRepository + public interface IDocumentBlueprintRepository : IDocumentRepository { } } From 80f9fed3f3bf91d686b5602340b1e31631de269f Mon Sep 17 00:00:00 2001 From: Jannik Anker Date: Mon, 26 Nov 2018 13:40:13 +0100 Subject: [PATCH 13/15] Pointed "unfinished tasks" link to Github Link points to open tasks with v8 label. Not sure if "known issues" link also has a Github equivalent? --- .github/V8_GETTING_STARTED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/V8_GETTING_STARTED.md b/.github/V8_GETTING_STARTED.md index 62b376b0e7..87ddbb166a 100644 --- a/.github/V8_GETTING_STARTED.md +++ b/.github/V8_GETTING_STARTED.md @@ -33,5 +33,5 @@ We recommend running the site with the Visual Studio since you'll be able to rem We are keeping track of [known issues and limitations here](http://issues.umbraco.org/issue/U4-11279). These line items will eventually be turned into actual tasks to be worked on. Feel free to help us keep this list updated if you find issues and even help fix some of these items. If there is a particular item you'd like to help fix please mention this on the task and we'll create a sub task for the item to continue discussion there. -There's [a list of tasks for v8 that haven't been completed](https://issues.umbraco.org/issues?q=&project=U4&tagValue=&release=8.0.0&issueType=&resolvedState=open&search=search). If you are interested in helping out with any of these please mention this on the task. This list will be constantly updated as we begin to document and design some of the other tasks that still need to get done. +There's [a list of tasks for v8 that haven't been completed](hhttps://github.com/umbraco/Umbraco-CMS/labels/release%2F8.0.0). If you are interested in helping out with any of these please mention this on the task. This list will be constantly updated as we begin to document and design some of the other tasks that still need to get done. From 8e423d9c75100bc978bde6d1af58d3ab8ceb4777 Mon Sep 17 00:00:00 2001 From: Kenn Jacobsen Date: Tue, 6 Nov 2018 15:56:30 +0100 Subject: [PATCH 14/15] Sort the dictionary items alphabetically --- src/Umbraco.Web/Editors/DictionaryController.cs | 8 +++++--- src/Umbraco.Web/Trees/DictionaryTreeController.cs | 7 +++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web/Editors/DictionaryController.cs b/src/Umbraco.Web/Editors/DictionaryController.cs index 7d846e68ec..cd3141c7b9 100644 --- a/src/Umbraco.Web/Editors/DictionaryController.cs +++ b/src/Umbraco.Web/Editors/DictionaryController.cs @@ -1,5 +1,6 @@ using System; using System.Collections.Generic; +using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; @@ -194,7 +195,7 @@ namespace Umbraco.Web.Editors const int level = 0; - foreach (var dictionaryItem in Services.LocalizationService.GetRootDictionaryItems()) + foreach (var dictionaryItem in Services.LocalizationService.GetRootDictionaryItems().OrderBy(ItemSort())) { var item = Mapper.Map(dictionaryItem); item.Level = 0; @@ -220,8 +221,7 @@ namespace Umbraco.Web.Editors /// private void GetChildItemsForList(IDictionaryItem dictionaryItem, int level, List list) { - foreach (var childItem in Services.LocalizationService.GetDictionaryItemChildren( - dictionaryItem.Key)) + foreach (var childItem in Services.LocalizationService.GetDictionaryItemChildren(dictionaryItem.Key).OrderBy(ItemSort())) { var item = Mapper.Map(childItem); item.Level = level; @@ -230,5 +230,7 @@ namespace Umbraco.Web.Editors GetChildItemsForList(childItem, level + 1, list); } } + + private Func ItemSort() => item => item.ItemKey; } } diff --git a/src/Umbraco.Web/Trees/DictionaryTreeController.cs b/src/Umbraco.Web/Trees/DictionaryTreeController.cs index d0a7fce3ad..cac2e7f435 100644 --- a/src/Umbraco.Web/Trees/DictionaryTreeController.cs +++ b/src/Umbraco.Web/Trees/DictionaryTreeController.cs @@ -2,6 +2,7 @@ using System.Linq; using System.Net.Http.Formatting; using Umbraco.Core; +using Umbraco.Core.Models; using Umbraco.Core.Services; using Umbraco.Web.Actions; @@ -52,10 +53,12 @@ namespace Umbraco.Web.Trees var nodes = new TreeNodeCollection(); + Func ItemSort() => item => item.ItemKey; + if (id == Constants.System.Root.ToInvariantString()) { nodes.AddRange( - Services.LocalizationService.GetRootDictionaryItems().Select( + Services.LocalizationService.GetRootDictionaryItems().OrderBy(ItemSort()).Select( x => CreateTreeNode( x.Id.ToInvariantString(), id, @@ -71,7 +74,7 @@ namespace Umbraco.Web.Trees if (parentDictionary == null) return nodes; - nodes.AddRange(Services.LocalizationService.GetDictionaryItemChildren(parentDictionary.Key).ToList().OrderByDescending(item => item.Key).Select( + nodes.AddRange(Services.LocalizationService.GetDictionaryItemChildren(parentDictionary.Key).ToList().OrderBy(ItemSort()).Select( x => CreateTreeNode( x.Id.ToInvariantString(), id, From d62de961a05dbe0b687b98b2d1d97d8a013ac917 Mon Sep 17 00:00:00 2001 From: Kenn Jacobsen Date: Tue, 27 Nov 2018 21:09:08 +0100 Subject: [PATCH 15/15] Add a minimum height to the query builder dropdowns --- .../src/less/components/umb-querybuilder.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less index 8ead992625..151415f0db 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less @@ -39,4 +39,8 @@ .umb-querybuilder .query-items > * { flex: 0 1 auto; margin: 5px; -} \ No newline at end of file +} + +.umb-querybuilder .query-items .btn { + min-height: 2rem; +}