UNPKG

aico-image-editor

Version:

Combine multiple image into and create single combined image

166 lines (160 loc) 11.5 kB
<div x-data="productPicturesSubTab"> <form x-data="dragdrop" enctype="multipart/form-data" x-bind="pictureTrigger"> <div :class="isUploadBlockVisible ? 'd-lg-none': 'd-block'"> <div class="block block-transparent"> <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="pictureSearch" @keyup="filterPicture()" /> </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> <div class="col-12 col-lg-auto col-xxxl-5 d-none d-lg-flex"> <div class="btn-group" role="group" aria-label="upload picture" @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('pictureUploadText')"></span> </button> </div> </div> </div> <div class="block-content block-content-full tab-content editor-interface__scroll px-0"> <div class="row gx-2 editor-interface__scroll__inner"> <template x-for="mainPicture in mainPictures"> <div class="col-4 mb-2 text-center position-relative editor-interface__hover__remove" :class="mainPicture.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.pictureCropperModalStore.editExistingPicture(mainPicture)"> <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(mainPicture)" x-show="mainPicture.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="mainPicture.isRemovable" @click="async() => { await deleteFilesFromServer(mainPicture.id, 'pictures', mainPicture.label); removePicture(mainPicture); } "> <i class="far fa-close" aria-hidden="true"></i></span> <a class="ratio ratio-1x1 bg-body d-block rounded-4" :class="selectedMainPicture === mainPicture.id ? 'editor-interface__shape__selected': ''" href="javascript:void(0)" @click="selectMainPicture(mainPicture.id, mainPicture.url)"> <img :id="mainPicture.id" class="img-contain bg-body rounded-4" :src="mainPicture.url" alt="picture" :class="selectedMainPicture === mainPicture.id ? 'selected': ''" /> </a> </div> </template> <div class="form-check my-3" x-show="subPictures.length"> <input class="form-check-input" type="checkbox" x-model="isSubPicturesVisible" id="show-subpictures" name="show-subpictures" /> <label class="form-check-label" for="show-subpictures" x-text="getTranslatedHTML('subPictureToggleText')"></label> </div> <template x-for="subPicture in subPictures"> <template x-if="isSubPicturesVisible"> <div class="col-4 mb-2 text-center position-relative editor-interface__hover__remove" :class="subPicture.hidden ? 'd-none': ''"> <span class="editor-interface__remove cursor-pointer" x-show="subPicture.isRemovable" @click="async() => { await deleteFilesFromServer(subPicture.id, 'pictures', subPicture.label); removePicture(subPicture); } "> <i class="far fa-close" aria-hidden="true"></i></span> <a class="ratio ratio-1x1 bg-body d-block rounded-4" :class="selectedSubPicture === subPicture.id ? 'editor-interface__shape__selected': ''" href="javascript:void(0)" @click="selectSubPicture(subPicture.id, subPicture.url)"> <img :id="subPicture.id" class="img-contain bg-body rounded-4" :src="subPicture.url" alt="picture" :class="selectedSubPicture === subPicture.id ? 'selected': ''" /> </a> </div> </template> </template> </div> </div> </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="picture-upload"> <i class="bugano-Icon-material-file-upload fs-4"></i> </label> </div> <div> <span class="text-primary fw-bold" x-text="getTranslatedHTML('pictureUploadText')"></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: 'picture' })"></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,'mainPicture',['jpeg','png','jpg'])"> <div class="position-absolute w-100 h-100 start-0 top-0 d-flex flex-column align-items-center justify-content-center" @mainPicture-uploaded.window="() => { tempPictures.push({ name: $event.detail.name, label: $event.detail.name, url: $event.detail.url }) }"> <template x-if="!tempPictures.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="tempPicture in tempPictures"> <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="tempPicture.class" :src="tempPicture.url" :alt="tempPicture.name" :id="tempPicture.id"/> </div> <div> <h6 x-text="tempPicture.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="main-image-upload" @change="() => { fileUploaded($event,'mainPicture',['jpeg','png','jpg']); }" @click="removeTempPictures()" x-init="$store.elements.pictureUploadEL = $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('backToPictures')"></a> </div> </div> </div> </div> </form> </div>