This commit is contained in:
Markos Gogoulos
2026-02-10 19:08:35 +02:00
parent 166fb5c00b
commit 467e273ff5
6 changed files with 84 additions and 349 deletions
@@ -31,66 +31,28 @@
<form class="tiny_iframecms_form" id="{{elementid}}_tiny_iframecms_form">
<!-- Tab Navigation -->
<ul class="nav nav-tabs mb-3 tiny_iframecms_tabs" role="tablist">
<!-- My Media tab (first, active by default) -->
<li class="nav-item" role="presentation">
<button class="nav-link active tiny_iframecms_tab_url_btn" id="{{elementid}}_tab_url"
data-bs-toggle="tab" data-bs-target="#{{elementid}}_pane_url"
type="button" role="tab" aria-controls="{{elementid}}_pane_url" aria-selected="true">
{{#str}} tabembedurl, tiny_mediacms {{/str}}
<button class="nav-link active tiny_iframecms_tab_iframe_library_btn" id="{{elementid}}_tab_iframe_library"
data-bs-toggle="tab" data-bs-target="#{{elementid}}_pane_iframe_library"
type="button" role="tab" aria-controls="{{elementid}}_pane_iframe_library" aria-selected="true">
{{#str}} tabvideolibraryiframe, tiny_mediacms {{/str}}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link tiny_iframecms_tab_iframe_library_btn" id="{{elementid}}_tab_iframe_library"
data-bs-toggle="tab" data-bs-target="#{{elementid}}_pane_iframe_library"
type="button" role="tab" aria-controls="{{elementid}}_pane_iframe_library" aria-selected="false">
{{#str}} tabvideolibraryiframe, tiny_mediacms {{/str}}
<!-- Configure tab (second, hidden initially) -->
<li class="nav-item tiny_iframecms_tab_url_item" role="presentation" style="display: none;">
<button class="nav-link tiny_iframecms_tab_url_btn" id="{{elementid}}_tab_url"
data-bs-toggle="tab" data-bs-target="#{{elementid}}_pane_url"
type="button" role="tab" aria-controls="{{elementid}}_pane_url" aria-selected="false">
{{#str}} tabembedurl, tiny_mediacms {{/str}}
</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content">
<!-- Tab 1: Embed URL (existing content) -->
<div class="tab-pane fade show active tiny_iframecms_pane_url" id="{{elementid}}_pane_url" role="tabpanel" aria-labelledby="{{elementid}}_tab_url">
<div class="container-fluid p-0">
<div class="row">
<!-- Left column: URL and Options -->
<div class="col-md-6">
<!-- URL Input -->
<div class="mb-3">
<label for="{{elementid}}_iframe_url" class="form-label font-weight-bold">
{{#str}} iframeurl, tiny_mediacms {{/str}}
</label>
<textarea
class="form-control tiny_iframecms_url"
id="{{elementid}}_iframe_url"
rows="3"
placeholder="{{#str}} iframeurlplaceholder, tiny_mediacms {{/str}}"
>{{url}}</textarea>
<div class="tiny_iframecms_url_warning text-danger small mt-1 d-none">
{{#str}} iframeurlinvalid, tiny_mediacms {{/str}}
</div>
</div>
{{> tiny_mediacms/iframe_embed_options }}
</div>
<!-- Right column: Preview -->
<div class="col-md-6">
<label class="form-label font-weight-bold">
{{#str}} preview, tiny_mediacms {{/str}}
</label>
<div class="tiny_iframecms_preview_container border rounded p-2 bg-light" style="min-height: 300px;">
<div class="tiny_iframecms_preview d-flex align-items-center justify-content-center text-muted" style="min-height: 280px;">
<span>{{#str}} iframeurlplaceholder, tiny_mediacms {{/str}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab 2: Media Library -->
<div class="tab-pane fade tiny_iframecms_pane_iframe_library" id="{{elementid}}_pane_iframe_library" role="tabpanel" aria-labelledby="{{elementid}}_tab_iframe_library">
<!-- Tab 1: My Media (now first and active) -->
<div class="tab-pane fade show active tiny_iframecms_pane_iframe_library" id="{{elementid}}_pane_iframe_library" role="tabpanel" aria-labelledby="{{elementid}}_tab_iframe_library">
<div class="tiny_iframecms_iframe_library_container" style="min-height: 500px;">
<div class="tiny_iframecms_iframe_library_placeholder text-center py-5">
<p class="text-muted">{{#str}} libraryloading, tiny_mediacms {{/str}}</p>
@@ -110,6 +72,38 @@
</iframe>
</div>
</div>
<!-- Tab 2: Configure (now second) -->
<div class="tab-pane fade tiny_iframecms_pane_url" id="{{elementid}}_pane_url" role="tabpanel" aria-labelledby="{{elementid}}_tab_url">
<div class="container-fluid p-0">
<div class="row">
<!-- Left column: Options only (URL field removed) -->
<div class="col-md-6">
<!-- Hidden URL input (still needed for internal logic) -->
<textarea
class="form-control tiny_iframecms_url d-none"
id="{{elementid}}_iframe_url"
rows="3"
>{{url}}</textarea>
<div class="tiny_iframecms_url_warning text-danger small mt-1 d-none"></div>
{{> tiny_mediacms/iframe_embed_options }}
</div>
<!-- Right column: Preview -->
<div class="col-md-6">
<label class="form-label font-weight-bold">
{{#str}} preview, tiny_mediacms {{/str}}
</label>
<div class="tiny_iframecms_preview_container border rounded p-2 bg-light" style="min-height: 300px;">
<div class="tiny_iframecms_preview d-flex align-items-center justify-content-center text-muted" style="min-height: 280px;">
<span>{{#str}} iframeurlplaceholder, tiny_mediacms {{/str}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
{{/body}}