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

Merge a48c95bdcd into 2d99116aa1

pull/144/merge
theurere 12 years ago
parent
2d99116aa1 a48c95bdcd
commit
5414aea0de
4 changed files with 166 additions and 68 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. 4
      static/css/main.min.css
  3. 198
      static/js/directives/buddypictureupload.js
  4. 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;

4
static/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -23,6 +23,16 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -23,6 +23,16 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
// buddyPictureUpload
return ["$compile", function($compile) {
var getNumFromPx = function(px) {
var num = px.match(/[\-0-9]+/);
if (num) {
num = Number(num[0]);
} else {
num = 0;
}
return num;
};
var controller = ['$scope', 'safeApply', '$timeout', '$q', 'translation', function($scope, safeApply, $timeout, $q, translation) {
var previewWidth = 205;
@ -40,6 +50,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -40,6 +50,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
$scope.upload = {
status: 0
};
$scope.aspectRatio = 1;
var completedUpload = function() {
$scope.upload.status = 100;
@ -48,21 +59,19 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -48,21 +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;
};
var getNumFromPx = function(px) {
return px.match(/[\-0-9]+/) ? Number(px.match(/[\-0-9]+/)[0]) : 0;
$scope.prevImage.src = $scope.dragImage.src = data;
};
// Auto fit by smallest dimension
@ -122,8 +131,9 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -122,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() {
@ -148,7 +158,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -148,7 +158,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
//console.log('file progress', event);
var percentComplete = event.loaded/event.total * 100;
// show complete only when src is loaded in image element
if(percentComplete != 100) {
if (percentComplete !== 100) {
$scope.$apply(function(scope) {
$scope.upload.status = percentComplete;
});
@ -201,78 +211,162 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -201,78 +211,162 @@ 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
};
var pxDefaultMovementSpeed = 5;
// Return the correct image height based on changes to the image width.
var calcHeight = function(width) {
return (getNumFromPx(width) / $scope.aspectRatio) + 'px';
};
var incrementPx = function(num, pxToMove) {
if(pxToMove === undefined) {
if (pxToMove === undefined) {
pxToMove = pxDefaultMovementSpeed;
}
return ((Number(num.match(/[\-0-9]+/)) + pxToMove) + 'px');
return (getNumFromPx(num) + pxToMove) + 'px';
};
var decrementPx = function(num, pxToMove) {
if(pxToMove === undefined) {
if (pxToMove === undefined) {
pxToMove = pxDefaultMovementSpeed;
}
return ((Number(num.match(/[\-0-9]+/)) - pxToMove) + 'px');
return (getNumFromPx(num) - pxToMove) + 'px';
};
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.height = incrementPx($scope.prevImage.style.height);
moveImageLeft(1);
$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width);
moveImageUp(2);
var makeImageLarger = function(pxMove) {
$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width, pxMove);
$scope.prevImage.style.height = calcHeight($scope.prevImage.style.width);
$scope.dragImage.style.width = incrementPx($scope.dragImage.style.width, pxMove);
$scope.dragImage.style.height = calcHeight($scope.dragImage.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);
$scope.dragImage.style.width = decrementPx($scope.dragImage.style.width, pxMove);
$scope.dragImage.style.height = calcHeight($scope.dragImage.style.width);
};
// 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 movementX = null;
var movementY = null;
// 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 makeImageSmaller = function() {
$scope.prevImage.style.height = decrementPx($scope.prevImage.style.height);
moveImageRight(1);
$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width);
moveImageDown(2);
var zoomImage = function(event) {
var deltaY = event.originalEvent.deltaY;
if (!imageMoveabled(deltaY)) {
return;
}
// zoom in
if (deltaY < 0) {
makeImageLarger(Math.abs(deltaY));
moveImageLeft(Math.abs(deltaY/2));
moveImageUp(Math.abs(deltaY/2));
// zoom out
} else {
makeImageSmaller(deltaY);
moveImageRight(deltaY/2);
moveImageDown(deltaY/2);
}
};
var changeImage = function(evt) {
if (evt.data.intervalNum.num || !evt.data.action) {
clearInterval(evt.data.intervalNum.num);
evt.data.intervalNum.num = null;
var moveImage = function(event) {
movementX = startX - event.originalEvent.clientX;
movementY = startY - event.originalEvent.clientY;
if (!imageMoveabled()) {
return;
}
if (movementX < 0) {
moveImageRight(Math.abs(movementX));
} else {
evt.data.intervalNum.num = setInterval(function() {
evt.data.action();
}, 50);
moveImageLeft(movementX);
}
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;
};
$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(".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);
$($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('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) {
event.stopPropagation();
$scope.$apply(function() {
$scope.dragging = false;
});
});
$('#settings').on('mousemove', function(event) {
event.stopPropagation();
if ($scope.dragging) {
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