carouselItem.appendChild(link);
// 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);
}
async newFeedDataApiCall(url) {
try {
const response = await fetch(url);
if (response.ok) {
const data = await response.text();
if (Object.keys(data).length > 0) {
return data;
}
}
}
catch (error) {
console.log("error:", error);
}
}
newFeedDataRender(shadowRoot, dataNewsFeed) {
const jsonData = [];
if (dataNewsFeed !== "") {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(dataNewsFeed, "text/xml");
const items = xmlDoc.getElementsByTagName("item");
for (let i = 0; i < Math.min(items.length, 4); i++) {
const title = items[i].getElementsByTagName("title")[0]?.textContent ?? "";
const link = items[i].getElementsByTagName("link")[0]?.textContent ?? "";
jsonData.push({ title, link });
}
}
jsonData.push({ title: this.defaultText, link: this.defaultLink });
// 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
jsonData.forEach(({ title, link }, index) => {
this.prepareCarouselItem(link, title, carousel, carouselNavigation, index);
this.shadowRoot
?.querySelector(".play-icon")
?.removeAttribute("aria-hidden");
this.shadowRoot
?.querySelector(".pause-icon")
?.removeAttribute("aria-hidden");
});
}
// 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) => {
let anchor = item.querySelector("a");
anchor.setAttribute("tabindex", "-1");
item.style.display = "none";
anchor.style.maxWidth = containerWidth - 40 + "px";
anchor.style.overflow = "hidden";
anchor.style.textOverflow = "ellipsis";
anchor.style.whiteSpace = "nowrap";
anchor.style.display = "inline-block";
if (index === indexVal) {
anchor.setAttribute("tabindex", "0");
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";
}
else {
item.style.transform = "translateX(0)";
item.style.transition = "unset";
item.style.paddingLeft = "unset";
}
});
}
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);
}
function playCarousel(event) {
event.preventDefault();
pauseIcon.style.display = "block";
pauseIcon.focus();
playIcon.style.display = "none";
playCarouselData();
}
addCustomEventListener(pauseIcon, pauseCarousel);
addCustomEventListener(playIcon, playCarousel);
if (dataNewsFeed === "") {
carousel.style.width = "100%";
const pauseIcon = this.shadowRoot?.querySelector(".pause-icon");
pauseIcon.click();
}
}
async connectedCallback() {
super.connectedCallback();
this.newFeedDataApiCall(this.newFeedDetailsUrl).then((data) => {
this.newFeedDataRender(this.shadowRoot, data ? data.toString() : "");
});
}
updated(changedProperties) {
super.updated(changedProperties);
}
render() {
return x `
`;
}
};
NewsFeedCarouselBlade.styles = [cascade_news_feed_carousel_blade_styles];
NewsFeedCarouselBlade.dict = {
localizedtText: "Default English Version",
};
__decorate([
property_n({ attribute: "visible", type: Boolean })
], NewsFeedCarouselBlade.prototype, "visible", void 0);
__decorate([
property_n({ type: String })
], NewsFeedCarouselBlade.prototype, "newFeedDetailsUrl", void 0);
__decorate([
property_n({ type: String })
], NewsFeedCarouselBlade.prototype, "defaultText", void 0);
__decorate([
property_n({ type: String })
], NewsFeedCarouselBlade.prototype, "defaultLink", void 0);
__decorate([
property_n({ type: String })
], NewsFeedCarouselBlade.prototype, "interValValue", void 0);
NewsFeedCarouselBlade = __decorate([
defineCustomElement("cascade-news-feed-carousel-blade")
], NewsFeedCarouselBlade);
/******/ return __webpack_exports__;
/******/ })()
;
});
//# sourceMappingURL=cascade-news-feed-carousel-blade.min.js.map