Added keyboard shortcuts (part 1) (#70)

Scrolling in message view (#109)

dev/ViewModels/MailBoxFolderListViewModel.js

@@ -24,11 +24,19 @@ Utils.extendAsViewModel('MailBoxFolderListViewModel', MailBoxFolderListViewModel
 MailBoxFolderListViewModel.prototype.onBuild = function (oDom)
 {
 	oDom
+		.on('click', '.b-folders .b-content', function () {
+			if (RL.data().useKeyboardShortcuts() && RL.data().message.focused())
+			{
+				RL.data().message.focused(false);
+			}
+		})
 		.on('click', '.b-folders .e-item .e-link .e-collapsed-sign', function (oEvent) {
-			var 
+
+					var
 				oFolder = ko.dataFor(this),
 				bCollapsed = false
 			;
+
 			if (oFolder && oEvent)
 			{
 				bCollapsed = oFolder.collapsed();

dev/ViewModels/MailBoxMessageListViewModel.js

@@ -16,6 +16,7 @@ function MailBoxMessageListViewModel()
 
 	this.popupVisibility = RL.popupVisibility;
 
+	this.message = oData.message;
 	this.messageList = oData.messageList;
 	this.currentMessage = oData.currentMessage;
 	this.isMessageSelected = oData.isMessageSelected;
@@ -214,13 +215,6 @@ function MailBoxMessageListViewModel()
 		return oMessage ? oMessage.generateUid() : '';
 	});
 	
-	this.selector.on('onDelete', _.bind(function () {
-		if (0 < RL.data().messageListCheckedOrSelected().length)
-		{
-			this.deleteCommand();
-		}
-	}, this));
-
 	RL
 		.sub('mailbox.message-list.selector.go-down', function () {
 			this.selector.goDown();
@@ -540,31 +534,15 @@ MailBoxMessageListViewModel.prototype.onBuild = function (oDom)
 		return false;
 	});
 
-	this.selector.init(this.oContentVisible, this.oContentScrollable);
-
-	$document.on('keydown', function (oEvent) {
-
-		var
-			bResult = true,
-			iKeyCode = oEvent ? oEvent.keyCode : 0
-		;
-
-		if (oEvent && self.viewModelVisibility() && oData.useKeyboardShortcuts() && !RL.popupVisibility() && !oData.messageFullScreenMode() && !Utils.inFocus())
-		{
-			if (Enums.Layout.NoPreview !== oData.layout() || (!oData.message() && (Enums.EventKeyCode.Delete === iKeyCode || Enums.EventKeyCode.A === iKeyCode)))
-			{
-				if (oEvent.ctrlKey && Enums.EventKeyCode.A === iKeyCode)
-				{
-					self.checkAll(!(self.checkAll() && !self.isIncompleteChecked()));
-					bResult = false;
-				}
-			}
-		}
-
-		return bResult;
-	});
+	this.selector.init(this.oContentVisible, this.oContentScrollable, Enums.KeyState.MessageList);
 
 	oDom
+		.on('click', '.messageList .b-message-list-wrapper', function () {
+			if (oData.useKeyboardShortcuts() && self.message.focused())
+			{
+				self.message.focused(false);
+			}
+		})
 		.on('click', '.e-pagenator .e-page', function () {
 			var oPage = ko.dataFor(this);
 			if (oPage)
@@ -625,6 +603,7 @@ MailBoxMessageListViewModel.prototype.onBuild = function (oDom)
 	}, this).extend({'notify': 'always'});
 
 	this.initUploaderForAppend();
+	this.initShortcuts();
 
 	if (!Globals.bMobileDevice && !!RL.settingsGet('AllowPrefetch') && ifvisible)
 	{
@@ -636,6 +615,121 @@ MailBoxMessageListViewModel.prototype.onBuild = function (oDom)
 	}
 };
 
+MailBoxMessageListViewModel.prototype.initShortcuts = function ()
+{
+	var
+		self = this,
+		oData = RL.data()
+	;
+
+	// disable print
+	key('ctrl+p, command+p', Enums.KeyState.MessageList, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			return false;
+		}
+	});
+
+	// delete
+	key('delete, shift+delete', Enums.KeyState.MessageList, function (event, handler) {
+		if (oData.useKeyboardShortcuts() && event)
+		{
+			if (0 < RL.data().messageListCheckedOrSelected().length)
+			{
+				if (handler && 'shift+delete' === handler.shortcut)
+				{
+					self.deleteWithoutMoveCommand();
+				}
+				else
+				{
+					self.deleteCommand();
+				}
+			}
+
+			return false;
+		}
+	});
+
+	// check all
+	key('ctrl+a, command+a', Enums.KeyState.MessageList, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.checkAll(!(self.checkAll() && !self.isIncompleteChecked()));
+			return false;
+		}
+	});
+
+	// new message (open compose popup)
+	key('c,n', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			kn.showScreenPopup(PopupsComposeViewModel);
+			return false;
+		}
+	});
+
+	// shortcuts help
+	key('shift+/', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			kn.showScreenPopup(PopupsKeyboardShortcutsHelpViewModel);
+			return false;
+		}
+	});
+
+	// search input focus
+	key('/', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			if (self.message())
+			{
+				self.message.focused(false);
+			}
+			
+			self.inputMessageListSearchFocus(true);
+			return false;
+		}
+	});
+
+	// cancel search
+	key('esc', Enums.KeyState.MessageList, function () {
+		if (oData.useKeyboardShortcuts() && '' !== self.messageListSearchDesc())
+		{
+			self.cancelSearch();
+			return false;
+		}
+	});
+
+	// change focused state
+	key('tab, enter', Enums.KeyState.MessageList, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			if (self.message())
+			{
+				self.message.focused(true);
+			}
+
+			return false;
+		}
+	});
+
+	key('ctrl+left, command+left', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			// TODO
+			return false;
+		}
+	});
+
+	key('ctrl+right, command+right', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			// TODO
+			return false;
+		}
+	});
+};
+
 MailBoxMessageListViewModel.prototype.prefetchNextTick = function ()
 {
 	if (!this.bPrefetch && !ifvisible.now() && this.viewModelVisibility())

dev/ViewModels/MailBoxMessageViewViewModel.js

@@ -21,6 +21,7 @@ function MailBoxMessageViewViewModel()
 
 	this.oMessageScrollerDom = null;
 
+	this.keyScope = oData.keyScope;
 	this.message = oData.message;
 	this.messageLoading = oData.messageLoading;
 	this.messageLoadingThrottle = oData.messageLoadingThrottle;
@@ -36,6 +37,7 @@ function MailBoxMessageViewViewModel()
 	this.fullScreenMode = oData.messageFullScreenMode;
 
 	this.showFullInfo = ko.observable(false);
+	this.messageDomFocused = ko.observable(false);
 
 	this.messageVisibility = ko.computed(function () {
 		return !this.messageLoadingThrottle() && !!this.message();
@@ -68,36 +70,39 @@ function MailBoxMessageViewViewModel()
 	}, this.messageVisibility);
 
 	this.deleteCommand = Utils.createCommand(this, function () {
-
 		if (this.message())
 		{
 			RL.deleteMessagesFromFolder(Enums.FolderType.Trash,
 				this.message().folderFullNameRaw,
 				[this.message().uid], true);
 		}
+	}, this.messageVisibility);
 
+	this.deleteWithoutMoveCommand = Utils.createCommand(this, function () {
+		if (this.message())
+		{
+			RL.deleteMessagesFromFolder(Enums.FolderType.Trash,
+				RL.data().currentFolderFullNameRaw(),
+				RL.data().messageListCheckedOrSelectedUidsWithSubMails(), false);
+		}
 	}, this.messageVisibility);
 	
 	this.archiveCommand = Utils.createCommand(this, function () {
-
 		if (this.message())
 		{
 			RL.deleteMessagesFromFolder(Enums.FolderType.Archive,
 				this.message().folderFullNameRaw,
 				[this.message().uid], true);
 		}
-
 	}, this.messageVisibility);
 	
 	this.spamCommand = Utils.createCommand(this, function () {
-
 		if (this.message())
 		{
 			RL.deleteMessagesFromFolder(Enums.FolderType.Spam,
 				this.message().folderFullNameRaw,
 				[this.message().uid], true);
 		}
-		
 	}, this.messageVisibility);
 
 	// viewer
@@ -291,29 +296,14 @@ MailBoxMessageViewViewModel.prototype.onBuild = function (oDom)
 		self = this,
 		oData = RL.data()
 	;
-	
-	$document.on('keydown', function (oEvent) {
 
-		var
-			bResult = true,
-			iKeyCode = oEvent ? oEvent.keyCode : 0
-		;
-
-		if (0 < iKeyCode && (Enums.EventKeyCode.Esc === iKeyCode) &&
-			self.viewModelVisibility() && oData.useKeyboardShortcuts() && !Utils.inFocus() && oData.message())
+	this.fullScreenMode.subscribe(function (bValue) {
+		if (bValue)
 		{
-			self.fullScreenMode(false);
-			if (Enums.Layout.NoPreview === oData.layout())
-			{
-				RL.historyBack();
-			}
-
-			bResult = false;
+			self.message.focused(true);
 		}
-
-		return bResult;
-	});
-
+	}, this);
+	
 	$('.attachmentsPlace', oDom).magnificPopup({
 		'delegate': '.magnificPopupImage:visible',
 		'type': 'image',
@@ -335,6 +325,12 @@ MailBoxMessageViewViewModel.prototype.onBuild = function (oDom)
 	});
 
 	oDom
+		.on('click', '.messageView .messageItem', function () {
+			if (oData.useKeyboardShortcuts() && self.message())
+			{
+				self.message.focused(true);
+			}
+		})
 		.on('mousedown', 'a', function (oEvent) {
 			// setup maito protocol
 			return !(oEvent && 3 !== oEvent['which'] && RL.mailToHelper($(this).attr('href')));
@@ -358,8 +354,171 @@ MailBoxMessageViewViewModel.prototype.onBuild = function (oDom)
 		})
 	;
 
+	this.message.focused.subscribe(function (bValue) {
+		this.messageDomFocused(!!bValue);
+	}, this);
+
+	this.keyScope.subscribe(function (sValue) {
+		if (Enums.KeyState.MessageView === sValue && this.message.focused())
+		{
+			this.messageDomFocused(true);
+		}
+	}, this);
+
 	this.oMessageScrollerDom = oDom.find('.messageItem .content');
 	this.oMessageScrollerDom = this.oMessageScrollerDom && this.oMessageScrollerDom[0] ? this.oMessageScrollerDom : null;
+
+	this.initShortcuts();
+};
+
+/**
+ * @return {boolean}
+ */
+MailBoxMessageViewViewModel.prototype.escShortcuts = function ()
+{
+	if (this.viewModelVisibility() && RL.data().useKeyboardShortcuts() && this.message())
+	{
+		if (this.fullScreenMode())
+		{
+			this.fullScreenMode(false);
+		}
+		else
+		{
+			this.message.focused(false);
+		}
+
+		if (Enums.Layout.NoPreview === RL.data().layout())
+		{
+			RL.historyBack();
+		}
+
+		return false;
+	}
+};
+
+MailBoxMessageViewViewModel.prototype.initShortcuts = function ()
+{
+	var
+		self = this,
+		oData = RL.data()
+	;
+
+	// exit fullscreen, back
+	key('esc', Enums.KeyState.MessageView, _.bind(this.escShortcuts, this));
+
+	// fullscreen
+	key('enter', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.toggleFullScreen();
+			return false;
+		}
+	});
+
+	// reply
+	key('r', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.replyCommand();
+			return false;
+		}
+	});
+
+	// replaAll
+	key('a', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.replyAllCommand();
+			return false;
+		}
+	});
+
+	// forward
+	key('f', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.forwardCommand();
+			return false;
+		}
+	});
+
+	// message information
+	key('i', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.showFullInfo(!self.showFullInfo());
+			return false;
+		}
+	});
+
+	key('ctrl+left, command+left', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.goDownCommand();
+			return false;
+		}
+	});
+
+	key('ctrl+right, command+right', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.goUpCommand();
+			return false;
+		}
+	});
+
+	// print
+	key('ctrl+p, command+p', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			if (self.message())
+			{
+				self.message().printMessage();
+			}
+			
+			return false;
+		}
+	});
+
+	// archive
+//	key('delete', Enums.KeyState.MessageView, function () {
+//		if (oData.useKeyboardShortcuts())
+//		{
+//			self.archiveCommand();
+//			return false;
+//		}
+//	});
+
+	// delete
+	key('delete, shift+delete', Enums.KeyState.MessageView, function (event, handler) {
+		if (oData.useKeyboardShortcuts() && event)
+		{
+			self.deleteCommand();
+			if (handler && 'shift+delete' === handler.shortcut)
+			{
+//					self.deleteWithoutMoveCommand();
+				self.deleteCommand();
+			}
+			else
+			{
+				self.deleteCommand();
+			}
+			return false;
+		}
+	});
+
+	// change focused state
+	key('tab', Enums.KeyState.MessageView, function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			if (self.message())
+			{
+				self.message.focused(false);
+			}
+
+			return false;
+		}
+	});
 };
 
 /**

dev/ViewModels/PopupsAskViewModel.js

@@ -19,6 +19,7 @@ function PopupsAskViewModel()
 	this.fNoAction = null;
 
 	this.bDisabeCloseOnEsc = true;
+	this.sKeyScope = Enums.KeyState.MessageList;
 
 	Knoin.constructorEnd(this);
 }
@@ -40,22 +41,22 @@ PopupsAskViewModel.prototype.clearPopup = function ()
 
 PopupsAskViewModel.prototype.yesClick = function ()
 {
+	this.cancelCommand();
+
 	if (Utils.isFunc(this.fYesAction))
 	{
 		this.fYesAction.call(null);
 	}
-
-	this.cancelCommand();
 };
 
 PopupsAskViewModel.prototype.noClick = function ()
 {
+	this.cancelCommand();
+
 	if (Utils.isFunc(this.fNoAction))
 	{
 		this.fNoAction.call(null);
 	}
-
-	this.cancelCommand();
 };
 
 /**
@@ -82,6 +83,9 @@ PopupsAskViewModel.prototype.onShow = function (sAskDesc, fYesFunc, fNoFunc, sYe
 	{
 		this.yesButton(sNoButton);
 	}
+
+	this.sKeyScope = RL.data().keyScope();
+	RL.data().keyScope(Enums.KeyState.PopupAsk);
 };
 
 PopupsAskViewModel.prototype.onFocus = function ()
@@ -91,31 +95,25 @@ PopupsAskViewModel.prototype.onFocus = function ()
 
 PopupsAskViewModel.prototype.onHide = function ()
 {
+	RL.data().keyScope(this.sKeyScope);
 };
 
 PopupsAskViewModel.prototype.onBuild = function ()
 {
-	var self = this;
-	$window.on('keydown', function (oEvent) {
-		var bResult = true;
-		if (oEvent && self.modalVisibility())
+	key('tab, right, left', Enums.KeyState.PopupAsk, _.bind(function () {
+		if (this.modalVisibility())
 		{
-			if (Enums.EventKeyCode.Tab === oEvent.keyCode || Enums.EventKeyCode.Right === oEvent.keyCode || Enums.EventKeyCode.Left === oEvent.keyCode)
+			if (this.yesFocus())
 			{
-				if (self.yesFocus())
-				{
-					self.noFocus(true);
-				}
-				else
-				{
-					self.yesFocus(true);
-				}
-
-				bResult = false;
+				this.noFocus(true);
+			}
+			else
+			{
+				this.yesFocus(true);
 			}
-		}
 
-		return bResult;
-	});
+			return false;
+		}
+	}, this));
 };
 

dev/ViewModels/PopupsComposeViewModel.js

@@ -351,7 +351,8 @@ function PopupsComposeViewModel()
 //	this.driveCallback = _.bind(this.driveCallback, this);
 
 	this.bDisabeCloseOnEsc = true;
-
+	this.sKeyScope = Enums.KeyState.MessageList;
+	
 	Knoin.constructorEnd(this);
 }
 
@@ -568,6 +569,8 @@ PopupsComposeViewModel.prototype.onHide = function ()
 {
 	this.reset();
 	kn.routeOn();
+
+	RL.data().keyScope(this.sKeyScope);
 };
 
 /**
@@ -639,6 +642,9 @@ PopupsComposeViewModel.prototype.editor = function (fOnInit)
 PopupsComposeViewModel.prototype.onShow = function (sType, oMessageOrArray, aToEmails)
 {
 	kn.routeOff();
+	
+	this.sKeyScope = RL.data().keyScope();
+	RL.data().keyScope(Enums.KeyState.Compose);
 
 	var
 		self = this,
@@ -914,6 +920,11 @@ PopupsComposeViewModel.prototype.tryToClosePopup = function ()
 	}]);
 };
 
+PopupsComposeViewModel.prototype.useShortcuts = function ()
+{
+	return this.modalVisibility() && RL.data().useKeyboardShortcuts();
+};
+
 PopupsComposeViewModel.prototype.onBuild = function ()
 {
 	this.initUploader();
@@ -923,29 +934,25 @@ PopupsComposeViewModel.prototype.onBuild = function ()
 		oScript = null
 	;
 
-	$window.on('keydown', function (oEvent) {
-		var bResult = true;
-
-		if (oEvent && self.modalVisibility() && RL.data().useKeyboardShortcuts())
+	key('ctrl+s, command+s', Enums.KeyState.Compose, function () {
+		if (self.useShortcuts())
 		{
-			if (oEvent.ctrlKey && !oEvent.shiftKey && !oEvent.altKey && Enums.EventKeyCode.S === oEvent.keyCode)
-			{
-				self.saveCommand();
-				bResult = false;
-			}
-			else if (oEvent.ctrlKey && !oEvent.shiftKey && !oEvent.altKey && Enums.EventKeyCode.Enter === oEvent.keyCode)
-			{
-				self.sendCommand();
-				bResult = false;
-			}
-			else if (Enums.EventKeyCode.Esc === oEvent.keyCode)
-			{
-				self.tryToClosePopup();
-				bResult = false;
-			}
+			self.saveCommand();
+			return false;
 		}
+	});
 
-		return bResult;
+	key('ctrl+enter, command+enter', Enums.KeyState.Compose, function () {
+		if (self.useShortcuts())
+		{
+			self.sendCommand();
+			return false;
+		}
+	});
+	
+	key('esc', Enums.KeyState.Compose, function () {
+		self.tryToClosePopup();
+		return false;
 	});
 
 	$window.on('resize', function () {

dev/ViewModels/PopupsContactsViewModel.js

@@ -171,10 +171,6 @@ function PopupsContactsViewModel()
 		return oContact ? oContact.generateUid() : '';
 	});
 
-	this.selector.on('onDelete', _.bind(function () {
-		this.deleteCommand();
-	}, this));
-
 	this.newCommand = Utils.createCommand(this, function () {
 		this.populateViewContact(null);
 		this.currentContact(null);
@@ -307,6 +303,8 @@ function PopupsContactsViewModel()
 		}
 	}, this);
 
+	this.sKeyScope = Enums.KeyState.MessageList;
+
 	Knoin.constructorEnd(this);
 }
 
@@ -577,10 +575,18 @@ PopupsContactsViewModel.prototype.onBuild = function (oDom)
 	this.oContentVisible = $('.b-list-content', oDom);
 	this.oContentScrollable = $('.content', this.oContentVisible);
 
-	this.selector.init(this.oContentVisible, this.oContentScrollable);
+	this.selector.init(this.oContentVisible, this.oContentScrollable, Enums.KeyState.ContactList);
 
 	var self = this;
 
+	key('delete', Enums.KeyState.ContactList, function () {
+		if (RL.data().useKeyboardShortcuts())
+		{
+			self.deleteCommand();
+			return false;
+		}
+	});
+
 	ko.computed(function () {
 		var
 			bModalVisibility = this.modalVisibility(),
@@ -607,6 +613,9 @@ PopupsContactsViewModel.prototype.onShow = function ()
 {
 	kn.routeOff();
 	this.reloadContactList(true);
+
+	this.sKeyScope = RL.data().keyScope();
+	RL.data().keyScope(Enums.KeyState.ContactList);
 };
 
 PopupsContactsViewModel.prototype.onHide = function ()
@@ -619,4 +628,6 @@ PopupsContactsViewModel.prototype.onHide = function ()
 	_.each(this.contacts(), function (oItem) {
 		oItem.checked(false);
 	});
+
+	RL.data().keyScope(this.sKeyScope);
 };

dev/ViewModels/PopupsKeyboardShortcutsHelpViewModel.js

@@ -0,0 +1,27 @@
+/* RainLoop Webmail (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
+
+/**
+ * @constructor
+ * @extends KnoinAbstractViewModel
+ */
+function PopupsKeyboardShortcutsHelpViewModel()
+{
+	KnoinAbstractViewModel.call(this, 'Popups', 'PopupsKeyboardShortcutsHelp');
+
+	this.sKeyScope = Enums.KeyState.None;
+
+	Knoin.constructorEnd(this);
+}
+
+Utils.extendAsViewModel('PopupsKeyboardShortcutsHelpViewModel', PopupsKeyboardShortcutsHelpViewModel);
+
+PopupsKeyboardShortcutsHelpViewModel.prototype.onShow = function ()
+{
+	this.sKeyScope = RL.data().keyScope();
+	RL.data().keyScope(Enums.KeyState.None);
+};
+
+PopupsKeyboardShortcutsHelpViewModel.prototype.onHide = function ()
+{
+	RL.data().keyScope(this.sKeyScope);
+};

dev/ViewModels/PopupsPluginViewModel.js

@@ -127,14 +127,11 @@ PopupsPluginViewModel.prototype.tryToClosePopup = function ()
 
 PopupsPluginViewModel.prototype.onBuild = function ()
 {
-	var self = this;
-	$window.on('keydown', function (oEvent) {
-		var bResult = true;
-		if (oEvent && Enums.EventKeyCode.Esc === oEvent.keyCode && self.modalVisibility())
+	key('esc', _.bind(function () {
+		if (this.modalVisibility())
 		{
-			self.tryToClosePopup();
-			bResult = false;
+			this.tryToClosePopup();
+			return false;
 		}
-		return bResult;
-	});
+	}));
 };