(function PENDANT_SWITCHER() {
// CMS ID: 862850
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());
$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();
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"' : '');
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 () {
// }
// });
});
}
}());