Altered the script and disabled the delete button as well since i want only one field to be shown for anyone who wants to use it .Thanks @arunpatidar .Only issues that remains is the livecopy inheritance and that the select field cannot be coral type. if it is of coral type, on load it shows no sub option that was set with a selected option, in the prior save. please let me know. Eg. If you choose internal field as an option you should see inetrnal field text field , user enters a value. Now, save. Open it again, the option shows internal field but the text field disappears
(function($, $document) {
"use strict";
$(document).ready(function() {
const SELECTOR = '.custom-multi';
const ADD_BTN = '.custom-multi > button.coral3-Button--secondary';
const REMOVE_BTN ='.custom-multi > coral-multifield-item.coral3-Multifield-item > button.coral3-Multifield-remove';
const limit=1;
const MULTI_ITEM = 'coral-multifield-item';
$(document).on('click', ADD_BTN, function() {
let items = $(SELECTOR).find(MULTI_ITEM);
if(typeof items !== 'undefined' || items != null){
$(REMOVE_BTN).attr('disabled', 'disabled');
if(items.length >= limit){
$(this).attr('disabled', 'disabled');
}
}
})
//$document.on("dialog-ready", function() {
$(document).on('click', '.coral-TabPanel-tab', function (event) {
var selectedTab = $.find(".coral-TabPanel-pane.is-active")[0].id;
alert("show hide"+selectedTab);
if (selectedTab === "seoid") {
let items = $(SELECTOR).find(MULTI_ITEM);
if(typeof items !== 'undefined' || items != null){
$(REMOVE_BTN).attr('disabled', 'disabled');
if(items.length >= limit){
$(ADD_BTN).attr('disabled', 'disabled');
}
}
}
})
$document.on("dialog-ready", function() {
if(typeof items !== 'undefined' || items != null){
$(REMOVE_BTN).attr('disabled', 'disabled');
if(items.length >= limit){
$(ADD_BTN).attr('disabled', 'disabled');
}
}
})
$(document).on("DOMSubtreeModified",SELECTOR, function() {
let items = $(SELECTOR).find(MULTI_ITEM);
if(typeof items !== 'undefined' || items != null){
if(items.length > 0 && items.length < limit){
$(ADD_BTN).removeAttr('disabled');
}
}
})
});
})($, $(document));
Only issue left is inheritance.
For coral-ui3 , issue is with Uncaught TypeError: component.getValue is not a function @arunpatidar , resolved by changing script to use value = component._initialValues;
(function(document, $) {
"use strict";
// when dialog gets injected
$(document).on("foundation-contentloaded", function(e) {
// if there is already an inital value make sure the according target element becomes visible
showHideHandler($(".cq-dialog-dropdown-showhide-multi", e.target));
});
$(document).on("selected", ".cq-dialog-dropdown-showhide-multi", function(e) {
showHideHandler($(this));
});
function showHideHandler(el) {
el.each(function(i, element) {
if ($(element).is("coral-select")) {
// handle Coral3 base drop-down
alert("coral select 3");
Coral.commons.ready(element, function(component) {
showHide(component, element);
component.on("change", function() {
showHide(component, element);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("select");
if (component) {
showHide(component, element);
}
}
})
}
function showHide(component, element) {
// get the selector to find the target elements. its stored as data-.. attribute
var target = $(element).data("cqDialogDropdownShowhideTarget");
var $target = $(target);
var elementIndex = $(element).closest('coral-multifield-item').index();
if (target) {
var value;
if (component.value) {
value = component.value;
} else {
//value = component.getValue();
value = component._initialValues;
}
$target.each(function(index) {
var tarIndex = $(this).closest('coral-multifield-item').index();
if (elementIndex == tarIndex) {
$(this).not(".hide").addClass("hide");
$(this).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
}
});
}
}
})(document, Granite.$);
