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 #74
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;
} }
}; };