Add support for dropping images on bufferlines and input form

directives/input.html

@@ -1,4 +1,4 @@
-<form class="form form-horizontal" id="inputform" ng-submit="sendMessage()">
+<form class="form form-horizontal" id="inputform" ng-submit="sendMessage()" imgur-drop>
   <div class="input-group">
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>

index.html

@@ -34,6 +34,7 @@
     <script type="text/javascript" src="js/handlers.js"></script>
     <script type="text/javascript" src="js/connection.js"></script>
     <script type="text/javascript" src="js/file-change.js"></script>
+    <script type="text/javascript" src="js/imgur-drop-directive.js"></script>
     <script type="text/javascript" src="js/inputbar.js"></script>
     <script type="text/javascript" src="js/plugin-directive.js"></script>
     <script type="text/javascript" src="js/websockets.js"></script>
@@ -262,7 +263,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </li>
         </ul>
       </div>
-      <div id="bufferlines" class="favorite-font" ng-swipe-right="showSidebar()" ng-swipe-left="hideSidebar()" ng-class="{'withnicklist': showNicklist}">
+      <div id="bufferlines" class="favorite-font" ng-swipe-right="showSidebar()" ng-swipe-left="hideSidebar()" ng-class="{'withnicklist': showNicklist}" imgur-drop>
         <div id="nicklist" ng-if="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
           <ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist">
             <li ng-repeat="nick in group.nicks|orderBy:'name'">

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) );
+                        }
+
+                    });
+                }
+            };
+        }
+    };
+}]);
+
+})();