From 9b62269bdeb697ec1a5d371565aa270eeca16531 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Fri, 26 Apr 2019 14:12:57 +0200 Subject: [PATCH] v8: Update image cropper slider (#4487) --- .../imaging/umbimagecrop.directive.js | 89 +++++++++++++------ .../src/less/property-editors.less | 34 +++---- .../components/imaging/umb-image-crop.html | 26 +++--- 3 files changed, 95 insertions(+), 54 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagecrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagecrop.directive.js index 0eb0f506fc..1625986751 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagecrop.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagecrop.directive.js @@ -6,7 +6,7 @@ **/ angular.module("umbraco.directives") .directive('umbImageCrop', - function ($timeout, localizationService, cropperHelper, $log) { + function ($timeout, cropperHelper) { return { restrict: 'E', replace: true, @@ -21,6 +21,9 @@ angular.module("umbraco.directives") }, link: function(scope, element, attrs) { + + let sliderRef = null; + scope.width = 400; scope.height = 320; @@ -30,12 +33,56 @@ angular.module("umbraco.directives") viewport:{}, margin: 20, scale: { - min: 0.3, + min: 0, max: 3, current: 1 } - }; + }; + scope.sliderOptions = { + "start": scope.dimensions.scale.current, + "step": 0.001, + "tooltips": [false], + "format": { + to: function (value) { + return parseFloat(parseFloat(value).toFixed(3)); //Math.round(value); + }, + from: function (value) { + return parseFloat(parseFloat(value).toFixed(3)); //Math.round(value); + } + }, + "range": { + "min": scope.dimensions.scale.min, + "max": scope.dimensions.scale.max + } + }; + + scope.setup = function (slider) { + sliderRef = slider; + + // Set slider handle position + sliderRef.noUiSlider.set(scope.dimensions.scale.current); + + // Update slider range min/max + sliderRef.noUiSlider.updateOptions({ + "range": { + "min": scope.dimensions.scale.min, + "max": scope.dimensions.scale.max + } + }); + }; + + scope.slide = function (values) { + if (values) { + scope.dimensions.scale.current = parseFloat(values); + } + }; + + scope.change = function (values) { + if (values) { + scope.dimensions.scale.current = parseFloat(values); + } + }; //live rendering of viewport and image styles scope.style = function () { @@ -63,7 +110,6 @@ angular.module("umbraco.directives") constraints.top.min = scope.dimensions.margin + scope.dimensions.cropper.height - scope.dimensions.image.height; }; - var setDimensions = function(originalImage){ originalImage.width("auto"); originalImage.height("auto"); @@ -131,13 +177,11 @@ angular.module("umbraco.directives") scope.dimensions.scale.current = scope.dimensions.image.ratio; - //min max based on original width/height + // Update min and max based on original width/height scope.dimensions.scale.min = ratioCalculation.ratio; - scope.dimensions.scale.max = 2; + scope.dimensions.scale.max = 2; }; - - var validatePosition = function(left, top){ if(left > constraints.left.max) { @@ -191,8 +235,6 @@ angular.module("umbraco.directives") } }); - - var init = function(image){ scope.loaded = false; @@ -219,10 +261,10 @@ angular.module("umbraco.directives") }; - /// WATCHERS //// + // Watchers scope.$watchCollection('[width, height]', function(newValues, oldValues){ - //we have to reinit the whole thing if - //one of the external params changes + // We have to reinit the whole thing if + // one of the external params changes if(newValues !== oldValues){ setDimensions($image); setConstraints(); @@ -230,29 +272,18 @@ angular.module("umbraco.directives") }); var throttledResizing = _.throttle(function(){ - resizeImageToScale(scope.dimensions.scale.current); + resizeImageToScale(scope.dimensions.scale.current); calculateCropBox(); }, 15); - - //happens when we change the scale - scope.$watch("dimensions.scale.current", function(){ - if(scope.loaded){ + // Happens when we change the scale + scope.$watch("dimensions.scale.current", function (newValue, oldValue) { + if (scope.loaded) { throttledResizing(); } }); - //ie hack - if(window.navigator.userAgent.indexOf("MSIE ") >= 0){ - var ranger = element.find("input"); - ranger.on("change",function(){ - scope.$apply(function(){ - scope.dimensions.scale.current = ranger.val(); - }); - }); - } - - //// INIT ///// + // Init $image.on("load", function(){ $timeout(function(){ init($image); diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index c774570be7..12b9ecc464 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -567,7 +567,7 @@ text-align: center; } -.umb-cropper .crop-slider { +.umb-cropper .crop-slider-wrapper { padding: 10px; border-top: 1px solid @gray-10; margin-top: 10px; @@ -575,25 +575,28 @@ align-items: center; justify-content: center; flex-wrap: wrap; + @media (min-width: 769px) { padding: 10px 50px 10px 50px; } + + i { + color: @gray-3; + flex: 0 0 25px; + padding: 0 5px; + box-sizing: border-box; + + &:first-of-type { + text-align: right; + } + } + + .crop-slider { + padding: 50px 15px 40px 15px; + width: 66.6%; + } } -.umb-cropper .crop-slider i { - color: @gray-3; - flex: 0 0 25px; - padding: 0 5px; - box-sizing: border-box; -} - -.umb-cropper .crop-slider i:first-of-type { - text-align: right; -} - -.umb-cropper .crop-slider input { - flex: 0 1 auto; -} .umb-cropper-gravity .viewport, .umb-cropper-gravity, .umb-cropper-imageholder { display: inline-block; max-width: 100%; @@ -654,6 +657,7 @@ display: flex; justify-content: flex-end; padding: 10px; + position: relative; button { margin-left: 4px; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-crop.html b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-crop.html index 00d6d3ba44..8fba4d1e3c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-crop.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-crop.html @@ -6,14 +6,20 @@ -
- - - -
+
+ + +
+ + +
+ + +
+