Keyboard shortcuts optimizations (#70)

Folder list focused state

dev/Common/Constants.js

@@ -38,7 +38,7 @@ Consts.Defaults.SearchAjaxTimeout = 120000;
  * @const
  * @type {number}
  */
-Consts.Defaults.SendMessageAjaxTimeout = 200000;
+Consts.Defaults.SendMessageAjaxTimeout = 300000;
 
 /**
  * @const

dev/Common/Enums.js

@@ -35,11 +35,13 @@ Enums.KeyState = {
 	'None': 'none',
 	'ContactList': 'contact-list',
 	'MessageList': 'message-list',
+	'FolderList': 'folder-list',
 	'MessageView': 'message-view',
 	'Compose': 'compose',
 	'Settings': 'settings',
 	'Menu': 'menu',
 	'PopupComposeOpenPGP': 'compose-open-pgp',
+	'PopupKeyboardShortcutsHelp': 'popup-keyboard-shortcuts-help',
 	'PopupAsk': 'popup-ask'
 };
 

dev/Common/Globals.js

@@ -13,7 +13,7 @@ Globals.momentTrigger = ko.observable(true);
 /**
  * @type {?}
  */
-Globals.dropdownVisibility = ko.observable(false);
+Globals.dropdownVisibility = ko.observable(false).extend({'rateLimit': 0});
 
 /**
  * @type {?}

dev/Common/Knockout.js

@@ -5,22 +5,33 @@ ko.bindingHandlers.tooltip = {
 		if (!Globals.bMobileDevice)
 		{
 			var
-				sClass = $(oElement).data('tooltip-class') || '',
-				sPlacement = $(oElement).data('tooltip-placement') || 'top'
+				$oEl = $(oElement),
+				sClass = $oEl.data('tooltip-class') || '',
+				sPlacement = $oEl.data('tooltip-placement') || 'top'
 			;
 
-			$(oElement).tooltip({
+			$oEl.tooltip({
 				'delay': {
 					'show': 500,
 					'hide': 100
 				},
 				'html': true,
+				'container': 'body',
 				'placement': sPlacement,
 				'trigger': 'hover',
 				'title': function () {
-					return '<span class="tooltip-class ' + sClass + '">' +
+					return $oEl.is('.disabled') || Globals.dropdownVisibility() ? '' : '<span class="tooltip-class ' + sClass + '">' +
 						Utils.i18n(ko.utils.unwrapObservable(fValueAccessor())) + '</span>';
 				}
+			}).click(function () {
+				$oEl.tooltip('hide');
+			});
+
+			Globals.dropdownVisibility.subscribe(function (bValue) {
+				if (bValue)
+				{
+					$oEl.tooltip('hide');
+				}
 			});
 		}
 	}
@@ -29,51 +40,39 @@ ko.bindingHandlers.tooltip = {
 ko.bindingHandlers.tooltip2 = {
 	'init': function (oElement, fValueAccessor) {
 		var
-			sClass = $(oElement).data('tooltip-class') || '',
-			sPlacement = $(oElement).data('tooltip-placement') || 'top'
+			$oEl = $(oElement),
+			sClass = $oEl.data('tooltip-class') || '',
+			sPlacement = $oEl.data('tooltip-placement') || 'top'
 		;
-		$(oElement).tooltip({
+
+		$oEl.tooltip({
 			'delay': {
 				'show': 500,
 				'hide': 100
 			},
 			'html': true,
+			'container': 'body',
 			'placement': sPlacement,
 			'title': function () {
-				return '<span class="tooltip-class ' + sClass + '">' + fValueAccessor()() + '</span>';
+				return $oEl.is('.disabled') || Globals.dropdownVisibility() ? '' :
+					'<span class="tooltip-class ' + sClass + '">' + fValueAccessor()() + '</span>';
+			}
+		}).click(function () {
+			$oEl.tooltip('hide');
+		});
+
+		Globals.dropdownVisibility.subscribe(function (bValue) {
+			if (bValue)
+			{
+				$oEl.tooltip('hide');
 			}
 		});
 	}
 };
 
-ko.__detectDropdownVisibility = _.debounce(function ($el) {
-	Globals.dropdownVisibility(!!$el.hasClass('open'));
-}, 50);
-
-ko.bindingHandlers.dropdownOpenStatus = {
+ko.bindingHandlers.registrateBootstrapDropdown = {
 	'init': function (oElement) {
-		var $el = $(oElement);
-
-		$el.find('.dropdown-toggle').click(function () {
-			ko.__detectDropdownVisibility($el);
-		});
-		
-//		$el.on('.dropdown-menu .menuitem', 'click', function () {
-//			$el.removeClass('open');
-//			ko.__detectDropdownVisibility($el);
-//		});
-
-//		$el.on('.dropdown-menu .menuitem', 'keydown', function (oEvent) {
-//			if (oEvent && Enums.EventKeyCode.Esc === oEvent.keyCode)
-//			{
-//				$el.removeClass('open');
-//				ko.__detectDropdownVisibility($el);
-//			}
-//		});
-		
-		$html.on('click.dropdown.data-api', function () {
-			ko.__detectDropdownVisibility($el);
-		});
+		BootstrapDropdowns.push($(oElement));
 	}
 };
 
@@ -85,7 +84,7 @@ ko.bindingHandlers.openDropdownTrigger = {
 			if (!$el.hasClass('open'))
 			{
 				$el.find('.dropdown-toggle').dropdown('toggle');
-				ko.__detectDropdownVisibility($el);
+				Utils.detectDropdownVisibility();
 			}
 			
 			fValueAccessor()(false);
@@ -184,13 +183,16 @@ ko.bindingHandlers.clickOnTrue = {
 
 ko.bindingHandlers.modal = {
 	'init': function (oElement, fValueAccessor) {
-		$(oElement).toggleClass('fade', !Globals.bMobileDevice) .modal({
+		
+		$(oElement).toggleClass('fade', !Globals.bMobileDevice).modal({
 			'keyboard': false,
 			'show': ko.utils.unwrapObservable(fValueAccessor())
-		}).on('hidden', function () {
-			fValueAccessor()(false);
-		}).on('shown', function () {
+		})
+		.on('shown', function () {
 			Utils.windowResize();
+		})
+		.find('.close').click(function () {
+			fValueAccessor()(false);
 		});
 	},
 	'update': function (oElement, fValueAccessor) {

dev/Common/Selector.js

@@ -108,10 +108,8 @@ function Selector(oKoList, oKoSelectedItem,
 	this.sItemFocusedSelector = sItemFocusedSelector;
 	
 	this.sLastUid = '';
-	this.oCallbacks = {};
-
-	this.bUseKeyboard = true;
 	this.bAutoSelect = true;
+	this.oCallbacks = {};
 
 	this.emptyFunction = function () {};
 
@@ -320,7 +318,6 @@ Selector.prototype.init = function (oContentVisible, oContentScrollable, sKeySco
 			})
 		;
 
-// TODO
 		key('enter', sKeyScope, function () {
 			if (self.focusedItem())
 			{
@@ -379,11 +376,6 @@ Selector.prototype.init = function (oContentVisible, oContentScrollable, sKeySco
 	}
 };
 
-Selector.prototype.useKeyboard = function (bValue)
-{
-	this.bUseKeyboard = !!bValue;
-};
-
 Selector.prototype.autoSelect = function (bValue)
 {
 	this.bAutoSelect = !!bValue;

dev/Common/Utils.js

@@ -1736,7 +1736,7 @@ Utils.disableKeyFilter = function ()
 	if (window.key)
 	{
 		key.filter = function () {
-			return true;
+			return RL.data().useKeyboardShortcuts();
 		};
 	}
 };
@@ -1746,15 +1746,27 @@ Utils.restoreKeyFilter = function ()
 	if (window.key)
 	{
 		key.filter = function (event) {
-			var
-				element = event.target || event.srcElement,
-				tagName = element ? element.tagName : ''
-			;
 
-			tagName = tagName.toUpperCase();
-			return !(tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' ||
-				(element && tagName === 'DIV' && 'editorHtmlArea' === element.className && element.contentEditable)
-			);
+			if (RL.data().useKeyboardShortcuts())
+			{
+				var
+					element = event.target || event.srcElement,
+					tagName = element ? element.tagName : ''
+				;
+
+				tagName = tagName.toUpperCase();
+				return !(tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' ||
+					(element && tagName === 'DIV' && 'editorHtmlArea' === element.className && element.contentEditable)
+				);
+			}
+
+			return false;
 		};
 	}
 };
+
+Utils.detectDropdownVisibility = _.debounce(function () {
+	Globals.dropdownVisibility(!!_.find(BootstrapDropdowns, function (oItem) {
+		return oItem.hasClass('open');
+	}));
+}, 50);

dev/Common/_Begin.js

@@ -46,6 +46,11 @@ var
 		'settings-disabled': []
 	},
 
+	/**
+	 * @type {Array}
+	 */
+	BootstrapDropdowns = [],
+
 	/**
 	 * @type {*}
 	 */

dev/Common/_End.js

@@ -7,6 +7,10 @@ $window.unload(function () {
 	Globals.bUnload = true;
 });
 
+$html.on('click.dropdown.data-api', function () {
+	Utils.detectDropdownVisibility();
+});
+
 // export
 window['rl'] = window['rl'] || {};
 window['rl']['addHook'] = Plugins.addHook;