aico-image-editor/src/components/cropperBlock/cropperBlock.html

Combine multiple image into and create single combined image

<div class="block block-rounded mb-0" x-data="cropperBlock" x-show="showCropperBlock"  x-bind="crropperBlocktrigger">
    <div class="block-header block-header-default" >
        <h3 class="block-title" x-text="getTranslatedHTML('crop')"></h3>
        <div class="block-options">
            <button type="button" class="btn-block-option" id="bttncancel"  @click="showCropperBlock = false" ><i class="fa fa-times"></i></button>
        </div>
    </div>
    
    <!-- Cropper -->
    <div class="block-content block-content-full">
        <div class="server-loader position-absolute w-100 h-100 start-0 top-0 pe-none bg-white-75 justify-content-center align-items-center z-index-3"
                    :class="$store.canvas.isServerLoaderTabVisible ? 'd-flex':'d-none'">
                    <i class="fas fa-spinner fa-pulse"></i>
            </div>
        <div class="row items-push">
            <div class="col-12">
                <div class="mb-4 row gx-2 gy-3 align-items-center">
                    <div class="col-auto">
                        <div class="btn-group">
                            <button type="button" class="js-bs-tooltip btn btn-lg"
                                :class="$store.cropperStore.dragMode === 'move' ? 'btn-primary':'btn-alt-primary' "
                                @click="$store.cropperStore.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.cropperStore.dragMode === 'crop' ? 'btn-primary':'btn-alt-primary'"
                                @click="$store.cropperStore.setDragMode('crop')"
                                data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setDragCropTooltip')">
                                <i class="fa fa-crop"></i>
                            </button>
                        </div>
                        </div>
                    <div class="col-auto">
                        <div class="btn-group">
                            <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.cropperStore.zoom('0.1', 'zoomIn')"
                                :class="$store.cropperStore.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.cropperStore.zoom('-0.1', 'zoomOut')"
                                :class="$store.cropperStore.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>
                    <div class="col-auto">
                        <div class="btn-group">
                            <button type="button" class="js-bs-tooltip btn btn-round btn-lg" @click="$store.cropperStore.setRadius()"
                                :class="$store.cropperStore.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.cropperStore.setSquare()"
                                :class="$store.cropperStore.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>
                    <div class="col-auto">
                        <div class="btn-group">
                            <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.cropperStore.setAspectRatio('1.77')"
                                :class="$store.cropperStore.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.cropperStore.setAspectRatio('1.33')"
                                :class="$store.cropperStore.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.cropperStore.setAspectRatio('1')"
                                :class="$store.cropperStore.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.cropperStore.setAspectRatio('0.66')"
                                :class="$store.cropperStore.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"
                                data-bs-strategy="absolute">
                                <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.cropperStore.savedAspectRatios">
                                        <li>
                                            <a href="javascript:void(0)" class="dropdown-item position-relative pe-5" 
                                                @click="$store.cropperStore.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.cropperStore.aspectRatio === `${savedAspectRatio.value}`">
                                                    <i class="fa fa-check"></i>
                                                </span>
                                            </a>
                                        </li>
                                    </template>
                                    
                                </ul>
                            </dropdown-menu>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="js-bs-tooltip btn btn-lg"
                            :class="$store.cropperStore.aspectRatio === 'NaN' ? 'btn-primary': 'btn-alt-primary'"
                            @click="$store.cropperStore.setAspectRatio('NaN')"
                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
                            <span x-text="getTranslatedHTML('freeText')"></span>
                        </button>
                    </div>
                    <div class="col-auto">
                        <div class="form-check form-switch form-check-inline" :class="$store.cropperStore.aspectRatio === 'NaN' ? '' : 'inactiveblock'"
                            x-show="!$store.cropperStore.uploadWithoutConfig">
                            <input class="form-check-input" type="checkbox" value="" id="shape-save-aspect-ratio" name="shape-save-aspect-ratio" 
                                x-model="$store.cropperStore.shouldCurrentAspectRatioSaved" />
                            <label class="form-check-label" for="shape-save-aspect-ratio" x-text="getTranslatedHTML('saveAspectRatio')"></label>
                        </div>
                    </div>

                    <div class="col-auto">
                        <div class="btn-group">
                            <button type="button" class="js-bs-tooltip btn btn-lg btn-alt-danger"  @click="$store.cropperStore.clear()">
                                <i class="fa fa-times"></i> <span x-text="getTranslatedHTML('clear')"></span>
                            </button>
                            <button type="button" class="js-bs-tooltip btn btn-alt-success p-0" >
                                <a class="btn btn-lg btn-alt-success" x-show="!$store.cropperStore.cropperData"  
                                    @click="async () => {
                                        if(!$store.cropperStore.uploadWithoutConfig) {
                                            await $store.cropperStore.processUpload($store);
                                            
                                        } else {
                                            await $store.cropperStore.processUploadWithoutConfigurator($store)
                                        }
                                        $dispatch('cropper-exit')
                                    }">
                                    <i class="fa fa-check"></i>
                                    <span x-text="getTranslatedHTML('confirmText')"></span>
                                </a>
                                <a class="btn btn-lg btn-alt-success" x-show="$store.cropperStore.cropperData"  :title="getTranslatedHTML('updateCrop')"
                                    @click="async () => {
                                        await $store.cropperStore.processUpdate($store)
                                        $dispatch('cropper-exit')
                                    }">
                                    <i class="fa fa-check"></i>
                                    <span x-text="getTranslatedHTML('updateCrop')"></span>
                                </a>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row items-push gx-2">
            
            <div class="col-md-9 position-relative">
                <div class="crop-init-element" id="imgcrop" x-init="$store.elements.imgCropEL = $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.cropperStore.cropBoxWidth"></span> x
                    <span x-text="$store.cropperStore.cropBoxHeight"></span>
                </div>
            </div>
            <div class="col-md-3">
                <h4><span x-text="getTranslatedHTML('imagepreview')"></span></h4>
                <div class="overflow-hidden mb-2">
                    <div class="cropper-preview js-bgimg-cropper-preview js-img-inside-cropper-preview center-block overflow-hidden pe-none" style="height: 200px;"
                        x-init="$store.elements.cropperPreviewEL = $el"></div>
                </div>
                
                
            </div>
        </div>
    </div>
    <!-- END Cropper -->
</div>