Restore loading spinner in richtext previews

This commit is contained in:
Anton Khorev 2024-11-08 15:04:38 +03:00
parent 3a1b4cbe33
commit a05692a3f6
2 changed files with 16 additions and 7 deletions

View file

@ -6,8 +6,10 @@
*/ */
$(document).on("change", ".richtext_container textarea", function () { $(document).on("change", ".richtext_container textarea", function () {
var container = $(this).closest(".richtext_container"); var container = $(this).closest(".richtext_container");
var preview = container.find(".tab-pane[id$='_preview']");
container.find(".tab-pane[id$='_preview']").empty(); preview.children(".richtext_placeholder").attr("hidden", true);
preview.children(".richtext").empty();
}); });
/* /*
@ -31,14 +33,14 @@
var editor = container.find("textarea"); var editor = container.find("textarea");
var preview = container.find(".tab-pane[id$='_preview']"); var preview = container.find(".tab-pane[id$='_preview']");
if (preview.contents().length === 0) { if (preview.children(".richtext").contents().length === 0) {
preview.oneTime(500, "loading", function () { preview.oneTime(200, "loading", function () {
preview.addClass("loading"); preview.children(".richtext_placeholder").removeAttr("hidden");
}); });
preview.load(editor.data("previewUrl"), { text: editor.val() }, function () { preview.children(".richtext").load(editor.data("previewUrl"), { text: editor.val() }, function () {
preview.stopTime("loading"); preview.stopTime("loading");
preview.removeClass("loading"); preview.children(".richtext_placeholder").attr("hidden", true);
}); });
} }
}); });

View file

@ -15,7 +15,14 @@
<div id="<%= id %>_edit" class="tab-pane show active"> <div id="<%= id %>_edit" class="tab-pane show active">
<%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %> <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
</div> </div>
<div id="<%= id %>_preview" class="tab-pane richtext text-break"></div> <div id="<%= id %>_preview" class="tab-pane">
<div class="richtext_placeholder text-center py-5" hidden>
<div class="spinner-border" role="status">
<span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
</div>
</div>
<div class="richtext text-break"></div>
</div>
<div id="<%= id %>_help" class="tab-pane"> <div id="<%= id %>_help" class="tab-pane">
<div class="card bg-body-tertiary h-100"> <div class="card bg-body-tertiary h-100">
<div class="card-body"> <div class="card-body">