Add support for dropping images on bufferlines and input form
This commit is contained in:
parent
3b4f91249f
commit
f2bb543796
3 changed files with 47 additions and 2 deletions
|
@ -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>
|
||||
|
|
|
@ -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'">
|
||||
|
|
44
js/imgur-drop-directive.js
Normal file
44
js/imgur-drop-directive.js
Normal 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) );
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
})();
|
Loading…
Reference in a new issue