Llewellyn van der Merwe
d9f5a1aebc
- Add modal implementation with automatic detection for four specific libraries. - Introduce inline tooltips with library compatibility. - Implement a default stand-alone fallback for environments without supported libraries.
39 lines
930 B
JavaScript
39 lines
930 B
JavaScript
import { BaseModal } from './BaseModal.js';
|
|
|
|
export class FoundationModal extends BaseModal {
|
|
constructor(triggerElement) {
|
|
super(triggerElement);
|
|
this.modalElement = null;
|
|
}
|
|
|
|
show() {
|
|
if (this.modalElement) {
|
|
this.modalElement.open();
|
|
}
|
|
}
|
|
|
|
hide() {
|
|
if (this.modalElement) {
|
|
this.modalElement.close();
|
|
}
|
|
}
|
|
|
|
create(content) {
|
|
const modalHtml = `
|
|
<div class="reveal" id="${this.modalId}" data-reveal>
|
|
<div id="${this.modalId}-content">
|
|
${content}
|
|
</div>
|
|
<button class="close-button" data-close aria-label="Close modal" type="button">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>`;
|
|
this.insertIntoDOM(modalHtml);
|
|
this.modalElement = new Foundation.Reveal(document.getElementById(this.modalId));
|
|
}
|
|
|
|
initializeTrigger() {
|
|
this.triggerElement.setAttribute('data-open', this.modalId);
|
|
}
|
|
}
|