class TopBanner { constructor(options = {}) { this.options = { message: options.message || "Important Announcement", type: options.type || "info", // announcement, sale, warning, success, info closeable: options.closeable !== false, autoClose: options.autoClose || false, onClose: options.onClose || null, customClass: options.customClass || "", container: options.container || "body", }; this.banner = null; this.init(); } init() { // Create banner element this.banner = document.createElement("div"); this.banner.className = `top-banner top-banner--${this.options.type} ${this.options.customClass}`; // Build HTML content let content = `

${this.options.message}`; if (this.options.closeable) { content += ``; } content += "

"; this.banner.innerHTML = content; // Attach close event if (this.options.closeable) { const closeBtn = this.banner.querySelector(".top-banner__close"); closeBtn.addEventListener("click", () => this.close()); } } show() { if (!this.banner.parentNode) { const containerEl = document.querySelector(this.options.container) || document.body; containerEl.insertBefore(this.banner, containerEl.firstChild); } // Trigger animation setTimeout(() => { this.banner.classList.add("top-banner--visible"); }, 10); // Auto-close if specified if (this.options.autoClose && typeof this.options.autoClose === "number") { setTimeout(() => this.close(), this.options.autoClose); } } close() { this.banner.classList.remove("top-banner--visible"); setTimeout(() => { if (this.banner.parentNode) { this.banner.parentNode.removeChild(this.banner); } if (typeof this.options.onClose === "function") { this.options.onClose(); } }, 300); } update(message, type = null) { const messageEl = this.banner.querySelector(".top-banner__message"); if (messageEl) { messageEl.textContent = message; } if (type) { this.banner.className = this.banner.className.replace( /top-banner--\w+(?=\s|$)/g, "" ); this.banner.classList.add(`top-banner--${type}`); } } destroy() { if (this.banner && this.banner.parentNode) { this.banner.parentNode.removeChild(this.banner); } } } class FloatingPromoBanner { constructor(options = {}) { this.options = { message: options.message || "🎁 Black Friday Sale!", subtext: options.subtext || "Click for exclusive deals", image: options.image || null, // If provided, shows image instead of text imageAlt: options.imageAlt || "Promo banner", position: options.position || "right", // left or right autoShow: options.autoShow !== false, delay: options.delay || 2000, closeable: options.closeable !== false, modalTitle: options.modalTitle || "Black Friday Exclusive! 🎉", modalDescription: options.modalDescription || "Use this code to get 50% OFF your order!", couponCode: options.couponCode || "BLACKFRIDAY50", buttonText: options.buttonText || "Copy Code", onCopy: options.onCopy || null, customClass: options.customClass || "" }; this.floatingBanner = null; this.modal = null; this.init(); } init() { this.createFloatingBanner(); this.createModal(); if (this.options.autoShow) { setTimeout(() => this.show(), this.options.delay); } } createFloatingBanner() { this.floatingBanner = document.createElement("div"); this.floatingBanner.className = `floating-promo floating-promo--${this.options.position} ${this.options.customClass}`; if (this.options.image) { this.floatingBanner.classList.add("floating-promo--image"); } let html = `

`; if (this.options.image) { html += ` ${this.options.imageAlt}

`; } else { html += `

${this.options.message}

${this.options.subtext}

`; } html += `

`; if (this.options.closeable) { html += ``; } this.floatingBanner.innerHTML = html; // Click to open modal this.floatingBanner.querySelector(".floating-promo__content").addEventListener("click", () => { this.openModal(); }); // Close button if (this.options.closeable) { this.floatingBanner.querySelector(".floating-promo__close").addEventListener("click", (e) => { e.stopPropagation(); this.hide(); }); } } createModal() { this.modal = document.createElement("div"); this.modal.className = "promo-modal"; this.modal.innerHTML = ` `; // Close modal events this.modal.querySelector(".promo-modal__overlay").addEventListener("click", () => { this.closeModal(); }); this.modal.querySelector(".promo-modal__close").addEventListener("click", () => { this.closeModal(); }); // Copy button this.modal.querySelector(".promo-modal__copy-btn").addEventListener("click", () => { this.copyCouponCode(); }); // Click coupon code to copy this.modal.querySelector(".promo-modal__coupon-code").addEventListener("click", () => { this.copyCouponCode(); }); // ESC key to close document.addEventListener("keydown", (e) => { if (e.key === "Escape" && this.modal.classList.contains("promo-modal--active")) { this.closeModal(); } }); } show() { if (!this.floatingBanner.parentNode) { document.body.appendChild(this.floatingBanner); } setTimeout(() => { this.floatingBanner.classList.add("floating-promo--visible"); }, 100); } hide() { this.floatingBanner.classList.remove("floating-promo--visible"); setTimeout(() => { if (this.floatingBanner.parentNode) { this.floatingBanner.parentNode.removeChild(this.floatingBanner); } }, 300); } openModal() { if (!this.modal.parentNode) { document.body.appendChild(this.modal); } setTimeout(() => { this.modal.classList.add("promo-modal--active"); document.body.style.overflow = "hidden"; }, 10); } closeModal() { this.modal.classList.remove("promo-modal--active"); document.body.style.overflow = ""; setTimeout(() => { if (this.modal.parentNode) { this.modal.parentNode.removeChild(this.modal); } }, 300); } copyCouponCode() { const code = this.options.couponCode; // Copy to clipboard navigator.clipboard.writeText(code).then(() => { // Update button text const btn = this.modal.querySelector(".promo-modal__copy-btn"); const originalText = btn.innerHTML; btn.innerHTML = ` Copied! `; // Reset after 2 seconds setTimeout(() => { btn.innerHTML = originalText; }, 2000); // Callback if (typeof this.options.onCopy === "function") { this.options.onCopy(code); } }).catch(err => { console.error("Failed to copy:", err); }); } destroy() { if (this.floatingBanner && this.floatingBanner.parentNode) { this.floatingBanner.parentNode.removeChild(this.floatingBanner); } if (this.modal && this.modal.parentNode) { this.modal.parentNode.removeChild(this.modal); } document.body.style.overflow = ""; } } const saleBanner = new TopBanner({ message: "🎉 CYBER SALE - 50% OFF Everything! Use code: CYBER50", type: "sale", autoClose: false, container: "header", closeable: false, }); saleBanner.show(); const imagePromo = new FloatingPromoBanner({ image: "https://png.pngtree.com/png-clipart/20190516/original/pngtree-black-friday-sale-in-origami-style-png-image_3635878.png", imageAlt: "Black Friday Sale", position: "right", onSubscribe: (email) => { // Handle subscription } });

${this.options.modalTitle}

Blog

Your Website Is Your Best Employee — If You Let It Be