73 lines
3.4 KiB
Handlebars
73 lines
3.4 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>Create template</h2>
|
|
<p>Define a canvas, upload a background, and place content regions.</p>
|
|
</div>
|
|
<a class="button-link" href="/admin/templates">Back to templates</a>
|
|
</div>
|
|
|
|
<form method="post" action="/admin/templates" enctype="multipart/form-data" id="template-form">
|
|
<div class="card template-meta-card">
|
|
<div class="template-meta-row">
|
|
<label>
|
|
Name
|
|
<input name="name" id="template-name" value="{{template.name}}" required />
|
|
</label>
|
|
<label>
|
|
Canvas size
|
|
<select id="canvas-size-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>
|
|
</label>
|
|
<label>
|
|
Background image
|
|
<input type="file" name="background_image" id="background-image" accept="image/*" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<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 class="template-designer-sidebar">
|
|
<button type="submit" class="template-save-button">Create template</button>
|
|
<div class="card">
|
|
<div class="row template-designer-actions">
|
|
<button type="button" class="secondary" id="add-text-region">Add text region</button>
|
|
<button type="button" class="secondary" id="add-html-region">Add HTML region</button>
|
|
<button type="button" class="secondary" id="add-image-region">Add image region</button>
|
|
<button type="button" class="secondary" id="add-webpage-region">Add webpage region</button>
|
|
</div>
|
|
<h3>Region information</h3>
|
|
<label>Select region
|
|
<select id="region-select" class="region-select"></select>
|
|
</label>
|
|
<div id="region-list" class="region-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<textarea id="template-editor-data" hidden>{{json template.regions}}</textarea>
|