carouselItem.appendChild(linkAnch);
});
// Append the carouselItem to the carousel element
carousel.appendChild(carouselItem);
const carouselNavigationItemDiv = document.createElement("li");
carouselNavigationItemDiv.classList.add("carousel-navigation-item");
carouselNavigationItemDiv.setAttribute("aria-label", "View news item " + (index + 1));
carouselNavigationItemDiv.setAttribute("aria-controls", "feeds-" + (index + 1));
carouselNavigation.appendChild(carouselNavigationItemDiv);
}
newFeedDataRender(shadowRoot, dataArray) {
// Get the carousel element
const carousel = shadowRoot.querySelector(".carousel-items-container");
const carouselNavigation = shadowRoot.querySelector(".carousel-navigation");
if (carousel && carouselNavigation) {
// Clear the carousel before adding new items
carousel.innerHTML = "";
carouselNavigation.innerHTML = "";
// Create carousel items for each data item in jsonData
for (let i = 0; i < dataArray.length; i++) {
this.prepareCarouselItem(dataArray[i], carousel, carouselNavigation, i);
}
}
// Get the carousel items and navigation items
const carouselItems = shadowRoot.querySelectorAll(".carousel-item");
const carouselNavigationItems = shadowRoot.querySelectorAll(".carousel-navigation-item");
let currentIndex = 0;
function showSlide(index) {
const carouselContainer = shadowRoot.querySelector(".carousel-items-container");
let containerWidth = carouselContainer
? carouselContainer.getBoundingClientRect().width
: 0;
carouselContainer.style.width = "100%";
carouselItems.forEach((item, indexVal) => {
item.style.display = "none";
if (index === indexVal) {
item.style.display = "flex";
item.style.paddingLeft = "30px";
// Force reflow
item.getBoundingClientRect();
// Initial state: off-screen to the right
item.style.transform = "translateX(-30px)";
item.style.transition = "transform 1s ease";
const carouselDiv = shadowRoot.querySelector(".carousel");
const carouselWidth = carouselDiv.getBoundingClientRect().width;
if (carouselWidth < 768) {
item.style.flexWrap = "wrap";
}
else {
item.style.flexWrap = "unset";
}
}
else {
item.style.transform = "translateX(0)";
item.style.transition = "unset";
item.style.paddingLeft = "unset";
}
let remainingWidth = containerWidth;
let remingAnchorWidth = 0;
let flagOff = true;
const anchorElements = item.querySelectorAll("a");
anchorElements.forEach((anchor, anchorIndex) => {
anchor.style.whiteSpace = "nowrap";
anchor.style.display = "inline-block";
if (index === indexVal) {
anchor.setAttribute("tabindex", "0");
}
else {
anchor.setAttribute("tabindex", "-1");
}
if (flagOff) {
remainingWidth = remainingWidth - anchor.offsetWidth;
if (remainingWidth > 0) {
anchor.style.width = "auto";
}
else {
flagOff = false;
remingAnchorWidth =
(remainingWidth + anchor.offsetWidth) /
(anchorElements.length - anchorIndex);
anchor.style.maxWidth = remingAnchorWidth + "px";
anchor.style.overflow = "hidden";
anchor.style.textOverflow = "ellipsis";
anchor.style.display = "inline";
anchor.style.paddingRight = "10px";
}
}
else {
anchor.style.maxWidth = remingAnchorWidth + "px";
anchor.style.overflow = "hidden";
anchor.style.textOverflow = "ellipsis";
anchor.style.display = "inline";
anchor.style.paddingRight = "10px";
}
const carouselDiv = shadowRoot.querySelector(".carousel");
const carouselWidth = carouselDiv.getBoundingClientRect().width;
if (carouselWidth < 768) {
anchor.style.paddingRight = "20px";
anchor.style.whiteSpace = "unset";
anchor.style.display = "inline";
anchor.style.maxWidth = "unset";
}
else {
anchor.style.paddingRight = "50px";
}
});
});
}
function setActiveNavigationItem(index) {
carouselNavigationItems.forEach((item, indexVal) => {
item.classList.remove("active");
carouselNavigationItems[indexVal].setAttribute("tabindex", "-1");
});
carouselNavigationItems[index].classList.add("active");
carouselNavigationItems[index].setAttribute("tabindex", "0");
}
let slideInterval;
const playCarouselData = () => {
slideInterval = setInterval(() => {
currentIndex = (currentIndex + 1) % carouselItems.length;
showSlide(currentIndex);
setActiveNavigationItem(currentIndex);
}, parseInt(this.interValValue)); // Slide every 1 and half seconds
};
function switchToSlide(index) {
currentIndex = index;
showSlide(currentIndex);
setActiveNavigationItem(currentIndex);
}
carouselNavigationItems.forEach((item, index) => {
item.addEventListener("click", () => {
switchToSlide(index);
});
});
playCarouselData(); // Start the carousel
function addCustomEventListener(element, callback) {
element?.addEventListener("click", callback);
element?.addEventListener("keydown", (event) => {
// Trigger the callback function if the "Enter" or "Space" key is pressed
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
callback(event);
}
});
}
const pauseIcon = this.shadowRoot?.querySelector(".pause-icon");
const playIcon = this.shadowRoot?.querySelector(".play-icon");
// Hide the elements
playIcon.style.display = "none";
function pauseCarousel(event) {
event.preventDefault();
playIcon.style.display = "block";
playIcon.focus();
pauseIcon.style.display = "none";
clearInterval(slideInterval);
playIcon.ariaHidden = "false";
}
function playCarousel(event) {
event.preventDefault();
pauseIcon.style.display = "block";
pauseIcon.focus();
playIcon.style.display = "none";
playCarouselData();
pauseIcon.ariaHidden = "false";
}
addCustomEventListener(pauseIcon, pauseCarousel);
addCustomEventListener(playIcon, playCarousel);
if (jsonData.length == 0) {
carousel.style.width = "100%";
const pauseIcon = this.shadowRoot?.querySelector(".pause-icon");
pauseIcon.click();
}
}
async connectedCallback() {
super.connectedCallback();
}
updated(changedProperties) {
super.updated(changedProperties);
}
handleSpotlightSlotChange(e) {
const slot = e.target;
const carouselContainer = this.shadowRoot?.querySelector(".carousel-items-container");
if (carouselContainer) {
carouselContainer.innerHTML = "";
}
// Add new options from slot
let dataArray = [];
const divElementsLst = slot.assignedElements();
divElementsLst.forEach((divElement) => {
jsonData = [];
const anchorElements = divElement.querySelectorAll("a");
anchorElements.forEach((anchor) => {
const title = anchor.textContent || "";
const link = anchor.getAttribute("href") || "";
jsonData.push({ title: title, link: link });
});
dataArray.push(jsonData);
});
this.newFeedDataRender(this.shadowRoot, dataArray);
setTimeout(() => {
this.shadowRoot?.querySelector(".play-icon")?.setAttribute("aria-hidden", "false");
this.shadowRoot?.querySelector(".pause-icon")?.setAttribute("aria-hidden", "false");
}, 5000);
}
render() {
return x `
`;
}
};
CustomerSpotlightCarouselBlade.styles = [cascade_customer_spotlight_carousel_blade_styles];
CustomerSpotlightCarouselBlade.dict = {
localizedtText: "Default English Version",
};
__decorate([
property_n({ attribute: "visible", type: Boolean })
], CustomerSpotlightCarouselBlade.prototype, "visible", void 0);
__decorate([
property_n({ type: String })
], CustomerSpotlightCarouselBlade.prototype, "interValValue", void 0);
CustomerSpotlightCarouselBlade = __decorate([
defineCustomElement("cascade-customer-spotlight-carousel-blade")
], CustomerSpotlightCarouselBlade);
/******/ return __webpack_exports__;
/******/ })()
;
});
//# sourceMappingURL=cascade-customer-spotlight-carousel-blade.min.js.map