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 148cbd38ea into f992f50d49

pull/156/merge
theurere 12 years ago
parent
f992f50d49 148cbd38ea
commit
76c91a3865
4 changed files with 183 additions and 55 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. 2
      static/css/main.min.css
  3. 204
      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;

2
static/css/main.min.css vendored
Unescape View File

@ -1,4 +1,4 @@ @@ -1,4 +1,4 @@
/*!
/*!
* Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG
*

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

@ -61,18 +61,19 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -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
@ -132,9 +133,10 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -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() {
@ -213,13 +215,17 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -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
@ -244,54 +250,172 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -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 {

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