app/assets/javascripts/richtext.js

   1 $(document).ready(function () {
   2   /*
   3    * When the text in an edit pane is changed, clear the contents of
   4    * the associated preview pne so that it will be regenerated when
   5    * the user next switches to it.
   6    */
   7   $(".richtext_container textarea").change(function () {
   8     var container = $(this).closest(".richtext_container");
   9
  10     container.find(".tab-pane[id$='_preview']").empty();
  11   }).on("invalid", function () {
  12     var container = $(this).closest(".richtext_container");
  13
  14     container.find("button[data-bs-target$='_edit']").tab("show");
  15   });
  16
  17   /*
  18    * Install a handler to set the minimum preview pane height
  19    * when switching away from an edit pane
  20    */
  21   $(".richtext_container button[data-bs-target$='_edit']").on("hide.bs.tab", function () {
  22     var container = $(this).closest(".richtext_container");
  23     var editor = container.find("textarea");
  24     var preview = container.find(".tab-pane[id$='_preview']");
  25     var minHeight = editor.outerHeight() - preview.outerHeight() + preview.height();
  26
  27     preview.css("min-height", minHeight + "px");
  28   });
  29
  30   /*
  31    * Install a handler to switch to preview mode
  32    */
  33   $(".richtext_container button[data-bs-target$='_preview']").on("show.bs.tab", function () {
  34     var container = $(this).closest(".richtext_container");
  35     var editor = container.find("textarea");
  36     var preview = container.find(".tab-pane[id$='_preview']");
  37
  38     if (preview.contents().length === 0) {
  39       preview.oneTime(500, "loading", function () {
  40         preview.addClass("loading");
  41       });
  42
  43       preview.load(editor.data("previewUrl"), { text: editor.val() }, function () {
  44         preview.stopTime("loading");
  45         preview.removeClass("loading");
  46       });
  47     }
  48   });
  49
  50   var updateHelp = function () {
  51     $(".richtext_container .richtext_help_sidebar:not(:visible):not(:empty)").each(function () {
  52       var container = $(this).closest(".richtext_container");
  53       $(this).children().appendTo(container.find(".tab-pane[id$='_help']"));
  54     });
  55     $(".richtext_container .richtext_help_sidebar:visible:empty").each(function () {
  56       var container = $(this).closest(".richtext_container");
  57       container.find(".tab-pane[id$='_help']").children().appendTo($(this));
  58       if (container.find("button[data-bs-target$='_help'].active").length) {
  59         container.find("button[data-bs-target$='_edit']").tab("show");
  60       }
  61     });
  62   };
  63
  64   updateHelp();
  65   $(window).on("resize", updateHelp);
  66 });