Work with inputNode element directly

Instead of using $scope.command, we work with the inputNode element
directly to have control over the caret position. This let us have
nick completition in the same way as WeeChat.

Fix 
This commit is contained in:
David Cormier 2014-02-23 10:50:55 -05:00
parent f141095312
commit 5f25a96b51
2 changed files with 13 additions and 8 deletions

View file

@ -1,6 +1,6 @@
<form class="form form-horizontal" ng-submit="sendMessage()"> <form class="form form-horizontal" ng-submit="sendMessage()">
<div class="input-group"> <div class="input-group">
<input id="sendMessage" type="text" class="form-control monospace" autocomplete="off" ng-model="command"> <input id="sendMessage" type="text" class="form-control monospace" autocomplete="off" >
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default btn-primary">Send</button> <button class="btn btn-default btn-primary">Send</button>
</span> </span>

View file

@ -1013,9 +1013,10 @@ weechat.directive('inputBar', function() {
$scope.getInputNode = function() { $scope.getInputNode = function() {
return $element.find('input')[0]; return $element.find('input')[0];
}; };
$scope.completeNick = function() { $scope.completeNick = function() {
// input DOM node // input DOM node
var inputNode = document.getElementById('sendMessage'); var inputNode = $scope.getInputNode();
// get current input // get current input
var inputText = inputNode.value; var inputText = inputNode.value;
@ -1034,7 +1035,7 @@ weechat.directive('inputBar', function() {
$scope.iterCandidate = nickComp.iterCandidate; $scope.iterCandidate = nickComp.iterCandidate;
// update current input // update current input
$scope.command = nickComp.text; inputNode.value = nickComp.text;
// update current caret position // update current caret position
inputNode.focus(); inputNode.focus();
@ -1044,8 +1045,11 @@ weechat.directive('inputBar', function() {
// Send the message to the websocket // Send the message to the websocket
$scope.sendMessage = function() { $scope.sendMessage = function() {
connection.sendMessage($scope.command);
$scope.command = models.getActiveBuffer().addToHistory($scope.command); // log to buffer history var input = $scope.getInputNode();
connection.sendMessage(input.value);
models.getActiveBuffer().addToHistory(input.value); // log to buffer history
input.value = '';
}; };
// Handle key presses in the input bar // Handle key presses in the input bar
@ -1055,6 +1059,8 @@ weechat.directive('inputBar', function() {
return true; return true;
} }
var inputNode = $scope.getInputNode();
// Support different browser quirks // Support different browser quirks
var code = $event.keyCode ? $event.keyCode : $event.charCode; var code = $event.keyCode ? $event.keyCode : $event.charCode;
@ -1101,7 +1107,6 @@ weechat.directive('inputBar', function() {
// Alt+L -> focus on input bar // Alt+L -> focus on input bar
if ($event.altKey && (code === 76 || code === 108)) { if ($event.altKey && (code === 76 || code === 108)) {
$event.preventDefault(); $event.preventDefault();
var inputNode = document.getElementById('sendMessage');
inputNode.focus(); inputNode.focus();
inputNode.setSelectionRange(inputNode.value.length, inputNode.value.length); inputNode.setSelectionRange(inputNode.value.length, inputNode.value.length);
return true; return true;
@ -1133,13 +1138,13 @@ weechat.directive('inputBar', function() {
// Arrow up -> go up in history // Arrow up -> go up in history
if (code === 38) { if (code === 38) {
$scope.command = models.getActiveBuffer().getHistoryUp($scope.command); inputNode.value = models.getActiveBuffer().getHistoryUp(inputNode.value);
return true; return true;
} }
// Arrow down -> go down in history // Arrow down -> go down in history
if (code === 40) { if (code === 40) {
$scope.command = models.getActiveBuffer().getHistoryDown($scope.command); inputNode.value = models.getActiveBuffer().getHistoryDown(inputNode.value);
return true; return true;
} }
}; };