#43 adopted user interaction logic and controlling error flow

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");
             }
         });

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});
             }
         }

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 = $('<div class="' + ns.Helper.CUSTOM_BACKDROP_CLASS + '"></div>');
+            $customBackdrop = $('<div class="' + ns.Helper.CONST.CUSTOM_BACKDROP_CLASS + '"></div>');
             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();
             });

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));
     });