Merge 148cbd38ea into f992f50d49

src/styles/components/_buddypictureupload.scss

@@ -45,6 +45,7 @@
     width: 200px;
     background-color: $componentbg;
     user-select: none;
+    z-index: 3;
     &.imgData {
       background-color: black;
       .chooseUploadPicture {
@@ -69,6 +70,22 @@
     position: relative;
     top: 0px;
     left: 0px;
+    display: none;
+    &.previewUpload {
+      display: block;
+    }
+  }
+  .previewDrag {
+    position: absolute;
+    z-index: 2;
+    left: 0px;
+    top: 2px;
+    opacity: 0.2;
+    display: none;
+    border: 1px solid $bordercolor;
+    &.dragging {
+      display: block;
+    }
   }
   .imageUtilites {
     line-height: 30px;

static/css/main.min.css

@@ -1,4 +1,4 @@
-/*!
+/*!
  * Spreed WebRTC.
  * Copyright (C) 2013-2014 struktur AG
  *

static/js/directives/buddypictureupload.js

@@ -61,18 +61,19 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			var setUploadImageDimension = function(data) {
 				$scope.prevImage.onload = function() {
 					// clear old dimensions
-					this.style.cssText = null;
+					this.style.cssText = $scope.dragImage.style.cssText = null;
 					$scope.aspectRatio = this.width/this.height;
 					// get new dimensions
 					var dim = getAutoFitDimensions(this, {width: previewWidth, height: previewHeight});
-					this.style.width = dim.width + 'px';
+					this.style.width = $scope.dragImage.style.width = dim.width + 'px';
-					this.style.height = dim.height + 'px';
+					this.style.height = $scope.dragImage.style.height = dim.height + 'px';
-					this.style.top = '0px';
+					this.style.top = $scope.dragImage.style.top = '0px';
-					this.style.left = '0px';
+					this.style.left = $scope.dragImage.style.left = '0px';
+					this.style.cursor = "move";
 					completedUpload();
 					safeApply($scope);
 				};
-				$scope.prevImage.src = data;
+				$scope.prevImage.src = $scope.dragImage.src = data;
 			};
 
 			// Auto fit by smallest dimension
@@ -132,9 +133,10 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			var clearPicture = function() {
 				$(".file-input-name").empty();
 				$scope.imgData = null;
-				$scope.prevImage.src = "";
-				$scope.prevImage.style.cssText = null;
 				$scope.clearInput();
+				$scope.prevImage.src = $scope.dragImage.src = "";
+				$scope.prevImage.style.cssText = $scope.dragImage.style.cssText = null;
+				$scope.prevImage.style.cursor = "auto";
 			};
 
 			$scope.cancelPictureUpload = function() {
@@ -213,13 +215,17 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 
 		var link = function($scope, $element) {
 
-			$scope.prevImage = $element.find("img.preview")[0];
 			$scope.clearInput = function() {
 				$element.find("input[type=file]")[0].value = "";
 			};
 
 			// Bind change event of file upload form.
 			$element.find("input[type=file]").on("change", $scope.handlePictureUpload);
+			$scope.prevImage = $(".showUploadPicture .preview").get(0);
+			$scope.dragImage = $(".buddyPictureUpload .previewDrag").get(0);
+			$element.find("#uploadFile").on('change', $scope.handleUpload);
+			$scope.dragging = false;
+			$scope.gesture = false;
 
 			var intervalNum = {
 				num: null
@@ -244,54 +250,172 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			};
 			var moveImageUp = function(pxMove) {
 				$scope.prevImage.style.top = decrementPx($scope.prevImage.style.top, pxMove);
+				$scope.dragImage.style.top = decrementPx($scope.dragImage.style.top, pxMove);
 			};
 			var moveImageDown = function(pxMove) {
 				$scope.prevImage.style.top = incrementPx($scope.prevImage.style.top, pxMove);
+				$scope.dragImage.style.top = incrementPx($scope.dragImage.style.top, pxMove);
 			};
 			var moveImageLeft = function(pxMove) {
 				$scope.prevImage.style.left = decrementPx($scope.prevImage.style.left, pxMove);
+				$scope.dragImage.style.left = decrementPx($scope.dragImage.style.left, pxMove);
 			};
 			var moveImageRight = function(pxMove) {
 				$scope.prevImage.style.left = incrementPx($scope.prevImage.style.left, pxMove);
+				$scope.dragImage.style.left = incrementPx($scope.dragImage.style.left, pxMove);
 			};
-			var makeImageLarger = function() {
+			var makeImageLarger = function(pxMove) {
-				$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width);
+				$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width, pxMove);
 				$scope.prevImage.style.height = calcHeight($scope.prevImage.style.width);
-				moveImageLeft(1);
+				$scope.dragImage.style.width = incrementPx($scope.dragImage.style.width, pxMove);
-				moveImageUp(2);
+				$scope.dragImage.style.height = calcHeight($scope.dragImage.style.width);
 			};
-			var makeImageSmaller = function() {
+			var makeImageSmaller = function(pxMove) {
-				$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width);
+				$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width, pxMove);
 				$scope.prevImage.style.height = calcHeight($scope.prevImage.style.width);
-				moveImageRight(1);
+				$scope.dragImage.style.width = decrementPx($scope.dragImage.style.width, pxMove);
-				moveImageDown(2);
+				$scope.dragImage.style.height = calcHeight($scope.dragImage.style.width);
 			};
-			var changeImage = function(evt) {
+
-				if (evt.data.intervalNum.num || !evt.data.action) {
+			// Give translation time to transform title text of [input=file] instances before bootstrap.file-input parses dom.
-					clearInterval(evt.data.intervalNum.num);
+			setTimeout(function() {
-					evt.data.intervalNum.num = null;
+				$('#uploadFile').bootstrapFileInput();
+			}, 0);
+
+			var startX = null;
+			var startY = null;
+			var baseWidth = null;
+			var movementX = null;
+			var movementY = null;
+			var start = $.getStartEvent();
+			var end = $.getEndEvent() + ' click';
+			var move = $.getMoveEvent();
+			// Check for out of bounds values so image stays inside preview block.
+			var imageMoveabled = function(deltaY) {
+				var move = true;
+				var img = {width: getNumFromPx($scope.prevImage.style.width), height: getNumFromPx($scope.prevImage.style.height), left: getNumFromPx($scope.prevImage.style.left), top: getNumFromPx($scope.prevImage.style.top)};
+				if (deltaY > 0) {
+					if (img.width < 50 || img.height < 50) {
+						move = false;
+					} else if (img.height - Math.abs(img.top) < 50) {
+						move = false;
+					} else if (img.width - Math.abs(img.left) < 50) {
+						move = false;
+					}
+				}
+				if (img.top < 0 && img.height - Math.abs(img.top) < 50 && movementY > 0) {
+					move = false;
+				} else if (img.left > 150 && movementX < 0) {
+					move = false;
+				} else if (img.top > 150 && movementY < 0) {
+					move = false;
+				} else if (img.left < 0 && img.width - Math.abs(img.left) < 50 && movementX > 0) {
+					move = false;
+				}
+				return move;
+			};
+			var scaleImage = function(event) {
+				var scalePx = baseWidth * event.originalEvent.scale - $scope.prevImage.width;
+				if (!imageMoveabled()) {
+					return;
+				}
+				if (scalePx > 0) {
+					makeImageLarger(scalePx);
+					moveImageLeft(scalePx/2);
+					moveImageUp(scalePx/2);
 				} else {
-					evt.data.intervalNum.num = setInterval(function() {
+					makeImageSmaller(Math.abs(scalePx));
-						evt.data.action();
+					moveImageRight(Math.abs(scalePx/2));
-					}, 50);
+					moveImageDown(Math.abs(scalePx/2));
+				}
+			}
+			var zoomImage = function(event) {
+				var deltaY = event.originalEvent.deltaY;
+				if (!imageMoveabled(deltaY)) {
+					return;
+				}
+				if (deltaY < 0) {
+					makeImageLarger(Math.abs(deltaY));
+					moveImageLeft(Math.abs(deltaY/2));
+					moveImageUp(Math.abs(deltaY/2));
+				} else {
+					makeImageSmaller(deltaY);
+					moveImageRight(deltaY/2);
+					moveImageDown(deltaY/2);
 				}
 			};
-
+			var moveImage = function(event) {
-			$element.find(".fa-long-arrow-up").on('mousedown', null, {intervalNum: intervalNum, action: moveImageDown}, changeImage);
+				movementX = startX - event.originalEvent.pageX;
-			$element.find(".fa-long-arrow-down").on('mousedown', null, {intervalNum: intervalNum, action: moveImageUp}, changeImage);
+				movementY = startY - event.originalEvent.pageY;
-			$element.find(".fa-long-arrow-up").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
+				if (!imageMoveabled()) {
-			$element.find(".fa-long-arrow-down").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
+					return;
-
+				}
-			$element.find(".fa-long-arrow-left").on('mousedown', null, {intervalNum: intervalNum, action: moveImageLeft}, changeImage);
+				if (movementX < 0) {
-			$element.find(".fa-long-arrow-right").on('mousedown', null, {intervalNum: intervalNum, action: moveImageRight}, changeImage);
+					moveImageRight(Math.abs(movementX));
-			$element.find(".fa-long-arrow-left").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
+				} else {
-			$element.find(".fa-long-arrow-right").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
+					moveImageLeft(movementX);
-
+				}
-			$element.find(".fa-plus").on('mousedown', null, {intervalNum: intervalNum, action: makeImageLarger}, changeImage);
+				if (movementY > 0) {
-			$element.find(".fa-minus").on('mousedown', null, {intervalNum: intervalNum, action: makeImageSmaller}, changeImage);
+					moveImageUp(movementY);
-			$element.find(".fa-plus").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
+				} else {
-			$element.find(".fa-minus").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
+					moveImageDown(Math.abs(movementY));
-
+				}
+				//console.log('moveImage', 'movementX', movementX, 'movementY', movementY);
+				startX = event.originalEvent.pageX;
+				startY = event.originalEvent.pageY;
+			};
+			$($scope.prevImage).on('drag dragstart dragover dragenter dragend drop', function(event) {
+				event.preventDefault();
+			});
+			$($scope.prevImage).on('wheel', function(event) {
+				//console.log('wheel', 'deltaX', event.originalEvent.deltaX, 'deltaY', event.originalEvent.deltaY, 'deltaZ', event.originalEvent.deltaZ);
+				event.stopPropagation();
+				event.preventDefault();
+				zoomImage(event);
+			});
+			$($scope.prevImage).on('gesturestart', function(event) {
+				event.stopPropagation();
+				$scope.gesture = true;
+				baseWidth = $scope.prevImage.width;
+			});
+			$($scope.prevImage).on('gesturechange', function(event) {
+				event.stopPropagation();
+				scaleImage(event);
+			});
+			$($scope.prevImage).on('gestureend', function(event) {
+				event.stopPropagation();
+				$scope.gesture = false;
+			});
+			$($scope.prevImage).on(start, function(event) {
+				if ($scope.gesture) {
+					return;
+				}
+				event.stopPropagation();
+				startX = event.originalEvent.pageX;
+				startY = event.originalEvent.pageY;
+				$scope.$apply(function() {
+					$scope.dragging = !$scope.dragging;
+				});
+			});
+			$('#settings').on(end, function(event) {
+				if ($scope.gesture) {
+					return;
+				}
+				event.stopPropagation();
+				$scope.$apply(function() {
+					$scope.dragging = false;
+				});
+			});
+			$('#settings').on(move, function(event) {
+				if ($scope.gesture) {
+					return;
+				}
+				event.stopPropagation();
+				event.preventDefault();
+				if ($scope.dragging) {
+					moveImage(event);
+				}
+			});
 		};
 
 		return {

static/partials/buddypictureupload.html

@@ -4,22 +4,9 @@
 		<span class="loader" ng-if="upload.status !== 100 && upload.status !== 0">
 			<i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
 		</span>
-		<div class="imageUtilites">
-			<div class="moveHorizontal">
-				<i class="fa fa-long-arrow-left"></i>
-				<i class="fa fa-long-arrow-right"></i>
-			</div>
-			<div class="moveVertical">
-				<i class="fa fa-long-arrow-up"></i>
-				<i class="fa fa-long-arrow-down"></i>
-			</div>
-			<div class="resize">
-				<i class="fa fa-plus"></i>
-				<i class="fa fa-minus"></i>
-			</div>
-		</div>
 		<img class="preview" ng-class="{previewUpload: previewUpload}" />
 	</div>
+	<img class="previewDrag" ng-class="{dragging: dragging}" />
 	<div class="alert alert-warning" ng-if="error.read">{{_('The file couldn\'t be read.')}}<button type="button" class="close" ng-click="error.read = null"><span>&times;</span></button></div>
 	<div class="alert alert-warning" ng-if="error.image">{{_('The file is not an image.')}}<button type="button" class="close" ng-click="error.image = null"><span>&times;</span></button></div>
 	<div class="alert alert-warning" ng-if="error.size">{{_('The file is too large. Max. %d MB.', maxUploadMb)}}<button type="button" class="close" ng-click="error.size = null"><span>&times;</span></button></div>