diff --git a/static/js/directives/bfi.js b/static/js/directives/bfi.js new file mode 100644 index 00000000..a0315059 --- /dev/null +++ b/static/js/directives/bfi.js @@ -0,0 +1,36 @@ +/* + * Spreed WebRTC. + * Copyright (C) 2013-2014 struktur AG + * + * This file is part of Spreed WebRTC. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ +define(["bootstrap-file-input"], function() { + + // bfi + return ["$timeout", function($timeout) { + return { + restrict: "A", + link: function(scope, element, attrs) { + $timeout(function() { + // XXX(longsleep): Hack to make translation work. + element.bootstrapFileInput(); + }); + } + } + }]; + +}); diff --git a/static/js/directives/buddypictureupload.js b/static/js/directives/buddypictureupload.js index aba2a446..26042bbc 100644 --- a/static/js/directives/buddypictureupload.js +++ b/static/js/directives/buddypictureupload.js @@ -18,7 +18,7 @@ * along with this program. If not, see . * */ -define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootstrap-file-input'], function($, _, template, BootstrapFileInput) { +define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], function($, _, template) { // buddyPictureUpload return ["$compile", function($compile) { @@ -110,7 +110,8 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst return {width: width, height: height, x: x, y: y}; }; - var writeUploadToCanvas = function(canvas, img) { + var writePictureToCanvas = function(canvas) { + var img = $scope.prevImage; var dim = getScaledDimensions(img, canvas); var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); @@ -125,19 +126,18 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst $scope.prevImage.style.cssText = null; }; - $scope.usePicture = function() { - writeUploadToCanvas($scope.canvasPic, $scope.prevImage); - $scope.user.buddyPicture = $scope.canvasPic.toDataURL("image/jpeg"); - $scope.reset(); - safeApply($scope); - }; - - $scope.reset = function() { + $scope.cancelPicture = function() { $scope.showUploadPicture = false; $scope.previewUpload = false; clearPicture(); }; + $scope.usePicture = function() { + writePictureToCanvas($scope.canvasPic); + $scope.save(); + $scope.cancelPicture(); + }; + $scope.handleUpload = function(event) { var file = event.target.files[0]; if (!file) { @@ -201,8 +201,11 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst }]; var link = function($scope, $element) { - $scope.prevImage = $(".showUploadPicture .preview").get(0); - $element.find("#uploadFile").on('change', $scope.handleUpload); + + $scope.prevImage = $element.find("img.preview").get(0); + + // Bind change event of file upload form. + $element.find("input[type=file]").on("change", $scope.handleUpload); var intervalNum = { num: null @@ -271,14 +274,11 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst $element.find("#larger").on('mouseup', null, {intervalNum: intervalNum}, changeImage); $element.find("#smaller").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); }; return { restrict: 'E', + require: '^buddyPictureCapture', replace: true, template: template, controller: controller, diff --git a/static/js/directives/directives.js b/static/js/directives/directives.js index de5d0458..fea45f1b 100644 --- a/static/js/directives/directives.js +++ b/static/js/directives/directives.js @@ -42,7 +42,8 @@ define([ 'directives/pdfcanvas', 'directives/odfcanvas', 'directives/presentation', - 'directives/youtubevideo',], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo) { + 'directives/youtubevideo', + 'directives/bfi'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi) { var directives = { onEnter: onEnter, @@ -66,7 +67,8 @@ define([ pdfcanvas: pdfcanvas, odfcanvas: odfcanvas, presentation: presentation, - youtubevideo: youtubevideo + youtubevideo: youtubevideo, + bfi: bfi }; var initialize = function(angModule) { diff --git a/static/js/main.js b/static/js/main.js index f1c8d8ce..91bbe9fb 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -131,7 +131,7 @@ require.config({ }, 'bootstrap-file-input': { deps: ['jquery'], - exports: 'BootstrapFileInput' + exports: '$' }, } }); diff --git a/static/partials/buddypictureupload.html b/static/partials/buddypictureupload.html index b858b59d..6dfb4156 100644 --- a/static/partials/buddypictureupload.html +++ b/static/partials/buddypictureupload.html @@ -24,10 +24,10 @@
{{_('The file is not an image.')}}
{{_('The file is too large. Max. %d MB.', maxUploadMb)}}

- +

- {{_('Cancel')}} + {{_('Cancel')}} {{_('Set as Profile Picture')}}