mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-02-08 00:13:04 -05:00
a
This commit is contained in:
Markos Gogoulos
134
lms-plugins/mediacms-moodle/tiny/templates/iframe_embed_modal.mustache
Executable file
134
lms-plugins/mediacms-moodle/tiny/templates/iframe_embed_modal.mustache
Executable file
@@ -0,0 +1,134 @@
|
||||
{{!
|
||||
This file is part of Moodle - http://moodle.org/
|
||||
|
||||
Moodle is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Moodle is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
{{!
|
||||
@template tiny_mediacms/iframe_embed_modal
|
||||
|
||||
Iframe embed modal template.
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"elementid": "editor1",
|
||||
"isupdating": false
|
||||
}
|
||||
}}
|
||||
{{< core/modal }}
|
||||
|
||||
{{$body}}
|
||||
<form class="tiny_iframecms_form" id="{{elementid}}_tiny_iframecms_form">
|
||||
<!-- Tab Navigation -->
|
||||
<ul class="nav nav-tabs mb-3 tiny_iframecms_tabs" role="tablist">
|
||||
<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>
|
||||
</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}}
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="tiny_iframecms_iframe_library_loading text-center py-5 d-none">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="sr-only visually-hidden">{{#str}} libraryloading, tiny_mediacms {{/str}}</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">{{#str}} libraryloading, tiny_mediacms {{/str}}</p>
|
||||
</div>
|
||||
<iframe
|
||||
class="tiny_iframecms_iframe_library_frame d-none"
|
||||
src=""
|
||||
style="width: 100%; height: 500px; border: 1px solid #dee2e6; border-radius: 0.25rem;"
|
||||
frameborder="0"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{/body}}
|
||||
|
||||
{{$footer}}
|
||||
<button type="button" class="btn btn-primary" data-action="save">
|
||||
{{#isupdating}}
|
||||
{{#str}} updateiframe, tiny_mediacms {{/str}}
|
||||
{{/isupdating}}
|
||||
{{^isupdating}}
|
||||
{{#str}} insertiframe, tiny_mediacms {{/str}}
|
||||
{{/isupdating}}
|
||||
</button>
|
||||
{{#isupdating}}
|
||||
<button type="button" class="btn btn-danger tiny_iframecms_remove_btn" data-action="remove">
|
||||
{{#str}} removeiframe, tiny_mediacms {{/str}}
|
||||
</button>
|
||||
{{/isupdating}}
|
||||
<button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel, moodle {{/str}}</button>
|
||||
{{/footer}}
|
||||
|
||||
{{/ core/modal }}
|
||||
Reference in New Issue
Block a user