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

Combine multiple image into and create single combined image

//import Alpine from 'alpinejs';
const loadDeleteContextMenuHTML = () => import(/* webpackMode: "eager" */'./deleteContextMenu.html')


// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../initStyles';
import initHTML from '../../initHTML';
import { hotReloadAlpineComponent } from '../../hotReloader';
initHTML('delete-context-menu',  loadDeleteContextMenuHTML)


export default () => ({
    init() {
        initStyles(this.$el.shadowRoot);

        if(module.hot) {
                        
            module.hot.accept('./deleteContextMenu.html', function() {
                console.log('change detected')
                hotReloadAlpineComponent(this.$el.getRootNode().host ,loadDeleteContextMenuHTML)
            }.bind(this));
        }
    },
    isContextMenuOpen: false,
    deleteLayerDropdown: null,
    createDeleteLayerDropdown(el) {
        if(!this.deleteLayerDropdown) {
            if(!window.bootstrap) {
                const Dropdown = require('bootstrap/js/dist/dropdown')
                this.deleteLayerDropdown = new Dropdown(el, {
                    popperConfig: function (defaultBsPopperConfig) {
                        var newPopperConfig = { strategy: "fixed"}
                        return Object.assign(defaultBsPopperConfig, newPopperConfig);
                    }
                });
            } else {
                this.deleteLayerDropdown = new bootstrap.Dropdown(el, {
                    // popperConfig: function (defaultBsPopperConfig) {
                    //     var newPopperConfig = { strategy: "fixed"}
                    //     return Object.assign(defaultBsPopperConfig, newPopperConfig);
                    // }
                })
            }
            
        }
    },
    toggleDeleteLayerDropdown(event) {
        let self = this;
        this.deleteLayerDropdown?.toggle();
        this.$dispatch('custom-click-outside', {target: event.target})
    },
    hideDeleteLayerDropdown() {
        this.deleteLayerDropdown?.hide() 
    },
    
});