From afd2e214bc6a4b9c99113f843dc79b18374aa39c Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 13 Nov 2014 16:09:44 +0000 Subject: [PATCH] SYWEB-152: Move up/down history fully to a directive. Previously, there was some of it in a lovely generic directive, but the core of it was hard coded id attributes in RoomController. It's now all generic in a directive: the room history you get when you up/down arrow is determined by the value of the attribute e.g. command-history="!foo:bar" would present the history for !foo:bar. In practice, this is {{room_id}} in the html. --- syweb/webclient/room/room-controller.js | 84 +----------------- syweb/webclient/room/room-directive.js | 109 +++++++++++++++++++++--- syweb/webclient/room/room.html | 2 +- 3 files changed, 101 insertions(+), 94 deletions(-) diff --git a/syweb/webclient/room/room-controller.js b/syweb/webclient/room/room-controller.js index f68a2b504..9c1f67750 100644 --- a/syweb/webclient/room/room-controller.js +++ b/syweb/webclient/room/room-controller.js @@ -414,7 +414,8 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a scrollToBottom(true); // Store the command in the history - history.push(input); + $rootScope.$broadcast("commandHistory:BROADCAST_NEW_HISTORY_ITEM(item)", + input); var isEmote = input.indexOf("/me ") === 0; var promise; @@ -625,9 +626,6 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a // Make recents highlight the current room recentsService.setSelectedRoomId($scope.room_id); - // Init the history for this room - history.init(); - // Get the up-to-date the current member list matrixService.getMemberList($scope.room_id).then( function(response) { @@ -746,84 +744,6 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a $rootScope.currentCall = call; }; - // Manage history of typed messages - // History is saved in sessionStoratge so that it survives when the user - // navigates through the rooms and when it refreshes the page - var history = { - // The list of typed messages. Index 0 is the more recents - data: [], - - // The position in the history currently displayed - position: -1, - - // The message the user has started to type before going into the history - typingMessage: undefined, - - // Init/load data for the current room - init: function() { - var data = sessionStorage.getItem("history_" + $scope.room_id); - if (data) { - this.data = JSON.parse(data); - } - }, - - // Store a message in the history - push: function(message) { - this.data.unshift(message); - - // Update the session storage - sessionStorage.setItem("history_" + $scope.room_id, JSON.stringify(this.data)); - - // Reset history position - this.position = -1; - this.typingMessage = undefined; - }, - - // Move in the history - go: function(offset) { - - if (-1 === this.position) { - // User starts to go to into the history, save the current line - this.typingMessage = $('#mainInput').val(); - } - else { - // If the user modified this line in history, keep the change - this.data[this.position] = $('#mainInput').val(); - } - - // Bounds the new position to valid data - var newPosition = this.position + offset; - newPosition = Math.max(-1, newPosition); - newPosition = Math.min(newPosition, this.data.length - 1); - this.position = newPosition; - - if (-1 !== this.position) { - // Show the message from the history - $('#mainInput').val(this.data[this.position]); - } - else if (undefined !== this.typingMessage) { - // Go back to the message the user started to type - $('#mainInput').val(this.typingMessage); - } - } - }; - - // Make history singleton methods available from HTML - $scope.history = { - goUp: function($event) { - if ($scope.room_id) { - history.go(1); - } - $event.preventDefault(); - }, - goDown: function($event) { - if ($scope.room_id) { - history.go(-1); - } - $event.preventDefault(); - } - }; - $scope.openJson = function(content) { $scope.event_selected = angular.copy(content); diff --git a/syweb/webclient/room/room-directive.js b/syweb/webclient/room/room-directive.js index 05382cfcd..187032aa8 100644 --- a/syweb/webclient/room/room-directive.js +++ b/syweb/webclient/room/room-directive.js @@ -144,19 +144,106 @@ angular.module('RoomController') }); }; }]) +// A directive which stores text sent into it and restores it via up/down arrows .directive('commandHistory', [ function() { - return function (scope, element, attrs) { - element.bind("keydown", function (event) { - var keycodePressed = event.which; - var UP_ARROW = 38; - var DOWN_ARROW = 40; - if (keycodePressed === UP_ARROW) { - scope.history.goUp(event); + var BROADCAST_NEW_HISTORY_ITEM = "commandHistory:BROADCAST_NEW_HISTORY_ITEM(item)"; + + // Manage history of typed messages + // History is saved in sessionStorage so that it survives when the user + // navigates through the rooms and when it refreshes the page + var history = { + // The list of typed messages. Index 0 is the more recents + data: [], + + // The position in the history currently displayed + position: -1, + + element: undefined, + roomId: undefined, + + // The message the user has started to type before going into the history + typingMessage: undefined, + + // Init/load data for the current room + init: function(element, roomId) { + this.roomId = roomId; + this.element = element; + var data = sessionStorage.getItem("history_" + this.roomId); + if (data) { + this.data = JSON.parse(data); } - else if (keycodePressed === DOWN_ARROW) { - scope.history.goDown(event); - } - }); + }, + + // Store a message in the history + push: function(message) { + this.data.unshift(message); + + // Update the session storage + sessionStorage.setItem("history_" + this.roomId, JSON.stringify(this.data)); + + // Reset history position + this.position = -1; + this.typingMessage = undefined; + }, + + // Move in the history + go: function(offset) { + + if (-1 === this.position) { + // User starts to go to into the history, save the current line + this.typingMessage = this.element.val(); + } + else { + // If the user modified this line in history, keep the change + this.data[this.position] = this.element.val(); + } + + // Bounds the new position to valid data + var newPosition = this.position + offset; + newPosition = Math.max(-1, newPosition); + newPosition = Math.min(newPosition, this.data.length - 1); + this.position = newPosition; + + if (-1 !== this.position) { + // Show the message from the history + this.element.val(this.data[this.position]); + } + else if (undefined !== this.typingMessage) { + // Go back to the message the user started to type + this.element.val(this.typingMessage); + } + } + }; + + return { + restrict: "AE", + scope: { + roomId: "=commandHistory" + }, + link: function (scope, element, attrs) { + element.bind("keydown", function (event) { + var keycodePressed = event.which; + var UP_ARROW = 38; + var DOWN_ARROW = 40; + if (scope.roomId) { + if (keycodePressed === UP_ARROW) { + history.go(1); + event.preventDefault(); + } + else if (keycodePressed === DOWN_ARROW) { + history.go(-1); + event.preventDefault(); + } + } + }); + + scope.$on(BROADCAST_NEW_HISTORY_ITEM, function(ngEvent, item) { + history.push(item); + }); + + history.init(element, scope.roomId); + }, + } }]) diff --git a/syweb/webclient/room/room.html b/syweb/webclient/room/room.html index b97b839b4..17565f879 100644 --- a/syweb/webclient/room/room.html +++ b/syweb/webclient/room/room.html @@ -251,7 +251,7 @@