From 996723a4863254d28f8794620ccaeae77182f0be Mon Sep 17 00:00:00 2001 From: djmaze Date: Sat, 22 Aug 2020 01:03:03 +0200 Subject: [PATCH] Removed: KnockoutJS 'hasFocus:' because HTML5 has autofocus="" Knoin.js now searches for [autofocus] and handles it --- dev/Knoin/AbstractViewNext.js | 5 ++ dev/Knoin/Knoin.js | 6 ++ dev/Styles/Login.less | 3 + dev/View/Admin/Login.js | 7 +- dev/View/Popup/AddOpenPgpKey.js | 5 -- dev/View/Popup/Ask.js | 16 ++--- dev/View/Popup/Domain.js | 8 --- dev/View/Popup/DomainAlias.js | 8 --- dev/View/Popup/Identity.js | 1 - dev/View/Popup/WelcomePage.js | 7 -- dev/View/User/Login.js | 66 ++++++------------- .../app/templates/Views/Admin/AdminLogin.html | 8 +-- .../templates/Views/Admin/PopupsDomain.html | 6 +- .../app/templates/Views/Common/PopupsAsk.html | 4 +- .../Views/Common/PopupsWelcomePage.html | 4 +- .../0.0.0/app/templates/Views/User/Login.html | 13 ++-- .../Views/User/PopupsAddOpenPgpKey.html | 2 +- .../templates/Views/User/PopupsIdentity.html | 4 +- 18 files changed, 60 insertions(+), 113 deletions(-) diff --git a/dev/Knoin/AbstractViewNext.js b/dev/Knoin/AbstractViewNext.js index 3ca90f737..b48c3eb9f 100644 --- a/dev/Knoin/AbstractViewNext.js +++ b/dev/Knoin/AbstractViewNext.js @@ -51,4 +51,9 @@ export class AbstractViewNext { cancelCommand() {} // eslint-disable-line no-empty-function closeCommand() {} // eslint-disable-line no-empty-function + + querySelector(selectors) { + return this.viewModelDom[0].querySelector(selectors); + } + } diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js index 8587d6bde..14eff82e7 100644 --- a/dev/Knoin/Knoin.js +++ b/dev/Knoin/Knoin.js @@ -246,6 +246,9 @@ export function showScreenPopup(ViewModelClassToShow, params = []) { ModalView.__vm.onShow && ModalView.__vm.onShow(...params); + const af = ModalView.__dom[0].querySelector('[autofocus]'); + af && af.focus(); + vmRunHook('view-model-on-show', ModalView, params || []); } } @@ -374,6 +377,9 @@ export function screenOnRoute(screenName, subPart) { ViewModelClass.__vm.onShowTrigger(!ViewModelClass.__vm.onShowTrigger()); } + const af = ViewModelClass.__dom[0].querySelector('[autofocus]'); + af && af.focus(); + ViewModelClass.__vm.onShowWithDelay && setTimeout(()=>ViewModelClass.__vm.onShowWithDelay, 200); vmRunHook('view-model-on-show', ViewModelClass); diff --git a/dev/Styles/Login.less b/dev/Styles/Login.less index f47d90d88..5736e110a 100644 --- a/dev/Styles/Login.less +++ b/dev/Styles/Login.less @@ -75,6 +75,9 @@ padding-left: 12px; padding-right: 12px; } + .inputEmail, .inputPassword { + padding-right: 35px; + } } .languageLabel { diff --git a/dev/View/Admin/Login.js b/dev/View/Admin/Login.js index 5f3f010f6..40804ccdc 100644 --- a/dev/View/Admin/Login.js +++ b/dev/View/Admin/Login.js @@ -37,7 +37,7 @@ class LoginAdminView extends AbstractViewNext { this.loginErrorAnimation = ko.observable(false).extend({ 'falseTimeout': 500 }); this.passwordErrorAnimation = ko.observable(false).extend({ 'falseTimeout': 500 }); - this.loginFocus = ko.observable(false); +// this.loginFocus = ko.observable(false); this.formHidden = ko.observable(false); @@ -96,14 +96,9 @@ class LoginAdminView extends AbstractViewNext { onShow() { routeOff(); - - setTimeout(() => { - this.loginFocus(true); - }, 100); } onHide() { - this.loginFocus(false); } onBuild() { diff --git a/dev/View/Popup/AddOpenPgpKey.js b/dev/View/Popup/AddOpenPgpKey.js index 87d2b4c7f..e4b31c244 100644 --- a/dev/View/Popup/AddOpenPgpKey.js +++ b/dev/View/Popup/AddOpenPgpKey.js @@ -16,7 +16,6 @@ class AddOpenPgpKeyPopupView extends AbstractViewNext { super(); this.key = ko.observable(''); - this.key.focus = ko.observable(false); this.key.error = ko.observable(false); this.key.errorMessage = ko.observable(''); @@ -95,10 +94,6 @@ class AddOpenPgpKeyPopupView extends AbstractViewNext { onShow() { this.clearPopup(); } - - onShowWithDelay() { - this.key.focus(true); - } } export { AddOpenPgpKeyPopupView, AddOpenPgpKeyPopupView as default }; diff --git a/dev/View/Popup/Ask.js b/dev/View/Popup/Ask.js index 22968d339..5e2ee966f 100644 --- a/dev/View/Popup/Ask.js +++ b/dev/View/Popup/Ask.js @@ -18,9 +18,6 @@ class AskPopupView extends AbstractViewNext { this.yesButton = ko.observable(''); this.noButton = ko.observable(''); - this.yesFocus = ko.observable(false); - this.noFocus = ko.observable(false); - this.fYesAction = null; this.fNoAction = null; @@ -34,9 +31,6 @@ class AskPopupView extends AbstractViewNext { this.yesButton(i18n('POPUPS_ASK/BUTTON_YES')); this.noButton(i18n('POPUPS_ASK/BUTTON_NO')); - this.yesFocus(false); - this.noFocus(false); - this.fYesAction = null; this.fNoAction = null; } @@ -87,17 +81,17 @@ class AskPopupView extends AbstractViewNext { onShowWithDelay() { if (this.bFocusYesOnShow) { - this.yesFocus(true); + this.querySelector('.buttonYes').focus(); } } onBuild() { key('tab, shift+tab, right, left', KeyState.PopupAsk, () => { - if (this.yesFocus()) { - this.noFocus(true); - } else { - this.yesFocus(true); + let btn = this.querySelector('.buttonYes'); + if (btn.matches(':focus')) { + btn = this.querySelector('.buttonNo'); } + btn.focus(); return false; }); diff --git a/dev/View/Popup/Domain.js b/dev/View/Popup/Domain.js index 6f53a49ea..60326cf3d 100644 --- a/dev/View/Popup/Domain.js +++ b/dev/View/Popup/Domain.js @@ -61,7 +61,6 @@ class DomainPopupView extends AbstractViewNext { this.smtpServerFocus = ko.observable(false); this.name = ko.observable(''); - this.name.focused = ko.observable(false); this.imapServer = ko.observable(''); this.imapPort = ko.observable('' + IMAP_DEFAULT_PORT); @@ -379,12 +378,6 @@ class DomainPopupView extends AbstractViewNext { } } - onShowWithDelay() { - if (!this.name() && !bMobileDevice) { - this.name.focused(true); - } - } - clearForm() { this.edit(false); @@ -396,7 +389,6 @@ class DomainPopupView extends AbstractViewNext { this.savingError(''); this.name(''); - this.name.focused(false); this.imapServer(''); this.imapPort('' + IMAP_DEFAULT_PORT); diff --git a/dev/View/Popup/DomainAlias.js b/dev/View/Popup/DomainAlias.js index 1dd8e9a3c..bce33d447 100644 --- a/dev/View/Popup/DomainAlias.js +++ b/dev/View/Popup/DomainAlias.js @@ -25,7 +25,6 @@ class DomainAliasPopupView extends AbstractViewNext { this.savingError = ko.observable(''); this.name = ko.observable(''); - this.name.focused = ko.observable(false); this.alias = ko.observable(''); @@ -64,18 +63,11 @@ class DomainAliasPopupView extends AbstractViewNext { this.clearForm(); } - onShowWithDelay() { - if (!this.name() && !bMobileDevice) { - this.name.focused(true); - } - } - clearForm() { this.saving(false); this.savingError(''); this.name(''); - this.name.focused(false); this.alias(''); } diff --git a/dev/View/Popup/Identity.js b/dev/View/Popup/Identity.js index d7f4c524e..8c69110bb 100644 --- a/dev/View/Popup/Identity.js +++ b/dev/View/Popup/Identity.js @@ -27,7 +27,6 @@ class IdentityPopupView extends AbstractViewNext { this.email = ko.observable('').validateEmail(); this.email.focused = ko.observable(false); this.name = ko.observable(''); - this.name.focused = ko.observable(false); this.replyTo = ko.observable('').validateSimpleEmail(); this.replyTo.focused = ko.observable(false); this.bcc = ko.observable('').validateSimpleEmail(); diff --git a/dev/View/Popup/WelcomePage.js b/dev/View/Popup/WelcomePage.js index 77c7a5213..86074450b 100644 --- a/dev/View/Popup/WelcomePage.js +++ b/dev/View/Popup/WelcomePage.js @@ -14,13 +14,10 @@ class WelcomePagePopupView extends AbstractViewNext { super(); this.welcomePageURL = ko.observable(''); - - this.closeFocused = ko.observable(false); } clearPopup() { this.welcomePageURL(''); - this.closeFocused(false); } /** @@ -33,10 +30,6 @@ class WelcomePagePopupView extends AbstractViewNext { this.welcomePageURL(sUrl); } - onShowWithDelay() { - this.closeFocused(true); - } - onHide() { Promises.welcomeClose(); } diff --git a/dev/View/User/Login.js b/dev/View/User/Login.js index 7a4163b39..5bf52ff43 100644 --- a/dev/View/User/Login.js +++ b/dev/View/User/Login.js @@ -47,7 +47,6 @@ class LoginUserView extends AbstractViewNext { this.additionalCode = ko.observable(''); this.additionalCode.error = ko.observable(false); this.additionalCode.errorAnimation = ko.observable(false).extend({ falseTimeout: 500 }); - this.additionalCode.focused = ko.observable(false); this.additionalCode.visibility = ko.observable(false); this.additionalCodeSignMe = ko.observable(false); @@ -75,8 +74,8 @@ class LoginUserView extends AbstractViewNext { (this.additionalCode.visibility() && this.additionalCode.errorAnimation()) ); - this.emailFocus = ko.observable(false); - this.passwordFocus = ko.observable(false); +// this.emailFocus = ko.observable(false); +// this.passwordFocus = ko.observable(false); this.email.subscribe(() => { this.emailError(false); @@ -152,32 +151,24 @@ class LoginUserView extends AbstractViewNext { this.emailError(false); this.passwordError(false); - this.emailError(!this.email().trim()); - this.passwordError(!this.password().trim()); - + let error; if (this.additionalCode.visibility()) { this.additionalCode.error(false); - this.additionalCode.error(!this.additionalCode().trim()); - } - - if ( - this.emailError() || - this.passwordError() || - (this.additionalCode.visibility() && this.additionalCode.error()) - ) { - switch (true) { - case this.emailError(): - this.emailFocus(true); - break; - case this.passwordError(): - this.passwordFocus(true); - break; - case this.additionalCode.visibility() && this.additionalCode.error(): - this.additionalCode.focused(true); - break; - // no default + if (!this.additionalCode().trim()) { + this.additionalCode.error(true); + error = '.inputAdditionalCode'; } - + } + if (!this.password().trim()) { + this.passwordError(true); + error = '#RainLoopPassword'; + } + if (!this.email().trim()) { + this.emailError(true); + error = '#RainLoopEmail'; + } + if (error) { + this.querySelector(error).focus(); return false; } @@ -210,7 +201,7 @@ class LoginUserView extends AbstractViewNext { this.additionalCode.visibility(true); this.submitRequest(false); - setTimeout(() => this.additionalCode.focused(true), 100); + setTimeout(() => this.querySelector('.inputAdditionalCode').focus(), 100); } else if (oData.Admin) { getApp().redirectToAdminPanel(); } else { @@ -262,23 +253,6 @@ class LoginUserView extends AbstractViewNext { routeOff(); } - onShowWithDelay() { - if (this.email() && this.password()) { - this.passwordFocus(true); - } else if (!this.email()) { - this.emailFocus(true); - } else if (!this.password()) { - this.passwordFocus(true); - } else { - this.emailFocus(true); - } - } - - onHide() { - this.emailFocus(false); - this.passwordFocus(false); - } - onBuild() { const signMeLocal = Local.get(ClientSideKeyName.LastSignMe), signMe = (Settings.settingsGet('SignMe') || 'unused').toLowerCase(); @@ -339,9 +313,7 @@ class LoginUserView extends AbstractViewNext { selectLanguageOnTab(bShift) { if (!bShift) { - setTimeout(() => { - this.emailFocus(true); - }, 50); +// setTimeout(() => this.emailFocus(true), 50); return false; } diff --git a/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html b/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html index 35f40a42e..a35007d67 100644 --- a/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html +++ b/rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html @@ -11,9 +11,9 @@
+ data-bind="textInput: login, disable: submitRequest" /> @@ -23,7 +23,6 @@
@@ -44,4 +43,5 @@
-
\ No newline at end of file +
+ diff --git a/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html b/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html index 56ed5dd1d..e091eaf4a 100644 --- a/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html +++ b/rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html @@ -13,8 +13,8 @@   ()
- +
@@ -268,4 +268,4 @@
-
\ No newline at end of file + diff --git a/rainloop/v/0.0.0/app/templates/Views/Common/PopupsAsk.html b/rainloop/v/0.0.0/app/templates/Views/Common/PopupsAsk.html index 4054b3b61..ebe0f7407 100644 --- a/rainloop/v/0.0.0/app/templates/Views/Common/PopupsAsk.html +++ b/rainloop/v/0.0.0/app/templates/Views/Common/PopupsAsk.html @@ -10,12 +10,12 @@
- -
-
- \ No newline at end of file + diff --git a/rainloop/v/0.0.0/app/templates/Views/User/Login.html b/rainloop/v/0.0.0/app/templates/Views/User/Login.html index 6ac926f6e..ef2bc56d4 100644 --- a/rainloop/v/0.0.0/app/templates/Views/User/Login.html +++ b/rainloop/v/0.0.0/app/templates/Views/User/Login.html @@ -32,9 +32,10 @@ data-bind="css: {'error': emailError, 'animated': emailErrorAnimation}">
@@ -44,9 +45,9 @@
@@ -62,7 +63,7 @@
diff --git a/rainloop/v/0.0.0/app/templates/Views/User/PopupsAddOpenPgpKey.html b/rainloop/v/0.0.0/app/templates/Views/User/PopupsAddOpenPgpKey.html index f5d42935d..54b5c27c2 100644 --- a/rainloop/v/0.0.0/app/templates/Views/User/PopupsAddOpenPgpKey.html +++ b/rainloop/v/0.0.0/app/templates/Views/User/PopupsAddOpenPgpKey.html @@ -11,7 +11,7 @@
- +
diff --git a/rainloop/v/0.0.0/app/templates/Views/User/PopupsIdentity.html b/rainloop/v/0.0.0/app/templates/Views/User/PopupsIdentity.html index 731bccaab..6926f3823 100644 --- a/rainloop/v/0.0.0/app/templates/Views/User/PopupsIdentity.html +++ b/rainloop/v/0.0.0/app/templates/Views/User/PopupsIdentity.html @@ -18,7 +18,7 @@
-
@@ -34,7 +34,7 @@
+ data-bind="value: name, onEnter: addOrEditIdentityCommand" />