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

v8: Update image cropper slider (#4487)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2019-04-26 14:12:57 +02:00
committed by Sebastiaan Janssen
parent 09617d9b50
commit 9b62269bde
3 changed files with 95 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagecrop.directive.js
View File

@@ -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);

34
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -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;

26
src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-crop.html
View File

@@ -6,14 +6,20 @@
</div>
</div>
<div class="crop-slider" ng-if="loaded">
<i class="icon-picture"></i>
<input
type="range"
min="{{dimensions.scale.min}}"
max="{{dimensions.scale.max}}"
step="0.001"
ng-model="dimensions.scale.current" />
<i class="icon-picture" style="font-size: 22px"></i>
</div>
<div class="crop-slider-wrapper" ng-if="loaded">
<i class="icon-picture"></i>
<div class="crop-slider">
<umb-range-slider
ng-model="sliderValue"
options="sliderOptions"
on-setup="setup(slider)"
on-slide="slide(values)"
on-change="change(values)">
</umb-range-slider>
</div>
<i class="icon-picture" style="font-size: 22px"></i>
</div>
</div>