pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Support panning uploaded images by moving with mouse.

pull/144/head
Evan Theurer 12 years ago
parent
27b362368d
commit
e28920d4e3
3 changed files with 88 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/styles/components/_buddypictureupload.scss
  2. 93
      static/js/directives/buddypictureupload.js
  3. 15
      static/partials/buddypictureupload.html

17
src/styles/components/_buddypictureupload.scss
Unescape View File

@ -45,6 +45,7 @@ @@ -45,6 +45,7 @@
width: 200px;
background-color: $componentbg;
user-select: none;
z-index: 3;
&.imgData {
background-color: black;
.chooseUploadPicture {
@ -69,6 +70,22 @@ @@ -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;

93
static/js/directives/buddypictureupload.js
Unescape View File

@ -59,18 +59,19 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -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 @@ -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 @@ -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 @@ -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 @@ -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);
}
});
};

15
static/partials/buddypictureupload.html
Unescape View File

@ -4,22 +4,9 @@ @@ -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>

Write Preview
Loading…
Cancel
Save