From accbf276ada6bb5a46b586026cf3e902f83abab9 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Mon, 12 Oct 2015 14:00:45 +0200 Subject: [PATCH 01/10] Add button for sending image --- css/themes/dark.css | 7 ++++--- css/themes/light.css | 5 +++-- directives/input.html | 1 + 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/css/themes/dark.css b/css/themes/dark.css index 9e196f7..f219459 100644 --- a/css/themes/dark.css +++ b/css/themes/dark.css @@ -72,12 +72,13 @@ input[type=text], input[type=password], #sendMessage, .badge { box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset; } -input[type=text], input[type=password], #sendMessage, .badge, .btn-send { +input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-send-image { color: #ccc; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); } -.btn-send:hover, .btn-send:focus { +.btn-send:hover, .btn-send:focus, +.btn-send-image:hover, .btn-send-image:focus { background-color: #555; color: white; } @@ -271,7 +272,7 @@ input[type=text], input[type=password], #sendMessage, .badge, .btn-send { .cob-chat { } .cob-chat_time { - color: #999; + color: #999; } .cob-chat_time_delimiters { } diff --git a/css/themes/light.css b/css/themes/light.css index b292136..6a5c109 100644 --- a/css/themes/light.css +++ b/css/themes/light.css @@ -22,7 +22,8 @@ html { background-color: #222; } -.btn-send { +.btn-send, +.btn-send-image, { background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.3); color: #428BCA; } @@ -257,7 +258,7 @@ select.form-control, select option, input[type=text], input[type=password], #sen .cob-chat { } .cob-chat_time { - color: #999; + color: #999; } .cob-chat_time_delimiters { } diff --git a/directives/input.html b/directives/input.html index 9b23817..26656fd 100644 --- a/directives/input.html +++ b/directives/input.html @@ -3,6 +3,7 @@ + From 0d7d8e0cce15e525c6b9d5c57d68c36f835cefc0 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Fri, 9 Oct 2015 13:50:55 +0200 Subject: [PATCH 02/10] Add directive for file input change --- index.html | 1 + js/file-change.js | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 js/file-change.js diff --git a/index.html b/index.html index fa71eb2..c42ecae 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@ + diff --git a/js/file-change.js b/js/file-change.js new file mode 100644 index 0000000..1b22359 --- /dev/null +++ b/js/file-change.js @@ -0,0 +1,23 @@ +(function() { +'use strict'; + +var weechat = angular.module('weechat'); + +weechat.directive('fileChange', ['$parse', function($parse) { + + return { + restrict: 'A', + link: function ($scope, element, attrs) { + var attrHandler = $parse(attrs.fileChange); + var handler = function (e) { + $scope.$apply(function () { + attrHandler($scope, { $event: e, files: e.target.files }); + }); + }; + element[0].addEventListener('change', handler, false); + } + }; + + }]); + +})(); From f6bfa4161bbc37cf50a80697ad1eb41584b641d1 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Fri, 9 Oct 2015 13:59:34 +0200 Subject: [PATCH 03/10] Add imgur provider --- index.html | 1 + js/imgur.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 js/imgur.js diff --git a/index.html b/index.html index c42ecae..9a9ae1f 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,7 @@ + diff --git a/js/imgur.js b/js/imgur.js new file mode 100644 index 0000000..be003c8 --- /dev/null +++ b/js/imgur.js @@ -0,0 +1,75 @@ +(function() { +'use strict'; + +var weechat = angular.module('weechat'); + +weechat.factory('imgur', ['$rootScope', function($rootScope) { + + var process = function(image) { + + // Is it an image? + if (!image || !image.type.match(/image.*/)) return; + + // New file reader + var reader = new FileReader(); + + // When image is read + reader.onload = function (event) { + var image = event.target.result.split(',')[1]; + upload(image); + }; + + // Read image as data url + reader.readAsDataURL(image); + + }; + + // Upload image to imgur from base64 + var upload = function( base64img ) { + + // Set client ID (Glowing Bear) + var clientId = "164efef8979cd4b"; + + // Create new form data + var fd = new FormData(); + fd.append("image", base64img); // Append the file + fd.append("type", "base64"); // Set image type to base64 + + // Create new XMLHttpRequest + var xhttp = new XMLHttpRequest(); + + // Post request to imgur api + xhttp.open("POST", "https://api.imgur.com/3/image", true); + + // Set headers + xhttp.setRequestHeader("Authorization", "Client-ID " + clientId); + xhttp.setRequestHeader("Accept", "application/json"); + + // Handler for response + xhttp.onreadystatechange = function() { + + // Check state and response status + if (xhttp.readyState == 4 && xhttp.status == 200) { + + // Get response text + var response = JSON.parse(xhttp.responseText); + + // Open image in new window + window.open(response.data.link, '_blank'); + + } + + }; + + // Send request with form data + xhttp.send(fd); + + }; + + return { + process: process + }; + +}]); + +})(); From aef26a2dc5fd8c9bdb9a56332e55d284d24ba465 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Fri, 9 Oct 2015 14:01:45 +0200 Subject: [PATCH 04/10] Add file input with button and send file to imgur --- css/glowingbear.css | 19 +++++++++++++++++++ directives/input.html | 5 ++++- js/inputbar.js | 10 +++++++++- 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/css/glowingbear.css b/css/glowingbear.css index 46e1243..a7150a5 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -84,6 +84,25 @@ input[type=text], input[type=password], #sendMessage { margin-bottom: 5px !important; } +.btn-send-image { + position: relative; + overflow: hidden; + cursor: pointer; +} + +.imgur-upload { + position: absolute; + bottom: 0; + right: 0; + cursor: inherit; + font-size: 1000px !important; + height: 300px; + margin: 0; + padding: 0; + opacity: 0; + filter: ~"alpha(opacity=0)"; +} + .input-group { width: 100%; } diff --git a/directives/input.html b/directives/input.html index 26656fd..01b574a 100644 --- a/directives/input.html +++ b/directives/input.html @@ -3,7 +3,10 @@ - + diff --git a/js/inputbar.js b/js/inputbar.js index e57144a..6610017 100644 --- a/js/inputbar.js +++ b/js/inputbar.js @@ -14,11 +14,12 @@ weechat.directive('inputBar', function() { command: '=command' }, - controller: ['$rootScope', '$scope', '$element', '$log', 'connection', 'models', 'IrcUtils', 'settings', function($rootScope, + controller: ['$rootScope', '$scope', '$element', '$log', 'connection', 'imgur', 'models', 'IrcUtils', 'settings', function($rootScope, $scope, $element, //XXX do we need this? don't seem to be using it $log, connection, //XXX we should eliminate this dependency and use signals instead + imgur, models, IrcUtils, settings) { @@ -69,6 +70,13 @@ weechat.directive('inputBar', function() { }, 0); }; + $scope.uploadImage = function( $event, files ) { + // Get file + var file = files[0]; + + // Process image + imgur.process(file); + }; // Send the message to the websocket $scope.sendMessage = function() { From 960d5ba17ab4c3b86ff637abbac3307758b6857d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenz=20H=C3=BCbschle-Schneider?= Date: Sat, 7 Nov 2015 12:32:25 +0100 Subject: [PATCH 05/10] Insert image URL into input bar --- js/imgur.js | 15 +++++++++------ js/inputbar.js | 28 +++++++++++++++++++++++++++- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/js/imgur.js b/js/imgur.js index be003c8..a004392 100644 --- a/js/imgur.js +++ b/js/imgur.js @@ -5,7 +5,7 @@ var weechat = angular.module('weechat'); weechat.factory('imgur', ['$rootScope', function($rootScope) { - var process = function(image) { + var process = function(image, callback) { // Is it an image? if (!image || !image.type.match(/image.*/)) return; @@ -16,7 +16,7 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { // When image is read reader.onload = function (event) { var image = event.target.result.split(',')[1]; - upload(image); + upload(image, callback); }; // Read image as data url @@ -25,7 +25,7 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { }; // Upload image to imgur from base64 - var upload = function( base64img ) { + var upload = function( base64img, callback ) { // Set client ID (Glowing Bear) var clientId = "164efef8979cd4b"; @@ -54,9 +54,12 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { // Get response text var response = JSON.parse(xhttp.responseText); - // Open image in new window - window.open(response.data.link, '_blank'); - + // Send link as message + if( response.data && response.data.link ) { + if (callback && typeof(callback) === "function") { + callback(response.data.link); + } + } } }; diff --git a/js/inputbar.js b/js/inputbar.js index 6610017..09152f5 100644 --- a/js/inputbar.js +++ b/js/inputbar.js @@ -75,7 +75,33 @@ weechat.directive('inputBar', function() { var file = files[0]; // Process image - imgur.process(file); + imgur.process(file, function(imageUrl) { + + // Send image + if(imageUrl !== undefined && imageUrl !== '') { + // caret position in the input bar + var inputNode = $scope.getInputNode(), + caretPos = inputNode.selectionStart; + + var prefix = $scope.command.substring(0, caretPos), + suffix = $scope.command.substring(caretPos, $scope.command.length); + // Add spaces if missing + if (prefix.length > 0 && prefix[prefix.length - 1] !== ' ') { + prefix += ' '; + } + if (suffix.length > 0 && suffix[0] !== ' ') { + suffix = ' '.concat(suffix); + } + $scope.command = prefix + String(imageUrl) + suffix; + + setTimeout(function() { + inputNode.focus(); + var pos = $scope.command.length - suffix.length; + inputNode.setSelectionRange(pos, pos); + }, 0); + } + + }); }; // Send the message to the websocket From f2953d11901a7d5b6b4c4ae03123d10d742874f1 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Fri, 9 Oct 2015 19:32:26 +0200 Subject: [PATCH 06/10] Add image upload progressbar and error msg --- css/glowingbear.css | 23 +++++++++++++++++++++ directives/input.html | 1 + index.html | 3 +++ js/imgur.js | 48 +++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 73 insertions(+), 2 deletions(-) diff --git a/css/glowingbear.css b/css/glowingbear.css index a7150a5..dbb2e55 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -176,6 +176,14 @@ input[type=text], input[type=password], #sendMessage { padding-right: 6px; } +.upload-error { + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 4; +} + #sidebar { position: fixed; width: 140px; @@ -349,6 +357,21 @@ td.time { padding-right: 100px; } +#inputform { + position: relative; +} + +#imgur-upload-progress { + display: none; + content: " "; + width: 0%; + height: 5px; + position: absolute; + top: -5px; + left: 0; + background: #428BCA; +} + /* fix for mobile firefox which ignores :hover */ .nav-pills > li > a:active, .nav-pills > li > a:active span { text-decoration: none; diff --git a/directives/input.html b/directives/input.html index 01b574a..dcb7d2e 100644 --- a/directives/input.html +++ b/directives/input.html @@ -10,4 +10,5 @@ +
diff --git a/index.html b/index.html index 9a9ae1f..566d133 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,9 @@ +
+

Upload error: Image upload failed.

+

logo diff --git a/js/imgur.js b/js/imgur.js index a004392..7b1cfa3 100644 --- a/js/imgur.js +++ b/js/imgur.js @@ -30,6 +30,10 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { // Set client ID (Glowing Bear) var clientId = "164efef8979cd4b"; + // Progress bar DOM elment + var progressBar = document.getElementById("imgur-upload-progress"); + progressBar.style.width = '0'; + // Create new form data var fd = new FormData(); fd.append("image", base64img); // Append the file @@ -46,29 +50,69 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { xhttp.setRequestHeader("Accept", "application/json"); // Handler for response - xhttp.onreadystatechange = function() { + xhttp.onload = function() { + + progressBar.style.display = 'none'; // Check state and response status - if (xhttp.readyState == 4 && xhttp.status == 200) { + if(xhttp.status === 200) { // Get response text var response = JSON.parse(xhttp.responseText); // Send link as message if( response.data && response.data.link ) { + if (callback && typeof(callback) === "function") { callback(response.data.link); } + + } else { + showErrorMsg(); } + + } else { + showErrorMsg(); } }; + if( "upload" in xhttp ) { + + // Set progress + xhttp.upload.onprogress = function (event) { + + // Check if we can compute progress + if (event.lengthComputable) { + // Complete in percent + var complete = (event.loaded / event.total * 100 | 0); + + // Set progress bar width + progressBar.style.display = 'block'; + progressBar.style.width = complete + '%'; + } + }; + + } + // Send request with form data xhttp.send(fd); }; + var showErrorMsg = function() { + // Show error msg + $rootScope.uploadError = true; + $rootScope.$apply(); + + // Hide after 5 seconds + setTimeout(function(){ + // Hide error msg + $rootScope.uploadError = false; + $rootScope.$apply(); + }, 5000); + }; + return { process: process }; From 3b4f91249fcc4e9e88530a785cee0c8554d5e98e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenz=20H=C3=BCbschle-Schneider?= Date: Sat, 7 Nov 2015 12:37:46 +0100 Subject: [PATCH 07/10] Convert indention to spaces --- js/imgur.js | 159 ++++++++++++++++++++++++++-------------------------- 1 file changed, 79 insertions(+), 80 deletions(-) diff --git a/js/imgur.js b/js/imgur.js index 7b1cfa3..e2b46f5 100644 --- a/js/imgur.js +++ b/js/imgur.js @@ -5,115 +5,114 @@ var weechat = angular.module('weechat'); weechat.factory('imgur', ['$rootScope', function($rootScope) { - var process = function(image, callback) { + var process = function(image, callback) { - // Is it an image? - if (!image || !image.type.match(/image.*/)) return; + // Is it an image? + if (!image || !image.type.match(/image.*/)) return; - // New file reader - var reader = new FileReader(); + // New file reader + var reader = new FileReader(); - // When image is read - reader.onload = function (event) { - var image = event.target.result.split(',')[1]; - upload(image, callback); - }; + // When image is read + reader.onload = function (event) { + var image = event.target.result.split(',')[1]; + upload(image, callback); + }; - // Read image as data url - reader.readAsDataURL(image); + // Read image as data url + reader.readAsDataURL(image); - }; - - // Upload image to imgur from base64 - var upload = function( base64img, callback ) { - - // Set client ID (Glowing Bear) - var clientId = "164efef8979cd4b"; + }; - // Progress bar DOM elment - var progressBar = document.getElementById("imgur-upload-progress"); - progressBar.style.width = '0'; + // Upload image to imgur from base64 + var upload = function( base64img, callback ) { + // Set client ID (Glowing Bear) + var clientId = "164efef8979cd4b"; - // Create new form data - var fd = new FormData(); - fd.append("image", base64img); // Append the file - fd.append("type", "base64"); // Set image type to base64 + // Progress bar DOM elment + var progressBar = document.getElementById("imgur-upload-progress"); + progressBar.style.width = '0'; - // Create new XMLHttpRequest - var xhttp = new XMLHttpRequest(); + // Create new form data + var fd = new FormData(); + fd.append("image", base64img); // Append the file + fd.append("type", "base64"); // Set image type to base64 - // Post request to imgur api - xhttp.open("POST", "https://api.imgur.com/3/image", true); + // Create new XMLHttpRequest + var xhttp = new XMLHttpRequest(); - // Set headers - xhttp.setRequestHeader("Authorization", "Client-ID " + clientId); - xhttp.setRequestHeader("Accept", "application/json"); + // Post request to imgur api + xhttp.open("POST", "https://api.imgur.com/3/image", true); - // Handler for response - xhttp.onload = function() { + // Set headers + xhttp.setRequestHeader("Authorization", "Client-ID " + clientId); + xhttp.setRequestHeader("Accept", "application/json"); - progressBar.style.display = 'none'; + // Handler for response + xhttp.onload = function() { - // Check state and response status - if(xhttp.status === 200) { + progressBar.style.display = 'none'; - // Get response text - var response = JSON.parse(xhttp.responseText); + // Check state and response status + if(xhttp.status === 200) { - // Send link as message - if( response.data && response.data.link ) { + // Get response text + var response = JSON.parse(xhttp.responseText); - if (callback && typeof(callback) === "function") { - callback(response.data.link); - } + // Send link as message + if( response.data && response.data.link ) { - } else { - showErrorMsg(); - } + if (callback && typeof(callback) === "function") { + callback(response.data.link); + } - } else { - showErrorMsg(); - } + } else { + showErrorMsg(); + } - }; + } else { + showErrorMsg(); + } - if( "upload" in xhttp ) { + }; - // Set progress - xhttp.upload.onprogress = function (event) { + if( "upload" in xhttp ) { - // Check if we can compute progress - if (event.lengthComputable) { - // Complete in percent - var complete = (event.loaded / event.total * 100 | 0); + // Set progress + xhttp.upload.onprogress = function (event) { - // Set progress bar width - progressBar.style.display = 'block'; - progressBar.style.width = complete + '%'; - } - }; + // Check if we can compute progress + if (event.lengthComputable) { + // Complete in percent + var complete = (event.loaded / event.total * 100 | 0); - } + // Set progress bar width + progressBar.style.display = 'block'; + progressBar.style.width = complete + '%'; + } + }; - // Send request with form data - xhttp.send(fd); + } - }; + // Send request with form data + xhttp.send(fd); - var showErrorMsg = function() { - // Show error msg - $rootScope.uploadError = true; - $rootScope.$apply(); + }; - // Hide after 5 seconds - setTimeout(function(){ - // Hide error msg - $rootScope.uploadError = false; - $rootScope.$apply(); - }, 5000); - }; + var showErrorMsg = function() { + // Show error msg + $rootScope.uploadError = true; + $rootScope.$apply(); + + // Hide after 5 seconds + setTimeout(function(){ + // Hide error msg + $rootScope.uploadError = false; + $rootScope.$apply(); + }, 5000); + }; - return { + return { process: process }; From f2bb5437969df20b737b4bc9f4fc8cec43754be0 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Fri, 9 Oct 2015 20:11:30 +0200 Subject: [PATCH 08/10] Add support for dropping images on bufferlines and input form --- directives/input.html | 2 +- index.html | 3 ++- js/imgur-drop-directive.js | 44 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 js/imgur-drop-directive.js diff --git a/directives/input.html b/directives/input.html index dcb7d2e..3fbeb64 100644 --- a/directives/input.html +++ b/directives/input.html @@ -1,4 +1,4 @@ -
+
diff --git a/index.html b/index.html index 566d133..223280e 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,7 @@ + @@ -262,7 +263,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
-
+
  • diff --git a/js/imgur-drop-directive.js b/js/imgur-drop-directive.js new file mode 100644 index 0000000..6d8ac36 --- /dev/null +++ b/js/imgur-drop-directive.js @@ -0,0 +1,44 @@ +(function() { +'use strict'; + +var weechat = angular.module('weechat'); + +weechat.directive('imgurDrop', ['connection','imgur', function(connection, imgur) { + return { + restrict: 'A', + link: function($scope, element, attr) { + var elem = element[0]; + elem.ondragover = function () { this.classList.add('imgur-drop-hover'); return false; }; + elem.ondragend = function () { this.classList.remove('imgur-drop-hover'); return false; }; + elem.ondrop = function(e) { + // Remove hover class + this.classList.remove('imgur-drop-hover'); + + // Get files + var files = e.dataTransfer.files; + + // Stop default behaviour + e.stopPropagation(); + e.preventDefault(); + + // Check files length + if (files.length > 0) { + // Sorry only one file + var file = files[0]; + + // Upload to imgur + imgur.process(file, function(imageUrl) { + + // Send image + if(imageUrl !== undefined && imageUrl !== '') { + connection.sendMessage( String(imageUrl) ); + } + + }); + } + }; + } + }; +}]); + +})(); From 3f661ded6c28445d7790f391385c2a6bacf104e8 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Mon, 12 Oct 2015 21:09:13 +0200 Subject: [PATCH 09/10] Support sending multiple images --- css/glowingbear.css | 16 ++++++++++------ directives/input.html | 2 +- js/imgur-drop-directive.js | 27 ++++++++++++++++----------- js/imgur.js | 19 +++++++++++++------ js/inputbar.js | 22 +++++++++++++++------- 5 files changed, 55 insertions(+), 31 deletions(-) diff --git a/css/glowingbear.css b/css/glowingbear.css index dbb2e55..a6d10d8 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -362,16 +362,20 @@ td.time { } #imgur-upload-progress { - display: none; - content: " "; - width: 0%; - height: 5px; + width: 100%; + height: auto; position: absolute; - top: -5px; + bottom: 100%; left: 0; - background: #428BCA; } + .imgur-progress-bar { + width: 0%; + height: 5px; + margin-top: 1px; + background: #428BCA; + } + /* fix for mobile firefox which ignores :hover */ .nav-pills > li > a:active, .nav-pills > li > a:active span { text-decoration: none; diff --git a/directives/input.html b/directives/input.html index 3fbeb64..38a76f7 100644 --- a/directives/input.html +++ b/directives/input.html @@ -5,7 +5,7 @@ diff --git a/js/imgur-drop-directive.js b/js/imgur-drop-directive.js index 6d8ac36..50a4ca9 100644 --- a/js/imgur-drop-directive.js +++ b/js/imgur-drop-directive.js @@ -21,20 +21,25 @@ weechat.directive('imgurDrop', ['connection','imgur', function(connection, imgur e.stopPropagation(); e.preventDefault(); - // Check files length - if (files.length > 0) { - // Sorry only one file - var file = files[0]; + // Send image url after upload + var sendImageUrl = function(imageUrl) { - // Upload to imgur - imgur.process(file, function(imageUrl) { + // Send image + if(imageUrl !== undefined && imageUrl !== '') { + connection.sendMessage(String(imageUrl)); + } - // Send image - if(imageUrl !== undefined && imageUrl !== '') { - connection.sendMessage( String(imageUrl) ); - } + }; + + // Check files + if(typeof files !== "undefined" && files.length > 0) { + + // Loop through files + for (var i = 0; i < files.length; i++) { + // Upload to imgur + imgur.process(files[i], sendImageUrl); + } - }); } }; } diff --git a/js/imgur.js b/js/imgur.js index e2b46f5..a5a0fd0 100644 --- a/js/imgur.js +++ b/js/imgur.js @@ -29,9 +29,16 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { // Set client ID (Glowing Bear) var clientId = "164efef8979cd4b"; - // Progress bar DOM elment - var progressBar = document.getElementById("imgur-upload-progress"); - progressBar.style.width = '0'; + // Progress bars container + var progressBars = document.getElementById("imgur-upload-progress"), + currentProgressBar = document.createElement("div"); + + // Set progress bar attributes + currentProgressBar.className='imgur-progress-bar'; + currentProgressBar.style.width = '0'; + + // Append progress bar + progressBars.appendChild(currentProgressBar); // Create new form data var fd = new FormData(); @@ -51,7 +58,8 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { // Handler for response xhttp.onload = function() { - progressBar.style.display = 'none'; + // Remove progress bar + currentProgressBar.parentNode.removeChild(currentProgressBar); // Check state and response status if(xhttp.status === 200) { @@ -87,8 +95,7 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) { var complete = (event.loaded / event.total * 100 | 0); // Set progress bar width - progressBar.style.display = 'block'; - progressBar.style.width = complete + '%'; + currentProgressBar.style.width = complete + '%'; } }; diff --git a/js/inputbar.js b/js/inputbar.js index 09152f5..aa44927 100644 --- a/js/inputbar.js +++ b/js/inputbar.js @@ -70,12 +70,9 @@ weechat.directive('inputBar', function() { }, 0); }; - $scope.uploadImage = function( $event, files ) { - // Get file - var file = files[0]; - - // Process image - imgur.process(file, function(imageUrl) { + $scope.uploadImage = function($event, files) { + // Send image url after upload + var sendImageUrl = function(imageUrl) { // Send image if(imageUrl !== undefined && imageUrl !== '') { @@ -98,10 +95,21 @@ weechat.directive('inputBar', function() { inputNode.focus(); var pos = $scope.command.length - suffix.length; inputNode.setSelectionRange(pos, pos); + // force refresh? + $scope.$apply(); }, 0); } - }); + }; + + if(typeof files !== "undefined" && files.length > 0) { + // Loop through files + for (var i = 0; i < files.length; i++) { + // Process image + imgur.process(files[i], sendImageUrl); + } + + } }; // Send the message to the websocket From a6c2e6f3872f87eb0abd9d8b595aa98f74c67ff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenz=20H=C3=BCbschle-Schneider?= Date: Tue, 10 Nov 2015 19:40:30 +0100 Subject: [PATCH 10/10] Insert URL at caret when dropping image into GB unfortunately this pollutes the root scope a bit more --- js/imgur-drop-directive.js | 4 +-- js/inputbar.js | 50 ++++++++++++++++++++------------------ 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/js/imgur-drop-directive.js b/js/imgur-drop-directive.js index 50a4ca9..7e114d0 100644 --- a/js/imgur-drop-directive.js +++ b/js/imgur-drop-directive.js @@ -3,7 +3,7 @@ var weechat = angular.module('weechat'); -weechat.directive('imgurDrop', ['connection','imgur', function(connection, imgur) { +weechat.directive('imgurDrop', ['connection','imgur','$rootScope', function(connection, imgur, $rootScope) { return { restrict: 'A', link: function($scope, element, attr) { @@ -26,7 +26,7 @@ weechat.directive('imgurDrop', ['connection','imgur', function(connection, imgur // Send image if(imageUrl !== undefined && imageUrl !== '') { - connection.sendMessage(String(imageUrl)); + $rootScope.insertAtCaret(String(imageUrl)); } }; diff --git a/js/inputbar.js b/js/inputbar.js index aa44927..9d18506 100644 --- a/js/inputbar.js +++ b/js/inputbar.js @@ -70,36 +70,38 @@ weechat.directive('inputBar', function() { }, 0); }; + $rootScope.insertAtCaret = function(toInsert) { + // caret position in the input bar + var inputNode = $scope.getInputNode(), + caretPos = inputNode.selectionStart; + + var prefix = $scope.command.substring(0, caretPos), + suffix = $scope.command.substring(caretPos, $scope.command.length); + // Add spaces if missing + if (prefix.length > 0 && prefix[prefix.length - 1] !== ' ') { + prefix += ' '; + } + if (suffix.length > 0 && suffix[0] !== ' ') { + suffix = ' '.concat(suffix); + } + $scope.command = prefix + toInsert + suffix; + + setTimeout(function() { + inputNode.focus(); + var pos = $scope.command.length - suffix.length; + inputNode.setSelectionRange(pos, pos); + // force refresh? + $scope.$apply(); + }, 0); + }; + $scope.uploadImage = function($event, files) { // Send image url after upload var sendImageUrl = function(imageUrl) { - // Send image if(imageUrl !== undefined && imageUrl !== '') { - // caret position in the input bar - var inputNode = $scope.getInputNode(), - caretPos = inputNode.selectionStart; - - var prefix = $scope.command.substring(0, caretPos), - suffix = $scope.command.substring(caretPos, $scope.command.length); - // Add spaces if missing - if (prefix.length > 0 && prefix[prefix.length - 1] !== ' ') { - prefix += ' '; - } - if (suffix.length > 0 && suffix[0] !== ' ') { - suffix = ' '.concat(suffix); - } - $scope.command = prefix + String(imageUrl) + suffix; - - setTimeout(function() { - inputNode.focus(); - var pos = $scope.command.length - suffix.length; - inputNode.setSelectionRange(pos, pos); - // force refresh? - $scope.$apply(); - }, 0); + $rootScope.insertAtCaret(String(imageUrl)); } - }; if(typeof files !== "undefined" && files.length > 0) {