Solved
CoralUI master slave show-hide & vice-versa
I've added two checkboxes in my component as below:
<checkboxone
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
text="check box one"
name="./check1"
value="{Boolean}true"
uncheckedValue="{Boolean}false">
<granite:data
jcr:primaryType="nt:unstructured"
toggle-checkbox_master="true"/>
</checkboxone>
<checkboxtwo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
text="check box two"
name="./check2"
value="{Boolean}true"
uncheckedValue="{Boolean}false">
<granite:data
jcr:primaryType="nt:unstructured"
toggle-checkbox_slave="false"/>
</checkboxtwo>
For implementing show-hide functionality between master-slave I've added below js to my clientlibs & import it by "extraClientlibs" in xml.
(function (document, $) {
"use strict";
var TOGGLE_ATTRIBUTE_PREFIX = "data-toggle-";
var MASTER_ATTRIBUTE_SUFFIX = "_master";
var SLAVE_ATTRIBUTE_SUFFIX = "_slave";
var DIALOG_CONTENT_SELECTOR = ".cq-dialog-content";
/**
* Build the master and slave attribute names from the toggle name.
* @90521 {string} toggleName
*/
function getAttributes(toggleName) {
debugger;
return {
master: TOGGLE_ATTRIBUTE_PREFIX + toggleName + MASTER_ATTRIBUTE_SUFFIX,
slave: TOGGLE_ATTRIBUTE_PREFIX + toggleName + SLAVE_ATTRIBUTE_SUFFIX
}
}
/**
* Builds the master and slave selectors from the toggle name.
* @90521 {string} toggleName
*/
function getSelectors(toggleName) {
var attributes = getAttributes(toggleName);
return {
master: "[" + attributes.master + "]",
slave: "[" + attributes.slave + "]"
}
}
var toggle = {
name: "checkbox",
updateFunction: function (master, $slaves) {
var isChecked = master[0].hasAttribute("checked");
$slaves.each(function () {
if (isChecked.toString() !== $(this).attr(getAttributes("checkbox").slave)) {
$(this).addClass("hide");
} else {
$(this).removeClass("hide");
}
})
}
};
var selectors = getSelectors(toggle.name);
// When the dialog is loaded, init all slaves
$(document).on("foundation-contentloaded", function (e) {
// Find the dialog
var $dialog = $(e.target);
if ($dialog && $dialog.length === 1) {
// Find the toggel master
var $master = $dialog.find(selectors.master);
if ($master) {
if ($master.length !== 1) {
console.error($master.length + " masters for toggle <" + toggle + ">");
return;
}
// Update slaves
var $slaves = $dialog.find(selectors.slave);
toggle.updateFunction($master, $slaves);
}
}
});
// When a value is changed, trigger update
$(document).on("change", function (e) {
// Find the master which was updated
var $master = $(e.target);
var $dialog = $master.parents(DIALOG_CONTENT_SELECTOR);
if ($master && $master.length === 1 && $master.is(selectors.master)) {
// Update slaves
var $slaves = $dialog.find(selectors.slave);
toggle.updateFunction($master, $slaves);
}
});
})(document, Granite.$);
Its working fine while I check "check box one" & it makes "check box two" disappeared. But while I check "check box two" , "check box one" never disappeared. Can I apply this functionality(Checking "check box two" will disappear "check box one" & vice versa) here? Or need to write custom js ? Thanks.