Dropdown menu keyboard navigation

Keyboard shortcuts help popup (Shift + / )
This commit is contained in:
RainLoop Team 2014-04-12 05:05:57 +04:00
parent f52be6fb66
commit d961fa480a
47 changed files with 5598 additions and 583 deletions

View file

@ -637,7 +637,7 @@
border-radius: 8px;
}
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
@ -1142,7 +1142,7 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
@charset "UTF-8";
@font-face {
@ -1483,7 +1483,7 @@ table {
.icon-filter:before {
content: "\e063";
}
/** initial setup **/
.nano {
/*
@ -1535,7 +1535,7 @@ table {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
z-index: 10000;
z-index: 102;
margin : 2px;
}
@ -1600,7 +1600,7 @@ table {
.nano > .pane2:hover > .slider2, .nano > .pane2.active > .slider2 {
background-color: rgba(0, 0, 0, 0.4);
}
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
@ -1965,7 +1965,7 @@ img.mfp-img {
right: 0;
padding-top: 0; }
/* overlay at start */
.mfp-fade.mfp-bg {
@ -2011,7 +2011,7 @@ img.mfp-img {
-moz-transform: translateX(50px);
transform: translateX(50px);
}
.simple-pace {
-webkit-pointer-events: none;
pointer-events: none;
@ -2082,7 +2082,7 @@ img.mfp-img {
@keyframes simple-pace-stripe-animation {
0% { transform: none; transform: none; }
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
}
.inputosaurus-container {
background-color:#fff;
border:1px solid #bcbec0;
@ -2150,7 +2150,7 @@ img.mfp-img {
box-shadow:none;
}
.inputosaurus-input-hidden { display:none; }
.flag-wrapper {
width: 24px;
height: 16px;
@ -2194,7 +2194,7 @@ img.mfp-img {
.flag.flag-pt-br {background-position: -192px -11px}
.flag.flag-cn, .flag.flag-zh-tw, .flag.flag-zh-cn, .flag.flag-zh-hk {background-position: -208px -22px}
/* RainLoop Webmail (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
.clearfix {
*zoom: 1;
@ -5869,13 +5869,13 @@ html.no-rgba .modal {
background-image: none;
color: #fff;
}
.g-ui-menu .e-item.disable > .e-link {
.g-ui-menu .e-item.disabled > .e-link {
cursor: not-allowed;
background-color: #fff;
background-image: none;
color: grey;
}
.g-ui-menu .e-item.disable [class^="icon-"] {
.g-ui-menu .e-item.disabled [class^="icon-"] {
color: grey;
}
.g-ui-table {
@ -6417,6 +6417,9 @@ html.rl-no-preview-pane #rl-right .ui-resizable-handle {
.popups .b-ask-content .desc-place {
font-size: 18px;
}
.popups .b-shortcuts-content.modal {
width: 1025px;
}
.popups .b-shortcuts-content .modal-header {
background-color: #fff;
}
@ -7850,7 +7853,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
opacity: 1;
filter: alpha(opacity=100);
}
.b-compose .b-header-toolbar .btn.disable.button-delete {
.b-compose .b-header-toolbar .btn.disabled.button-delete {
visibility: hidden;
}
.b-compose .b-header-toolbar .button-save,
@ -7858,7 +7861,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
.b-compose .b-header-toolbar .saved-text {
margin-left: 8px;
}
.b-compose .b-header-toolbar .disable.button-delete {
.b-compose .b-header-toolbar .disabled.button-delete {
margin-left: 0px;
}
.b-compose .b-header {
@ -8064,17 +8067,17 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
filter: alpha(opacity=100);
}
.b-admin-domains-list-table .e-item .delete-domain,
.b-admin-domains-list-table .e-item .disable-domain {
.b-admin-domains-list-table .e-item .disabled-domain {
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
.b-admin-domains-list-table .e-item.disabled .disable-domain {
.b-admin-domains-list-table .e-item.disabled .disabled-domain {
opacity: 0.5;
filter: alpha(opacity=50);
}
.b-admin-domains-list-table .e-item .delete-domain:hover,
.b-admin-domains-list-table .e-item .disable-domain:hover {
.b-admin-domains-list-table .e-item .disabled-domain:hover {
opacity: 1;
filter: alpha(opacity=100);
}
@ -8159,7 +8162,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
.b-admin-plugins-list-table .e-item.disabled .plugin-name {
color: #bbb;
}
.b-admin-plugins-list-table .e-item.disabled .disable-plugin {
.b-admin-plugins-list-table .e-item.disabled .disabled-plugin {
opacity: 0.5;
filter: alpha(opacity=50);
}

File diff suppressed because one or more lines are too long

View file

@ -1,5 +1,5 @@
/*! RainLoop Webmail Admin Module (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
(function (window, $, ko, crossroads, hasher, _) {
/*! RainLoop Webmail Admin Module (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
(function (window, $, ko, crossroads, hasher, _) {
'use strict';
@ -70,14 +70,14 @@ var
$document = $(window.document),
NotificationClass = window.Notification && window.Notification.requestPermission ? window.Notification : null
;
;
/*jshint onevar: false*/
/**
* @type {?AdminApp}
*/
var RL = null;
/*jshint onevar: true*/
/**
* @type {?}
*/
@ -88,6 +88,11 @@ Globals.now = (new Date()).getTime();
*/
Globals.momentTrigger = ko.observable(true);
/**
* @type {?}
*/
Globals.dropdownVisibility = ko.observable(false);
/**
* @type {?}
*/
@ -221,7 +226,7 @@ if (Globals.bAllowPdfPreview && navigator && navigator.mimeTypes)
return oType && 'application/pdf' === oType.type;
});
}
Consts.Defaults = {};
Consts.Values = {};
Consts.DataImages = {};
@ -339,7 +344,7 @@ Consts.DataImages.UserDotPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA
* @type {string}
*/
Consts.DataImages.TranspPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=';
/**
* @enum {string}
*/
@ -377,6 +382,7 @@ Enums.KeyState = {
'MessageList': 'message-list',
'MessageView': 'message-view',
'Compose': 'compose',
'Settings': 'settings',
'Menu': 'menu',
'PopupComposeOpenPGP': 'compose-open-pgp',
'PopupAsk': 'popup-ask'
@ -716,7 +722,7 @@ Enums.Notification = {
'UnknownNotification': 999,
'UnknownError': 999
};
Utils.trim = $.trim;
Utils.inArray = $.inArray;
Utils.isArray = _.isArray;
@ -2087,10 +2093,10 @@ Utils.draggeblePlace = function ()
Utils.defautOptionsAfterRender = function (oOption, oItem)
{
if (oItem && !Utils.isUnd(oItem.disable))
if (oItem && !Utils.isUnd(oItem.disabled))
{
ko.applyBindingsToNode(oOption, {
'disable': oItem.disable
'disabled': oItem.disabled
}, oItem);
}
};
@ -2475,7 +2481,7 @@ Utils.restoreKeyFilter = function ()
};
}
};
// Base64 encode / decode
// http://www.webtoolkit.info/
@ -2638,7 +2644,7 @@ Base64 = {
}
};
/*jslint bitwise: false*/
/*jslint bitwise: false*/
ko.bindingHandlers.tooltip = {
'init': function (oElement, fValueAccessor) {
if (!Globals.bMobileDevice)
@ -2647,7 +2653,7 @@ ko.bindingHandlers.tooltip = {
sClass = $(oElement).data('tooltip-class') || '',
sPlacement = $(oElement).data('tooltip-placement') || 'top'
;
$(oElement).tooltip({
'delay': {
'show': 500,
@ -2685,7 +2691,54 @@ ko.bindingHandlers.tooltip2 = {
}
};
ko.bindingHandlers.dropdown = {
ko.__detectDropdownVisibility = _.debounce(function ($el) {
Globals.dropdownVisibility(!!$el.hasClass('open'));
}, 50);
ko.bindingHandlers.dropdownOpenStatus = {
'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);
});
}
};
ko.bindingHandlers.openDropdownTrigger = {
'update': function (oElement, fValueAccessor) {
if (ko.utils.unwrapObservable(fValueAccessor()))
{
var $el = $(oElement);
if (!$el.hasClass('open'))
{
$el.find('.dropdown-toggle').dropdown('toggle');
ko.__detectDropdownVisibility($el);
}
fValueAccessor()(false);
}
}
};
ko.bindingHandlers.dropdownCloser = {
'init': function (oElement) {
$(oElement).closest('.dropdown').on('click', '.e-item', function () {
$(oElement).dropdown('toggle');
@ -3296,7 +3349,7 @@ ko.observable.fn.validateFunc = function (fFunc)
return this;
};
/**
* @constructor
*/
@ -3594,7 +3647,7 @@ LinkBuilder.prototype.socialFacebook = function ()
{
return this.sServer + 'SocialFacebook' + ('' !== this.sSpecSuffix ? '/' + this.sSpecSuffix + '/' : '');
};
/**
* @type {Object}
*/
@ -3688,7 +3741,7 @@ Plugins.settingsGet = function (sPluginSection, sName)
};
/**
* @constructor
*/
@ -3762,7 +3815,7 @@ CookieDriver.prototype.get = function (sKey)
return mResult;
};
/**
* @constructor
*/
@ -3833,7 +3886,7 @@ LocalStorageDriver.prototype.get = function (sKey)
return mResult;
};
/**
* @constructor
*/
@ -3876,7 +3929,7 @@ LocalStorage.prototype.get = function (iKey)
{
return this.oDriver ? this.oDriver.get('p' + iKey) : null;
};
/**
* @constructor
*/
@ -3889,7 +3942,7 @@ KnoinAbstractBoot.prototype.bootstart = function ()
{
};
/**
* @param {string=} sPosition = ''
* @param {string=} sTemplate = ''
@ -3978,7 +4031,7 @@ KnoinAbstractViewModel.prototype.registerPopupEscapeKey = function ()
return true;
});
};
/**
* @param {string} sScreenName
* @param {?=} aViewModels = []
@ -4054,7 +4107,7 @@ KnoinAbstractScreen.prototype.__start = function ()
this.oCross = oRoute;
}
};
/**
* @constructor
*/
@ -4443,7 +4496,7 @@ Knoin.prototype.bootstart = function ()
};
kn = new Knoin();
/**
* @param {string=} sEmail
* @param {string=} sName
@ -4807,7 +4860,7 @@ EmailModel.prototype.inputoTagLine = function ()
{
return 0 < this.name.length ? this.name + ' (' + this.email + ')' : this.email;
};
/**
* @constructor
* @extends KnoinAbstractViewModel
@ -5025,7 +5078,7 @@ PopupsDomainViewModel.prototype.clearForm = function ()
this.smtpAuth(true);
this.whiteList('');
};
/**
* @constructor
* @extends KnoinAbstractViewModel
@ -5162,7 +5215,7 @@ PopupsPluginViewModel.prototype.onBuild = function ()
}
}, this));
};
/**
* @constructor
* @extends KnoinAbstractViewModel
@ -5278,7 +5331,7 @@ PopupsActivateViewModel.prototype.validateSubscriptionKey = function ()
{
var sValue = this.key();
return '' === sValue || !!/^RL[\d]+-[A-Z0-9\-]+Z$/.test(Utils.trim(sValue));
};
};
/**
* @constructor
* @extends KnoinAbstractViewModel
@ -5338,7 +5391,7 @@ PopupsLanguagesViewModel.prototype.changeLanguage = function (sLang)
RL.data().mainLanguage(sLang);
this.cancelCommand();
};
/**
* @constructor
* @extends KnoinAbstractViewModel
@ -5446,7 +5499,7 @@ PopupsAskViewModel.prototype.onBuild = function ()
}, this));
};
/**
* @constructor
* @extends KnoinAbstractViewModel
@ -5533,7 +5586,7 @@ AdminLoginViewModel.prototype.onHide = function ()
{
this.loginFocus(false);
};
/**
* @param {?} oScreen
*
@ -5555,7 +5608,7 @@ AdminMenuViewModel.prototype.link = function (sRoute)
{
return '#/' + sRoute;
};
/**
* @constructor
* @extends KnoinAbstractViewModel
@ -5577,7 +5630,7 @@ AdminPaneViewModel.prototype.logoutClick = function ()
RL.remote().adminLogout(function () {
RL.loginAndLogoutReload();
});
};
};
/**
* @constructor
*/
@ -5677,7 +5730,7 @@ AdminGeneral.prototype.selectLanguage = function ()
{
kn.showScreenPopup(PopupsLanguagesViewModel);
};
/**
* @constructor
*/
@ -5729,7 +5782,7 @@ AdminLogin.prototype.onBuild = function ()
}, 50);
};
/**
* @constructor
*/
@ -5798,7 +5851,7 @@ AdminBranding.prototype.onBuild = function ()
}, 50);
};
/**
* @constructor
*/
@ -5853,7 +5906,7 @@ function AdminContacts()
return {
'id': sValue,
'name': getTypeName(sValue) + (bDisabled ? ' (not supported)' : ''),
'disable': bDisabled
'disabled': bDisabled
};
});
@ -6018,7 +6071,7 @@ AdminContacts.prototype.onBuild = function ()
}, 50);
};
/**
* @constructor
*/
@ -6107,7 +6160,7 @@ AdminDomains.prototype.onDomainListChangeRequest = function ()
{
RL.reloadDomainList();
};
/**
* @constructor
*/
@ -6202,7 +6255,7 @@ AdminSecurity.prototype.phpInfoLink = function ()
{
return RL.link().phpInfo();
};
/**
* @constructor
*/
@ -6318,7 +6371,7 @@ AdminSocial.prototype.onBuild = function ()
}, 50);
};
/**
* @constructor
*/
@ -6366,7 +6419,7 @@ AdminPlugins.prototype.onBuild = function (oDom)
self.configurePlugin(oPlugin);
}
})
.on('click', '.e-item .disable-plugin', function () {
.on('click', '.e-item .disabled-plugin', function () {
var oPlugin = ko.dataFor(this);
if (oPlugin)
{
@ -6415,7 +6468,7 @@ AdminPlugins.prototype.onPluginDisableRequest = function (sResult, oData)
RL.reloadPluginList();
};
/**
* @constructor
*/
@ -6513,7 +6566,7 @@ AdminPackages.prototype.installPackage = function (oPackage)
RL.remote().packageInstall(this.requestHelper(oPackage, true), oPackage);
}
};
/**
* @constructor
*/
@ -6564,28 +6617,61 @@ AdminLicensing.prototype.licenseExpiredMomentValue = function ()
{
var oDate = moment.unix(this.licenseExpired());
return oDate.format('LL') + ' (' + oDate.from(moment()) + ')';
};
};
/**
* @constructor
*/
function AbstractData()
{
this.keyScope = ko.observable(Enums.KeyState.All);
this.keyScope.subscribe(function (sValue) {
this.keyScopeReal = ko.observable(Enums.KeyState.All);
this.keyScopeFake = ko.observable(Enums.KeyState.All);
this.keyScope = ko.computed({
'owner': this,
'read': function () {
return this.keyScopeFake();
},
'write': function (sValue) {
if (Enums.KeyState.Compose === sValue)
{
Utils.disableKeyFilter();
}
else
{
Utils.restoreKeyFilter();
}
if (Enums.KeyState.Menu !== sValue)
{
if (Enums.KeyState.Compose === sValue)
{
Utils.disableKeyFilter();
}
else
{
Utils.restoreKeyFilter();
}
// window.console.log(sValue);
this.keyScopeFake(sValue);
if (Globals.dropdownVisibility())
{
sValue = Enums.KeyState.Menu;
}
}
// window.console.log(sValue + '/' + this.keyScopeFake());
this.keyScopeReal(sValue);
}
});
this.keyScopeReal.subscribe(function (sValue) {
window.console.log(sValue);
key.setScope(sValue);
});
Globals.dropdownVisibility.subscribe(function (bValue) {
if (bValue)
{
this.keyScope(Enums.KeyState.Menu);
}
else if (Enums.KeyState.Menu === key.getScope())
{
this.keyScope(this.keyScopeFake());
}
}, this);
Utils.initDataConstructorBySettings(this);
}
@ -6655,7 +6741,7 @@ AbstractData.prototype.populateDataOnStart = function()
this.contactsIsAllowed(!!RL.settingsGet('ContactsIsAllowed'));
};
/**
* @constructor
* @extends AbstractData
@ -6689,7 +6775,7 @@ _.extend(AdminDataStorage.prototype, AbstractData.prototype);
AdminDataStorage.prototype.populateDataOnStart = function()
{
AbstractData.prototype.populateDataOnStart.call(this);
};
};
/**
* @constructor
*/
@ -6963,7 +7049,7 @@ AbstractAjaxRemoteStorage.prototype.jsVersion = function (fCallback, sVersion)
'Version': sVersion
});
};
/**
* @constructor
* @extends AbstractAjaxRemoteStorage
@ -7207,7 +7293,7 @@ AdminAjaxRemoteStorage.prototype.adminPing = function (fCallback)
{
this.defaultRequest(fCallback, 'AdminPing');
};
/**
* @constructor
*/
@ -7273,7 +7359,7 @@ AbstractCacheStorage.prototype.setEmailsPicsHashesData = function (oData)
{
this.oEmailsPicsHashes = oData;
};
/**
* @constructor
* @extends AbstractCacheStorage
@ -7284,7 +7370,7 @@ function AdminCacheStorage()
}
_.extend(AdminCacheStorage.prototype, AbstractCacheStorage.prototype);
/**
* @param {Array} aViewModels
* @constructor
@ -7462,7 +7548,7 @@ AbstractSettings.prototype.routes = function ()
['', oRules]
];
};
/**
* @constructor
* @extends KnoinAbstractScreen
@ -7477,7 +7563,7 @@ _.extend(AdminLoginScreen.prototype, KnoinAbstractScreen.prototype);
AdminLoginScreen.prototype.onShow = function ()
{
RL.setTitle('');
};
};
/**
* @constructor
* @extends AbstractSettings
@ -7497,7 +7583,7 @@ AdminSettingsScreen.prototype.onShow = function ()
// AbstractSettings.prototype.onShow.call(this);
RL.setTitle('');
};
};
/**
* @constructor
* @extends KnoinAbstractBoot
@ -7817,7 +7903,7 @@ AbstractApp.prototype.bootstart = function ()
ssm.ready();
};
/**
* @constructor
* @extends AbstractApp
@ -8056,7 +8142,7 @@ AdminApp.prototype.bootstart = function ()
* @type {AdminApp}
*/
RL = new AdminApp();
$html.addClass(Globals.bMobileDevice ? 'mobile' : 'no-mobile');
$window.keydown(Utils.killCtrlAandS).keyup(Utils.killCtrlAandS);
@ -8103,9 +8189,9 @@ window['__RLBOOT'] = function (fCall) {
window['__RLBOOT'] = null;
});
};
if (window.SimplePace) {
window.SimplePace.add(10);
}
}
}(window, jQuery, ko, crossroads, hasher, _));

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long