Skip to content

Instantly share code, notes, and snippets.

@besimhu
Forked from rjspiker/.content.xml
Created August 25, 2017 18:58
Show Gist options
  • Save besimhu/b7ff25936af3d81eb7c1da56c99f1894 to your computer and use it in GitHub Desktop.
Save besimhu/b7ff25936af3d81eb7c1da56c99f1894 to your computer and use it in GitHub Desktop.
AEM 6 Touch UI Show/Hide Checkbox Component Extension - Extension to the standard checkbox component. It enables hiding/unhiding of other components based on the selection made in the checkbox.
<enable
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
text="Enable"
id="enable"
value="true"
name="./enable"
class="cq-dialog-checkbox-showhide"
cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"/>
<deleteEnable
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/hidden"
name="./enable@Delete"
value="true"/>
<showHideContainer
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="hidden button-option-enable-showhide-target"
showhidetargetvalue="true">
<items jcr:primaryType="nt:unstructured">
<!-- some components to show/hide -->
</items>
</showHideContainer>
/**
* Extension to the standard checkbox component. It enables showing/hiding of other components based on the
* selection made in the checkbox.
*
* How to use:
*
* - add the class cq-dialog-checkbox-showhide to the checkbox element
* - add the data attribute cq-dialog-checkbox-showhide-target to the checkbox element, value should be the
* selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
* - add the target class to each target component that can be shown/hidden
* - add the class hidden to each target component to make them initially hidden
* - add the attribute showhidetargetvalue to each target component, the value should equal the value of the select
* option that will unhide this element. Leave this value as an empty string to toggle the target component on
* when the checkbox is unchecked.
*/
(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
$(".cq-dialog-checkbox-showhide").each( function() {
showHide($(this));
});
});
$(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
showHide($(this));
});
function showHide(el){
// get the selector to find the target elements. its stored as data-.. attribute
var target = el.data("cqDialogCheckboxShowhideTarget");
// is checkbox checked?
var checked = el.prop('checked');
// get the selected value
// if checkbox is not checked, we set the value to empty string
var value = checked ? el.val() : '';
// make sure all unselected target elements are hidden.
$(target).not(".hide").addClass("hide");
// unhide the target element that contains the selected value as data-showhidetargetvalue attribute
$(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
}
})(document,Granite.$);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment