assets-package
/
webcomponent
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- Working on ui-popup adding some features based on FORM inside of it

This commit is contained in:
Dave M. 2024-11-06 20:14:42 -05:00
parent 2bfb4bc7f8
commit 005f631793
2 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
asset/webcomponent/module/ui-popup.js
View File

@ -68,8 +68,6 @@ class UiPopup extends Webcomponent {
trigger.dispatchEvent(ev);
break;
case 8: // BACKSPACE
case 27: // ESC
trigger = this.querySelector('[action="close"]');
ev = new CustomEvent('click', { trigger: trigger } );
@ -116,10 +114,19 @@ class UiPopup extends Webcomponent {
case "confirm":
case "yes":
case "ok":
this.actionFollowLink(element) ||
this.actionClickButton(element) ||
this.actionSendForm(element) ||
this.actionSendForm(this.trigger);
let retval = this.actionFollowLink(element) ||
this.actionClickButton(element);
if (! retval) {
retval = this.actionSendForm(element) ||
this.actionSendForm(this.trigger) ||
this.actionSendForm(element.closest('ui-popup').querySelector('form'));
if ( ! retval ) {
throw "No action to trigger automatically on Popup confirmation.";
}
break;
}
case "cancel":
case "no":
@ -189,18 +196,30 @@ class UiPopup extends Webcomponent {
}
actionSendForm(element) {
if ( ! element ) {
return false;
}
//if ( element.getAttribute('send-form') !== null ) {
//let form = this.trigger.tagName === "FORM" ? this.trigger : this.trigger.closest('FORM');
let form = element.tagName === "FORM" ? element : element.closest('FORM');
if ( form ) {
form.submit();
// form.addEventListener("submit", e => this.hide);
let submitBtn = form.querySelector("button[type='submit']");
if (submitBtn) {
submitBtn.click();
}
else {
form.submit();
}
return true;
}
else {
throw "A send-form action was set on a popup where the trigger as no parent form.";
}
return false;
//}
}

2
view/webcomponent/ui-popup.phtml
View File

@ -1,5 +1,5 @@
<style>
ui-popup:not(.modal) {box-shadow:0px 0px 0px 9999px rgba(0, 0, 0, 0.5);z-index:9999;transition:all 0.3s ease-out;background:#fff;position:fixed!important;top:0;left: 50%;transform:translate(-50%, 15%);}
ui-popup:not(.modal) {box-shadow:0px 0px 0px 9999px rgba(0, 0, 0, 0.5);z-index:9999;transition:all 0.3s ease-out;background:#fff;position:fixed!important;top:0;left: 50%;transform:translate(-50%, 5vh);}
ui-popup:not(.visible) {transform: translate(-50%, -100%);transition-timing-function: ease-in;translate(-50%, -100%);box-shadow:none;}
ui-popup.modal.visible {display:flex}
ui-popup > * {padding:1.5rem}