From 04c3ec3da499fd1c3174e438154c0fc2f6b7f4bb Mon Sep 17 00:00:00 2001 From: ssnukala Date: Fri, 10 Jan 2025 23:00:22 -0600 Subject: [PATCH 1/3] Update modal.html.twig Fixed bug - json_encode missing --- app/templates/FormGenerator/modal.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/FormGenerator/modal.html.twig b/app/templates/FormGenerator/modal.html.twig index 3c66201..b2fc759 100644 --- a/app/templates/FormGenerator/modal.html.twig +++ b/app/templates/FormGenerator/modal.html.twig @@ -48,7 +48,7 @@ {% endblock %} From 165cdb1964e3ab8d41e6a4ccf9dbc08436dbd5fc Mon Sep 17 00:00:00 2001 From: ssnukala Date: Fri, 10 Jan 2025 23:38:08 -0600 Subject: [PATCH 3/3] Update widget-formGenerator.js Changed UF Form parameter name to validator instead of validators (deprecated) Removed initialization of the plugin elements, and moved it to the modal.html.twig page. --- app/assets/js/widget-formGenerator.js | 229 +++++++++++++------------- 1 file changed, 110 insertions(+), 119 deletions(-) diff --git a/app/assets/js/widget-formGenerator.js b/app/assets/js/widget-formGenerator.js index 9126018..640f876 100644 --- a/app/assets/js/widget-formGenerator.js +++ b/app/assets/js/widget-formGenerator.js @@ -10,21 +10,21 @@ * @license MIT */ -(function ($, window, document, undefined) { - "use strict"; +;(function($, window, document, undefined) { + "use strict"; // Define plugin name and defaults. var pluginName = "formGenerator", defaults = { - DEBUG: false, - mainAlertElement: $("#alerts-page"), - redirectAfterSuccess: true, - autofocusModalElement: true, - successCallback: function (data) {}, + DEBUG : false, + mainAlertElement : $('#alerts-page'), + redirectAfterSuccess : true, + autofocusModalElement : true, + successCallback : function(data) {} }; // Constructor - function Plugin(element, options) { + function Plugin (element, options) { this.elements = element; this.$elements = $(this.elements); this.settings = $.extend(true, {}, defaults, options); @@ -32,14 +32,10 @@ this._name = pluginName; // Detect changes to element attributes - this.$elements.attrchange({ - callback: function (event) { - this.elements = event.target; - }.bind(this), - }); + this.$elements.attrchange({ callback: function (event) { this.elements = event.target; }.bind(this) }); // Initialize ufAlerts - if (!this.settings.mainAlertElement.data("ufAlerts")) { + if (!this.settings.mainAlertElement.data('ufAlerts')) { this.settings.mainAlertElement.ufAlerts(); } @@ -51,94 +47,92 @@ /** * Bind the display action for a form to the button */ - display: function () { - this.$elements.on("click", $.proxy(this._fetchForm, this)); + display: function() { + this.$elements.on('click', $.proxy(this._fetchForm, this)); return this.$elements; }, /** * Bind the confirm action to the button */ - confirm: function () { - this.$elements.on("click", $.proxy(this._fetchConfirmModal, this)); + confirm: function() { + this.$elements.on('click', $.proxy(this._fetchConfirmModal, this)); return this.$elements; }, /** * Fetch the form HTML */ - _fetchForm: function (event) { + _fetchForm: function(event) { + // Get the button element var button = event.currentTarget; // Get the box_id. Define one if none is defined - var box_id = $(button).data("target"); + var box_id = $(button).data('target'); if (box_id == undefined) { box_id = "formGeneratorModal"; } // Delete any existing instance of the form with the same name - if ($("#" + box_id).length) { - $("#" + box_id).remove(); + if($('#' + box_id).length) { + $('#' + box_id).remove(); } // Prepare the ajax payload - var payload = $.extend( - { - box_id: box_id, - }, - button.dataset - ); + var payload = $.extend({ + box_id: box_id} + , button.dataset); // Fetch and render the form $.ajax({ type: "GET", - url: $(button).data("formurl"), + url: $(button).data('formurl'), data: payload, - cache: false, + cache: false }) - .done($.proxy(this._displayForm, this, box_id, button)) - .fail($.proxy(this._displayFailure, this, button)); + .done($.proxy(this._displayForm, this, box_id, button)) + .fail($.proxy(this._displayFailure, this, button)); }, /** * Displays the form modal and set up ufForm */ - _displayForm: function (box_id, button, data) { + _displayForm: function(box_id, button, data) { + // Trigger pre-display event $(button).trigger("displayForm." + this._name); // Append the form as a modal dialog to the body - $("body").append(data); - $("#" + box_id).modal("show"); + $( "body" ).append(data); + $('#' + box_id).modal('show'); // Set focus on first element if (this.settings.autofocusModalElement) { - $("#" + box_id).on("shown.bs.modal", function () { - $(this).find(".modal-body").find(":input:enabled:visible:first").focus(); + $('#' + box_id).on('shown.bs.modal', function () { + $(this).find(".modal-body").find(':input:enabled:visible:first').focus(); }); } // Setup ufAlerts - var boxMsgTarget = $("#" + box_id + " #form-alerts"); + var boxMsgTarget = $("#"+box_id+" #form-alerts"); // Show the alert. We could have info alert coming in - if (!boxMsgTarget.data("ufAlerts")) { + if (!boxMsgTarget.data('ufAlerts')) { boxMsgTarget.ufAlerts(); } - boxMsgTarget.ufAlerts("clear").ufAlerts("fetch").ufAlerts("render"); + boxMsgTarget.ufAlerts('clear').ufAlerts('fetch').ufAlerts('render'); // Setup the loaded form with ufForm - $("#" + box_id) - .find("form") - .ufForm({ - validator: validators, - msgTarget: $("#" + box_id + " #form-alerts"), - }) - .on("submitSuccess.ufForm", $.proxy(this._formPostSuccess, this, box_id, button)) - .on("submitError.ufForm", $.proxy(this._displayFormFaillure, this, box_id, button)); + $('#' + box_id).find("form").ufForm({ + validator: validators, + msgTarget: $("#"+box_id+" #form-alerts") + }) + .on("submitSuccess.ufForm", $.proxy(this._formPostSuccess, this, box_id, button)) + .on("submitError.ufForm", $.proxy(this._displayFormFaillure, this, box_id, button)); }, /** * Action done when a form is successful */ - _formPostSuccess: function (box_id, button, event, data) { + _formPostSuccess: function(box_id, button, event, data) { + // Trigger success event $(button).trigger("formSuccess." + this._name, data); @@ -149,94 +143,91 @@ if (this.settings.redirectAfterSuccess) { window.location.reload(true); } else { - $("#" + box_id).modal("hide"); - this.settings.mainAlertElement.ufAlerts("clear").ufAlerts("fetch").ufAlerts("render"); + $('#' + box_id).modal('hide'); + this.settings.mainAlertElement.ufAlerts('clear').ufAlerts('fetch').ufAlerts('render'); } }, /** * Fetch confirmation modal */ - _fetchConfirmModal: function (event) { + _fetchConfirmModal: function(event) { + // Get the button element var button = event.currentTarget; // Get the box_id. Define one if none is defined - var box_id = $(button).data("target"); + var box_id = $(button).data('target'); if (box_id == undefined) { box_id = "formGeneratorModal"; } // Delete any existing instance of the form with the same name - if ($("#" + box_id).length) { - $("#" + box_id).remove(); + if($('#' + box_id).length) { + $('#' + box_id).remove(); } // Prepare the ajax payload - var payload = $.extend( - { - box_id: box_id, - box_title: $(button).data("confirmTitle") ? $(button).data("confirmTitle") : null, - confirm_message: $(button).data("confirmMessage") ? $(button).data("confirmMessage") : null, - confirm_warning: $(button).data("confirmWarning") ? $(button).data("confirmWarning") : null, - confirm_button: $(button).data("confirmButton") ? $(button).data("confirmButton") : null, - cancel_button: $(button).data("cancelButton") ? $(button).data("cancelButton") : null, - }, - button.dataset - ); + var payload = $.extend({ + box_id: box_id, + box_title: $(button).data('confirmTitle') ? $(button).data('confirmTitle') : null, + confirm_message: $(button).data('confirmMessage') ? $(button).data('confirmMessage') : null, + confirm_warning: $(button).data('confirmWarning') ? $(button).data('confirmWarning') : null, + confirm_button: $(button).data('confirmButton') ? $(button).data('confirmButton') : null, + cancel_button: $(button).data('cancelButton') ? $(button).data('cancelButton') : null + }, button.dataset); // Fetch and render the form $.ajax({ type: "GET", - url: $(button).data("formurl") ? $(button).data("formurl") : site["uri"]["public"] + "/forms/confirm", + url: $(button).data('formurl') ? $(button).data('formurl') : site['uri']['public'] + "/forms/confirm", data: payload, - cache: false, + cache: false }) - .done($.proxy(this._displayConfirmation, this, box_id, button)) - .fail($.proxy(this._displayFailure, this, button)); + .done($.proxy(this._displayConfirmation, this, box_id, button)) + .fail($.proxy(this._displayFailure, this, button)); }, /** * Display confirmation modal */ - _displayConfirmation: function (box_id, button, data) { + _displayConfirmation: function(box_id, button, data) { + // Trigger pre-display event $(button).trigger("displayConfirmation." + this._name); // Append the form as a modal dialog to the body - $("body").append(data); - $("#" + box_id).modal("show"); + $( "body" ).append(data); + $('#' + box_id).modal('show'); - $("#" + box_id + " .js-confirm").on("click", $.proxy(this._sendConfirmation, this, box_id, button)); + $('#' + box_id + ' .js-confirm').on('click', $.proxy(this._sendConfirmation, this, box_id, button)); }, /** * Send confirmation query */ - _sendConfirmation: function (box_id, button) { + _sendConfirmation: function(box_id, button) { + // Prepare payload - var url = $(button).data("postUrl"); - var method = $(button).data("postMethod") ? $(button).data("postMethod") : "POST"; + var url = $(button).data('postUrl'); + var method = ($(button).data('postMethod')) ? $(button).data('postMethod') : "POST"; var data = { bData: button.dataset, - csrf_name: $("#" + box_id) - .find("input[name='csrf_name']") - .val(), - csrf_value: $("#" + box_id) - .find("input[name='csrf_value']") - .val(), + csrf_name: $('#' + box_id).find("input[name='csrf_name']").val(), + csrf_value: $('#' + box_id).find("input[name='csrf_value']").val() }; // Send ajax $.ajax({ - type: method, - url: url, - data: data, + type: method, + url: url, + data: data }) - .done($.proxy(this._confirmationSuccess, this, box_id, button)) - .fail($.proxy(this._displayConfirmationFaillure, this, box_id, button)); + .done($.proxy(this._confirmationSuccess, this, box_id, button)) + .fail($.proxy(this._displayConfirmationFaillure, this, box_id, button)); }, - /** + /** * Action done when a confirmation request is successful */ - _confirmationSuccess: function (box_id, button, data) { + _confirmationSuccess: function(box_id, button, data) { + // Trigger success event $(button).trigger("confirmSuccess." + this._name, data); @@ -245,6 +236,7 @@ // Refresh page or close modal if (this.settings.redirectAfterSuccess) { + // Redirect if result contains instructions to if (data.redirect) { window.location.replace(data.redirect); @@ -252,53 +244,53 @@ window.location.reload(true); } } else { - $("#" + box_id).modal("hide"); - this.settings.mainAlertElement.ufAlerts("clear").ufAlerts("fetch").ufAlerts("render"); + $('#' + box_id).modal('hide'); + this.settings.mainAlertElement.ufAlerts('clear').ufAlerts('fetch').ufAlerts('render'); } }, /** * Failure callback for ajax requests. Displays the error in the main alertElement */ - _displayFailure: function (button, response) { + _displayFailure: function(button, response) { $(button).trigger("error." + this._name); - if (typeof site !== "undefined" && site.debug.ajax && response.responseText) { + if ((typeof site !== "undefined") && site.debug.ajax && response.responseText) { document.write(response.responseText); document.close(); } else { if (this.settings.DEBUG) { - $.error("Error (" + response.status + "): " + response.responseText); + $.error("Error (" + response.status + "): " + response.responseText ); } - this.settings.mainAlertElement.ufAlerts("clear").ufAlerts("fetch").ufAlerts("render"); + this.settings.mainAlertElement.ufAlerts('clear').ufAlerts('fetch').ufAlerts('render'); } }, /** * Failure callback for ajax requests to be displayed in a modal form */ - _displayFormFailure: function (box_id, button) { + _displayFormFailure: function(box_id, button) { $(button).trigger("error." + this._name); - $("#" + box_id + " #form-alerts").show(); + $("#"+box_id+" #form-alerts").show(); }, /** * Failure callback for ajax requests to be displayed in a confirmation form */ - _displayConfirmationFailure: function (box_id, button) { + _displayConfirmationFailure: function(box_id, button) { $(button).trigger("error." + this._name); // Setup ufAlerts - var boxMsgTarget = $("#" + box_id + " #confirmation-alerts"); + var boxMsgTarget = $("#"+box_id+" #confirmation-alerts"); // Show the alert. We could have info alert coming in - if (!boxMsgTarget.data("ufAlerts")) { + if (!boxMsgTarget.data('ufAlerts')) { boxMsgTarget.ufAlerts(); } - boxMsgTarget.ufAlerts("clear").ufAlerts("fetch").ufAlerts("render"); + boxMsgTarget.ufAlerts('clear').ufAlerts('fetch').ufAlerts('render'); }, /** * Completely destroy the ufAlerts plugin on the element. */ - destroy: function () { + destroy: function() { // Unbind any bound events - this.$elements.off("." + this._name); + this.$elements.off('.' + this._name); // Grab jQuery wrapped element before plugin destruction var $elements = this.$elements; @@ -307,11 +299,12 @@ this.$elements.removeData(this._name); return $elements; - }, + } }); // Handles instantiation and access to non-private methods. - $.fn[pluginName] = function (methodOrOptions) { + $.fn[pluginName] = function(methodOrOptions) { + // If the plugin is called on a non existing element, return nothing if (this.length == 0) { return this; @@ -321,21 +314,23 @@ var instance = $(this).data(pluginName); // If undefined or object, uses the default `display` method. - if (methodOrOptions === undefined || typeof methodOrOptions === "object") { + if (methodOrOptions === undefined || typeof methodOrOptions === 'object') { var method = "display"; var options = methodOrOptions; } // Otherwise ensure first parameter is a valid string - else if (typeof methodOrOptions === "string") { + else if (typeof methodOrOptions === 'string') { // Ensure not a private function - if (methodOrOptions.indexOf("_") !== 0) { + if (methodOrOptions.indexOf('_') !== 0) { var method = methodOrOptions; var options = Array.prototype.slice.call(arguments, 1)[0]; - } else { - $.error("Method " + methodOrOptions + " is private!"); } - } else { - $.error("Method " + methodOrOptions + " is invalid."); + else { + $.error( 'Method ' + methodOrOptions + ' is private!' ); + } + } + else { + $.error( 'Method ' + methodOrOptions + ' is invalid.' ); } // Only initialize if not previously done. @@ -345,16 +340,12 @@ } // Make sure method exist - if (typeof instance[method] === "function") { + if (typeof instance[method] === 'function') { // Run the required method return instance[method](options); } else { - $.error("Method " + method + " does not exist."); + $.error( 'Method ' + method + ' does not exist.' ); } }; - // Apply on default selector - /// SN : Don't do it here, let the user decide where to apply it - //$(".js-displayForm").formGenerator(); - //$(".js-displayConfirm").formGenerator("confirm"); })(jQuery, window, document);