rails_admin 2.0.2 → 3.1.0.beta

data/src/rails_admin/widgets.js

@@ -0,0 +1,502 @@
+import jQuery from "jquery";
+import "jquery-ui/ui/widgets/sortable.js";
+import * as bootstrap from "bootstrap";
+import flatpickr from "flatpickr";
+import I18n from "./i18n";
+
+(function ($) {
+  document.addEventListener("rails_admin.dom_ready", function (event) {
+    var $editors,
+      array,
+      config_options,
+      goBootstrapWysihtml5s,
+      goCkeditors,
+      goCodeMirrors,
+      goFroalaWysiwygs,
+      goSimpleMDEs,
+      options;
+    var content = event.detail || $("form");
+    if (content.length) {
+      content.find("[data-datetimepicker]").each(function () {
+        flatpickr(
+          this,
+          $.extend(
+            {
+              dateFormat: "Y-m-dTH:i:S",
+              altInput: true,
+              locale: I18n.locale,
+            },
+            $(this).data("options")
+          )
+        );
+      });
+      content.find("[data-enumeration]").each(function () {
+        if ($(this).is("[multiple]")) {
+          $(this).filteringMultiselect($(this).data("options"));
+        } else {
+          $(this).filteringSelect($(this).data("options"));
+        }
+      });
+      content.find("[data-fileupload]").each(function () {
+        var parent;
+        parent = $(this).closest(".controls");
+        parent.find(".btn-remove-image").on("click", function () {
+          $(this).siblings("[type=checkbox]").click();
+          parent.find(".toggle").toggle("slow");
+          $(this).toggleClass("btn-danger btn-info");
+          return false;
+        });
+      });
+      content.find("[data-fileupload]").change(function () {
+        var ext, image_container, input, reader;
+        input = this;
+        image_container = $("#" + input.id)
+          .parent()
+          .children(".preview");
+        if (!image_container.length) {
+          image_container = $("#" + input.id)
+            .parent()
+            .prepend($("<img />").addClass("preview").addClass("img-thumbnail"))
+            .find("img.preview");
+          image_container.parent().find("img:not(.preview)").hide();
+        }
+        ext = $("#" + input.id)
+          .val()
+          .split(".")
+          .pop()
+          .toLowerCase();
+        if (
+          input.files &&
+          input.files[0] &&
+          $.inArray(ext, ["gif", "png", "jpg", "jpeg", "bmp"]) !== -1
+        ) {
+          reader = new FileReader();
+          reader.onload = function (e) {
+            image_container.attr("src", e.target.result);
+          };
+          reader.readAsDataURL(input.files[0]);
+          image_container.show();
+        } else {
+          image_container.hide();
+        }
+      });
+      content.find("[data-multiple-fileupload]").each(function () {
+        $(this)
+          .closest(".controls")
+          .find(".btn-remove-image")
+          .on("click", function () {
+            $(this).siblings("[type=checkbox]").click();
+            $(this).parent(".toggle").toggle("slow");
+            $(this).toggleClass("btn-danger btn-info");
+            return false;
+          })
+          .end()
+          .sortable({
+            items: ".sortables",
+          });
+      });
+      content.find("[data-multiple-fileupload]").change(function () {
+        var ext, file, i, image_container, input, len, ref, results;
+        input = this;
+        $("#" + input.id)
+          .parent()
+          .children(".preview")
+          .remove();
+        ref = input.files;
+        results = [];
+        for (i = 0, len = ref.length; i < len; i++) {
+          file = ref[i];
+          ext = file.name.split(".").pop().toLowerCase();
+          if ($.inArray(ext, ["gif", "png", "jpg", "jpeg", "bmp"]) === -1) {
+            continue;
+          }
+          image_container = $("<img />")
+            .addClass("preview")
+            .addClass("img-thumbnail");
+          results.push(
+            (function (image_container) {
+              var reader;
+              reader = new FileReader();
+              reader.onload = function (e) {
+                image_container.attr("src", e.target.result);
+              };
+              reader.readAsDataURL(file);
+              return $("#" + input.id)
+                .parent()
+                .append(
+                  $("<div></div>").addClass("preview").append(image_container)
+                );
+            })(image_container)
+          );
+        }
+        return results;
+      });
+      content.find("[data-filteringmultiselect]").each(function () {
+        $(this).filteringMultiselect($(this).data("options"));
+        if ($(this).parents("#modal").length) {
+          $(this).parent().siblings(".modal-actions").remove();
+        } else {
+          $(this).parents(".control-group").first().remoteForm();
+        }
+      });
+      content.find("[data-filteringselect]").each(function () {
+        $(this).filteringSelect($(this).data("options"));
+        if ($(this).parents("#modal").length) {
+          $(this).parent().siblings(".modal-actions").remove();
+        } else {
+          $(this).parents(".control-group").first().remoteForm();
+        }
+      });
+      content.find("[data-nestedmany]").each(function () {
+        var field, nav, tab_content, toggler;
+        field = $(this).parents(".control-group").first();
+        nav = field.find("> .controls > .nav");
+        tab_content = field.find("> .tab-content");
+        toggler = field.find("> .controls > .btn-group > .toggler");
+        tab_content
+          .children(".fields:not(.tab-pane)")
+          .addClass("tab-pane")
+          .each(function () {
+            $(this).attr(
+              "id",
+              "unique-id-" +
+                new Date().getTime() +
+                Math.floor(Math.random() * 100000)
+            );
+            nav.append(
+              $("<li></li>")
+                .append(
+                  $("<a></a>")
+                    .addClass("nav-link")
+                    .attr("data-bs-toggle", "tab")
+                    .attr("href", "#" + this.id)
+                    .text(
+                      $(this).children(".object-infos").data("object-label")
+                    )
+                )
+                .addClass("nav-item")
+            );
+          });
+        if (nav.find("> li.active").length === 0) {
+          nav
+            .find("> li > a[data-bs-toggle='tab']:first")
+            .each(function (index, element) {
+              bootstrap.Tab.getOrCreateInstance(element).show();
+            });
+        }
+        if (nav.children().length === 0) {
+          toggler
+            .addClass("disabled")
+            .removeClass("active")
+            .children("i")
+            .addClass("fa-chevron-right");
+        } else {
+          if (toggler.hasClass("active")) {
+            $(toggler.data("bs-target")).addClass("show");
+            toggler.children("i").addClass("fa-chevron-down");
+          } else {
+            toggler.children("i").addClass("fa-chevron-right");
+          }
+        }
+      });
+      content.find("[data-nestedone]").each(function () {
+        var field, first_tab, nav, tab_content, toggler;
+        field = $(this).parents(".control-group").first();
+        nav = field.find("> .controls > .nav");
+        tab_content = field.find("> .tab-content");
+        toggler = field.find("> .controls > .btn-group > .toggler");
+        tab_content
+          .children(".fields:not(.tab-pane)")
+          .addClass("tab-pane active")
+          .each(function () {
+            field
+              .find("> .controls .add_nested_fields")
+              .removeClass("add_nested_fields")
+              .text($(this).children(".object-infos").data("object-label"));
+            nav.append(
+              $("<li></li>").append(
+                $("<a></a>")
+                  .attr("data-bs-toggle", "tab")
+                  .attr("href", "#" + $(this).id)
+                  .text($(this).children(".object-infos").data("object-label"))
+              )
+            );
+          });
+        first_tab = nav.find("> li > a[data-bs-toggle='tab']:first");
+        first_tab.each(function (index, element) {
+          bootstrap.Tab.getOrCreateInstance(element).show();
+        });
+        field
+          .find("> .controls > [data-target]:first")
+          .html('<i class="fas"></i> ' + first_tab.html());
+        nav.hide();
+        if (nav.children().length === 0) {
+          toggler
+            .addClass("disabled")
+            .removeClass("active")
+            .children("i")
+            .addClass("fa-chevron-right");
+        } else {
+          if (toggler.hasClass("active")) {
+            $(toggler.data("bs-target")).addClass("show");
+            toggler.children("i").addClass("fa-chevron-down");
+          } else {
+            toggler.children("i").addClass("fa-chevron-right");
+          }
+        }
+      });
+      content.find("[data-polymorphic]").each(function () {
+        var field, object_select, type_select, urls;
+        type_select = $(this);
+        field = type_select.parents(".control-group").first();
+        object_select = field.find("select").last();
+        urls = type_select.data("urls");
+        type_select.on("change", function (e) {
+          var selected_data, selected_type;
+          selected_type = type_select.val().toLowerCase().replace(/::/g, "-");
+          selected_data = $("#" + selected_type + "-js-options").data(
+            "options"
+          );
+          object_select.data("options", selected_data);
+          object_select.filteringSelect("destroy");
+          object_select.filteringSelect(selected_data);
+        });
+      });
+      goSimpleMDEs = function () {
+        return content
+          .find("[data-richtext=simplemde]")
+          .not(".simplemded")
+          .each(function (index, domEle) {
+            var instance_config, options;
+            options = $(this).data("options");
+            instance_config = options.instance_config;
+            new window.SimpleMDE(
+              $.extend(
+                true,
+                {
+                  element: document.getElementById(this.id),
+                  autosave: {
+                    uniqueId: this.id,
+                  },
+                },
+                instance_config
+              )
+            );
+            $(this).addClass("simplemded");
+          });
+      };
+      $editors = content.find("[data-richtext=simplemde]").not(".simplemded");
+      if ($editors.length) {
+        if (!window.SimpleMDE) {
+          options = $editors.first().data("options");
+          $("head").append(
+            '<link href="' +
+              options["css_location"] +
+              '" rel="stylesheet" media="all" type="text/css">'
+          );
+          $.getScript(
+            options["js_location"],
+            function (script, textStatus, jqXHR) {
+              return goSimpleMDEs();
+            }
+          );
+        } else {
+          goSimpleMDEs();
+        }
+      }
+      goCkeditors = function () {
+        return content
+          .find("[data-richtext=ckeditor]")
+          .not(".ckeditored")
+          .each(function (index, domEle) {
+            var instance;
+            try {
+              if ((instance = window.CKEDITOR.instances[this.id])) {
+                instance.destroy(true);
+              }
+            } catch (error1) {}
+            window.CKEDITOR.replace(this, $(this).data("options").options);
+            $(this).addClass("ckeditored");
+          });
+      };
+      $editors = content.find("[data-richtext=ckeditor]").not(".ckeditored");
+      if ($editors.length) {
+        if (!window.CKEDITOR) {
+          options = $editors.first().data("options");
+          window.CKEDITOR_BASEPATH = options["base_location"];
+          $.getScript(
+            options["jspath"],
+            (function (_this) {
+              return function (script, textStatus, jqXHR) {
+                return goCkeditors();
+              };
+            })(this)
+          );
+        } else {
+          goCkeditors();
+        }
+      }
+      goCodeMirrors = (function (_this) {
+        return function (array) {
+          return array.each(function (index, domEle) {
+            var textarea;
+            options = $(this).data("options");
+            textarea = this;
+            $.getScript(
+              options["locations"]["mode"],
+              function (script, textStatus, jqXHR) {
+                options = $(domEle).data("options");
+                $("head").append(
+                  '<link href="' +
+                    options["locations"]["theme"] +
+                    '" rel="stylesheet" media="all" type="text/css">'
+                );
+                CodeMirror.fromTextArea(textarea, options["options"]);
+                return $(textarea).addClass("codemirrored");
+              }
+            );
+          });
+        };
+      })(this);
+      array = content.find("[data-richtext=codemirror]").not(".codemirrored");
+      if (array.length) {
+        this.array = array;
+        if (!window.CodeMirror) {
+          options = $(array[0]).data("options");
+          $("head").append(
+            '<link href="' +
+              options["csspath"] +
+              '" rel="stylesheet" media="all" type="text/css">'
+          );
+          $.getScript(
+            options["jspath"],
+            (function (_this) {
+              return function (script, textStatus, jqXHR) {
+                return goCodeMirrors(_this.array);
+              };
+            })(this)
+          );
+        } else {
+          goCodeMirrors(this.array);
+        }
+      }
+      goBootstrapWysihtml5s = (function (_this) {
+        return function (array, config_options) {
+          return array.each(function () {
+            $(this).addClass("bootstrap-wysihtml5ed");
+            $(this).closest(".controls").addClass("well");
+            $(this).wysihtml5(config_options);
+          });
+        };
+      })(this);
+      array = content
+        .find("[data-richtext=bootstrap-wysihtml5]")
+        .not(".bootstrap-wysihtml5ed");
+      if (array.length) {
+        this.array = array;
+        options = $(array[0]).data("options");
+        config_options = $.parseJSON(options["config_options"]);
+        if (!window.wysihtml5) {
+          $("head").append(
+            '<link href="' +
+              options["csspath"] +
+              '" rel="stylesheet" media="all" type="text/css">'
+          );
+          $.getScript(
+            options["jspath"],
+            (function (_this) {
+              return function (script, textStatus, jqXHR) {
+                return goBootstrapWysihtml5s(_this.array, config_options);
+              };
+            })(this)
+          );
+        } else {
+          goBootstrapWysihtml5s(this.array, config_options);
+        }
+      }
+      goFroalaWysiwygs = (function (_this) {
+        return function (array) {
+          return array.each(function () {
+            var uploadEnabled;
+            options = $(this).data("options");
+            config_options = $.parseJSON(options["config_options"]);
+            if (config_options) {
+              if (!config_options["inlineMode"]) {
+                config_options["inlineMode"] = false;
+              }
+            } else {
+              config_options = {
+                inlineMode: false,
+              };
+            }
+            uploadEnabled = config_options["imageUploadURL"]
+              ? (config_options["imageUploadParams"] = {
+                  authenticity_token: $("meta[name=csrf-token]").attr(
+                    "content"
+                  ),
+                })
+              : void 0;
+            $(this).addClass("froala-wysiwyged");
+            $(this).froalaEditor(config_options);
+            if (uploadEnabled) {
+              $(this)
+                .on("froalaEditor.image.error", function (e, editor, error) {
+                  alert("error uploading image: " + error.message);
+                })
+                .on("froalaEditor.image.removed", function (e, editor, $img) {
+                  editor.options.imageDeleteParams = {
+                    src: $img.attr("src"),
+                    authenticity_token: $("meta[name=csrf-token]").attr(
+                      "content"
+                    ),
+                  };
+                  editor.deleteImage($img);
+                })
+                .on(
+                  "editable.imageDeleteSuccess",
+                  function (e, editor, data) {}
+                )
+                .on("editable.imageDeleteError", function (e, editor, error) {
+                  alert("error deleting image: " + error.message);
+                });
+            }
+          });
+        };
+      })(this);
+      array = content
+        .find("[data-richtext=froala-wysiwyg]")
+        .not(".froala-wysiwyged");
+      if (array.length) {
+        options = $(array[0]).data("options");
+        if (!$.isFunction($.fn.editable)) {
+          $("head").append(
+            '<link href="' +
+              options["csspath"] +
+              '" rel="stylesheet" media="all" type="text/css">'
+          );
+          $.getScript(
+            options["jspath"],
+            (function (_this) {
+              return function (script, textStatus, jqXHR) {
+                return goFroalaWysiwygs(array);
+              };
+            })(this)
+          );
+        } else {
+          goFroalaWysiwygs(array);
+        }
+      }
+      return content.find("trix-editor").each(function () {
+        if (!window.Trix) {
+          options = $(this).data("options");
+          $("head").append(
+            '<link href="' +
+              options["csspath"] +
+              '" rel="stylesheet" media="all" type="text/css">'
+          );
+          return $.getScript(options["jspath"]);
+        }
+      });
+    }
+  });
+})(jQuery);