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.
34 lines
758 B
JavaScript
34 lines
758 B
JavaScript
import { BaseModal } from './BaseModal.js';
|
|
|
|
export class UikitModal extends BaseModal {
|
|
constructor(triggerElement) {
|
|
super(triggerElement);
|
|
}
|
|
|
|
show() {
|
|
UIkit.modal(`#${this.modalId}`).show();
|
|
}
|
|
|
|
hide() {
|
|
UIkit.modal(`#${this.modalId}`).hide();
|
|
}
|
|
|
|
create(content) {
|
|
const modalHtml = `
|
|
<div id="${this.modalId}" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div id="${this.modalId}-content">
|
|
${content}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
this.insertIntoDOM(modalHtml);
|
|
}
|
|
|
|
initializeTrigger() {
|
|
this.triggerElement.setAttribute('uk-toggle', `target: #${this.modalId}`);
|
|
}
|
|
}
|
|
|