Hi, Perhaps a javascript is used for this, which handles this.
(function(document, $) {
'use strict';
// When dialog gets injected
$(document).on('foundation-contentloaded', function(e) {
$('.cmp-box--editor coral-select.cq-dialog-dropdown-showhide', e.target).each(function(i, element) {
// Show or hide touch UI Dialog components
var target = $(element).data('cqDialogDropdownShowhideTarget');
if (target) {
Coral.commons.ready(element, function(component) {
// If there is already an inital value make sure the according target element becomes visible
showHideTarget(component, target);
component.on('change', function() {
showHideTarget(component, target);
});
});
}
// Show or hide touch UI Dialog Tabs
var tab = $(element).data('cqDialogDropdownShowhideTab');
var displaySiteLogo = $(".cmp-box--editor coral-checkbox[name='./logo/displaySiteLogo']");
if (tab) {
Coral.commons.ready(element, function(component) {
// If there is already an inital value make sure the according tab element becomes visible
showHideTab(component, tab);
component.on('change', function() {
showHideTab(component, tab);
});
$(displaySiteLogo).change(function() {
showHideTab(component, tab);
});
});
}
});
$('.cmp-box--editor coral-Checkbox.cq-dialog-checkbox-showhide', e.target).each(function(i, element) {
// Show or hide touch UI Dialog components
var target = $(element).data('cqDialogDropdownShowhideTarget');
if (target) {
Coral.commons.ready(element, function(component) {
// If there is already an inital value make sure the according target element becomes visible
showHideTarget(component, target, $(component).attr("checked"));
component.on('change', function(chEve) {
showHideTarget(component, target, chEve.currentTarget.checked);
});
});
}
});
showHideTarget($('.cq-dialog-dropdown-showhide', e.target));
showHideTab($('.cq-dialog-dropdown-showhide', e.target));
});
/**
* Show or hide touch UI Dialog components based on the selection made in the dropdown/select.
*
* @Param {component} component - currently selected element.
* @Param {target} target - target elements.
*/
function showHideTarget(component, target, checkedVal) {
var value = component.value,
$component = $(component);
if ($component.hasClass("coral-Checkbox")) {
if (checkedVal)
value = $component.data("checkboxTarget");
}
$(target).each(function(i, targetObj) {
var targetValue = $(targetObj).data('showhidetargetvalue');
var array = targetValue.split(',');
$(targetObj).not('.hide').addClass('hide');
if ($.inArray(value, array) === -1) {
// Clear fields
var clearFields = $(targetObj).data('showhidetargetclearfields');
if (clearFields) {
showHideClearFields(clearFields);
}
} else {
$(targetObj).filter("[data-showhidetargetvalue='" + targetValue + "']").removeClass('hide');
}
});
}
/**
* Show or hide touch UI Dialog tabs based on the selection made in the dropdown/select.
*
* @Param {component} component - Currently selected element.
* @Param {tab} tab - Tab elements.
*/
function showHideTab(component, tab) {
var value = component.value;
$(tab).each(function(i, tabObj) {
var $tab = $(tabObj).parents('.coral-Panel');
var tabId = $tab.attr('aria-labelledby');
var tabHead = $('.cmp-box--editor coral-tabview').find('coral-tab#' + tabId);
var tabValue = $(tabObj).data('showhidetabvalue');
var showHideTabValueArray = tabValue.split(',');
$(tabHead).not('.hide').addClass('hide');
$(tabObj).not('.hide').addClass('hide');
// Check any target condition before show or hide tab
var showtab = true;
var customCondition = $(tabObj).data('customcondition');
if (customCondition) {
showtab = checkCustomCondition(value);
}
if ($.inArray(value, showHideTabValueArray) !== -1 && showtab) {
$(tabHead).removeClass('hide');
$(tabObj).filter("[data-showhidetabvalue='" + tabValue + "']").removeClass('hide');
} else {
// Clear fields
var clearFields = $(tabObj).data('showhidetabclearfields');
if (clearFields) {
showHideClearFields(clearFields);
}
}
});
}
/**
* Custom conditional checks.
*
* @Param {string} value - Currently selected element.
* @Returns {boolean} - Element condition true or false.
*/
function checkCustomCondition(value) {
var conditionResult = true;
var hideOverlayPosition;
var $chkDisplaySiteLogo = $(".cmp-box--editor coral-checkbox[name='./logo/displaySiteLogo']");
var $selBoxLayout = $(".cmp-box--editor input[name='./boxLayout']");
var $selLogoPosition = $(".cmp-box--editor input[name='./logo/position']");
switch (value) {
case 'square':
hideOverlayPosition = $chkDisplaySiteLogo.is('[checked]') && $selLogoPosition.attr('value') === 'leftMiddle';
if (hideOverlayPosition) {
showHideOverlaySelection(true);
} else {
showHideOverlaySelection(false);
}
conditionResult = !$chkDisplaySiteLogo.is('[checked]') || hideOverlayPosition;
break;
case 'leftMiddle':
hideOverlayPosition = $selBoxLayout.attr('value') === 'square' && $chkDisplaySiteLogo.is('[checked]');
showHideOverlaySelection(hideOverlayPosition);
conditionResult = !$chkDisplaySiteLogo.is('[checked]') || hideOverlayPosition;
break;
case 'topLeft':
case 'topCenter':
case 'topRight':
showHideOverlaySelection(false);
conditionResult = $selBoxLayout.attr('value') === 'square' && !$chkDisplaySiteLogo.is('[checked]');
break;
}
return conditionResult;
}
/**
* Hide/Un-hide overlay position selection elements.
*
* @Param {boolean} hide - Hide or un-hide.
*/
function showHideOverlaySelection(hide) {
var $overlayPositionSelection = $(".cmp-box--editor coral-select[name='./overlay/overlayPosition']");
if (hide) {
var $hiddenInput = $overlayPositionSelection.find('input');
$overlayPositionSelection
.find('coral-selectlist-item')
.filter('[value!="bottomRight"]')
.not('.hide')
.addClass('hide');
$hiddenInput
.attr('name', './overlay/overlayPosition')
.attr('value', 'bottomRight');
$overlayPositionSelection.find('span.coral3-Select-label').text('Bottom Right');
} else {
$overlayPositionSelection.find('coral-selectlist-item').removeClass('hide');
}
}
/**
* Clear touch UI Dialog fields based on the selection made in the dropdown/select.
*
* @Param {Array} clearFields - Array of field type and field names in format {<fieldType>:<fieldName>}.
* Fields supported: checkbox, textfield, image (fileupload).
*/
function showHideClearFields(clearFields) {
var fieldsArray = [];
if (clearFields.indexOf(',') === -1) {
fieldsArray.push(clearFields);
} else {
fieldsArray = clearFields.split(',');
}
fieldsArray.forEach(function(field) {
if (field.indexOf(':') !== -1) {
var delimiter = field.lastIndexOf(':');
var inputType = field.substring(0, delimiter);
var inputName = field.substring(delimiter + 1);
if (inputType === 'checkbox') {
clearCheckBox(inputName);
} else if (inputType === 'textfield') {
clearTextField(inputName);
} else if (inputType === 'img') {
clearImage(inputName);
}
}
});
}
/**
* Uncheck checkbox.
*
* @Param {string} name - Checkbox input name.
*/
function clearCheckBox(name) {
$(".cmp-box--editor coral-checkbox[name='" + name + "']").removeAttr('checked');
}
/**
* Reset textfield to empty.
*
* @Param {string} name - Textfield input name.
*/
function clearTextField(name) {
$(".cmp-box--editor input[name='" + name + "']").attr('value', '');
}
/**
* Delete fileupload image.
*
* @Param {string} name - Image input name.
*/
function clearImage(name) {
var $imgInput = $(".cmp-box--editor input[name='" + name + "']"),
$imgInputParent = $imgInput.parents('.coral-FileUpload--dropSupport').parent(),
$imgFileName = $imgInputParent.find('input.cq-FileUpload-filename'),
$imgFileReference = $imgInputParent.find('input.cq-FileUpload-filereference'),
$imgFileDelete = $imgInputParent.find('input.cq-FileUpload-filedelete');
$imgInput.attr('value', '');
$imgInputParent.find('.cq-FileUpload-thumbnail-img').remove();
if ($imgFileName.length > 0) {
$imgFileName.attr('value', '');
$imgFileName.removeAttr('disabled');
}
if ($imgFileReference.length > 0) {
$imgFileReference.attr('value', '');
$imgFileReference.removeAttr('disabled');
}
if ($imgFileDelete.length > 0) {
$imgFileDelete.attr('value', 'true');
$imgFileDelete.removeAttr('disabled');
}
}
}(document, Granite.$));
