Refactor editor fragment layout for improved readability and maintainability
This commit is contained in:
parent
74410e1075
commit
f9089066ec
1 changed files with 30 additions and 21 deletions
|
@ -1,28 +1,37 @@
|
||||||
{% import "fragments/_icon_fragment.html" as icons %}
|
{% import "fragments/_icon_fragment.html" as icons %}
|
||||||
|
|
||||||
{% macro render_editor(id, title, mode='edit', content=None, enabled=True) %}
|
{% macro render_editor(id, title, mode='edit', content=None, enabled=True) %}
|
||||||
<!-- Editor Fragment -->
|
<!-- Editor Fragment -->
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<ul class="nav nav-tabs">
|
<ul class="nav nav-tabs">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<span class="nav-link text-black">{{ title }}</span>
|
<span class="nav-link text-black">{{ title }}</span>
|
||||||
</li>
|
</li>
|
||||||
{% if enabled %}
|
{% if enabled %}
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link{% if mode == 'view' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#viewer{{ id }}">{{ icons.render_icon('file-earmark-richtext', 16) }}</a>
|
<a class="nav-link{% if mode == 'view' %} active{% endif %}" data-bs-toggle="tab"
|
||||||
</li>
|
data-bs-target="#viewer{{ id }}">{{ icons.render_icon('file-earmark-richtext', 16) }}</a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link{% if mode == 'edit' %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#editor{{ id }}" id="editTab{{ id }}" onclick="EditorWidget.autoResizeTextarea(textEditor{{ id }});">{{ icons.render_icon('pencil', 16) }}</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link{% if mode == 'edit' %} active{% endif %}" data-bs-toggle="tab"
|
||||||
{% endif %}
|
data-bs-target="#editor{{ id }}" id="editTab{{ id }}"
|
||||||
</ul>
|
onclick="EditorWidget.autoResizeTextarea(textEditor{{ id }});">{{ icons.render_icon('pencil', 16)
|
||||||
<div class="tab-content" id="tabContent{{ id }}">
|
}}</a>
|
||||||
<div class="tab-pane fade{% if mode == 'view' %} show active border border-top-0{% endif %} p-2 markdown-body viewer" id="viewer{{ id }}"></div>
|
</li>
|
||||||
<div class="tab-pane fade{% if mode == 'edit' %} show active border border-top-0{% endif %}" id="editor{{ id }}">
|
{% endif %}
|
||||||
<textarea id="textEditor{{ id }}" name="editor{{ id }}" class="form-control border-top-0 rounded-top-0{% if not enabled %} disabled{% endif %} editor" data-note-id="{{ id }}" oninput="EditorWidget.autoResizeTextarea(textEditor{{ id }}); viewer{{ id }}.innerHTML = marked.parse(textEditor{{ id }}.value);">{{ content if content }}</textarea>
|
</ul>
|
||||||
</div>
|
<div class="tab-content" id="tabContent{{ id }}">
|
||||||
|
<div class="tab-pane fade{% if mode == 'view' %} show active border border-top-0{% endif %} p-2 markdown-body viewer"
|
||||||
|
id="viewer{{ id }}"></div>
|
||||||
|
<div class="tab-pane fade{% if mode == 'edit' %} show active border border-top-0{% endif %}"
|
||||||
|
id="editor{{ id }}">
|
||||||
|
<textarea id="textEditor{{ id }}" name="editor{{ id }}"
|
||||||
|
class="form-control border-top-0 rounded-top-0{% if not enabled %} disabled{% endif %} editor"
|
||||||
|
data-note-id="{{ id }}"
|
||||||
|
oninput="EditorWidget.autoResizeTextarea(textEditor{{ id }}); viewer{{ id }}.innerHTML = marked.parse(textEditor{{ id }}.value);">{{ content if content }}</textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
Loading…
Add table
Add a link
Reference in a new issue