Merge branch 'f-form-helpers' into 'dev'

F form helpers

See merge request !97

CHANGELOG.md

@@ -10,6 +10,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * `caosdb-v-property-linkified` css class to denote properties that have been
   linkified already.
+* `form_elements.make_form_modal` and
+  `form_elements.make_scripting_submission_button` functions to create a form
+  modal and an SSS submission button, respectively.
 
 ### Changed (for changes in existing functionality)
 

src/core/js/ext_trigger_crawler_form.js

@@ -41,7 +41,7 @@
  * variable `BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM_TOOLBOX`. The default is
  * `Tools`.
  */
-var ext_trigger_crawler_form = function () {
+var ext_trigger_crawler_form = function ($, form_elements) {
 
     var init = function (toolbox) {
         const _toolbox = toolbox || "${BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM_TOOLBOX}";
@@ -52,7 +52,7 @@ var ext_trigger_crawler_form = function () {
 
         const crawler_form = make_scripting_caller_form(
             script, button_name);
-        const modal = make_form_modal(crawler_form);
+        const modal = form_elements.make_form_modal(crawler_form, "Trigger the crawler", "Crawl the selected path");
 
 
         navbar.add_tool(button_name, _toolbox, {
@@ -63,32 +63,6 @@ var ext_trigger_crawler_form = function () {
         });
     }
 
-    /**
-     * Wrap the form into a Bootstrap modal.
-     */
-    var make_form_modal = function (form) {
-        const title = "Trigger the Crawler";
-        const modal = $(`
-          <div class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <button type="button"
-                    class="btn-close"
-                    data-bs-dismiss="modal"
-                    aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                  <h4 class="modal-title">${title}</h4>
-                </div>
-                <div class="modal-body">
-                </div>
-              </div>
-            </div>`);
-        modal.find(".modal-body").append(form);
-        return modal[0];
-    }
-
     /**
      * Create the trigger crawler form.
      */
@@ -104,15 +78,7 @@ var ext_trigger_crawler_form = function () {
         });
         $(warning_checkbox).find("input").attr("value", "TRUE");
 
-        const scripting_caller = $(`
-        <form method="POST" action="/scripting">
-          <input type="hidden" name="call" value="${script}"/>
-          <input type="hidden" name="-p0" value=""/>
-          <div class="form-control">
-            <input type="submit"
-              class="form-control btn btn-primary" value="${button_name}"/>
-          </div>
-        </form>`);
+        const scripting_caller = form_elements.make_scripting_submission_button(script, button_name);
 
         scripting_caller.prepend(warning_checkbox).prepend(path_field);
 
@@ -123,7 +89,7 @@ var ext_trigger_crawler_form = function () {
         init: init,
     };
 
-}();
+}($, form_elements);
 
 $(document).ready(function () {
     if ("${BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM}" === "ENABLED") {

src/core/js/form_elements.js

@@ -1563,6 +1563,58 @@ var form_elements = new function () {
         }
     }
 
+    /**
+     * Return a modal HTML element containing the given form.
+     *
+     * @param {HTMLElement} form - the form to be shown in the modal
+     * @param {string} title - the title of the form modal
+     * @param {string} explanationText - An optional paragraph shown between
+     *                                    modal title and form.
+     */
+    this.make_form_modal = function (form, title, explanationText) {
+        const modal = $(`
+              <div class="modal fade" tabindex="-1" role="dialog">
+                <div class="modal-dialog" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h4 class="modal-title">${title}</h4>
+                      <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                      </button>
+                    </div>
+                    <div class="modal-body">
+                      <p>${explanationText}</p>
+                    </div>
+                  </div>
+                </div>`);
+
+        modal.find(".modal-body").append(form);
+        return modal[0];
+    }
+
+    /**
+     * Return a submission button that triggers a given server-side-script.
+     *
+     * @param {string} script - Name of the server-side script to be triggered
+     * @param {string} buttonName - Display name of the submission button
+     */
+    this.make_scripting_submission_button = function (script, buttonName) {
+        let button_name = buttonName || "Submit";
+        const scripting_caller = $(`
+            <form method="POST" action="/scripting">
+              <input type="hidden" name="call" value="${script}"/>
+              <input type="hidden" name="-p0" value=""/>
+              <div class="form-group">
+                <input type="submit"
+                  class="form-control btn btn-primary" value="${button_name}"/>
+              </div>
+            </form>`);
+
+        return scripting_caller
+    }
+
 
     /**
      * Return an input and a label, wrapped in a div with class