aico-image-editor/src/components/ownShapeTab/subtabs/backgroundSubTab/backgroundSubTab.html

Combine multiple image into and create single combined image

<div x-data="backgroundSubTab">
    <form x-data="dragdrop" enctype="multipart/form-data">
        <div :class="isUploadBlockVisible ? 'd-lg-none': 'd-block'">
            <div class="block bg-transparent mb-3" x-show="$store.canvas.productId || $store.canvas.configuratorId">
                <div class="row gx-2">
                    <div class="col-12 col-lg">
                        <div class="position-relative">
                            <input type="text" class="form-control editor-interface__background__search" :placeholder="getTranslatedHTML('searchPlaceholder')" 
                                x-model="backgroundSearch" @keyup="filterBackground()"/>
                            <span class="position-absolute end-0 top-50 translate-middle-y me-3 text-primary">
                                <i class="fa-solid fa-magnifying-glass fa-lg"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-12 col-lg-auto col-xxxl-5 d-none d-lg-flex">
                        <div class="btn-group" role="group" aria-label="upload background" @click="showUploadBlock()">
                            <button type="button" class="btn btn-primary-dark upload-btn flex-grow-0">
                                <i class="bugano-Icon-material-file-upload fs-4"></i>
                            </button>
                            <button type="button" class="btn btn-primary text-start upload-btn">
                                <span x-text="getTranslatedHTML('backgroundUploadText')"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block bg-transparent position-relative mb-0 p-2">
                <div class="form-check form-switch form-check-inline my-3">
                    <input class="form-check-input" type="checkbox" value="" id="deselect-background-image" name="deselect-background-image" 
                        x-model="shouldDeselectBackgroundImage" @change="() => {
                            if(shouldDeselectBackgroundImage) {
                                selectBackground(null, null)
                            }
                        }" />
                    <label class="form-check-label" for="deselect-background-image" x-text="getTranslatedHTML('deselectBackgroundImage')"></label>
                </div>
                <div class="row gx-2 editor-interface__scroll__inner">
                    <template x-for="(background,backgroundIndex) in backgrounds" :key="background.id">
                        <div class="col-4 mb-2 position-relative editor-interface__hover__remove" :class="background.hidden ? 'd-none': ''">
                            <a href="javascript:void(0)" class="position-absolute top-0 end-0 z-index-2 edit_icon me-2 mt-2" x-show="false"
                                @click="$store.bgshapeCropperModalStore.editExistingBackground(background)">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                            <a href="javascript:void(0)" class="position-absolute top-0 end-0 z-index-2 edit_icon me-2 mt-2" @click="swapWithAIImage(background)"
                                x-show="background.isRemovable && $store.canvas.aiImageSrc"
                                x-data="tooltip" :title="getTranslatedHTML('swapExistingTitle')"> 
                                <i class="fa-solid fa-arrows-rotate"></i>
                            </a>
                            <span class="editor-interface__remove cursor-pointer" x-show="background.isRemovable"
                                @click="async() => {
                                    await deleteFilesFromServer(background.id, 'backgrounds',background.name);
                                    removeBackground(background);
                                } ">
                                <i class="far fa-close" aria-hidden="true"></i></span>
                            <a href="javascript:void(0)" class="ratio ratio-1x1 d-block" 
                                @click="selectBackground(background.id, background.url)">
                                <img class="img-fluid rounded-5 border img-cover"  alt="background" 
                                    width="500" height="500"
                                    :class="selectedBackground === background.id ? 'border-3 border-primary': ''"
                                    :src="background.url"/>
                            </a>
                        </div>
                    </template>
                </div>
                <div class="fadetowhite"></div>
            </div>

            <div class="btn-group  upload-btn-group-sticky d-lg-none" role="group" aria-label="upload background" @click="showUploadBlock()">
                <button type="button" class="btn btn-primary-dark upload-btn flex-grow-0">
                    <i class="bugano-Icon-material-file-upload fs-4"></i>
                </button>
                <button type="button" class="btn btn-primary text-start upload-btn">
                    <span x-text="getTranslatedHTML('backgroundUploadText')"></span>
                </button>
            </div>
        </div>
        <div  class="uploadblock innerpopup-block pb-3"  :class="isUploadBlockVisible ? 'visibleonmobile': 'd-lg-none'">
            <span class="innerpopup-block__drag__handle d-lg-none" @click="hideUploadBlock()">
                <a href="javascript:void(0)" class="innerpopup-block__drag__link"></a>
            </span>
            <div class="d-none d-lg-flex align-items-center">
                <div class="me-3">
                    <label role="button" class="btn btn-primary editor-interface__square" for="background-upload">
                        <i class="bugano-Icon-material-file-upload fs-4"></i>
                    </label>
                </div>
                <div>
                    <span class="text-primary fw-bold" x-text="getTranslatedHTML('backgroundUploadText')"></span>
                </div>
                <span class="linedesign ms-3"></span>
            </div>
            <template x-if="!sizeValidated || !extensionsValidated">
                <div class="alert alert-danger mt-3">
                    <p class="mb-0" x-show="!sizeValidated" x-text="getTranslatedHTML('fileSizeValidationError', { fileType: 'imgText', fileSize: maxAllowedFileSize + 'MB' })"></p>
                    <p class="mb-0" x-show="!extensionsValidated" x-text="getTranslatedHTML('fileExtensionValidationError', { fileType: 'background' })"></p>
                </div>
            </template>
            <div class="droptarget my-4 text-primary"  :class="dropping ? 'bg-primary-lighter':''"
                    @dragover.prevent="dragOverHandler($event)"
                    @dragenter.prevent="dragOverHandler($event)"
                    @dragleave="dragLeaveHandler()"
                    @drop.prevent="dropHandler($event,'background',['jpg','bmp','png'])">
                <div x-bind="backgroundtrigger" class="position-absolute w-100 h-100 start-0 top-0 d-flex flex-column align-items-center justify-content-center"
                    @background-uploaded.window="() => {
                        tempBackgrounds.push({
                            name: $event.detail.name,
                            label: $event.detail.name,
                            url:  $event.detail.url
                        })
                    }">    
                    <template x-if="!tempBackgrounds.length">
                        <div class="text-center">
                            <h6 class="mb-1" x-text="getTranslatedHTML('graphicUploadText')"></h6>
                            <p x-text="getTranslatedHTML('extensionTextDisplay', { fileSize: maxAllowedFileSize + 'MB', extensions: '.jpg, .png, .bmp' })"></p>
                        </div>
                    </template>
                    
                    <template x-for="tempBackground in tempBackgrounds">
                        <div class="d-flex align-items-center px-3">
                            <div class="image-upload-content me-3">
                                <img class="img-fluid h-100 w-100" :src="tempBackground.url" :alt="tempBackground.name" />
                            </div>
                            <div>
                                <h6 x-text="tempBackground.name" class="mb-1 image-upload-name"></h6>
                                <p class="mb-0" x-text="getTranslatedHTML('fileUploadSucess')"></p>
                            </div>
                            
                        </div>
                    </template>
                    
                    <input type="file" class="form-control position-absolute w-100 h-100 opacity-0" id="background-upload" 
                        @change="() => {
                            fileUploaded($event,'background',['jpg','bmp','png']);
                        }"
                        @click="removeTempBackgrounds()"
                        x-init="$store.elements.backgroundUploadEL = $el"
                        accept=".bmp,.png,.jpg"/>
                </div>
            </div>
            <div class="image-upload-notice border-0 block block-rounded rounded-5">
                <div class="block-content block-content-full">
                    <span x-text="getTranslatedHTML('chargeNotice')"></span> <span class="fw-bold">CHF50</span>!
                </div>
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-none d-lg-flex">
                    <div class="img-avatar img-avatar24 me-2" >
                        <div class="ratio ratio-1x1">
                            <a class="rounded-circle bg-primary text-white d-flex justify-content-center align-items-center" href="javascript:void(0)"
                                style="padding-top: 2px;">
                                <i class="fa-solid fa-arrow-left fa-sm"></i></a>
                        </div>
                    </div>
                    <div>
                        <a href="javascript:void(0)" class="fw-semibold" @click="hideUploadBlock()"
                            x-text="getTranslatedHTML('backToBackground')"></a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>