Removed: KnockoutJS 'hasFocus:' because HTML5 has autofocus=""

Knoin.js now searches for [autofocus] and handles it
This commit is contained in:
djmaze 2020-08-22 01:03:03 +02:00
parent 226f77e392
commit 996723a486
18 changed files with 60 additions and 113 deletions

View file

@ -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);
}
}

View file

@ -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);

View file

@ -75,6 +75,9 @@
padding-left: 12px;
padding-right: 12px;
}
.inputEmail, .inputPassword {
padding-right: 35px;
}
}
.languageLabel {

View file

@ -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() {

View file

@ -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 };

View file

@ -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;
});

View file

@ -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);

View file

@ -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('');
}

View file

@ -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();

View file

@ -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();
}

View file

@ -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;
}