aico-image-editor
Version:
Combine multiple image into and create single combined image
220 lines (214 loc) • 15.9 kB
HTML
<div x-data="ownShapeTab">
<form x-data="dragdrop" enctype="multipart/form-data">
<div :class="isUploadBlockVisible ? 'd-lg-none': 'd-block'">
<div class="block block-transparent">
<catalogue-search datatemplateurl="./catalogueSearch.html" shadow="true" styles="global"></catalogue-search>
</div>
<div class="block block-transparent">
<div class="mt-0">
<ul class="nav nav-tabs nav-tabs-alt" role="tablist" @go-to-subtab.window="setActiveSubTab($event.detail.tab)">
<li class="nav-item flex-fill">
<button type="button" class="nav-link text-primary w-100 border-end" id="motives-tab" data-bs-toggle="tab" data-bs-target="#motives" role="tab"
aria-controls="motives" aria-selected="true" @click="activeSubTab = 'motive'"
:class="activeSubTab === 'motive' ? 'active' : ''">
<span class="" x-text="getTranslatedHTML('motiveSubTabTitle')"></span>
</button>
</li>
<li class="nav-item flex-fill">
<button type="button" class="nav-link text-primary w-100" id="symbols-tab" data-bs-toggle="tab" data-bs-target="#symbols" role="tab"
aria-controls="symbols" aria-selected="true" @click="activeSubTab = 'symbol'"
:class="activeSubTab === 'symbol' ? 'active' : ''">
<span class="" x-text="getTranslatedHTML('symbolSubTabTitle')"></span>
</button>
</li>
<li class="nav-item flex-fill">
<button type="button" class="nav-link text-primary w-100" id="backgrounds-tab" data-bs-toggle="tab" data-bs-target="#backgrounds" role="tab"
aria-controls="backgrounds" aria-selected="true" @click="activeSubTab = 'backgrounds'"
:class="activeSubTab === 'backgrounds' ? 'active' : ''">
<span class="" x-text="getTranslatedHTML('background')"></span>
</button>
</li>
</ul>
<div class="block-content block-content-full px-0" x-show="activeSubTab === 'motive'">
<div class="row gx-2 align-items-start" x-show="$store.canvas.productId || $store.canvas.configuratorId">
<div class="col-12 col-lg">
<div class="position-relative">
<div class="form-group">
<input type="text" class="form-control editor-interface__background__search" :placeholder="getTranslatedHTML('searchPlaceholder')"
x-model="shapeSearch" @keyup="filterShape()" />
</div>
<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 class="select-categories position-relative mt-3">
<select class="form-control shadow-sm editor-interface__font__select" x-model="categorySearch" @change="filterShape()">
<option :value="allCategories" x-text="getTranslatedHTML('allCategoriesText')"></option>
<template x-for="shapeCategory in shapeCategories">
<option :value="shapeCategory.value" x-text="getTranslatedHTML(shapeCategory.name)"></option>
</template>
</select>
</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 shape" @click="showUploadBlock()">
<button type="button" class="btn btn-primary-dark upload-btn">
<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('motiveUploadText')"></span>
</button>
</div>
</div>
</div>
</div>
<div class="block-content block-content-full tab-content editor-interface__scroll px-0">
<div class="tab-pane position-lg-relative" role="tabpanel" id="motives" aria-labelledby="motives-tab"
:class="activeSubTab === 'motive' ? 'active' : ''">
<div class="row gx-2 editor-interface__scroll__inner">
<template x-for="shape in shapes.filter(shape => shape.type === 'motive')" :key="shape.id">
<div class="col-4 mb-2 text-center position-relative editor-interface__hover__remove" :class="shape.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.shapeCropperModalStore.editExistingShape(shape)">
<i class="fa-solid fa-pen-to-square" aria-hidden="true"></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(shape)"
x-show="shape.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="shape.isRemovable"
@click="async() => {
await deleteFilesFromServer(shape.id, 'shapes', shape.name);
removeShape(shape);
} ">
<i class="far fa-close" aria-hidden="true"></i></span>
<a class="editor-interface__shape" :class="selectedShape === shape.id ? 'editor-interface__shape__selected': ''" href="javascript:void(0)"
@click="selectShape(shape.id, shape.url, shape.type)">
<img :id="shape.id" class="img-fluid editor-interface__shape__img" :src="shape.url" alt="background"
:class="selectedShape === shape.id ? 'selected': ''" />
</a>
</div>
</template>
</div>
<div class="fadetowhite"></div>
</div>
<div class="tab-pane position-lg-relative" role="tabpanel" id="symbols" aria-labelledby="symbols-tab"
:class="activeSubTab === 'symbol' ? 'active' : ''">
<div class="row gx-2 editor-interface__scroll__inner">
<template x-for="shape in shapes.filter(shape => shape.type === 'symbol')" :key="shape.id">
<div class="col-4 mb-2 text-center position-relative editor-interface__hover__remove" :class="shape.hidden ? 'd-none': ''">
<span class="editor-interface__remove cursor-pointer" x-show="shape.isRemovable"
@click="async() => {
await deleteFilesFromServer(shape.id, 'shapes', shape.name);
removeShape(shape);
} ">
<i class="far fa-close" aria-hidden="true"></i></span>
<a class="editor-interface__shape" :class="selectedShape === shape.id ? 'editor-interface__shape__selected': ''" href="javascript:void(0)"
@click="selectShape(shape.id, shape.url, shape.type)">
<img :id="shape.id" class="img-fluid editor-interface__shape__img" :src="shape.url" alt="background"
:class="selectedShape === shape.id ? 'selected': ''" />
</a>
</div>
</template>
</div>
</div>
<div class="tab-pane position-lg-relative" role="tabpanel" id="backgrounds" aria-labelledby="backgrounds-tab"
:class="activeSubTab === 'backgrounds' ? 'active' : ''">
<background-sub-tab datatemplateurl="./backgroundSubTab.html" styles="global"
shadow="true"></background-sub-tab>
</div>
</div>
</div>
</div>
<div class="btn-group upload-btn-group-sticky d-lg-none" role="group" aria-label="upload shape" @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('motiveUploadText')"></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="shape-upload" data-image-id="1">
<i class="bugano-Icon-material-file-upload fs-4"></i>
</label>
</div>
<div>
<span class="text-primary fw-bold" x-text="getTranslatedHTML('motiveUploadText')"></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: 'motiveText' })"></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,'shape',['jpeg','png','jpg'])">
<div x-bind="shapetrigger" class="position-absolute w-100 h-100 start-0 top-0 d-flex flex-column align-items-center justify-content-center"
@shape-uploaded.window="() => {
tempShapes.push({
name: $event.detail.name,
label: $event.detail.name,
url: $event.detail.url
})
}" >
<template x-if="!tempShapes.length">
<div class="text-center">
<h6 class="mb-1" x-text="getTranslatedHTML('graphicUploadText')"></h6>
<p x-text="getTranslatedHTML('extensionTextDisplay', { fileSize: maxAllowedFileSize + 'MB', extensions: '.png, .jpg, .jpeg' })"></p>
</div>
</template>
<template x-for="tempShape in tempShapes">
<div class="d-flex align-items-center justify-content-center flex-wrap">
<div class="image-upload-content mx-3">
<img class="img-fluid image-upload-shape" :class="tempShape.class" :src="tempShape.url" :alt="tempShape.name" :id="tempShape.id"/>
</div>
<div>
<h6 x-text="tempShape.label" class="mt-1 mb-0 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="shape-upload"
@change="() => {
fileUploaded($event,'shape',['jpeg','png','jpg']);
}"
@click="removeTempShapes()"
x-init="$store.elements.shapeUploadEL = $el"
accept=".png,.jpg,.jpeg"/>
</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('backToMotive')"></a>
</div>
</div>
</div>
</div>
</form>
</div>