// A script for the carousel widget shared by Home Highlights and Key Judgements // // Expected input constant: // ITEM_COUNT - Total number of items to be displayed in the carousel // Validate input constant const inputValue = ITEM_COUNT; if (!inputValue) { console.error("Error in highlights.js: ITEM_COUNT is " + inputValue + "."); } var homeHighlights = null; // Original Screen Size that the carousel was initialised with let homeHighlights_OSS = 1140; // Returns properties used for initialisation of the carousel const getCarouselProperties = currentTnsWidth => ({ container: '#home-highlights', items: 2, touch: true, center: true, loop: false, swipeAngle: false, speed: 200, autoplay: false, responsive: { 300: { fixedWidth: currentTnsWidth, autoWidth: true }, 576: { fixedWidth: 540, autoWidth: false }, 768: { fixedWidth: 720, autoWidth: false }, 992: { fixedWidth: 960, autoWidth: false }, 1200: { fixedWidth: 1140, autoWidth: false } }, controls: false, controlsText: ['', ''], gutter: 0, edgePadding: 0, nav: false, onInit: () => $('#loading-slider').fadeOut(50, () => { $('#primary-slider .carousel-caption').addClass("carousel-caption-ready"); $('#primary-slider .carousel-caption').show(); $('#primary-slider .nav-controls').show(); $('#primary-slider').fadeIn(100, () => { $('#nextButton').removeClass("disabled"); $('#prevButton').addClass("disabled"); }); }) }); $(document).ready(function () { try { homeHighlights_OSS = getWindowInnerWidth(); manageTNSLoadpanel(); $('#loading-slider .carousel-caption').addClass("carousel-caption-ready"); $('#loading-slider .carousel-caption').show(); $('#loading-slider .nav-controls').show(); $('#prevButton').click(function (e) { e.preventDefault(); var info = homeHighlights.getInfo(), indexCurrent = info.index; if (indexCurrent > 0) { homeHighlights.goTo('prev'); } }); $('#nextButton').click(function (e) { e.preventDefault(); var info = homeHighlights.getInfo(), indexCurrent = info.index, lastElement = ITEM_COUNT - 1; if (indexCurrent < lastElement) { $("#primary-slider .img-hover-zoom img").show(); homeHighlights.goTo('next'); } }); $('#primary-slider .nav-controls .nav-indicators li').on("click", function() { var targetClick = parseInt($(this).attr("data-slide-to")); var info = homeHighlights.getInfo(), indexCurrent = info.index; if (indexCurrent != targetClick) { homeHighlights.goTo(targetClick); } }); } catch (err1) { } }); window.addEventListener('load', function () { try { const currentWidth = computeTNSWidth(); homeHighlights = tns(getCarouselProperties(currentWidth)); manageTNSEvents(); } catch (err2) { } }); window.addEventListener('resize', manageTNSResize); window.addEventListener('orientationchange', manageTNSResize); function computeTNSWidth() { var currentScreenSize = getWindowInnerWidth(); if (currentScreenSize < 310) { return 300; } else if (currentScreenSize >= 545) { return 535; } return (currentScreenSize - 20); } function manageTNSResize() { var currentScreenSize = getWindowInnerWidth(); // Sometimes on mobile, scrolling triggers the "resize" event // when the screen width does not actually change // (tested on iOS 15.6 Safari, Google Chrome for iOS) // This check prevents any unnecessary reloading of TNS if (currentScreenSize === homeHighlights_OSS) { return; } var boolReload = false; if (currentScreenSize >= 576) { var case1 = ((homeHighlights_OSS < 1200 && currentScreenSize >= 1200) || (homeHighlights_OSS >= 1200 && currentScreenSize < 1200)); var case2 = ((homeHighlights_OSS < 992 && currentScreenSize >= 992) || (homeHighlights_OSS >= 992 && currentScreenSize < 992)); var case3 = ((homeHighlights_OSS < 768 && currentScreenSize >= 768) || (homeHighlights_OSS >= 768 && currentScreenSize < 768)); var case4 = ((homeHighlights_OSS < 576 && currentScreenSize >= 576) || (homeHighlights_OSS >= 576 && currentScreenSize < 576)); if (case1 || case2 || case3 || case4) { boolReload = true; } } else { boolReload = true; } if (boolReload) { manageTNSLoadpanel(); $('#primary-slider').fadeOut(50, function () { $('#loading-slider').fadeIn(100, function () { $('#nextButton').removeClass("disabled"); $('#prevButton').addClass("disabled"); homeHighlights.destroy(); // Reinitialise the carousel with the current TNS width const currentWidth = computeTNSWidth(); homeHighlights = tns(getCarouselProperties(currentWidth)); manageTNSEvents(); }); }); } homeHighlights_OSS = currentScreenSize; } function manageTNSLoadpanel() { var currentScreenSize = getWindowInnerWidth(); if (currentScreenSize < 576) { var maxWidth = currentScreenSize > 535 ? 535 : currentScreenSize; var newHeight = Math.round(1.25 * (maxWidth - 30)); if (newHeight > 655) { newHeight = 655; } else if (newHeight < 310) { newHeight = 310; } $('#loading-slider .img-container').attr("style", "height: " + newHeight + "px"); } else { $('#loading-slider .img-container').attr("style", ""); } } function manageTNSButtons() { var info = homeHighlights.getInfo(), indexCurrent = info.index, lastElement = ITEM_COUNT - 1; $("#primary-slider .nav-controls .nav-indicators li").removeClass("active"); $("#primary-slider .nav-controls .nav-indicators li[data-slide-to=" + indexCurrent + "]").addClass("active"); $("#primary-slider .tns-item").removeClass("highlight-active"); $("#primary-slider .tns-item[data-slideid=" + indexCurrent + "]").addClass("highlight-active"); if (indexCurrent == lastElement) { $('#prevButton').removeClass("disabled"); $('#nextButton').addClass("disabled"); } else if (indexCurrent == 0) { $('#nextButton').removeClass("disabled"); $('#prevButton').addClass("disabled"); } else { $('#prevButton').removeClass("disabled"); $('#nextButton').removeClass("disabled"); } } var homeHighlights_LoadImages = 0; function manageTNSEvents() { homeHighlights.events.on('touchStart', function (info, eventName) { if (homeHighlights_LoadImages == 0) { $("#primary-slider .img-hover-zoom img").show(); homeHighlights_LoadImages = 1; } }); homeHighlights.events.on('dragStart', function (info, eventName) { if (homeHighlights_LoadImages == 0) { $("#primary-slider .img-hover-zoom img").show(); homeHighlights_LoadImages = 1; } }); homeHighlights.events.on('transitionStart', function (info, eventName) { if (homeHighlights_LoadImages == 0) { $("#primary-slider .img-hover-zoom img").show(); homeHighlights_LoadImages = 1; } }); homeHighlights.events.on('indexChanged', function (info, eventName) { manageTNSButtons(); }); }