157 lines
8.8 KiB
Handlebars
157 lines
8.8 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>Create template</h2>
|
|
<p>Define a canvas, upload a background, and place content regions.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" action="/templates" enctype="multipart/form-data" id="template-form">
|
|
<input type="hidden" name="canvas_size_id" id="canvas-size-id" value="{{template.canvas_size_id}}" />
|
|
<input type="hidden" name="canvas_width" id="canvas-width" value="{{template.canvas_size_width}}" />
|
|
<input type="hidden" name="canvas_height" id="canvas-height" value="{{template.canvas_size_height}}" />
|
|
<input type="hidden" id="canvas-size-summary" />
|
|
<input type="hidden" name="existing_background_image_path" value="{{template.background_image_path}}" />
|
|
<input type="hidden" name="regions_json" id="regions-json" value="" />
|
|
|
|
<div class="template-designer-layout">
|
|
<div class="card card-outline card-secondary admin-form-card mb-3">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Designer</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="template-designer-main">
|
|
<div class="designer-stage" id="designer-stage" style="aspect-ratio: {{template.canvas_size_width}} / {{template.canvas_size_height}};">
|
|
<img id="background-preview" src="{{template.background_image_path}}" alt="" style="{{#if template.background_image_path}}{{else}}display:none;{{/if}}" />
|
|
<div class="empty-bg" id="background-empty" style="{{#if template.background_image_path}}display:none;{{/if}}">No background image selected</div>
|
|
<div class="designer-overlay" id="designer-overlay"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="template-designer-sidebar">
|
|
<div class="card card-outline card-primary admin-form-card">
|
|
<div class="card-body d-grid gap-2">
|
|
<div class="btn-group template-actions-group" role="group" aria-label="Template actions">
|
|
{{{saveActionButtons formId="template-form" saveLabel="Save" saveButtonClass="btn btn-success template-save-button" showSaveAndClose=false showSaveAndNew=false}}}
|
|
<a class="btn btn-warning" href="/templates" data-confirm-unsaved="You have unsaved changes. Leave this page?">Cancel</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-outline card-secondary admin-form-card region-info-card mb-3">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3 class="card-title">Region information</h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button" class="btn btn-outline-secondary w-100" id="add-region-button" data-bs-toggle="modal" data-bs-target="#region-add-modal">Add region</button>
|
|
<div class="region-selector-block mt-4">
|
|
<label for="region-select" class="form-label">Select region</label>
|
|
<select id="region-select" class="form-select region-select"></select>
|
|
</div>
|
|
<div id="region-list" class="region-list mt-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4 align-items-stretch">
|
|
<div class="col-12 col-xl-4">
|
|
<div class="card card-outline card-primary admin-form-card h-100 template-details-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Template details</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3 template-meta-row">
|
|
<div class="col-12">
|
|
<label for="template-name" class="form-label">Name</label>
|
|
<input name="name" id="template-name" class="form-control" value="{{template.name}}" required />
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="canvas-size-select" class="form-label">Canvas size</label>
|
|
<select id="canvas-size-select" class="form-select" data-lock-on-existing-template="false">
|
|
{{#unless template.canvas_size_id}}
|
|
<option value="" data-width="{{template.canvas_size_width}}" data-height="{{template.canvas_size_height}}" selected>{{template.canvas_size_label}}</option>
|
|
{{/unless}}
|
|
{{#if canvasSizes.length}}
|
|
{{#each canvasSizes}}
|
|
<option value="{{id}}" data-width="{{width}}" data-height="{{height}}" {{#if (eq ../template.canvas_size_id id)}}selected{{/if}}>{{name}} ({{width}}x{{height}})</option>
|
|
{{/each}}
|
|
{{/if}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-8">
|
|
<div class="card card-outline card-primary admin-form-card h-100 template-options-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Options</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-6">
|
|
<label for="background-image" class="form-label">Background image</label>
|
|
<input type="file" name="background_image" id="background-image" class="form-control" accept="image/*" />
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label for="background-color" class="form-label">Background colour</label>
|
|
<input type="color" name="background_color" id="background-color" class="form-control form-control-color w-100" value="{{#if template.background_color}}{{template.background_color}}{{else}}#111111{{/if}}" title="Choose a background colour" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{{#> modal-shell modalId="region-add-modal" modalLabelId="region-add-modal-label" modalDialogClass="modal-dialog-centered"}}
|
|
<div class="modal-header">
|
|
<h2 class="modal-title fs-5" id="region-add-modal-label">Add region</h2>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-body-secondary mb-3">Choose the type of region you want to add to this template.</p>
|
|
<div class="d-grid gap-2">
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="html">HTML</button>
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="image">Image</button>
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="video">Video</button>
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="api">API</button>
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="rtmp">RTMP</button>
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="rss">RSS</button>
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="text">Text</button>
|
|
<button type="button" class="btn btn-outline-secondary text-start" data-add-region-type="webpage">Webpage</button>
|
|
</div>
|
|
</div>
|
|
{{/modal-shell}}
|
|
|
|
<template id="region-card-template">
|
|
<div class="card card-outline card-secondary admin-form-card region-item mb-3">
|
|
<div class="card-header template-field-head"><strong data-region-title>Region</strong><span class="chip" data-region-chip>Text</span></div>
|
|
<div class="card-body p-3 d-grid gap-3">
|
|
<div class="region-field-grid region-field-grid--identity">
|
|
<label>Region name<input class="form-control" name="region_name[]" value="" placeholder="region_1" required /></label>
|
|
</div>
|
|
<input type="hidden" name="font_family[]" value="Arial" />
|
|
<input type="hidden" name="region_type[]" value="text" />
|
|
<input type="hidden" name="region_key[]" value="" />
|
|
<input type="hidden" name="region_label[]" value="" />
|
|
<div class="region-field-grid region-field-grid--position">
|
|
<label>X<input class="form-control" type="number" name="region_x[]" value="80" required /></label>
|
|
<label>Y<input class="form-control" type="number" name="region_y[]" value="80" required /></label>
|
|
<label>Z-Index<input class="form-control" type="number" name="region_z[]" value="1" required /></label>
|
|
</div>
|
|
<div class="region-field-grid region-field-grid--size">
|
|
<label>Width<input class="form-control" type="number" name="region_width[]" value="300" required /></label>
|
|
<label>Height<input class="form-control" type="number" name="region_height[]" value="120" required /></label>
|
|
<label>Lock ratio<input class="form-control" type="text" name="region_lock_ratio[]" value="" placeholder="16:9 or 5:4" /></label>
|
|
</div>
|
|
<div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-danger remove-region">Remove</button></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<textarea id="template-editor-data" hidden>{{json template.regions}}</textarea>
|
|
|