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

Combine multiple image into and create single combined image

<div class="modalParent" x-data="fontUploadModal">
    <div class="modal fade pe-none" id="fontupload" area-hidden="hidden"
    x-init="() => {
        $store.elements.fontUploadModalEl = $el;
        $store.modal.createModal($el, $dispatch, {
            backdrop: false,
            keyboard: false,
            focus: true,
            container: 'body'
        })
    }"
    @fontupload-shown.window="($event) => {
    
    }">
        <div class="modal-dialog modal-dialog-centered modal-lg pe-auto">
            <div class="modal-content">
                <div class="block block-rounded" >
                    <div class="block-header block-header-default">
                        <h4 class="mb-0 fw-normal" x-text="getTranslatedHTML('fontUploadModalTitle')"></h4>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" aria-label="Close" @click="$store.modal.closeModal($store.elements.fontUploadModalEl)">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content block-content-full p-2 p-md-3">
                        <template x-if="!sizeValidated || !extensionsValidated">
                            <div class="alert alert-danger">
                              <p class="mb-0" x-show="!sizeValidated" x-text="getTranslatedHTML('fileSizeValidationError', { fileType: 'fontText', fileSize: maxAllowedFileSize + 'MB' })"></p>
                              <p class="mb-0" x-show="!extensionsValidated" x-text="getTranslatedHTML('fileExtensionValidationError', { fileType: 'fontText'})"></p>
                            </div>
                          </template>
                        <div class="row mb-3" x-bind="fonttrigger">
                            <div class="col-12 col-md">
                                <div class="my-4 text-primary droptarget" :class="dropping ? 'bg-primary-lighter':''"
                                    @dragover.prevent="dragOverHandler($event)"
                                    @dragenter.prevent="dragOverHandler($event)"
                                    @dragleave="dragLeaveHandler()"
                                    @drop.prevent="dropHandler($event,'font',['ttf','otf','woff', 'woff2'])">
                                        <div class="position-absolute w-100 h-100 start-0 top-0 d-flex flex-column align-items-center justify-content-center">   
                                            <template x-if="!tempFonts.length">
                                                <div class="text-center">
                                                    <h6 class="mb-1" x-text="getTranslatedHTML('fontAddToFavourite')"></h6>
                                                    <p x-text="getTranslatedHTML('extensionTextDisplay', { fileSize: maxAllowedFileSize + 'MB', extensions: '.ttf, .otf, .woff, .woff2' })"></p>
                                                </div>
                                            </template>
                                        
                                            <template x-for="tempFont in tempFonts">
                                                <div class="d-flex align-items-center px-3">
                                                    <div>
                                                        <h6 class="mt-1 mb-0 image-upload-name" x-text="tempFont.name" :title="tempFont.name"></h6>
                                                        
                                                    </div>
                                                </div>
                                            </template>
                                            <template x-if="tempFonts.length">
                                                <p class="mb-0" x-text="getTranslatedHTML('fileUploadSucess')">wurde hochgeladen und ist einsatzbereit!</p>
                                            </template>
                                            <input type="file" class="form-control position-absolute w-100 h-100 opacity-0"   
                                                id="font-upload" accept=".ttf,.otf,.woff,.woff2" x-init="$store.elements.fontUploadEL = $el"
                                                multiple
                                                @change="() => {
                                                    //updateTempFonts([...$el.files]);
                                                    fileUploaded($event,'font',['ttf','otf','woff','woff2'])
                                                }" />
                                        </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-primary  editor-interface__square 
                                    position-relative w-100 text-white" @click="uploadNewFonts($store.canvas.configuratorId)">
                                    <span class="triangle right"></span>
                                    <span x-text="getTranslatedHTML('uploadfont')"></span>
                                </button>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show d-none" @fontupload-shown.window="($event) => {
        $el.classList.remove('d-none');
      }"  @fontupload-hidden.window="($event) => {
        $el.classList.add('d-none');
      }" @click="$store.modal.closeModal($store.elements.fontUploadModalEl)"></div>
</div>