Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-03 14:37:02 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Drop bootstrap modal.less by using <dialog> <header> and <footer>

Browse source 
https://snappymail.eu/demo/ updated for testing
This commit is contained in:
djmaze 2021-11-07 17:06:08 +01:00
parent 880d4a05e9
commit 6170de5aee
70 changed files with 1521 additions and 1709 deletions
Download patch file Download diff file Expand all files Collapse all files

23
dev/Knoin/AbstractViews.js
View file

@ -2,7 +2,7 @@ import ko from 'ko';
import { inFocus, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils';
import { Scope } from 'Common/Enums';
import { keyScope } from 'Common/Globals';
import { keyScope, Settings } from 'Common/Globals';
import { ViewType } from 'Knoin/Knoin';
class AbstractView {
@ -12,6 +12,7 @@ class AbstractView {
this.viewModelTemplateID = templateID;
this.viewType = type;
this.viewModelDom = null;
this.viewNoUserSelect = false;
this.keyScope = {
scope: Scope.None,
@ -122,3 +123,23 @@ export class AbstractViewSettings
viewModelDom
}
*/
export class AbstractViewLogin extends AbstractViewCenter {
constructor(templateID) {
super(templateID);
this.hideSubmitButton = Settings.app('hideSubmitButton');
this.formError = ko.observable(false).extend({ falseTimeout: 500 });
}
onBuild(dom) {
dom.classList.add('LoginView');
}
onShow() {
rl.route.off();
}
submitForm() {
// return false;
}
}

44
dev/Knoin/Knoin.js
View file

@ -32,21 +32,48 @@ const
let vmDom = null;
const vm = new ViewModelClass(vmScreen),
position = vm.viewType || '',
dialog = ViewType.Popup === position,
vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null;
ViewModelClass.__builded = true;
ViewModelClass.__vm = vm;
if (vmPlace) {
vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.viewModelTemplateID + '" hidden=""></div>');
vmDom = dialog
? Element.fromHTML('<dialog id="V-'+ vm.viewModelTemplateID + '"></dialog>')
: Element.fromHTML('<div id="V-'+ vm.viewModelTemplateID + '" hidden=""></div>');
vmPlace.append(vmDom);
vm.viewModelDom = vmDom;
ViewModelClass.__dom = vmDom;
if (vm.viewNoUserSelect) {
vmDom.classList.add('g-ui-user-select-none');
}
if (ViewType.Popup === position) {
vm.cancelCommand = vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass));
// Firefox / Safari HTMLDialogElement not defined
if (!vmDom.showModal) {
vmDom.classList.add('polyfill');
vmDom.showModal = () => {
if (!vmDom.backdrop) {
vmDom.before(vmDom.backdrop = Element.fromHTML('<div class="dialog-backdrop"></div>'));
}
vmDom.setAttribute('open','');
vmDom.open = true;
vmDom.returnValue = null;
vmDom.backdrop.hidden = false;
};
vmDom.close = v => {
vmDom.backdrop.hidden = true;
vmDom.returnValue = v;
vmDom.removeAttribute('open', null);
vmDom.open = false;
};
}
// show/hide popup/modal
const endShowHide = e => {
if (e.target === vmDom) {
@ -54,7 +81,7 @@ const
autofocus(vmDom);
vm.onShowWithDelay && vm.onShowWithDelay();
} else {
vmDom.hidden = true;
vmDom.close();
vm.onHideWithDelay && vm.onHideWithDelay();
}
}
@ -63,10 +90,12 @@ const
vm.modalVisibility.subscribe(value => {
if (value) {
visiblePopups.add(vm);
vmDom.style.zIndex = 3000 + visiblePopups.size + 10;
vmDom.hidden = false;
vmDom.style.zIndex = 3000 + (visiblePopups.size * 2);
vmDom.showModal();
if (vmDom.backdrop) {
vmDom.backdrop.style.zIndex = 3000 + visiblePopups.size;
}
vm.keyScope.set();
arePopupsVisible(true);
requestAnimationFrame(() => { // wait just before the next paint
vmDom.offsetHeight; // force a reflow
vmDom.classList.add('show'); // trigger the transitions
@ -74,11 +103,10 @@ const
} else {
visiblePopups.delete(vm);
vm.onHide && vm.onHide();
vmDom.classList.remove('show');
vm.keyScope.unset();
arePopupsVisible(0 < visiblePopups.size);
vmDom.classList.remove('show'); // trigger the transitions
}
vmDom.setAttribute('aria-hidden', !value);
arePopupsVisible(0 < visiblePopups.size);
/*
// the old ko.bindingHandlers.modal
const close = vmDom.querySelector('.close'),