(() => { const defaults = { targetElement: '#view-header .header-bar-wrapper', localStorageKey: 'isClosed', defaultClosed: false, displayOnlyOnHomePage: false }; class BadgePlugin { constructor(options) { this.options = { ...defaults, ...options }; this.isHomePage = !!document.querySelector('#home'); this.init(); this.updateBadgeVisibility = this.throttle(this.updateBadgeVisibility.bind(this), 100); } init() { const { buttons, defaultClosed, displayOnlyOnHomePage, targetElement, localStorageKey } = this.options; if (defaultClosed) { localStorage.setItem(this.options.localStorageKey, 'true'); } const containsGlobalButton = buttons.some(({ isGlobal }) => isGlobal); if (displayOnlyOnHomePage && !this.isHomePage && !containsGlobalButton) { return; } const parentElement = document.querySelector(targetElement); if (!parentElement) return; const badgeLinerElement = document.createElement('div'); badgeLinerElement.id = 'badgeLiner'; parentElement.appendChild(badgeLinerElement); badgeLinerElement.innerHTML = `

toogle buttons size

`; const customButtonsElement = document.createElement('div'); customButtonsElement.id = 'custom-buttons'; badgeLinerElement.appendChild(customButtonsElement); const customButtonsHTML = this.generateButtonsHTML(); customButtonsElement.innerHTML = customButtonsHTML; const app = document.getElementById('app'); const isClosedValue = localStorage.getItem(localStorageKey); if (isClosedValue !== 'true') { this.openBadge(app); } else { this.closeBadge(app); } const minimizeLogosButton = app.querySelector('.minimize_logos'); if (minimizeLogosButton) { minimizeLogosButton.addEventListener('click', (e) => { e.preventDefault(); this.toggleBadge(app); }); } if (targetElement.includes('#view-header')) { const header = document.getElementById('view-header'); const headerHeight = header.offsetHeight; window.addEventListener('scroll', () => { this.updateBadgeVisibility(app, headerHeight); }); } } generateButtonsHTML() { const { buttons, displayOnlyOnHomePage } = this.options; const filteredButtons = buttons.filter(({ isGlobal }) => { const globalButtonsOnly = displayOnlyOnHomePage && !this.isHomePage return globalButtonsOnly ? isGlobal : true; }); const numButtons = filteredButtons.length; const buttonsHTML = filteredButtons.map(({ url, target = '_blank', imgSrc, text, altText = '', hideText, buttonType, buttonClass, buttonId, buttonBgColor, buttonTextColor, isGlobal = true }) => { if ((!isGlobal && !this.isHomePage) || !numButtons) return ''; const tag = url ? 'a' : 'div'; const idAttr = buttonId ? ` id="${buttonId}"` : ''; let attr = ''; if (url) { attr += ` href="${url}" target="${target}"`; } const classList = ['button-link', buttonClass, buttonType].filter(Boolean).join(' '); const classAttr = classList ? ` class="${classList}"` : ''; const buttonText = text ? `${text}` : ''; let buttonStyle = ''; if (buttonBgColor) { buttonStyle += `--button-bg-color: ${buttonBgColor}; `; } if (buttonTextColor) { buttonStyle += `--button-text-color: ${buttonTextColor}; `; } buttonStyle = buttonStyle.trim(); const styleAttr = buttonStyle ? ` style="${buttonStyle}"` : ''; const content = ` ${buttonText} ${buttonType === 'transparencyReporting' ? `Red Ribbon Badge

`: '' } `; return `<${tag}${attr}${idAttr}${classAttr} ${styleAttr}>${content}`; }).join(''); const badgeLinerElement = document.getElementById('badgeLiner'); badgeLinerElement.classList.add(`buttons-numbers-${numButtons}`); return buttonsHTML; } closeBadge(app) { app.classList.add('small-badge', 'minimized-logos'); localStorage.setItem(this.options.localStorageKey, 'true'); } openBadge(app) { app.classList.remove('small-badge', 'minimized-logos'); localStorage.setItem(this.options.localStorageKey, 'false'); } toggleBadge(app) { if (app.classList.contains('small-badge')) { this.openBadge(app); } else { this.closeBadge(app); } } isBadgeClosed() { const { localStorageKey } = this.options; return localStorage.getItem(localStorageKey) === 'true'; } updateBadgeVisibility(app, headerHeight) { const scroll = window.scrollY; if (scroll >= headerHeight) { app.classList.remove('default-badge'); app.classList.add('small-badge', 'fixed-position'); } else { app.classList.remove('fixed-position'); if (!app.classList.contains('minimized-logos')) { app.classList.remove('small-badge'); app.classList.add('default-badge'); } } } debounce(func, delay) { let timeoutId; return function (...args) { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { func.apply(this, args); timeoutId = null; }, delay); }; } // Throttle function to limit the rate of execution throttle(func, delay) { let timeoutId; return function (...args) { if (!timeoutId) { timeoutId = setTimeout(() => { func.apply(this, args); timeoutId = null; }, delay); } }; } } window.BadgePlugin = BadgePlugin; })(); // Define button details and other options const buttons = [ //for badges { buttonType: 'transparencyReporting', url: 'https://www.lavillaisd.org/' }, //end badges ]; document.addEventListener("appLoaded", () => { const badgePlugin = new BadgePlugin({ buttons: buttons }); });

La Villa Independent School District

Fall Festival & Tailgate