aico-image-editor
Version:
Combine multiple image into and create single combined image
189 lines (185 loc) • 15.7 kB
HTML
<div class="modalParent" x-data="mainPictureCropModal">
<div class="modal fade pe-none" id="mainPictureCropModal" aria-hidden="true"
x-init="() => {
$store.elements.cropPictureModalEL = $el;
$store.modal.createModal($el, $dispatch, {
backdrop: false,
keyboard: false,
focus: true,
container: 'body'
})
// use this setting if directly want to open upon load
// some modifications needed in crop method in canvas store.
// $store.canvas.crop($store)
}"
@mainpicturecropmodal-shown.window="($event) => {
if($store.pictureCropperModalStore.cropperPictureImg) {
$store.pictureCropperModalStore.initPictureCropper($store.pictureCropperModalStore.cropperPictureImg);
}
}">
">
<div class="modal-dialog modal-dialog-centered modal-xl pe-auto">
<div class="modal-content bg-light">
<div class="block block-rounded mb-0">
<div class="block-header block-header-default">
<h3 class="block-title" x-text="getTranslatedHTML('cropMainPictureTitle')"></h3>
<div class="block-options">
<button type="button" class="btn-block-option" @click="() => {
$store.modal.closeModal($store.elements.cropPictureModalEL)
}" data-bs-dismiss="modal" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<!-- Cropper -->
<div class="block-content block-content-full">
<div class="row items-push">
<div class="col-12">
<div class="mb-4">
<div class="btn-group m-1">
<button type="button" class="js-bs-tooltip btn btn-lg"
:class="$store.pictureCropperModalStore.dragMode === 'move' ? 'btn-primary':'btn-alt-primary' "
@click="$store.pictureCropperModalStore.setDragMode('move')"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setDragMoveTooltip')">
<i class="fa fa-arrows-alt"></i>
</button>
<button type="button" class="js-bs-tooltip btn btn-lg"
:class="$store.pictureCropperModalStore.dragMode === 'crop' ? 'btn-primary':'btn-alt-primary'"
@click="$store.pictureCropperModalStore.setDragMode('crop')"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setDragCropTooltip')">
<i class="fa fa-crop"></i>
</button>
</div>
<div class="btn-group m-1">
<button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.pictureCropperModalStore.zoom('0.1', 'zoomIn')"
:class="$store.pictureCropperModalStore.zoomMode === 'zoomIn' ? 'btn-primary':'btn-alt-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('zoomInTooltip')">
<i class="fa fa-search-plus"></i>
</button>
<button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.pictureCropperModalStore.zoom('-0.1', 'zoomOut')"
:class="$store.pictureCropperModalStore.zoomMode === 'zoomOut' ? 'btn-primary':'btn-alt-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('zoomOutTooltip')">
<i class="fa fa-search-minus"></i>
</button>
</div>
<div class="btn-group m-1">
<button type="button" class="js-bs-tooltip btn btn-round btn-lg" @click="$store.pictureCropperModalStore.setRadius()"
:class="$store.pictureCropperModalStore.shouldPushRounded ? 'btn-primary':'btn-alt-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setRadiusTooltip')">
<i class="far fa-circle"></i>
</button>
<button type="button" class="js-bs-tooltip btn btn-square btn-lg" @click="$store.pictureCropperModalStore.setSquare()"
:class="$store.pictureCropperModalStore.shouldPushRounded ? 'btn-alt-primary':'btn-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setSquareTooltip')">
<i class="far fa-square"></i>
</button>
</div>
<div class="btn-group m-1">
<button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.pictureCropperModalStore.setAspectRatio('1.77')"
:class="$store.pictureCropperModalStore.aspectRatio === '1.77' ? 'btn-primary': 'btn-alt-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
<span>16:9</span>
</button>
<button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.pictureCropperModalStore.setAspectRatio('1.33')"
:class="$store.pictureCropperModalStore.aspectRatio === '1.33' ? 'btn-primary': 'btn-alt-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
<span>4:3</span>
</button>
<button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.pictureCropperModalStore.setAspectRatio('1')"
:class="$store.pictureCropperModalStore.aspectRatio === '1' ? 'btn-primary': 'btn-alt-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
<span>1:1</span>
</button>
<button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.pictureCropperModalStore.setAspectRatio('0.66')"
:class="$store.pictureCropperModalStore.aspectRatio === '0.66' ? 'btn-primary': 'btn-alt-primary'"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
<span>2:3</span>
</button>
<dropdown-menu datatemplateurl="./dropdownMenu.html" styles="global" shadow="true" x-data="dropdownMenu"
class="btn-group btn-group-lg " dropdown-trigger-class="dropdown-toggle-split btn-alt-primary">
<span slot="dropdown-trigger" class="pe-none">
<span class="visually-hidden">Toggle Dropdown</span>
</span>
<ul slot="dropdown-content" class="list-unstyled">
<template x-for="savedAspectRatio in $store.shapeCropperModalStore.savedAspectRatios">
<li>
<a href="javascript:void(0)" class="dropdown-item position-relative pe-5"
@click="$store.pictureCropperModalStore.setAspectRatio(`${savedAspectRatio.value}`)">
<span x-text="savedAspectRatio.label"></span>
<span class="position-absolute end-0 me-2 top-50 translate-middle-y"
x-show="$store.pictureCropperModalStore.aspectRatio === `${savedAspectRatio.value}`">
<i class="fa fa-check"></i>
</span>
</a>
</li>
</template>
</ul>
</dropdown-menu>
</div>
<button type="button" class="js-bs-tooltip btn btn-lg m-1"
:class="$store.pictureCropperModalStore.aspectRatio === 'NaN' ? 'btn-primary': 'btn-alt-primary'"
@click="$store.pictureCropperModalStore.setAspectRatio('NaN')"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
<span x-text="getTranslatedHTML('freeText')"></span>
</button>
<div class="form-check form-switch form-check-inline" :class="$store.pictureCropperModalStore.aspectRatio === 'NaN' ? '' : 'inactiveblock'"
x-show="!$store.shapeCropperModalStore.uploadWithoutConfig">
<input class="form-check-input" type="checkbox" value="" id="picture-save-aspect-ratio" name="picture-save-aspect-ratio"
x-model="$store.pictureCropperModalStore.shouldCurrentAspectRatioSaved" />
<label class="form-check-label" for="picture-save-aspect-ratio" x-text="getTranslatedHTML('saveAspectRatio')"></label>
</div>
<div class="btn-group m-1">
<button type="button" class="js-bs-tooltip btn btn-lg btn-alt-primary" @click="$store.pictureCropperModalStore.clear()"
data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('resetTooltip')">
<i class="fa fa-times"></i>
</button>
</div>
<div class="btn-group m-1">
<button type="button" class="js-bs-tooltip btn btn-alt-primary p-0" data-bs-dismiss="modal">
<a class="btn btn-lg btn-primary" x-show="!$store.pictureCropperModalStore.cropperData" data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('confirmText')"
@click="async() => {
$store.modal.closeModal($store.elements.cropPictureModalEL)
$store.pictureCropperModalStore.processUpload($store)
}">
<i class="fa fa-check"></i>
<span x-text="getTranslatedHTML('confirmText')"></span>
</a>
<a class="btn btn-lg btn-primary" x-show="$store.pictureCropperModalStore.cropperData" :title="getTranslatedHTML('updateCrop')"
@click="async() => {
$store.modal.closeModal($store.elements.cropPictureModalEL)
$store.pictureCropperModalStore.processUpdate($store)
}">
<i class="fa fa-check"></i>
<span x-text="getTranslatedHTML('updateCrop')"></span>
</a>
</button>
</div>
</div>
</div>
</div>
<div class="row items-push">
<div class="col-md-8 position-relative">
<div class="crop-init-element" id="picturecrop" x-init="$store.elements.pictureCropEL = $el"></div>
<div class="position-absolute top-0 end-0 me-4 mt-3 p-2 bg-secondary text-white rounded-4 fs-md">
<span x-text="$store.pictureCropperModalStore.cropBoxWidth"></span> x
<span x-text="$store.pictureCropperModalStore.cropBoxHeight"></span>
</div>
</div>
<div class="col-md-4">
<h4 class="mt-3 mb-5"><span x-text="getTranslatedHTML('imagepreview')"></span></h4>
<div class="overflow-hidden mb-2">
<div class="cropper-preview js-picture-cropper-preview js-picture-inside-cropper-preview center-block overflow-hidden pe-none" style="height: 150px;"
x-init="$store.elements.cropperPicturePreviewEL = $el"></div>
</div>
</div>
</div>
</div>
<!-- END Cropper -->
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade show d-none" @mainpicturecropmodal-shown.window="($event) => {
$el.classList.remove('d-none');
}" @mainpicturecropmodal-hidden.window="($event) => {
$el.classList.add('d-none');
}" @click="$store.modal.closeModal($store.elements.cropPictureModalEL)"></div>
</div>