Add support for dropping images on bufferlines and input form

This commit is contained in:
Magnus Hauge Bakke 2015-10-09 20:11:30 +02:00 committed by Lorenz Hübschle-Schneider
parent 3b4f91249f
commit f2bb543796
3 changed files with 47 additions and 2 deletions

View file

@ -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>

View file

@ -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'">

View file

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