(function(f) {var _np=(window.P._namespace("PremiumAplusModule"));if(_np.guardFatal){_np.guardFatal(f)(_np);}else{f(_np);}}(function(P) { P.now('premium-module-10-hotspot-desktop').execute(function(init) { if (init) { return; } P.register('premium-module-10-hotspot-desktop', function() { return function() { P.when('jQuery', 'a-popover', 'ready').execute(function ($, popover) { var $hoverPoints = $('.aplus-v2 .premium-aplus-module-10 .hover-point'); $hoverPoints.each(function(i, trigger) { return popover.create(trigger, $(trigger).data()); }); $hoverPoints.hover( function() { $(this).focus(); $(this).addClass('selected'); }, function() { $(this).removeClass('selected'); } ); }); }; }); }); })); (function(f) {var _np=(window.P._namespace("PremiumAplusModule"));if(_np.guardFatal){_np.guardFatal(f)(_np);}else{f(_np);}}(function(P) { P.now('premium-module-11-faq').execute(function(init) { if (init) { return; } P.register('premium-module-11-faq', function() { return function() { P.when('A', 'jQuery', 'ready').execute(function(A, $){ function initFaq(module) { const MODULE_CLASS_NAME = 'premium-aplus-module-11'; const FAQ_CONTAINER_CLASS_NAME = 'faqs-container'; const FAQ_BLOCK_CLASS_NAME = 'faq-block'; const moduleId = $(module).data('faq-block'); const $faqBlocks = $('.aplus-v2 .' + MODULE_CLASS_NAME + ' .' + FAQ_CONTAINER_CLASS_NAME + '.' + moduleId + ' .' + FAQ_BLOCK_CLASS_NAME); /** * Function to handle click or Enter or Space key events. * @param {Element} element - The this object from which the event is dispatched * @param {faqBlocks} faqBlocks - List of all the Question and Answer blocks. */ function handleClickOrEnterOrSpace(element, faqBlocks) { const $element = $(element); const isActive = $element.hasClass('aplus-active'); faqBlocks.removeClass('aplus-active'); faqBlocks.find('[data-faq-question]').attr('aria-expanded', 'false'); if (!isActive) { $element.addClass('aplus-active'); $element.find('[data-faq-question]').attr('aria-expanded', 'true'); } } /* Using jQuery event namespace for preventing duplicate binding on twister refresh */ $faqBlocks.unbind('click keydown.premiumAplusModule11ClickHandler').bind('click keydown.premiumAplusModule11ClickHandler', function(event) { handleClickAndKeyEvents(event, () => handleClickOrEnterOrSpace(this, $faqBlocks)); }); } $(".aplus-v2 .premium-aplus-module-11 .faqs-container").each(function(index, module) { initFaq(module); }); }); }; }); }); })); (function(f) {var _np=(window.P._namespace("PremiumAplusModule"));if(_np.guardFatal){_np.guardFatal(f)(_np);}else{f(_np);}}(function(P) { P.now('premium-module-5-comparison-table-scroller').execute(function(init){ if (init) { return; } P.register('premium-module-5-comparison-table-scroller', function(){ return function() { P.when('jQuery', 'a-popover', 'A', 'ready').execute(function($, popover, A) { function initCompTable(module) { /** * Premium comparison table: popover trigger module */ var comparisonName = $(module).data('comparison-name'); (function() { var $additionalInfo = $('.aplus-v2 .aplus-popover-trigger'); $additionalInfo.each(function(i, trigger) { return popover.create(trigger, $(trigger).data()); }); $additionalInfo.hover( function() { $(this).focus(); } ); })(); /** * Premium comparison table: adjust column width module */ (function() { var VISIBLE_COLUMNS = 4.2; /* How many visible columns on load */ var MIN_WIDTH = 230; var getWidth = function() { return $(this).outerWidth(); } /* cache selectors */ var $container = $('.aplus-v2 .comparison-table #'+comparisonName), $header = $('.aplus-v2 .comparison-table #'+comparisonName+' td.attribute'), $slider = $('.aplus-v2 .comparison-table #'+comparisonName+' .table-slider'), $columns = $('.aplus-v2 .comparison-table #'+comparisonName+' .aplus-data-column'), $activeColumn = $('.aplus-v2 .comparison-table #'+comparisonName+' .aplus-data-column.active.active-item'); /* Formula for determining desired column width */ var calculatedColumnWidth = Math.floor( ($container.innerWidth() - $header.innerWidth()) / VISIBLE_COLUMNS ); var childWidths = $activeColumn.map(getWidth).get(); var maxChildWidth = Math.max(MIN_WIDTH, Math.max.apply(Math, childWidths)); var minColumnWidth = $columns.innerWidth(); /* set the min-width of each column to the calulated width or minWidth */ $columns.css( 'min-width', Math.max(MIN_WIDTH, (calculatedColumnWidth < minColumnWidth ? calculatedColumnWidth : minColumnWidth)) ); $activeColumn.css('width', maxChildWidth); /* show the component */ $container.removeClass('loading'); })(); /** * Premium comparison table: sticky attribute & column */ (function() { /* cache selectors */ const comparisonTable = document.querySelector('.aplus-v2 .comparison-table #'+comparisonName); const header = comparisonTable.querySelector('td.attribute'); const fixedColumn = comparisonTable.querySelector('td.active'); const attributeColumnObserver = new ResizeObserver((entries) => { for (let entry of entries) { const bounds = entry.target.getBoundingClientRect().width; const activeCellWidth = window.getComputedStyle(fixedColumn).left; if (bounds + "px" !== activeCellWidth) { const activeCells = document.querySelectorAll('.aplus-data-column.active'); activeCells.forEach(cell => cell.style.left = bounds + "px"); } } }) attributeColumnObserver.observe(header) })(); /** * Premium comparison table: top scroll bar */ (function() { /* cache selectors */ var $header = $('.aplus-v2 .comparison-table #'+comparisonName+' td.attribute'), $fixedColumn = $('.aplus-v2 .comparison-table #'+comparisonName+' td.active'), $scrollWrapperTop = $('.aplus-v2 .comparison-table #'+comparisonName+' .scroll-wrapper-top'), $scrollWrapperBottom = $('.aplus-v2 .comparison-table #'+comparisonName+' .scroll-wrapper-bottom'), $scrollWidth = $('.aplus-v2 .comparison-table #'+comparisonName+' .scroll-width'), $scrollBar = $('.aplus-v2 .comparison-table #'+comparisonName+' .scroll-bar'); /* confirm fixed column exists and can add width to the total width of the scroll bar */ var fixedColumnWidth = $fixedColumn.innerWidth(); if ( fixedColumnWidth === null ) { fixedColumnWidth = 0; } /* set width of scrollBar */ $scrollBar.css('width', $scrollWidth.innerWidth() + fixedColumnWidth + $header.innerWidth()); /* connect scrolls together */ $scrollWrapperTop.scroll(function() { $scrollWrapperBottom.scrollLeft($scrollWrapperTop.scrollLeft()); }); $scrollWrapperBottom.scroll(function() { $scrollWrapperTop.scrollLeft($scrollWrapperBottom.scrollLeft()); }); })(); } $('.aplus-v2 .premium-aplus-module-5 .table-container').each(function(index, module) { initCompTable(module); }); }); } }); }); })); /** * Common event handler for click and keydown events. * @param {Event} event - The event object. * @param {Function} handleClickOrEnter - Function to handle click or Enter key events. * @param {Function} handleEsc - Function to handle Esc key events. */ // [TODO][AplusMantle-8064] Create common event handler util(key events, click events) in AplusModuleResources function handleClickAndKeyEvents(event, handleClickOrEnterOrSpace) { const ENTER_KEY_CODE = 13; const ESCAPE_KEY_CODE = 27; const SPACE_KEY_CODE = 32; const isClick = event.type === 'click'; const isKeydown = event.type === 'keydown'; const isEnter = isKeydown && event.keyCode === ENTER_KEY_CODE; const isSpace = isKeydown && event.keyCode === SPACE_KEY_CODE; const isEsc = isKeydown && event.keyCode === ESCAPE_KEY_CODE; if (isClick || isEnter || isSpace) { handleClickOrEnterOrSpace(); } else if (isEsc) { handleEsc(event); } } /** * Function to handle esc key event. * @param {Event} event - The event object. */ function handleEsc(event) { event.target.blur() // force remove focus }