diff --git a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/CUI.GenericMultiField.js b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/CUI.GenericMultiField.js index 6963c0e..a16c17d 100644 --- a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/CUI.GenericMultiField.js +++ b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/CUI.GenericMultiField.js @@ -456,7 +456,7 @@ if (CUI.options.dataAPI) { $(document).on("cui-contentloaded.data-api", function (e, data) { $(".coral-GenericMultiField[data-init~='genericmultifield']", e.target).genericMultiField(); - if (data && data.restored) { + if (data && data._foundationcontentloaded) { $(".coral-GenericMultiField[data-init~='genericmultifield']", e.target).trigger("change"); } }); diff --git a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldDialogHandler.js b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldDialogHandler.js index 96e89e6..5957bb6 100644 --- a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldDialogHandler.js +++ b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldDialogHandler.js @@ -218,7 +218,6 @@ if (dialogContainer) { // replace content with previous $(DIALOG_CONTENT_SELECTOR, dialogContainer).replaceWith(self.parentDialogsData.pop()); - // trigger "foundation-contentloaded" event with data restored=true dialogContainer.trigger("foundation-contentloaded", {restored: true}); } } diff --git a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldHelper.js b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldHelper.js index a3d9a73..2338a7d 100644 --- a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldHelper.js +++ b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/GenericMultifieldHelper.js @@ -9,14 +9,20 @@ */ ns.Helper = { - CUSTOM_BACKDROP_CLASS: "cq-dialog-backdrop-GenericMultiField", - CUSTOM_BACKDROP_SELECTOR: ".cq-dialog-backdrop-GenericMultiField", + CONST: { + CUSTOM_BACKDROP_CLASS: 'q-dialog-backdrop-GenericMultiField', + CUSTOM_BACKDROP_SELECTOR: '.cq-dialog-backdrop-GenericMultiField', + CORAL_GENERIC_MULTIFIELD_SELECTOR: '.coral-GenericMultiField', + ERROR_MESSAGE_REQUIRED: 'Error: Please fill out this field.', + ERROR_MESSAGE_MIN: 'Error: At least {0} items must be created.', + ERROR_MESSAGE_MAX: 'Error: At most {0} items can be created.' + }, /** * Displays the dialog backdrop over the content. */ createCustomBackdrop: function () { - var $customBackdrop = $(ns.Helper.CUSTOM_BACKDROP_SELECTOR), + var $customBackdrop = $(ns.Helper.CONST.CUSTOM_BACKDROP_SELECTOR), $originalBackdrop = $(".cq-dialog-backdrop"); // don't create backdrop if it already exists @@ -25,7 +31,7 @@ } // create backdrop - $customBackdrop = $('
'); + $customBackdrop = $('
'); if ($originalBackdrop.length) { $customBackdrop.insertAfter($originalBackdrop); } else { @@ -69,7 +75,7 @@ * Hides the dialog backdrop over the content. */ removeCustomBackdrop: function () { - var $customBackdrop = $(ns.Helper.CUSTOM_BACKDROP_SELECTOR); + var $customBackdrop = $(ns.Helper.CONST.CUSTOM_BACKDROP_SELECTOR); $customBackdrop.one("transitionend", function () { $customBackdrop.remove(); }); diff --git a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/validations.js b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/validations.js index 8ec46a8..2725567 100644 --- a/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/validations.js +++ b/src/main/resources/SLING-INF/apps/merkle/genericmultifield/clientlibs/js/validations.js @@ -26,7 +26,7 @@ // register adapter for generic multi-field registry.register("foundation.adapters", { type: "foundation-field", - selector: ".coral-GenericMultiField", + selector: Merkle.Helper.CONST.CORAL_GENERIC_MULTIFIELD_SELECTOR, adapter: function (el) { var $el = $(el); return { @@ -62,32 +62,34 @@ // register selector for generic multi-field registry.register("foundation.validation.selector", { - submittable: ".coral-GenericMultiField", + submittable: Merkle.Helper.CONST.CORAL_GENERIC_MULTIFIELD_SELECTOR, candidate: ".coral-GenericMultiField:not([disabled]):not([data-renderreadonly=true])", exclusion: ".coral-GenericMultiField *" }); // register validator for generic multi-field registry.register("foundation.validation.validator", { - selector: ".coral-GenericMultiField", + selector: Merkle.Helper.CONST.CORAL_GENERIC_MULTIFIELD_SELECTOR, validate: function (el) { var $field = $(el).closest(".coral-Form-field"), items = $field.find(".coral-GenericMultiField-list li"), minElements = $field.data("minelements"), maxElements = $field.data("maxelements"); // validate required attribute if ($field.adaptTo("foundation-field").isRequired() && items.length === 0) { - return Granite.I18n.get("Error: Please fill out this field."); + return Granite.I18n.get(Merkle.Helper.CONST.ERROR_MESSAGE_REQUIRED); + } // validate min and max elements (only if field is required) if ($field.adaptTo("foundation-field").isRequired()) { // validate if minElements restriction is met if (items && !isNaN(minElements) && items.length < minElements) { - return Granite.I18n.get('Error: At least {0} items must be created', minElements); + return Granite.I18n.get(Merkle.Helper.CONST.ERROR_MESSAGE_MIN, minElements); } // validate if maxElements restriction is met if (items && !isNaN(maxElements) && items.length > maxElements) { - return Granite.I18n.get('Error: At most {0} items can be created', maxElements); + return Granite.I18n.get(Merkle.Helper.CONST.ERROR_MESSAGE_MAX, maxElements); + } } @@ -96,18 +98,28 @@ show: function (el, message, ctx) { var $field = $(el).closest(".coral-Form-field"); $field.adaptTo("foundation-field").setInvalid(true); + + setTimeout(function() { + $field.siblings(".coral-Form-errorlabel").each(function (index, element) { + if (index > 0) { + element.remove() + } + }); + }, 200); + ctx.next(); }, clear: function (el, ctx) { var $field = $(el).closest(".coral-Form-field"); $field.adaptTo("foundation-field").setInvalid(false); - $field.siblings(".coral-Icon--alert").remove(); + $field.siblings(".coral-Form-fielderror").remove(); + $field.siblings(".coral-Form-errorlabel").remove(); ctx.next(); } }); - // perform validation every time generic multi-field changed - $(document).on("change", ".coral-GenericMultiField", function () { + // perform validation every time generic multifield changed + $(document).on("change", Merkle.Helper.CONST.CORAL_GENERIC_MULTIFIELD_SELECTOR, function () { _performValidation($(this)); });