284 lines
11 KiB
Handlebars
284 lines
11 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>{{#if isEdit}}Edit slide - {{slide.title}}{{else}}Create slide{{/if}}</h2>
|
|
<p>Build slide content and preview it against the selected template.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-editor-shell">
|
|
<link rel="stylesheet" href="/assets/vendor/cropperjs/cropper.min.css" />
|
|
<form method="post" action="{{action}}" enctype="multipart/form-data" id="slide-form" class="slide-form-stack" data-async-save-close-url="/slides" data-async-save-new-url="/slides/new">
|
|
<div class="card card-outline card-primary admin-form-card slide-template-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Slide details</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<label for="slide-title" class="form-label">Title</label>
|
|
<input id="slide-title" name="title" class="form-control" value="{{slide.title}}" required />
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="template-select" class="form-label">Template</label>
|
|
<select name="template_id" id="template-select" class="form-select">
|
|
<option value="">-- none --</option>
|
|
{{#each templates}}
|
|
<option value="{{id}}" {{#if (eq ../slide.template_id id)}}selected{{/if}}>{{name}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="template-fields"></div>
|
|
</form>
|
|
|
|
<div class="slide-editor-sidebar">
|
|
<div class="card card-outline card-primary admin-form-card mb-3">
|
|
<div class="card-body d-grid">
|
|
<div class="btn-group template-actions-group slide-actions-group" role="group" aria-label="Slide actions">
|
|
{{{saveActionButtons formId="slide-form" saveLabel=saveLabel saveAndCloseLabel="Save and Close" saveAndNewLabel="Save and New" saveAndCloseValue="close" saveAndNewValue="new"}}}
|
|
<a class="btn btn-warning" href="/slides" data-confirm-unsaved="You have unsaved changes. Leave this page?">Cancel</a>
|
|
{{#if isEdit}}
|
|
<button type="submit" class="btn btn-danger" form="delete-slide-form">Delete</button>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="card card-outline card-secondary admin-form-card slide-preview-card">
|
|
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
|
<div class="slide-preview-header">
|
|
<h3>Preview</h3>
|
|
</div>
|
|
<span class="chip slide-preview-dimensions-chip" id="slide-preview-meta">--</span>
|
|
</div>
|
|
<div class="card-body slide-preview-scroll">
|
|
<div class="slide-preview-stage" id="slide-preview-stage">
|
|
<div class="slide-preview-canvas" id="slide-preview-canvas">
|
|
<img id="slide-preview-background" class="slide-preview-background" alt="" style="display:none;" />
|
|
<div class="slide-preview-empty" id="slide-preview-empty">Select a template to preview the slide.</div>
|
|
<div class="slide-preview-overlay" id="slide-preview-overlay"></div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-secondary w-100 mt-3" id="open-preview-popup">Open popup preview</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
{{#> modal-shell modalId="slide-image-cropper-modal" modalLabelId="slide-image-cropper-modal-label" modalDialogClass="modal-dialog-centered modal-xl modal-dialog-scrollable" modalBackdropStatic=true modalKeyboardDisabled=true}}
|
|
<div class="modal-header">
|
|
<div>
|
|
<h2 class="modal-title fs-5" id="slide-image-cropper-modal-label">Edit image</h2>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body d-grid gap-3">
|
|
<div class="slide-image-cropper-frame" style="width:100%;height:560px;max-height:70vh;overflow:hidden;">
|
|
<img id="slide-image-cropper-image" alt="Selected image to crop" />
|
|
</div>
|
|
<div class="btn-toolbar flex-wrap gap-2 slide-image-cropper-toolbar" role="toolbar" aria-label="Image editing controls">
|
|
<div class="btn-group btn-group-sm" role="group" aria-label="Rotate">
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="rotate-left"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i> Rotate left</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="rotate-right"><i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Rotate right</button>
|
|
</div>
|
|
<div class="btn-group btn-group-sm" role="group" aria-label="Flip">
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="flip-horizontal"><i class="bi bi-symmetry-vertical" aria-hidden="true"></i> Flip horizontal</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="flip-vertical"><i class="bi bi-symmetry-horizontal" aria-hidden="true"></i> Flip vertical</button>
|
|
</div>
|
|
<div class="btn-group btn-group-sm" role="group" aria-label="Crop ratio presets">
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="ratio" data-slide-image-cropper-ratio="free">Free</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="ratio" data-slide-image-cropper-ratio="1:1">1:1</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="ratio" data-slide-image-cropper-ratio="4:3">4:3</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="ratio" data-slide-image-cropper-ratio="16:9">16:9</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-slide-image-cropper-action="ratio" data-slide-image-cropper-ratio="region">Region</button>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-danger btn-sm" data-slide-image-cropper-action="reset"><i class="bi bi-arrow-repeat" aria-hidden="true"></i> Reset</button>
|
|
</div>
|
|
<p class="small text-body-secondary mb-0" id="slide-image-cropper-status"></p>
|
|
</div>
|
|
<div class="modal-footer justify-content-end">
|
|
<div class="btn-group" role="group" aria-label="Crop actions">
|
|
<button type="button" class="btn btn-primary" data-slide-image-cropper-action="apply">Apply crop</button>
|
|
<button type="button" class="btn btn-warning" data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
{{/modal-shell}}
|
|
|
|
<style>
|
|
.slide-image-cropper-frame {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 560px;
|
|
min-height: 360px;
|
|
max-height: 70vh;
|
|
overflow: hidden;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: var(--bs-body-bg);
|
|
}
|
|
|
|
.slide-image-cropper-frame img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 65vh;
|
|
}
|
|
|
|
.slide-image-cropper-frame > .cropper-container {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
display: block;
|
|
}
|
|
|
|
.slide-image-cropper-frame > .cropper-container img {
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
}
|
|
|
|
.slide-image-cropper-frame .cropper-container,
|
|
.slide-image-cropper-frame .cropper-canvas,
|
|
.slide-image-cropper-frame .cropper-wrap-box,
|
|
.slide-image-cropper-frame .cropper-crop-box,
|
|
.slide-image-cropper-frame .cropper-view-box,
|
|
.slide-image-cropper-frame .cropper-face {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.slide-image-cropper-frame .cropper-wrap-box,
|
|
.slide-image-cropper-frame .cropper-crop-box {
|
|
border: 0 !important;
|
|
}
|
|
|
|
.slide-image-cropper-toolbar .btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.slide-image-region-preview-box {
|
|
display: grid;
|
|
gap: 0;
|
|
justify-items: end;
|
|
}
|
|
|
|
.slide-image-region-preview-shell {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 288px;
|
|
height: 176px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slide-image-region-preview-shell:focus-visible,
|
|
.slide-image-region-preview-shell:hover .slide-image-region-preview-remove,
|
|
.slide-image-region-preview-shell:focus-visible .slide-image-region-preview-remove {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
|
|
.slide-image-region-preview-remove {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 999px;
|
|
background: rgba(33, 37, 41, 0.82);
|
|
color: #fff;
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.92);
|
|
transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slide-image-region-preview-shell:hover .slide-image-region-preview-remove,
|
|
.slide-image-region-preview-shell:focus-visible .slide-image-region-preview-remove {
|
|
background: rgba(var(--bs-danger-rgb), 0.92);
|
|
}
|
|
|
|
.slide-image-region-preview-remove i {
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.slide-image-region-upload-zone {
|
|
flex: 1 1 auto;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 0.9rem;
|
|
min-height: 176px;
|
|
padding: 1rem 1.1rem;
|
|
border: 1px dashed var(--bs-border-color);
|
|
border-radius: 0;
|
|
background: var(--bs-tertiary-bg);
|
|
color: var(--bs-body-color);
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.slide-image-region-upload-zone:hover,
|
|
.slide-image-region-upload-zone:focus-within,
|
|
.slide-image-region-upload-zone.is-dragover {
|
|
border-color: var(--bs-primary);
|
|
background: var(--bs-secondary-bg);
|
|
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
|
|
}
|
|
|
|
.slide-image-region-upload-zone-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
font-size: 1.25rem;
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
.slide-image-region-upload-zone-copy {
|
|
display: grid;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.slide-image-region-upload-zone-copy span {
|
|
color: var(--bs-secondary-color);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.slide-image-region-preview {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 288px;
|
|
height: 176px;
|
|
object-fit: contain;
|
|
border-radius: 0;
|
|
background: var(--bs-tertiary-bg);
|
|
border: 0;
|
|
}
|
|
|
|
.slide-image-region-preview-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
color: var(--bs-secondary-color);
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|
|
|
|
{{#if isEdit}}
|
|
<form id="delete-slide-form" method="post" action="/slides/{{slide.id}}/delete" data-confirm-message="Delete this slide?"></form>
|
|
{{/if}}
|
|
|
|
<textarea id="slide-editor-data" hidden>{{json slideEditorData}}</textarea>
|
|
<script src="/assets/vendor/cropperjs/cropper.min.js"></script>
|
|
<script type="module" src="/assets/js/slides/slide-form.js?v=20260725.7"></script>
|
|
<script type="module" src="/assets/js/slides/slide-image-cropper.js?v=20260725.4"></script>
|
|
|