Browse Source

Cleanup, make preview background black.

pull/96/head
Evan Theurer 12 years ago
parent
commit
85a53ceb58
  1. 1
      src/styles/components/_buddypictureupload.scss
  2. 37
      static/js/directives/buddypictureupload.js

1
src/styles/components/_buddypictureupload.scss

@ -31,6 +31,7 @@
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
width: 200px; width: 200px;
background-color: black;
} }
.preview { .preview {
position: relative; position: relative;

37
static/js/directives/buddypictureupload.js

@ -54,20 +54,6 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
img.src = data; img.src = data;
}; };
var handleImageDrag = function(evt) {
evt.preventDefault();
console.log('draggin image', evt.offsetX, evt.offsetY);
};
var handleImageDrop = function(evt) {
evt.preventDefault();
console.log('dropped image', evt);
};
$scope.addImageMoveHandlers = function() {
$scope.prevImage.addEventListener('dragover', handleImageDrag);
$scope.prevImage.addEventListener('drop', handleImageDrop);
};
$scope.reset = function() { $scope.reset = function() {
$scope.showUploadPicture = false; $scope.showUploadPicture = false;
$scope.previewUpload = false; $scope.previewUpload = false;
@ -75,7 +61,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
$scope.handleUpload = function(event) { $scope.handleUpload = function(event) {
var file = event.target.files[0]; var file = event.target.files[0];
if(!file) { if (!file) {
return; return;
} }
console.log('file', file); console.log('file', file);
@ -93,19 +79,19 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
}; };
var error = function(event) { var error = function(event) {
console.log('file error', event); console.log('file error', event);
if(event.target.error.name == 'NotReadableError') { if (event.target.error.name == 'NotReadableError') {
$scope.$apply(function(scope) { $scope.$apply(function(scope) {
scope.error.msg = "The file couldn't be read"; scope.error.msg = "The file couldn't be read";
}); });
} }
if(event.target.error.name == 'NotImage') { if (event.target.error.name == 'NotImage') {
$scope.$apply(function(scope) { $scope.$apply(function(scope) {
scope.error.msg = "The file is not an image."; scope.error.msg = "The file is not an image.";
}); });
} }
}; };
if(!file.type.match(/image/)) { if (!file.type.match(/image/)) {
error({target: {error: {name: 'NotImage'}}}); error({target: {error: {name: 'NotImage'}}});
} else { } else {
var reader = new FileReader(); var reader = new FileReader();
@ -123,7 +109,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
// Auto fit by smallest dimension // Auto fit by smallest dimension
var getAutoFitDimensions = function(from, to) { var getAutoFitDimensions = function(from, to) {
if(!from.width && !from.height && !to.width && !to.height) { if (!from.width && !from.height && !to.width && !to.height) {
return null; return null;
} }
var width = null; var width = null;
@ -136,12 +122,12 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
height = to.height; height = to.height;
width = to.height * (from.width/from.height); width = to.height * (from.width/from.height);
} }
return{width: width, height: height}; return {width: width, height: height};
}; };
// (image, canvas) -> object // (image, canvas) -> object
var getScaledDimensions = function(from, to) { var getScaledDimensions = function(from, to) {
if(!from.style.width && !from.style.height && !to.width && !to.height) { if (!from.style.width && !from.style.height && !to.width && !to.height) {
return null; return null;
} }
var current = { var current = {
@ -156,14 +142,14 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
var height = current.height / scaleFactorY; var height = current.height / scaleFactorY;
var x = current.left / scaleFactorX; var x = current.left / scaleFactorX;
var y = current.top / scaleFactorY; var y = current.top / scaleFactorY;
if(current.width < previewWidth) { if (current.width < previewWidth) {
x = ((previewWidth - current.width) / scaleFactorX ) / 2; x = ((previewWidth - current.width) / scaleFactorX ) / 2;
} }
if(current.height < previewHeight) { if (current.height < previewHeight) {
y = ((previewHeight - current.height) / scaleFactorY ) / 2; y = ((previewHeight - current.height) / scaleFactorY ) / 2;
} }
return{width: width, height: height, x: x, y: y}; return {width: width, height: height, x: x, y: y};
}; };
@ -184,7 +170,6 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
var link = function($scope, $element) { var link = function($scope, $element) {
$scope.prevImage = $(".showUploadPicture .preview").get(0); $scope.prevImage = $(".showUploadPicture .preview").get(0);
$scope.addImageMoveHandlers();
$element.find("#uploadFile").on('change', $scope.handleUpload); $element.find("#uploadFile").on('change', $scope.handleUpload);
$scope.uploadPrev = $element.find("canvas.uploadPrev").get(0); $scope.uploadPrev = $element.find("canvas.uploadPrev").get(0);
$($scope.uploadPrev).attr($scope.captureSize); $($scope.uploadPrev).attr($scope.captureSize);
@ -220,7 +205,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width); $scope.prevImage.style.width = decrementPx($scope.prevImage.style.width);
}; };
var changeImage = function(evt) { var changeImage = function(evt) {
if(evt.data.intervalNum.num || !evt.data.action) { if (evt.data.intervalNum.num || !evt.data.action) {
clearInterval(evt.data.intervalNum.num); clearInterval(evt.data.intervalNum.num);
evt.data.intervalNum.num = null; evt.data.intervalNum.num = null;
} else { } else {

Loading…
Cancel
Save