From e28920d4e3210b0d14ede3908bc2ba7623b92b83 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 18 Sep 2014 13:37:26 +0200 Subject: [PATCH] Support panning uploaded images by moving with mouse. --- .../components/_buddypictureupload.scss | 17 ++++ static/js/directives/buddypictureupload.js | 93 ++++++++++++++----- static/partials/buddypictureupload.html | 15 +-- 3 files changed, 88 insertions(+), 37 deletions(-) diff --git a/src/styles/components/_buddypictureupload.scss b/src/styles/components/_buddypictureupload.scss index 568d0b4f..6e3ed593 100644 --- a/src/styles/components/_buddypictureupload.scss +++ b/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; diff --git a/static/js/directives/buddypictureupload.js b/static/js/directives/buddypictureupload.js index 8ab563dd..57fa83a0 100644 --- a/static/js/directives/buddypictureupload.js +++ b/static/js/directives/buddypictureupload.js @@ -59,18 +59,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.height = dim.height + 'px'; - this.style.top = '0px'; - this.style.left = '0px'; + this.style.width = $scope.dragImage.style.width = dim.width + 'px'; + this.style.height = $scope.dragImage.style.height = dim.height + 'px'; + this.style.top = $scope.dragImage.style.top = '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 @@ -130,8 +131,9 @@ 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.prevImage.src = $scope.dragImage.src = ""; + $scope.prevImage.style.cssText = $scope.dragImage.style.cssText = null; + $scope.prevImage.style.cursor = "auto"; }; $scope.cancelPictureUpload = function() { @@ -209,11 +211,12 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi }]; var link = function($scope, $element) { - - $scope.prevImage = $element.find("img.preview").get(0); - // 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; var intervalNum = { num: null @@ -238,15 +241,19 @@ 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() { $scope.prevImage.style.width = incrementPx($scope.prevImage.style.width); @@ -271,20 +278,60 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi } }; - $element.find(".fa-long-arrow-up").on('mousedown', null, {intervalNum: intervalNum, action: moveImageUp}, changeImage); - $element.find(".fa-long-arrow-down").on('mousedown', null, {intervalNum: intervalNum, action: moveImageDown}, changeImage); - $element.find(".fa-long-arrow-up").on('mouseup', null, {intervalNum: intervalNum}, changeImage); - $element.find(".fa-long-arrow-down").on('mouseup', null, {intervalNum: intervalNum}, changeImage); + $element.find("#larger").on('mousedown', null, {intervalNum: intervalNum, action: makeImageLarger}, changeImage); + $element.find("#smaller").on('mousedown', null, {intervalNum: intervalNum, action: makeImageSmaller}, changeImage); + $element.find("#larger").on('mouseup', null, {intervalNum: intervalNum}, changeImage); + $element.find("#smaller").on('mouseup', null, {intervalNum: intervalNum}, changeImage); - $element.find(".fa-long-arrow-left").on('mousedown', null, {intervalNum: intervalNum, action: moveImageLeft}, changeImage); - $element.find(".fa-long-arrow-right").on('mousedown', null, {intervalNum: intervalNum, action: moveImageRight}, changeImage); - $element.find(".fa-long-arrow-left").on('mouseup', null, {intervalNum: intervalNum}, changeImage); - $element.find(".fa-long-arrow-right").on('mouseup', null, {intervalNum: intervalNum}, changeImage); + // Give translation time to transform title text of [input=file] instances before bootstrap.file-input parses dom. + setTimeout(function() { + $('#uploadFile').bootstrapFileInput(); + }, 0); - $element.find(".fa-plus").on('mousedown', null, {intervalNum: intervalNum, action: makeImageLarger}, changeImage); - $element.find(".fa-minus").on('mousedown', null, {intervalNum: intervalNum, action: makeImageSmaller}, changeImage); - $element.find(".fa-plus").on('mouseup', null, {intervalNum: intervalNum}, changeImage); - $element.find(".fa-minus").on('mouseup', null, {intervalNum: intervalNum}, changeImage); + var startX = null; + var startY = null; + var moveImage = function(event) { + var movementX = startX - event.originalEvent.clientX; + if (movementX < 0) { + moveImageRight(Math.abs(movementX)); + } else { + moveImageLeft(movementX); + } + var movementY = startY - event.originalEvent.clientY; + if (movementY > 0) { + moveImageUp(movementY); + } else { + moveImageDown(Math.abs(movementY)); + } + //console.log('moveImage', 'movementX', movementX, 'movementY', movementY); + startX = event.originalEvent.clientX; + startY = event.originalEvent.clientY; + }; + $($scope.prevImage).on('drag dragstart dragover dragenter dragend drop', function(event) { + event.preventDefault(); + }); + $($scope.prevImage).on('mousedown', function(event) { + event.stopPropagation(); + startX = event.originalEvent.clientX; + startY = event.originalEvent.clientY; + $scope.$apply(function() { + $scope.dragging = !$scope.dragging; + }); + }); + $('#settings').on('click mouseup', function(event) { + console.log('settings click', event); + event.stopPropagation(); + $scope.$apply(function() { + $scope.dragging = false; + }); + }); + $('#settings').on('mousemove', function(event) { + event.stopPropagation(); + if ($scope.dragging) { + console.log('move mouse with mouse down', event); + moveImage(event); + } + }); }; diff --git a/static/partials/buddypictureupload.html b/static/partials/buddypictureupload.html index 97a750a5..c3a47633 100644 --- a/static/partials/buddypictureupload.html +++ b/static/partials/buddypictureupload.html @@ -4,22 +4,9 @@ -
-
- - -
-
- - -
-
- - -
-
+
{{_('The file couldn\'t be read.')}}
{{_('The file is not an image.')}}
{{_('The file is too large. Max. %d MB.', maxUploadMb)}}