Skip to content

Change editing of uploaded profile pictures to use mouse move/scroll #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Change editing of uploaded profile pictures to use mouse move/scroll #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bbb312a
Support panning uploaded images with mouse.
theurere Sep 18, 2014
fb74022
Support zooming upload image with mouse wheel.
theurere Sep 18, 2014
5274021
Add safety net so image does not dissapear outside of preview box.
theurere Nov 10, 2014
148cbd3
Add touch support for editing uploaded profile images.
theurere Dec 15, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions src/styles/components/_buddypictureupload.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
width: 200px;
background-color: $componentbg;
user-select: none;
z-index: 3;
&.imgData {
background-color: black;
.chooseUploadPicture {
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion static/css/main.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

204 changes: 164 additions & 40 deletions static/js/directives/buddypictureupload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.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
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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
Expand All @@ -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() {
$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width);
var makeImageLarger = function(pxMove) {
$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width, pxMove);
$scope.prevImage.style.height = calcHeight($scope.prevImage.style.width);
moveImageLeft(1);
moveImageUp(2);
$scope.dragImage.style.width = incrementPx($scope.dragImage.style.width, pxMove);
$scope.dragImage.style.height = calcHeight($scope.dragImage.style.width);
};
var makeImageSmaller = function() {
$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width);
var makeImageSmaller = function(pxMove) {
$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width, pxMove);
$scope.prevImage.style.height = calcHeight($scope.prevImage.style.width);
moveImageRight(1);
moveImageDown(2);
$scope.dragImage.style.width = decrementPx($scope.dragImage.style.width, pxMove);
$scope.dragImage.style.height = calcHeight($scope.dragImage.style.width);
};
var changeImage = function(evt) {
if (evt.data.intervalNum.num || !evt.data.action) {
clearInterval(evt.data.intervalNum.num);
evt.data.intervalNum.num = null;

// Give translation time to transform title text of [input=file] instances before bootstrap.file-input parses dom.
setTimeout(function() {
$('#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() {
evt.data.action();
}, 50);
makeImageSmaller(Math.abs(scalePx));
moveImageRight(Math.abs(scalePx/2));
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);
}
};

$element.find(".fa-long-arrow-up").on('mousedown', null, {intervalNum: intervalNum, action: moveImageDown}, changeImage);
$element.find(".fa-long-arrow-down").on('mousedown', null, {intervalNum: intervalNum, action: moveImageUp}, 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(".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);

$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 moveImage = function(event) {
movementX = startX - event.originalEvent.pageX;
movementY = startY - event.originalEvent.pageY;
if (!imageMoveabled()) {
return;
}
if (movementX < 0) {
moveImageRight(Math.abs(movementX));
} else {
moveImageLeft(movementX);
}
if (movementY > 0) {
moveImageUp(movementY);
} else {
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 {
Expand Down
15 changes: 1 addition & 14 deletions static/partials/buddypictureupload.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down