aico-image-editor
Version:
Combine multiple image into and create single combined image
142 lines (133 loc) • 9.14 kB
HTML
<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 my-3" x-show="$store.canvas.productId || $store.canvas.configuratorId">
<div class="position-relative mb-3">
<input type="text" class="form-control editor-interface__background__search" :placeholder="getTranslatedHTML('searchPlaceholder')"
x-model="backgroundSearch" @keyup="filterBackground()"/>
<span class="position-absolute start-0 top-50 translate-middle-y ms-2 ps-1 text-gray-500">
<i class="fa-solid fa-magnifying-glass fa-lg"></i>
</span>
</div>
<div class="d-none d-lg-flex">
<button type="button" class="btn btn-primary w-100" @click="showUploadBlock()">
<span x-text="getTranslatedHTML('backgroundUploadText')"></span>
</button>
</div>
</div>
<div class="block block-transparent position-relative mb-0">
<div class="form-check form-switch form-check-inline mb-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">
<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 && background.cropperData"
@click="$store.cropperStore.editExistingImage(background, 'backgrounds', $store.elements.backgroundUploadEL)">
<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 py-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>
<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 mb-3 " :class="dropping ? 'bg-primary-lighter':''"
@dragover.prevent="dragOverHandler($event)"
@dragenter.prevent="dragOverHandler($event)"
@dragleave="dragLeaveHandler()"
@drop.prevent="dropHandler($event,'backgrounds',['jpg','bmp','png'], $store.elements.backgroundUploadEL)">
<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"
@backgrounds-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 p-2 fs-sm">
<span class="mb-1" x-text="getTranslatedHTML('graphicUploadText')"></span>
<p class="mb-0" 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,'backgrounds',['jpg','bmp','png'], $el);
}"
@click="removeTempBackgrounds()"
x-init="$store.elements.backgroundUploadEL = $el"
accept=".bmp,.png,.jpg"/>
</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 text-body 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="text-body" @click="hideUploadBlock()"
x-text="getTranslatedHTML('backToBackground')"></a>
</div>
</div>
</div>
</div>
</form>
</div>