249 lines
11 KiB
HTML
249 lines
11 KiB
HTML
{% set active_pill_route='slideshow_content_list' %}
|
|
{% extends 'base.jinja.html' %}
|
|
|
|
{% block page_title %}
|
|
{{ l.slideshow_content_page_title }}
|
|
{% endblock %}
|
|
|
|
{% block add_css %}
|
|
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/jquery-explr-1.4.css"/>
|
|
{{ HOOK(H_SLIDESHOW_CONTENT_CSS) }}
|
|
{% endblock %}
|
|
|
|
{% block add_js %}
|
|
<script>
|
|
const content_type_icon_classes = {
|
|
{% for type in enum_content_type %}
|
|
'{{ type.value }}': '{{ enum_content_type.get_fa_icon(type) }}',
|
|
{% endfor %}
|
|
};
|
|
const content_type_color_classes = {
|
|
{% for type in enum_content_type %}
|
|
'{{ type.value }}': '{{ enum_content_type.get_color_icon(type) }}',
|
|
{% endfor %}
|
|
};
|
|
</script>
|
|
<script src="{{ STATIC_PREFIX }}js/lib/jquery-explr-1.4.js"></script>
|
|
<script src="{{ STATIC_PREFIX }}js/slideshow/contents.js"></script>
|
|
<script src="{{ STATIC_PREFIX }}js/lib/jquery-ui.min.js"></script>
|
|
{# <script src="{{ STATIC_PREFIX }} js/lib/jquery-ui-rotatable.min.js"></script> #}
|
|
<script src="{{ STATIC_PREFIX }}js/slideshow/content-composition.js"></script>
|
|
<script src="{{ STATIC_PREFIX }}js/explorer.js"></script>
|
|
{{ HOOK(H_SLIDESHOW_CONTENT_JAVASCRIPT) }}
|
|
{% endblock %}
|
|
|
|
{% block body_class %}view-content-edit view-content-edit-composition edit-page{% endblock %}
|
|
|
|
{% block top_page %}
|
|
<div class="top-content">
|
|
<h1>
|
|
{{ l.slideshow_content_form_edit_title }}
|
|
</h1>
|
|
|
|
{% set icon = enum_content_type.get_fa_icon(content.type) %}
|
|
{% set color = enum_content_type.get_color_icon(content.type) %}
|
|
|
|
<h3>
|
|
<span class="{{ color }} border-{{ color }}">
|
|
<i class="fa {{ icon }} {{ color }}"></i> {{ t(content.type) }}
|
|
</span>
|
|
</h3>
|
|
|
|
<a href="{{ url_for('serve_content_composition', content_id=content.id, autoplay=1, preview=1) }}" target="_blank" class="btn btn-naked">
|
|
<i class="fa fa-external-link"></i>
|
|
</a>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block main_page %}
|
|
<div class="bottom-content">
|
|
<div class="page-panel left-panel">
|
|
<div class="inner dirview">
|
|
<div class="breadcrumb-container">
|
|
<ul class="breadcrumb">
|
|
{% set ns = namespace(breadpath='') %}
|
|
{% for dir in working_folder_path[1:].split('/') %}
|
|
{% set ns.breadpath = ns.breadpath ~ '/' ~ dir %}
|
|
<li>
|
|
<a href="{{ url_for('slideshow_content_cd', path=ns.breadpath) }}">
|
|
<i class="explr-icon explr-icon-folder"></i>
|
|
{{ truncate(dir, 25, '...') }}
|
|
</a>
|
|
</li>
|
|
{% if not loop.last %}
|
|
<li class="divider">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
{% set contentData = json_loads(content.location) %}
|
|
<div class="horizontal">
|
|
<div class="form-holder">
|
|
<form class="form"
|
|
action="{{ url_for('slideshow_content_save', content_id=content.id) }}?path={{ working_folder_path }}"
|
|
method="POST">
|
|
<div class="form-group">
|
|
<label for="content-edit-name">{{ l.slideshow_content_form_label_name }}</label>
|
|
<div class="widget">
|
|
<input type="text" name="name" id="content-edit-name" required="required"
|
|
value="{{ content.name }}"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="elem-screen-ratio">{{ l.enum_content_type_composition_object_label }}</label>
|
|
<div class="widget">
|
|
{% set ratios = [
|
|
"4/3",
|
|
"16/9",
|
|
"16/10",
|
|
"3/4",
|
|
"9/16",
|
|
"10/16",
|
|
] %}
|
|
<select name="name" id="elem-screen-ratio" required="required">
|
|
{% for ratio in ratios %}
|
|
<option value="{{ ratio }}" {% if ratio == contentData.ratio %}selected="selected"{% endif %}>
|
|
{{ ratio }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{# <div class="form-group">#}
|
|
{# <label for="">Ratio</label>#}
|
|
{# <div class="horizontal">#}
|
|
{# <div class="widget">#}
|
|
{# <input type="text" value="16" />#}
|
|
{# </div>#}
|
|
{# <div>#}
|
|
{# /#}
|
|
{# </div>#}
|
|
{# <div class="widget">#}
|
|
{# <input type="text" value="9" />#}
|
|
{# </div>#}
|
|
{# </div>#}
|
|
{# </div>#}
|
|
|
|
<input type="hidden" name="location" id="content-edit-location" value="{{ content.location }}" />
|
|
|
|
<div class="elements-holder">
|
|
<h3 class="divide">{{ l.composition_elements_heading }}</h3>
|
|
<div class="form-elements-list" id="elementList">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions actions-right">
|
|
<button type="submit" class="btn btn-info">
|
|
<i class="fa fa-save icon-left"></i>
|
|
{{ l.common_save }}
|
|
</button>
|
|
<a href="{{ url_for('slideshow_content_list') }}" class="btn btn-naked">
|
|
<i class="fa fa-rectangle-xmark icon-left"></i>
|
|
{{ l.common_cancel }}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page-content">
|
|
<div class="inner">
|
|
<h3 class="main">
|
|
{{ l.composition_monitor }} <span class="ratio-value badge-inset"></span>
|
|
</h3>
|
|
|
|
<div class="toolbar">
|
|
<button id="addElement" class="content-explr-picker"><i class="fa fa-plus icon-left"></i>{{ l.composition_element_add }}</button>
|
|
<button id="removeAllElements" class="btn btn-danger"><i class="fa fa-trash icon-left"></i> {{ l.composition_elements_delete_all }}</button>
|
|
</div>
|
|
|
|
<div class="presets">
|
|
<h4 class="divide">
|
|
{{ l.composition_presets }}:
|
|
</h4>
|
|
<button type="button" id="presetGrid2x2" class="btn btn-wire-neutral">{{ l.composition_presets_grid_2x2 }}</button>
|
|
<button type="button" id="presetTvNews1x1" class="btn btn-wire-neutral">{{ l.composition_presets_tvnews_1x1 }}</button>
|
|
</div>
|
|
<div class="screen-holder">
|
|
<div class="screen" id="screen">
|
|
<!-- Elements will be dynamically added here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page-panel right-panel">
|
|
<div class="form-element-properties hidden">
|
|
<form id="elementForm">
|
|
<h3>
|
|
{{ l.common_position }}
|
|
</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-x">{{ l.composition_element_x_axis }}</label>
|
|
<div class="widget">
|
|
<input type="number" id="elem-x" name="elem-x">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-y">{{ l.composition_element_y_axis }}</label>
|
|
<div class="widget">
|
|
<input type="number" id="elem-y" name="elem-y">
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="divide">
|
|
{{ l.common_size }}
|
|
</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-width">{{ l.common_width }}</label>
|
|
<div class="widget">
|
|
<input type="number" id="elem-width" name="elem-width">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-height">{{ l.common_height }}</label>
|
|
<div class="widget">
|
|
<input type="number" id="elem-height" name="elem-height">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="horizontal fx-end element-tool element-adjust-aspect-ratio-container hidden">
|
|
<button type="button" class="btn btn-wire-neutral element-adjust-aspect-ratio">
|
|
<i class="fa fa-solid fa-down-left-and-up-right-to-center icon-left"></i> {{ l.composition_element_match_content_aspect_ratio }}
|
|
</button>
|
|
</div>
|
|
|
|
{# <div class="form-group">#}
|
|
{# <label for="elem-rotate">{{ l.common_angle }} (deg)</label>#}
|
|
{# <div class="widget">#}
|
|
{# <input type="number" id="elem-rotate" name="elem-rotate">#}
|
|
{# </div>#}
|
|
{# </div>#}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pickers hidden">
|
|
<div class="modals-outer">
|
|
<div class="modals-inner">
|
|
{% include 'slideshow/contents/modal/explr-picker.jinja.html' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|