aico-image-editor/src/components/infoPopover/infoPopover.js

Combine multiple image into and create single combined image

const loadInfoPopoverHTML = () => import(/* webpackMode: "eager" */'./infoPopover.html');

// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initHTML from '../../initHTML';
initHTML('info-popover',  loadInfoPopoverHTML);

export default () => ({
    init() {
        const placement = this.$el.getAttribute('data-bs-placement');
        const trigger = this.$el.getAttribute('data-bs-trigger')

        this.popoverOptions.placement = placement;
        this.popoverOptions.trigger = trigger;
    },
    popoverOptions: {},
    infoPopoverInstance: null,
    createInfoPopover() {
        const self = this;
        const options = this.popoverOptions;
        if(!this.infoPopoverInstance) {
            const popoverContentEl = this.$el.assignedNodes()[0];
            this.infoPopoverInstance = new bootstrap.Popover(this.$refs.infoPopoverTriggerEl, {
                content: popoverContentEl,
                html: true,
                ...options
            })
        }
    }
})