// 862850
(function PENDANT_SWITCHER() {
if (document.readyState === 'loading') {
return window.addEventListener('DOMContentLoaded', PENDANT_SWITCHER);
}
var switcherGroups = {
// WILL LOOK LIKE THIS
// 'switcher-group-0' : {
// 'teasers' : {
// 'original' : [DOMnode],
// 'pendant_1' : [DOMnode],
// ... }
// 'switcherConfig' : [JSON]
// },
//
// 'switcher-group-1' : {
// ... AND SO ON
};
// find all teaser-pendant-pairs by counting the number of teasers in every container
$('.teaser-neuro')
.parent()
.each(function(index, parent) {
var $parent = $(parent);
var $teaserChildren = $parent.find('.teaser-neuro');
if ($teaserChildren.length > 1) {
var groupKey = 'switcher-group-' + index;
switcherGroups[groupKey] = {};
switcherGroups[groupKey].teasers = {};
$teaserChildren.each(function(index, child) {
var childKey = index === 0 ? 'original' : 'pendant_' + index;
switcherGroups[groupKey].teasers[childKey] = child;
});
switcherGroups[groupKey].switcherConfig = JSON.parse(
$parent.find('.asm-pendant-switcher-config').html()
);
// set active teaser
const activeOption = switcherGroups[groupKey].switcherConfig.activeOption;
if (activeOption !== undefined || activeOption === 0) {
$parent.addClass(`${activeOption === 0 ? 'original' : 'pendant_' + activeOption}-active`);
} else {
$parent.addClass('pendant_1-active');
}
}
});
if (switcherGroups.length === 0) {
return;
}
// add switcher to each pendant-pair
Object.keys(switcherGroups).forEach(function(groupKey) {
var switcherGroup = switcherGroups[groupKey];
Object.keys(switcherGroup.teasers).forEach(function(teaserKey, index) {
var switcher = buildSwitcherMarkup(groupKey, teaserKey, switcherGroup, index);
var $teaser = $(switcherGroup.teasers[teaserKey]);
$teaser.find('.content').append(switcher);
$teaser.addClass('teaser-switchable teaser-' + teaserKey);
appendListeners($teaser);
});
});
function buildSwitcherMarkup(switcherId, teaserKey, switcherGroup, checkedIndex) {
var switcherMarkup = $('#switcher-pendant-template').html().replace('<div class="switcher-pendant--options">', '<div class="switcher-pendant--options" role="radiogroup" aria-label="Optionen für Tariflaufzeit">');
var optionTemplate = $('#switcher-pendant-option-template').html();
var hintTemplate = $('#switcher-pendant-hint-template').html();
var optionMarkup = '';
Object.keys(switcherGroup.teasers).forEach(function(optionId, index) {
var _optionMarkup = optionTemplate;
_optionMarkup = _optionMarkup.replace(/{{radio-id}}/g, switcherId + '_' + teaserKey + '_' + optionId);
_optionMarkup = _optionMarkup.replace(/{{value}}/g, optionId);
_optionMarkup = _optionMarkup.replace(/{{checked}}/g, index === checkedIndex ? 'checked="true"' : ' ');
_optionMarkup = _optionMarkup.replace(/<div class="switcher-option"/g, `<div class="switcher-option" role="radio" aria-checked="${index === checkedIndex ? 'true' : 'false'}"`);
var optionConfig = switcherGroup.switcherConfig.options[index];
_optionMarkup = _optionMarkup.replace(/{{text}}/g, optionConfig['optionText']);
var hintMarkup = '';
if (optionConfig['hintText']) {
hintMarkup = hintTemplate;
hintMarkup = hintMarkup.replace(/{{hint-text}}/g, optionConfig['hintText']);
hintMarkup = hintMarkup.replace(/{{hint-info-target}}/g, optionConfig['hintInfoTarget']);
}
_optionMarkup = _optionMarkup.replace(/{{hint}}/g, hintMarkup);
optionMarkup = optionMarkup + _optionMarkup;
});
switcherMarkup = switcherMarkup.replace(/{{OPTIONS}}/g, optionMarkup);
switcherMarkup = switcherMarkup.replace(/{{name}}/g, switcherId);
return switcherMarkup;
}
function appendListeners(node) {
node.find('.switcher-option').on('click', function(event) {
if (!$(event.target).hasClass('info')) {
event.stopPropagation();
}
});
node.find('.switcher-option').on('click', 'input', function(event) {
event.preventDefault();
var activeThing = $(event.target).attr('value');
var activeClass = activeThing + '-active';
node.parent().removeClass('original-active pendant_1-active pendant_2-active').addClass(activeClass);
// $(document).trigger('trboTrigger', {
// triggerName: 'tariff-switch',
// triggerCallback: function () {
// }
// });
});
// add Accessibility for switcher
node.find('.switcher-option').each((index, option) => {
$(option).attr('tabindex', '0');
$(option).on('keydown', (event) => {
const currentOption = event.currentTarget;
let parentContainer = currentOption.closest('.asm-neutral-collection');
let newOption;
// focus handling for arrow keys
switch (event.key) {
case 'ArrowUp':
newOption = currentOption.previousElementSibling || currentOption.parentElement.lastElementChild;
break;
case 'ArrowLeft':
newOption = currentOption.previousElementSibling || currentOption.parentElement.lastElementChild;
break;
case 'ArrowDown':
newOption = currentOption.nextElementSibling || currentOption.parentElement.firstElementChild;
break;
case 'ArrowRight':
newOption = currentOption.nextElementSibling || currentOption.parentElement.firstElementChild;
break;
case ' ':
case 'Enter':
// simulate a click on the input element
currentOption.querySelector('input').click();
// gets the new parent container
parentContainer = currentOption.closest('.asm-neutral-collection');
// get the class name of the new container without the "-active" part. original or pendant_1
const activeContainer = parentContainer.getAttribute('class').match(/(\S+)-active/)[1];
// get the clicked button in the original teaser and find the duplicate in the pendant teaser or the other way
newOption = parentContainer.querySelector(`.switcher-option input[id*="${activeContainer}_${activeContainer}"]`).closest('.switcher-option');
break;
default:
return;
}
// set the focus on the new option
if (newOption) {
newOption.focus();
}
event.preventDefault();
});
});
}
})();