globalThis['zbThemes']['phaseIiBanner'] = ( class phaseIiBanner { fontStyleValues = { bold: 'B', italic: 'I', underline: 'U' }; BANNER_PROPERTIES = [ { id: 1, name: 'Image', template: 'simpleImage', replaceContent: { "bannerHeight": "height", "bannerImageXAlign": "bannerImageXAlign", "bannerImageYAlign": "bannerImageYAlign", "bannerMarginTop": "marginTop", "bannerMarginLeftRight": "marginLeftRight", "bannerMarginBottom": "marginBottom", "bannerImageBackgroundSizeType": "imageBackgroundSizeType", "imageOverlay": "bannerImage[0].overlay", "imageOverlayType": "bannerImage[0].overlay", "optimizedImageUrl": "bannerImage[0].image", "parallax": "bannerImage[0].imageAnimation", "zoom-animation": "bannerImage[0].imageAnimation", } }, { id: 2, name: 'Slider', handlerFunction: 'getSliderTemplates' }, { id: 3, name: 'Video', template: 'videoTemplate', replaceContent: { "bannerHeight": "height", "bannerMarginTop": "marginTop", "bannerMarginLeftRight": "marginLeftRight", "bannerMarginBottom": "marginBottom", "bannerVideo": "bannerVideo", "videooverlayColor": "overlay", "video-card": "bannerVideoCard", "showControls": "isVideoControls", "awsUrl": "awsImageUrl" } }, { id: 4, name: 'Solid Color', template: 'solidColorTemplate', replaceContent: { "bannerHeight": "height", "bannerMarginTop": "marginTop", "bannerMarginLeftRight": "marginLeftRight", "bannerMarginBottom": "marginBottom", "bannerColor": "bannerColor" } }, { id: 5, name: 'Gradient Color', template: 'gradientColorTemplate', replaceContent: { "bannerHeight": "height", "bannerColor1": "bannerColor1", "bannerColor2": "bannerColor2", "bannerMarginTop": "marginTop", "bannerMarginLeftRight": "marginLeftRight", "bannerMarginBottom": "marginBottom", } }, { id: 6, name: 'Painting Theme', template: 'paintingTemplate', replaceContent: { "backgroundColor": "bannerImage[0].backgroundColor", "bannerLayout": "bannerImage[0].bannerLayout", "bannerImage": "bannerImage[0].image", "optimizedImageUrl": "bannerImage[0].image", "imageDesignType": "bannerImage[0].imageDesignType", "awsUrl": "awsImageUrl" } }, { id: 7, name: 'Cafe Theme', template: 'cafeTemplate', replaceContent: { "bannerColor": "bannerColor", "cafeAlignment": "alignment", "image1": "cafeDetails[0].imageUrl", "optimizedImageUrl1": "cafeDetails[0].imageUrl", "image2": "cafeDetails[1].imageUrl", "optimizedImageUrl2": "cafeDetails[1].imageUrl", "image3": "cafeDetails[2].imageUrl", "optimizedImageUrl3": "cafeDetails[2].imageUrl", "image4": "cafeDetails[3].imageUrl", "optimizedImageUrl4": "cafeDetails[3].imageUrl", "image5": "cafeDetails[4].imageUrl", "optimizedImageUrl5": "cafeDetails[4].imageUrl", "image6": "cafeDetails[5].imageUrl", "optimizedImageUrl6": "cafeDetails[5].imageUrl", "image7": "cafeDetails[6].imageUrl", "optimizedImageUrl7": "cafeDetails[6].imageUrl", "image8": "cafeDetails[7].imageUrl", "optimizedImageUrl8": "cafeDetails[7].imageUrl", "image9": "cafeDetails[8].imageUrl", "optimizedImageUrl9": "cafeDetails[8].imageUrl", "image10": "cafeDetails[9].imageUrl", "optimizedImageUrl10": "cafeDetails[9].imageUrl", "awsUrl": "awsImageUrl" } }, { id: 8, name: 'Carousel', handlerFunction: "getCarouselTemplate" }, { id: 9, name: 'Sporting Goods Theme', handlerFunction: 'getSportingGoodsTemplate' }, { id: 10, name: 'Pets Canine', template: 'petCanineTemplate', replaceContent: { "bannerText": "bannerImage[0].bannerText", "textSize": "bannerImage[0].textSize", "textColor": "bannerImage[0].textColor", "textAlign": "bannerImage[0].textAlign", "textFontFamily": "bannerImage[0].textFontFamily", "bannerImage": "bannerImage[0].image", "optimizedImageUrl": "bannerImage[0].image", "bannerSubtext": "bannerImage[0].bannerSubText", "subtextSize": "bannerImage[0].subtextSize", "subtextColor": "bannerImage[0].subTextColor", "subtextFontFamily": "bannerImage[0].subtextFontFamily", "gapBetweenTextandSubtext":"bannerImage[0].gapBetweenTextandSubtext", "awsUrl": "awsImageUrl" } }, { id: 11, name: 'Chocolate Theme Three', handlerFunction: 'getAthenaTemplate' }, { id: 12, name: 'Digital Product', template: 'digitalProductsTemplate', replaceContent: { "bannerHeight": "height", "bannerColor": "bannerColor", "bannerMarginTop": "marginTop", "bannerMarginLeftRight": "marginLeftRight", "bannerMarginBottom": "marginBottom", "image1": "cafeDetails[0].imageUrl", "optimizedImageUrl1": "cafeDetails[0].imageUrl", "image2": "cafeDetails[1].imageUrl", "optimizedImageUrl2": "cafeDetails[1].imageUrl", "image3": "cafeDetails[2].imageUrl", "optimizedImageUrl3": "cafeDetails[2].imageUrl", "image4": "cafeDetails[3].imageUrl", "optimizedImageUrl4": "cafeDetails[3].imageUrl", "awsUrl": "awsImageUrl" } }, { id: 13, name: 'Women Accessories Theme', handlerFunction: 'getEleganzaTemplate' }, { id: 14, name: 'Bliss Theme', handlerFunction: 'getBlissTemplate' }, { id: 15, name: 'Painting Theme Three', handlerFunction: "getPaintingThreeTemplate" }, { id: 16, name: 'Radiance Theme', handlerFunction: "getRadianceTemplate" }, { id: 17, name: 'Jewellery Theme Two', handlerFunction: 'getJewelleryTemplate' } ] OPTION_BASED_CLASSES = { "imageAnimation": { "parallex": "parallax", "zoom": "zoom-animation" }, "imageDesignType": { "one": "sfb-painting-style1", "two": "sfb-painting-style2" } } BANNER_CONTENT_ALIGNMENT = { "CENTER": "align-center-center", "TOP CENTER": "align-center-start", "BOTTOM CENTER": "align-center-end", "LEFT": "align-start-center", "TOP LEFT": "align-start-start", "BOTTOM LEFT": "align-start-end", "RIGHT": "align-end-center", "TOP RIGHT": "align-end-start", "BOTTOM RIGHT": "align-end-end", } FLEX_ALIGNMENT = { 'Center': 'align-center-center', 'Left': 'align-center-start', 'Right': 'align-center-end', 'Top Center': 'align-start-center', 'Top Left': 'align-start-start', 'Top Right': 'align-start-end', 'Bottom Center': 'align-end-center', 'Bottom Left': 'align-end-start', 'Bottom Right': 'align-end-end' }; awsImageUrl = globalThis?.zbBundle.environment.awsImageUrl; id = 0; intervalId; handleFunction = null; sliderInputData = {}; pause = "pause"; isPaused = false; element; eventHandlers = []; constructor(id, details) { this.sectionId = id; this.bannerData = details; } async phaseIiBanner(child) { try { this.childRef = child; this.innerHtml = await this.setbannerDetails().then(html => { return html }).catch((err) => console.log(err)); return ` ${this.bannerData?.headingTextEnabled ? `

${this.bannerData?.headingText}

` : ``}

${this.innerHtml}

`; } catch (err) { console.log(err) return `` } } checkComponentTemplates(id) { return [2, 8, 9, 11, 14, 13, 15, 16, 17].includes(Number(id)) } setSectionId(html) { let toFind = '%%sectionId%%', replaceText = this.sectionId; html = html.replace(new RegExp(toFind, 'g'), replaceText); return html; } getBannerImageDetails(imageObj, path, key) { return new Promise((resolve) => { if (imageObj[0][path[1]] == true) resolve(key); else if (imageObj[0][path[1]] == false) resolve(''); else if (key.includes('optimizedImageUrl')) { this.getOptimizedImage(imageObj[0][path[1]]).then((imageURL) => { resolve(imageURL); }); } else { resolve(imageObj[0][path[1]]); } }) } getOptimizedImage(imageUrl) { return new Promise((resolve) => { const imgPath = this.awsImageUrl.concat(imageUrl); const optimizedUrl = zbGetOptimizedImageUrl(imgPath, IMAGE_EXTENSION.WEPB_FORMAT); this.checkForFallback(optimizedUrl, imgPath).then((imgURL) => { resolve(imgURL); }); }); } checkForFallback(optimizedUrl, imageUrl) { return new Promise((resolve) => { if (typeof window === 'undefined') resolve(imageUrl?.replace(/\.\w+$/, '.webp')); const img = new Image(); img.src = optimizedUrl; img.onload = function () { resolve(optimizedUrl); }; img.onerror = function () { resolve(imageUrl); }; }); } async setReplaceContent(bannerProperty, html) { try { for (const key of Object.keys(bannerProperty.replaceContent)) { let toFind = '%%' + key + '%%', replaceText = ''; let toReplace = bannerProperty.replaceContent[key]; if (toReplace === 'awsImageUrl') { replaceText = this.awsImageUrl; } else { if (toReplace.includes('[') && toReplace.includes(']') && toReplace.includes('bannerImage[0]')) { let a = toReplace.split('[0].'); const propertyName = this.OPTION_BASED_CLASSES[a[1]]; const bannerImageObj = this.bannerData.bannerDetails[a[0]]; if (propertyName && typeof propertyName === 'object') { replaceText = propertyName[bannerImageObj[0][a[1]]]; } else { if (key === 'imageOverlayType') { replaceText = bannerImageObj[0][a[1]]?.includes('gradient') ? 'sfb-bg-image-gradient' : 'sfb-bg-image'; } else { replaceText = await this.getBannerImageDetails(bannerImageObj, a, key).then((content) => { return content; }); } } } else { switch (key) { case 'video-card': replaceText = this.bannerData.bannerDetails.bannerVideoCard ? key : ''; break; case 'video-overlay': replaceText = this.bannerData.bannerDetails.videoOverlay ? key : ''; break; case 'showControls': replaceText = this.bannerData.bannerDetails.isVideoControls ? 'controls' : ''; break; case 'cafeAlignment': replaceText = this.bannerData.bannerDetails.alignment === 'row' ? 'sfb-align-row' : 'sfb-align-column'; break; default: if (toReplace.includes('[') && toReplace.includes(']')) { const p1 = toReplace.split('['); const p2 = p1[1].split('].'); const imagePath = this.bannerData.bannerDetails[p1[0]][p2[0]][p2[1]];; if (key.includes('optimizedImageUrl')) { replaceText = this.getOptimizedImage(imagePath); } else { replaceText = imagePath; } } else { replaceText = this.bannerData.bannerDetails[toReplace] ?? ''; } } } } html = html.replace(new RegExp(toFind, 'g'), replaceText); } return html; } catch (err) { console.log(err); return; } } async setbannerDetails() { return new Promise((resolve, reject) => { if (this.bannerData) { let bannerProperty = this.BANNER_PROPERTIES.find((property) => { return property.id == this.bannerData.bannerProperty }); if (bannerProperty !== undefined && bannerProperty !== null) { if (!(this.checkComponentTemplates(bannerProperty.id))) { globalThis?.zbBundle.service.getBannerTemplates(bannerProperty.template).subscribe(async (html) => { html = this.setSectionId(html); if (bannerProperty.replaceContent) if (typeof bannerProperty.replaceContent === 'object' && bannerProperty.replaceContent !== null) html = await this.setReplaceContent(bannerProperty, html); resolve(html); }); } else { this.handleFunction = bannerProperty.handlerFunction; const html = this[this.handleFunction](this.bannerData); resolve(html); } } } }) } setSlider() { if ( this.bannerData && this.bannerData.bannerDetails && this.bannerData.bannerDetails.slideAutomatically && this.bannerData.bannerDetails.bannerImage && this.bannerData.bannerDetails.bannerImage.length && this.bannerData.bannerDetails.bannerImage.length > 1 ) { this.startSlide(this.bannerData.bannerDetails.bannerImage); } else if (!this.bannerData?.bannerDetails?.slideAutomatically) { this.stopSlide(); } } startSlide(imageArray) { if (this.intervalId) return; if (this.isPaused) { this.stopSlide(); return; } const timeInterval = this.bannerData.bannerDetails.timeInterval * 1000 || 2000; // Default to 2000 if not defined. if (typeof window !== 'undefined') { this.intervalId = setInterval(() => { if (this.id < imageArray.length - 1) { this.id = ++this.id } else { this.id = 0 } if (this.bannerData.bannerProperty != 9) { this.getUpdatedHTML(); } else { this.setEventsForSportTemplate(); } }, timeInterval); } } stopSlide() { if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; } } changeIntoGradient(color) { if (color && typeof color === 'string') { if (color.includes('linear-gradient') || color.includes('radial-gradient') || color.includes('conic-gradient')) { return color } else { return `linear-gradient(${color}, ${color})` } } return 'rgba(0,0,0,0.5)' } getAlignmentClass(value) { const key = value.toUpperCase(); return this.BANNER_CONTENT_ALIGNMENT[key]; } getFxAlignment(textAlign) { return this.FLEX_ALIGNMENT[textAlign] || 'center'; } navigateOnClick(index) { this.id = index; switch (this.bannerData.bannerProperty) { case 9: this.setEventsForSportTemplate(); break; case 16: this.updateRadianceTemplate(); break; default: this.getUpdatedHTML(); } } updateRadianceTemplate() { const selectors = [ { container: `.sfb-radiance-image${this.sectionId}`, activeClass: "sfb-radiance-active-image", target: `#sfb-radiance-image-${this.id}${this.sectionId}`, }, { container: `.sfb-radiance-dot${this.sectionId}`, activeClass: "sfb-radiance-active", target: `#sfb-radiance-dots-${this.id}${this.sectionId}`, }, ]; selectors.forEach(({ container, activeClass, target }) => { this.modifyActiveClass(container, activeClass, target); }); } modifyActiveClass(container, activeClass, target) { const elementsRef = this.element.querySelectorAll(container); if (elementsRef) elementsRef.forEach((element, index) => { if (index != this.id && element.classList.contains(activeClass)) { element.classList.remove(activeClass) } }); const activeIdRef = this.element.querySelector(target); if (activeIdRef) activeIdRef.classList.add(activeClass); } eventListeners() { this.addDotClickEvents(); const bannerActions = { 2: () => { this.setEventsForSlider(); this.setSlider(); }, 14: () => this.setSlider(), 17: () => this.setEventsForJewelleryTemplate(), 9: () => this.startSlide(this.bannerData.bannerDetails.cafeDetails), 8: () => this.setEventsForCarousalTemplate(), 15: () => this.setEventsForPaintingThreeTemplate(), }; const action = bannerActions[this.bannerData.bannerProperty]; if (action) action(); } addDotClickEvents() { const dots = this.element.querySelectorAll(".sfb-navigation-dot"); dots.forEach((dot, index) => { dot.addEventListener("click", () => this.navigateOnClick(index)); this.eventHandlers.push({ element: dot, type: "click", handler: () => this.navigateOnClick(index), }); }); if (this.bannerData.bannerProperty == 16) { this.updateRadianceTemplate(); } } setEventsForSportTemplate() { const dots = this.element.querySelectorAll(".sfb-navigation-dot"); dots.forEach((dot) => { if (dot.classList.contains("sfb-sport-active-image")) { dot.classList.remove("sfb-sport-active-image"); } }); const activeSlide = dots[this.id]; activeSlide.classList.add('sfb-sport-active-image'); const updatedHtml = this.getSportGoodsImage(this.bannerData); const elementId = "#sfb-sports-banner-img" + this.sectionId; const container = this.element.querySelector(elementId); this.setUpdatedTemplate(container, updatedHtml, false); } setEventsForSlider() { this.addEvent(globalThis?.safeDocument?.getElementById("sfb-slider-right-arrow"), "click", () => this.changeSlides("right")); this.addEvent(globalThis?.safeDocument?.getElementById("sfb-slider-left-arrow"), "click", () => this.changeSlides("left")); this.addEvent(globalThis?.safeDocument?.getElementById("sfb-slider-pause"), "click", () => this.pauseStop()); } addEvent(element, eventType, handler) { if (element) { const boundHandler = handler.bind(this); element.addEventListener(eventType, boundHandler); this.eventHandlers.push({ element, type: eventType, handler: boundHandler }); } } setupNavigationButtons(nextBtnId, prevBtnId, slideHandler, imgArray) { const nextBtn = globalThis?.safeDocument?.getElementById(nextBtnId); const prevBtn = globalThis?.safeDocument?.getElementById(prevBtnId); const handler = slideHandler.bind(this); this.addEvent(nextBtn, "click", () => handler("next", imgArray)); this.addEvent(prevBtn, "click", () => handler("previous", imgArray)); } setEventsForJewelleryTemplate() { this.customHeader = this.element.querySelector('.jewellery-banner-container'); this.addEvent(globalThis?.safeWindow, "scroll", this.onScroll); const imgArray = this.bannerData?.bannerDetails?.cafeDetails; this.setupNavigationButtons("sfb-jewellery-next-btn", "sfb-jewellery-previous-btn", this.onSlide, imgArray); } setEventsForPaintingThreeTemplate() { const imgArray = this.bannerData?.bannerDetails?.bannerImage; this.setupNavigationButtons("sfb-pt-next-btn", "sfb-pt-prev-btn", this.slideHandler, imgArray); this.automaticPaintingSlider(); } slideHandler(direction, imgArray) { this.restartSlider(); this.onSlide(direction, imgArray) } restartSlider() { this.stopSlide(); if (this.bannerData.bannerDetails?.slideAutomatically) { this.automaticPaintingSlider(); } } automaticPaintingSlider() { if (this.bannerData.bannerDetails?.slideAutomatically) { if (this.intervalId) return; if (typeof window !== 'undefined') { this.intervalId = setInterval(() => { const imgArray = this.bannerData?.bannerDetails?.bannerImage; this.onSlide('next', imgArray); }, this.bannerData && this.bannerData?.bannerDetails?.timeInterval > 0 ? (this.bannerData?.bannerDetails?.timeInterval * 1000) : 3000); } } } onScroll() { if (this.customHeader) { const scrollOffset = globalThis?.safeWindow?.scrollY - this.customHeader.offsetTop; const scaleFactor = Math.max(1, 0.8 + (scrollOffset / this.customHeader.offsetHeight)); this.zoomImage = scaleFactor; } } onSlide(direction, imgArray) { this.status = !this.status; this.id = direction === 'previous' ? (this.id - 1 + imgArray?.length) % imgArray?.length : (this.id + 1) % imgArray?.length; this.getUpdatedHTML(); } getUpdatedHTML() { const elementId = "#sfb-container-" + this.sectionId const container = this.element.querySelector(elementId); container.innerHTML = ``; const updatedHtml = this[this.handleFunction](this.bannerData); this.setUpdatedTemplate(container, updatedHtml); } changeSlides(direction) { if (direction === 'left') { if (this.id > 0) { this.id = --this.id } else { this.id = this.bannerData.bannerDetails.bannerImage.length - 1 } } else { if (this.id < this.bannerData.bannerDetails.bannerImage.length - 1) { this.id = ++this.id } else { this.id = 0 } } const container = this.element.querySelector("#sfb-slider-container"); container.innerHTML = ``; const updatedHTML = this.getSlides(this.bannerData, this.bannerData?.bannerDetails?.bannerImage[this.id]); this.setUpdatedTemplate(container, updatedHTML, false); } setUpdatedTemplate(container, updatedHtml, setEvents = true) { container.innerHTML = updatedHtml; if (setEvents) { if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; } this.eventListeners(); }; } pauseStop() { this.isPaused = !this.isPaused; if (this.isPaused) { this.pause = "play_arrow"; this.stopSlide(); } else { this.pause = "pause"; this.startSlide(this.bannerData.bannerDetails.bannerImage); } this.getUpdatedHTML(); } setEventsForCarousalTemplate() { ["mousedown", "touchstart"].forEach(eventType => this.addEvent(this.element, eventType, this.onMouseDown)); ["mousemove", "touchmove"].forEach(eventType => this.addEvent(this.element, eventType, this.onMouseMove)); ["mouseup", "touchend", "mouseleave"].forEach(eventType => this.addEvent(this.element, eventType, this.onMouseUp)); this.addEvent(this.element.querySelector("#sfb-carousel-prev-btn"), "click", this.onLeft); this.addEvent(this.element.querySelector("#sfb-carousel-next-btn"), "click", this.onRight); this.infiniteBanner = globalThis?.safeDocument?.getElementById(`sfb-carousel-container${this.sectionId}`); if (typeof window !== 'undefined') { const bannerIntervalId = setInterval(() => { if (this.infiniteBanner) { this.resizeBanner(); clearInterval(bannerIntervalId); } }, 100); } } resizeBanner() { const bannerElement = this.infiniteBanner; const screenwidth = bannerElement?.offsetWidth const totalWidth = bannerElement?.scrollWidth if (totalWidth > screenwidth) { this.isArrow = true this.startInterval() } else { this.isArrow = false this.stopInterval() } } startInterval() { if (this.bannerDetails?.bannerDetails?.timeInterval) { if (this.intervalId) return; if (typeof window !== 'undefined') { this.intervalId = setInterval(() => { this.onRight() }, this.bannerDetails && this.bannerDetails?.bannerDetails?.timeInterval > 0 ? (this.bannerDetails?.bannerDetails?.timeInterval * 1000) : 3000); } } } onRight() { this.stopInterval() if (this.bannerDetails?.bannerDetails?.timeInterval) { this.startInterval() } if (this.infiniteBanner) { const bannerElement = this.infiniteBanner; const fieldElements = this.element.querySelectorAll('.sfb-carousal-field'); const fieldElement = fieldElements[0]; const screenwidth = bannerElement?.offsetWidth ?? 0; const fieldwidth = fieldElement?.offsetWidth; const totalWidth = bannerElement?.scrollWidth; let nextScrollLeft = bannerElement?.scrollLeft + fieldwidth; if (totalWidth > 0 && nextScrollLeft + screenwidth > 0 && totalWidth <= nextScrollLeft + screenwidth) { this.removeClone() this.createClone('right') } nextScrollLeft = bannerElement?.scrollLeft + fieldwidth; bannerElement.scrollTo({ left: nextScrollLeft, behavior: 'smooth' }); } } onLeft() { this.stopInterval() if (this.autoslide) { this.startInterval() } if (this.infiniteBanner) { const bannerElement = this.infiniteBanner; const fieldElements = this.element.querySelectorAll('.sfb-carousal-field'); const fieldElement = fieldElements[0]; if (bannerElement.scrollLeft <= fieldElement?.offsetWidth && fieldElement?.offsetWidth > 0) { this.removeClone() this.createClone('left') } const nextScroll = bannerElement?.scrollLeft - fieldElement?.offsetWidth bannerElement.scrollTo({ left: nextScroll, behavior: 'smooth' }); } } removeClone() { const cloned = this.element.querySelectorAll('.clone') cloned?.forEach((item) => { if (!item.classList.contains('current')) { item.remove() } }) } createClone(direction) { const bannerElement = this.infiniteBanner; const fieldElements = this.element.querySelectorAll('.sfb-carousal-field'); const cloned = this.element.querySelectorAll('.clone') cloned.forEach((item) => { item.classList.remove('current'); }) if (direction == 'right') { fieldElements.forEach((fieldEl) => { const clone = fieldEl?.cloneNode(true); if (clone) { clone.classList.add('clone') clone.classList.add('current') bannerElement.appendChild(clone); } }); } else { for (let i = fieldElements?.length - 1; i >= 0; i--) { const clone = fieldElements[i]?.cloneNode(true); if (clone) { clone.classList.add('clone') clone.classList.add('current') bannerElement.insertBefore(clone, bannerElement?.firstChild); } } } } stopInterval() { clearInterval(this.intervalId); this.intervalId = null; } onMouseDown(event) { if (this.infiniteBanner) { this.stopInterval() this.isDown = true; this.infiniteBanner?.classList.add('active'); const e = (event.touches && event.touches[0]) || event; this.startX = e.pageX - this.infiniteBanner?.offsetLeft; this.scrollLeft = this.infiniteBanner?.scrollLeft; if (this.isArrow) { this.startInterval() } } } onMouseMove(event) { if (this.infiniteBanner) { const bannerElement = this.infiniteBanner; if (!this.isDown) return; event.preventDefault(); let e = (event.touches && event.touches[0]) || event; let x = e.pageX - bannerElement.offsetLeft; let dist = (x - this.startX); bannerElement.scrollLeft = this.scrollLeft - dist; } } onMouseUp() { if (this.infiniteBanner) { this.isDown = false; this.infiniteBanner.classList.remove('active'); } } zbOnInit(element) { if (element) { this.element = element; if (!(this.checkComponentTemplates(this.bannerData.bannerProperty))) { this.insertContentTemplate(this.element); } else { if (!!this.handleFunction) { this.eventListeners(); } } } } getBlissTemplate(bannerData) { try { return ` ${bannerData?.bannerDetails?.bannerImage ? `

${this.getContentTemplate(this.bannerData?.bannerDetails?.bannerImage[this.id])}

${bannerData?.bannerDetails?.bannerImage.map((bgImage, i) => ` `).join('')}

` : `` } `; } catch (err) { console.log(err); return ``; } } getEleganzaTemplate(bannerData) { return `

${this.getContentTemplate(bannerData?.bannerDetails)}

${bannerData?.bannerDetails?.cafeDetails?.length ? `

` : ``}

${bannerData?.bannerDetails?.cafeDetails.map((img, i) => `

`).join('') }

${bannerData?.bannerDetails?.cafeDetails.map((img, i) => ` ` ).join('')}

` } getRadianceTemplate(bannerData) { return `

${this.getContentTemplate(bannerData?.bannerDetails)}

${bannerData?.bannerDetails?.cafeDetails.map((img, i) => `

` ).join('')}

${bannerData?.bannerDetails?.cafeDetails.map((dot, i) => `

` ).join('')}

` } getAthenaTemplate(bannerData) { return `

${bannerData?.bannerDetails?.cafeDetails.map((item, i) => `

${bannerData?.bannerDetails?.bannerImage[0]?.bannerText}

${bannerData?.bannerDetails?.bannerImage[0]?.bannerSubText}

${bannerData?.bannerDetails?.bannerImage[0]?.customButton && bannerData?.bannerDetails?.bannerImage[0]?.customButton.buttonEnabled ? `${this.childRef?.sharedThemeCommonButton?.(bannerData?.bannerDetails?.bannerImage[0]?.customButton) ?? ``}` : `` }

`).join('')}

${bannerData?.bannerDetails?.cafeDetails.map((dot, i) => ``).join('')}

`; } getSliderTemplates(bannerData) { this.sliderInputData['width'] = null; this.sliderInputData['iconType'] = 'normal'; this.sliderInputData['isManual'] = bannerData.bannerDetails && bannerData.bannerDetails.slideAutomatically ? false : true; this.sliderInputData['timeInterval'] = bannerData?.bannerDetails?.timeInterval ? bannerData?.bannerDetails?.timeInterval : 0; return `

${this.getSlides(bannerData, bannerData?.bannerDetails?.bannerImage[this.id])}

${this.sliderInputData?.isManual ? ` keyboard_arrow_left keyboard_arrow_right` : `` }

${this.sliderInputData?.timeInterval && !this.sliderInputData?.width ? `

${bannerData?.bannerDetails?.pausebutton ? `

${this.pause}

` : ``}

` : `` }

` } getSlides(bannerData, content) { return ` ${!bannerData?.isNoDocumentUploaded ? `

${this.getContentTemplate(content)}

` : ``} ` } getJewelleryTemplate(bannerData) { this.status = false; return ` ${bannerData?.bannerDetails?.bannerImage ? `

${this.getContentTemplate(bannerData?.bannerDetails)}

arrow_back arrow_forward

` : ``} `; } getSportGoodsImage(bannerData) { return ` No Image Found

` } getSportingGoodsTemplate(bannerData) { return ` `; } getPaintingThreeTemplate(bannerData) { return bannerData?.bannerDetails?.bannerImage ? `

${this.getContentTemplate(bannerData?.bannerDetails?.bannerImage[this.id])}

${this.id == 0 ? `

${bannerData?.bannerDetails?.bannerImage.map((imageObj, i) => ` ${i !== 0 ? `

` : ``} `).join('')}

` : ``}

` : '' } getCarouselTemplate(bannerData) { this.isArrow = true; return `

${(bannerData?.bannerDetails?.bannerImage && bannerData?.bannerDetails?.bannerImage[0]?.image !== null || bannerData?.bannerDetails?.bannerImage[1]?.image !== null || bannerData?.bannerDetails?.bannerImage[2]?.image !== null) ? `

${bannerData?.bannerDetails?.bannerImage.map((item, i) => `

`).join('')}

${this.isArrow ? ` ` : `` }` : `

No Images Available

`; } insertContentTemplate(parent) { const textareaElement = parent.querySelector('#textarea'); if (textareaElement) { textareaElement.innerHTML = ``; const contentHTML = this.innerHtmlContent(this.bannerData); textareaElement.innerHTML = contentHTML; } } innerHtmlContent(bannerData) { if (bannerData?.bannerDetails?.bannerImage && bannerData?.bannerDetails?.bannerImage.length && bannerData?.bannerProperty !== 16) { return this.getContentTemplate(bannerData?.bannerDetails?.bannerImage[0]); } else { return this.getContentTemplate(bannerData?.bannerDetails); } } getContentTemplate(content) { if (content) { return `

${content?.showFlower && this.bannerData?.bannerProperty === 6 ? `

` : `` }

${content.showSemiHeading ? `

${content?.semiHeadingText}

` : ``} ${(!!content.bannerText && !!content?.animation) ? `${this[content?.animation](content)}` : `` } ${content.customButton && content.customButton.buttonEnabled ? `

${this.childRef?.sharedThemeCommonButton?.(content.customButton) ?? ``}

` : `` }

` } } getTextAlignment(details) { if (details?.animation && details?.animation !== 'noAnimationTemplate') return 'center'; const alignment = details?.textAlign; switch (alignment) { case 'Center': case 'Top Center': case 'Bottom Center': return 'center'; case 'Left': case 'Top Left': case 'Bottom Left': return 'left'; case 'Right': case 'Top Right': case 'Bottom Right': return 'right'; default: return 'center'; }; } getTextStyle(image, type) { const isText = type === 'text'; const sizeKey = isText ? 'textSize' : 'subtextSize'; const colorKey = isText ? 'textColor' : 'subTextColor'; const fontKey = isText ? 'textFontFamily' : 'subtextFontFamily'; const styleKey = isText ? 'textFontStyle' : 'subTextFontStyle'; const gapKey = isText ? 'gapBetweenTextandSubtext' : 'gapBetweenSubtextandButton'; return ` font-size: ${image?.[sizeKey] || 0}px; color: ${image?.[colorKey] || 'inherit'}; font-family: ${image?.[fontKey] || 'inherit'}; font-weight: ${image?.[styleKey]?.includes(this.fontStyleValues.bold) ? 'bold' : 'normal'}; font-style: ${image?.[styleKey]?.includes(this.fontStyleValues.italic) ? 'italic' : 'normal'}; text-decoration: ${image?.[styleKey]?.includes(this.fontStyleValues.underline) ? 'underline' : 'none'}; margin-bottom: ${image?.[gapKey] || 0}px; text-align: ${this.getTextAlignment(image)};` } getBannerTextTemplate(content) { return ` ${!!content.bannerText ? `

${content.bannerText}

` : `` } ` } getBannerSubtextTemplate(content) { return ` ${!!content.bannerSubText ? `

${content.bannerSubText}

` : `` } ` } noAnimationTemplate(content) { return ` ${content?.bannerText ? `${this.getBannerTextTemplate(content)}` : ''} ${content?.showDivider ? `

` : `` } ${content?.bannerSubText ? `${this.getBannerSubtextTemplate(content)}` : ``} ` } slideFromLine(content) { return `

${content?.bannerText ? `${this.getBannerTextTemplate(content)}` : ''}

${content?.bannerSubText ? `${this.getBannerSubtextTemplate(content)}` : ``}

`; } boxTemplate(content) { return ` ${content?.bannerText ? `

${this.getBannerTextTemplate(content)}

` : ''} ${content?.bannerSubText ? `

${this.getBannerSubtextTemplate(content)}

` : ``} `; } slideInText(content) { return `

${this.getBannerTextTemplate(content)}

${this.getBannerSubtextTemplate(content)}

`; } shiningTemplate(content) { return `

${this.getBannerTextTemplate(content)}

` } flickerTemplate(content) { return `

${content?.bannerText.split(" ").map((word) => `

${word.split('').map((letter, index) => `

${letter}

`).join('')}

`; } zbOnDestroy() { if (this.intervalId) clearInterval(this.intervalId); if (this.eventHandlers) { this.eventHandlers.forEach(({ element, type, handler }) => { element.removeEventListener(type, handler); }); this.eventHandlers = []; } } } )