diff --git a/www/js/directives.js b/www/js/directives.js
index fbffd51aba5f12a958cd3e5a9f31c187e929772d..8bedee67bc0d044225d3c99ed8cf0d350c8b6003 100644
--- a/www/js/directives.js
+++ b/www/js/directives.js
@@ -389,10 +389,11 @@ angular.module('cesium.directives', [])
elem.bind('drop', function(e) {
e.stopPropagation();
e.preventDefault();
+ var file = e.dataTransfer.files[0];
var fileData = {
- name: e.dataTransfer.files[0].name,
- size: e.dataTransfer.files[0].size,
- type: e.dataTransfer.files[0].type
+ name: file.name,
+ size: file.size,
+ type: file.type
};
var reader = new FileReader();
@@ -400,6 +401,7 @@ angular.module('cesium.directives', [])
scope.$apply(function () {
fn(scope, {
file: {
+ file: file,
fileContent: onLoadEvent.target.result,
fileData : fileData}
});
@@ -433,16 +435,18 @@ angular.module('cesium.directives', [])
fileInput.on('change', function (onChangeEvent) {
var reader = new FileReader();
+ var file = this.files[0];
var fileData = {
- name: this.files[0].name,
- size: this.files[0].size,
- type: this.files[0].type
+ name: file.name,
+ size: file.size,
+ type: file.type
};
reader.onload = function(onLoadEvent) {
scope.$applyAsync(function() {
fn(scope, {
file: {
+ file: file,
fileContent: onLoadEvent.target.result,
fileData : fileData}
});
@@ -476,4 +480,3 @@ angular.module('cesium.directives', [])
}
};
});
-;
diff --git a/www/js/platform.js b/www/js/platform.js
index 595eac512d809807dcaee4e657c6c7ee1b2ccf3e..45c8216cfc366d244bceee46a818898f333cd003 100644
--- a/www/js/platform.js
+++ b/www/js/platform.js
@@ -40,7 +40,7 @@ angular.module('cesium.platform', ['ngIdle', 'cesium.config', 'cesium.services']
// Fix issue #893
// See https://stackoverflow.com/questions/31859257/firefox-addon-using-angularjs-ng-src-not-working
- $compileProvider.imgSrcSanitizationWhitelist(/^\s*(filesystem:resource|resource|moz-extension|chrome-extension|file):/);
+ $compileProvider.imgSrcSanitizationWhitelist(/^\s*(filesystem:resource|resource|moz-extension|chrome-extension|file|data):/);
})
.config(function($animateProvider) {
diff --git a/www/plugins/es/i18n/locale-en-GB.json b/www/plugins/es/i18n/locale-en-GB.json
index 1df21eafd4e5124dcf39b2c7968b308c479faef0..b54746a51002ca7188665b6b49990b14551329ba 100644
--- a/www/plugins/es/i18n/locale-en-GB.json
+++ b/www/plugins/es/i18n/locale-en-GB.json
@@ -337,7 +337,7 @@
"TECHNICAL_DIVIDER": "Technical data",
"MODAL_AVATAR": {
"TITLE": "Avatar",
- "SELECT_FILE_HELP": "<b>Choose an image file</b>, by clicking on the button below:",
+ "SELECT_FILE_HELP": "<b>Choose an image file</b>:",
"BTN_SELECT_FILE": "Choose an image",
"RESIZE_HELP": "<b>Re-crop the image</b> if necessary. A click on the image allows to move it. Click on the area at the bottom left to zoom in.",
"RESULT_HELP": "<b>Here is the result</b> as seen on your profile:"
diff --git a/www/plugins/es/i18n/locale-en.json b/www/plugins/es/i18n/locale-en.json
index 1df21eafd4e5124dcf39b2c7968b308c479faef0..b54746a51002ca7188665b6b49990b14551329ba 100644
--- a/www/plugins/es/i18n/locale-en.json
+++ b/www/plugins/es/i18n/locale-en.json
@@ -337,7 +337,7 @@
"TECHNICAL_DIVIDER": "Technical data",
"MODAL_AVATAR": {
"TITLE": "Avatar",
- "SELECT_FILE_HELP": "<b>Choose an image file</b>, by clicking on the button below:",
+ "SELECT_FILE_HELP": "<b>Choose an image file</b>:",
"BTN_SELECT_FILE": "Choose an image",
"RESIZE_HELP": "<b>Re-crop the image</b> if necessary. A click on the image allows to move it. Click on the area at the bottom left to zoom in.",
"RESULT_HELP": "<b>Here is the result</b> as seen on your profile:"
diff --git a/www/plugins/es/i18n/locale-eo-EO.json b/www/plugins/es/i18n/locale-eo-EO.json
index 7cf85343d9550818782e1867bf757787ec357cc9..f179c238a90322533e3908fa7b50064a4515bdb2 100644
--- a/www/plugins/es/i18n/locale-eo-EO.json
+++ b/www/plugins/es/i18n/locale-eo-EO.json
@@ -387,7 +387,7 @@
"TECHNICAL_DIVIDER": "Teknikaj informoj",
"MODAL_AVATAR": {
"TITLE": "Profil-foto",
- "SELECT_FILE_HELP": "Bonvolu <b>elekti bildo-dosieron</b>, alklakante la ĉi-suban butonon:",
+ "SELECT_FILE_HELP": "Bonvolu <b>elekti bildo-dosieron</b>:",
"BTN_SELECT_FILE": "Elekti foton",
"RESIZE_HELP": "<b>Rekadri la bildon</b>, laÅbezone. Pluigi klakon sur la bildo ebligas movi Äin. Alklaku la zonon malsupre maldekstre por zomi.",
"RESULT_HELP": "<b>Jen la rezulto</b> tiel videbla ĉe via profilo:"
diff --git a/www/plugins/es/i18n/locale-es-ES.json b/www/plugins/es/i18n/locale-es-ES.json
index b9fd30fa1468ba924707724893e4028f24ba6a67..83c4877b37e5a012a1ce9e5313384fc916ed3e4f 100644
--- a/www/plugins/es/i18n/locale-es-ES.json
+++ b/www/plugins/es/i18n/locale-es-ES.json
@@ -366,7 +366,7 @@
"TECHNICAL_DIVIDER": "Informaciónes técnicas",
"MODAL_AVATAR": {
"TITLE": "Foto de perfil",
- "SELECT_FILE_HELP": "Por favor, <b>elige un fichero imagen</b>, haciendo un clic sobre el botón por debajo :",
+ "SELECT_FILE_HELP": "Por favor, <b>elige un fichero imagen</b> :",
"BTN_SELECT_FILE": "Eligir una foto",
"RESIZE_HELP": "<b>Encuadra la imagen</b>, si es necesario. Un clic mantenido sobre la imagen permite desplazarla. Hace un clic sobre la zona abajo a la izquierda para hacer zoom.",
"RESULT_HELP": "<b>Aquà está el resultado</b> tal como está visible sobre su perfil :"
diff --git a/www/plugins/es/i18n/locale-fr-FR.json b/www/plugins/es/i18n/locale-fr-FR.json
index 5e7de547fead47beff1b17e04764ecef7fe821dd..055127de570e2d123c63d1f71693390f9316ec05 100644
--- a/www/plugins/es/i18n/locale-fr-FR.json
+++ b/www/plugins/es/i18n/locale-fr-FR.json
@@ -388,7 +388,7 @@
"TECHNICAL_DIVIDER": "Informations techniques",
"MODAL_AVATAR": {
"TITLE": "Photo de profil",
- "SELECT_FILE_HELP": "Veuillez <b>choisir un fichier image</b>, en cliquant sur le bouton ci-dessous :",
+ "SELECT_FILE_HELP": "Veuillez <b>choisir le fichier image</b> :",
"BTN_SELECT_FILE": "Choisir une photo",
"RESIZE_HELP": "<b>Recadrez l'image</b>, si besoin. Un clic maintenu sur l'image permet de la déplacer. Cliquez sur la zone en bas à gauche pour zoomer.",
"RESULT_HELP": "<b>Voici le résultat</b> tel que visible sur votre profil :"
diff --git a/www/plugins/es/i18n/locale-it-IT.json b/www/plugins/es/i18n/locale-it-IT.json
index b5394f7b96ab9c1d405609560778925bd9089f26..445ca61da33105b94612d4fdac6be8bf01757af6 100644
--- a/www/plugins/es/i18n/locale-it-IT.json
+++ b/www/plugins/es/i18n/locale-it-IT.json
@@ -360,7 +360,7 @@
"TECHNICAL_DIVIDER": "Dati tecnici",
"MODAL_AVATAR": {
"TITLE": "Avatar",
- "SELECT_FILE_HELP": "<b>Scegliere un'immagine</b>, cliccando sul bottone qui sotto:",
+ "SELECT_FILE_HELP": "<b>Scegliere un'immagine</b>:",
"BTN_SELECT_FILE": "Scegliere un'immagine",
"RESIZE_HELP": "<b>Ritagliare l'immagine</b> se necessario. Cliccare sull'immagine permette di spostarla. Cliccando nella zona a basso sinistra permette di fare uno zoom-in.",
"RESULT_HELP": "<b>Questo è il risultato</b> come visibile sul suo profilo:"
diff --git a/www/plugins/es/js/controllers/common-controllers.js b/www/plugins/es/js/controllers/common-controllers.js
index 2952735a5d2a071673092f37412e367374acde26..e010969c59721dedb3d5caddc56dad9dcea33fb0 100644
--- a/www/plugins/es/js/controllers/common-controllers.js
+++ b/www/plugins/es/js/controllers/common-controllers.js
@@ -50,22 +50,20 @@ function ESPicturesEditController($scope, UIUtils, $q, Device) {
.catch(UIUtils.onError('ERROR.TAKE_PICTURE_FAILED'));
};
- $scope.fileChanged = function(event) {
- if (!event.target.files || !event.target.files.length) return;
+ $scope.onFileChanged = function(event) {
+ if (!event || !event.file) return;
UIUtils.loading.show();
- var file = event.target.files[0];
+ var file = event.file;
return UIUtils.image.resizeFile(file)
.then(function(imageData) {
$scope.pictures.push({
src: imageData,
isnew: true // use to prevent visibility hidden (if animation)
});
- event.target.value = ""; // reset input[type=file]
UIUtils.loading.hide(100);
})
.catch(function(err) {
console.error(err);
- event.target.value = ""; // reset input[type=file]
UIUtils.loading.hide();
});
};
@@ -427,7 +425,7 @@ function ESSocialsViewController($scope) {
-function ESAvatarModalController($scope) {
+function ESAvatarModalController($scope, $sce) {
$scope.formData = {
initCrop: false,
@@ -437,36 +435,33 @@ function ESAvatarModalController($scope) {
resultBlob: undefined
};
- $scope.openFileSelector = function() {
- var fileInput = angular.element(document.querySelector('.modal-avatar #fileInput'));
- if (fileInput && fileInput.length > 0) {
- fileInput[0].click();
- }
- };
-
- $scope.fileChanged = function(e) {
+ $scope.onFileChanged = function(event) {
+ if (!event || !event.file) return; // Skip
- var files = e.target.files;
var fileReader = new FileReader();
- fileReader.readAsDataURL(files[0]);
+ fileReader.readAsDataURL(event.file);
fileReader.onload = function(e) {
var res = this.result;
$scope.$applyAsync(function() {
- $scope.formData.imgSrc = res;
+ $scope.formData.imgSrc = $sce.getTrustedHtml(res);
});
};
};
$scope.doNext = function() {
- if ($scope.formData.imageCropStep == 2) {
+ if ($scope.formData.imageCropStep === 2) {
$scope.doCrop();
}
- else if ($scope.formData.imageCropStep == 3) {
+ else if ($scope.formData.imageCropStep === 3) {
$scope.closeModal($scope.formData.result);
}
};
+ $scope.doPrevious = function() {
+ $scope.formData.imageCropStep -= 1;
+ };
+
$scope.doCrop = function() {
$scope.formData.initCrop = true;
};
diff --git a/www/plugins/es/templates/common/edit_pictures.html b/www/plugins/es/templates/common/edit_pictures.html
index 7ad78b621a05c0bec3db441c1fb8f646ac7590a7..3999bef361eb62604934133bbb36511bd5ee175e 100644
--- a/www/plugins/es/templates/common/edit_pictures.html
+++ b/www/plugins/es/templates/common/edit_pictures.html
@@ -26,13 +26,11 @@
<!-- Add picture button -->
<div class="item card card-gallery card-gallery-new text-center padding ink"
- ng-click="selectNewPicture('#pictureFile')">
+ file-select="onFileChanged(file)" accept="image/*">
<i class="ion-image stable" style="font-size:150px"></i>
<b class="ion-plus gray" style="font-size:80px; position:absolute; top:25px; right: 5px;"></b>
<p translate>COMMON.BTN_ADD_PICTURE</p>
</div>
- <input type="file" id="pictureFile" accept="image/*" onchange="angular.element(this).scope().fileChanged(event)"
- style="visibility:hidden; position:absolute;"/>
</div>
diff --git a/www/plugins/es/templates/common/modal_edit_avatar.html b/www/plugins/es/templates/common/modal_edit_avatar.html
index bfb90472f148bc9be4bdf2c5359190fb38494a8b..32694b3b328bc791c7750efb0e3aeb8b4247621a 100644
--- a/www/plugins/es/templates/common/modal_edit_avatar.html
+++ b/www/plugins/es/templates/common/modal_edit_avatar.html
@@ -22,18 +22,17 @@
<div ng-show="formData.imageCropStep == 1">
+
<p translate>PROFILE.MODAL_AVATAR.SELECT_FILE_HELP</p>
- <!-- Add picture button -->
- <div class="item card text-center padding ink"
- ng-click="openFileSelector()">
- <i class="ion-image stable" style="font-size:150px"></i>
- <b class="ion-plus gray" style="position:relative; font-size:80px; top:-51px; right: 19px;"></b>
- <p translate>PROFILE.MODAL_AVATAR.BTN_SELECT_FILE</p>
+ <!-- Add picture drop zone -->
+ <div drop-zone="onFileChanged(file)">
+ <div file-select="onFileChanged(file)" accept="image/*">
+ <i class="ion-image stable" style="font-size:150px"></i>
+ <b class="ion-plus gray" style="position:relative; font-size:80px; top:-51px; right: 19px;"></b>
+ <p class="gray" translate>COMMON.CHOOSE_FILE</p>
+ </div>
</div>
-
- <input type="file" name="fileInput" accept="image/*" id="fileInput" onchange="angular.element(this).scope().fileChanged(event)"
- style="visibility:hidden; position:absolute;"/>
</div>
<div ng-show="formData.imageCropStep == 2">
@@ -73,23 +72,28 @@
<div class="item card padding hero" style="height: 110px;">
<div class="content">
- <img class="avatar" ng-src="{{formData.result}}" style="height: 88px; width: 88px;">
+ <img class="avatar" ng-src="{{formData.result|trustAsHtml}}" style="height: 88px; width: 88px;">
</div>
</div>
</div>
<!-- buttons bar -->
<div class="padding hidden-xs text-right">
- <button class="button button-clear button-dark ink" ng-click="closeModal()" type="button" translate>
+ <button class="button button-clear button-dark ink" ng-click="closeModal()" type="button"
+ ng-if="formData.imageCropStep <= 2" translate>
COMMON.BTN_CANCEL
</button>
+ <button class="button button-stable icon-left ion-chevron-left ink" ng-click="doPrevious()" translate
+ ng-if="formData.imageCropStep >= 2">
+ COMMON.BTN_BACK
+ </button>
<button class="button button-calm icon-right ion-chevron-right ink" ng-click="doCrop()" translate
- ng-disabled="formData.imageCropStep == 1"
+ ng-disabled="formData.imageCropStep === 1"
ng-if="formData.imageCropStep <= 2">
COMMON.BTN_NEXT
</button>
<button class="button button-positive ink" ng-click="closeModal(formData.result)" translate
- ng-if="formData.imageCropStep == 3">
+ ng-if="formData.imageCropStep === 3">
COMMON.BTN_CONTINUE
</button>
</div>