// ----------------- // Add Horizontal scrolling banner START // ----------------- const _$ = window.__NUXT__.state; const orgID = _$.secondaryOrgId; const orgLogo = _$.globals.logo.url; const pageName1 = 'scrolling-banner'; const apiUrl = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + pageName1; var textColor = '#fff'; var backgroundColor = 'var(--secondary-color)'; var hideBanner = false; (function (ready) { if ( document.readyState === "complete" || document.readyState === "interactive" ) { ready(); } else { document.addEventListener("DOMContentLoaded", ready); } })(function domReady() { /* the document is now ready. */ const appElement = document.querySelector(".banner-wrapper"); fetch(apiUrl) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const htmlContent = document.createElement('div'); htmlContent.classList.add("htmlContent", "scrollingBanner"); // for each page component/layout/section pageContent.forEach(pageElement => { if (pageElement.component == 'ts-full-width') { pageElement.config[0].forEach(fullWidthElement => { if (fullWidthElement.component == 'ts-table-v2') { const configTable = fullWidthElement.config.table.content; const jsonConfig = JSON.parse(convertTableToJson(configTable)) for (let i = 0; i < jsonConfig.length; i++) { const element = jsonConfig[i]; if (element['setting'] == 'banner_title') { bannerTitle = element['value']; } if (element['setting'] == 'text_color') { textColor = element['value'].trim(); } if (element['setting'] == 'background_color') { if (element['value'].trim()) { backgroundColor = element['value'].trim(); } } if (element['setting'] == 'hide_banner') { hideBanner = element['value'].trim(); } } } }); } // if it's our desired repetitive element else if (pageElement.component == 'ts-one-column') { let oneColumnItem = pageElement.config; oneColumnItem.forEach((oneColumnComponent, index) => { const modalContent = document.createElement('div'); modalContent.classList.add("scrollingBanner_inner"); oneColumnComponent.forEach(element => { if (element.component == 'ts-text') { let textContent = element.config.content; if (textContent) { const numTextDivs = 5; // Number of text added for (let i = 0; i < numTextDivs; i++) { let textElementWrap = document.createElement('div'); textElementWrap.classList.add('text-wrap'); textElementWrap.innerHTML = textContent; modalContent.appendChild(textElementWrap); } } } }); htmlContent.appendChild(modalContent); }); } }); if (hideBanner !== 'yes') { function aSlider(callback) { !function (a, b, c, d) { "use strict"; function e(b, c) { this.element = b, this.settings = a.extend({}, g, c), this.controller = { currentSpeed: 0 }, this.init() } var f = "infiniteScroller", g = { maxSpeed: 20, speed: 1, scrollOnMouseOver: !0, resetOnMouseOut: !0, direction: "left" }; a.extend(e.prototype, { init: function () { var b = this.settings, c = a(this.element); c.wrapInner("

"); var d = c.find(".slide-data"), e = c.find(".slide-wrap"), f = d.children(".scrollingBanner_inner"), g = this.controller; "right" === b.direction && (b.speed = -1 * b.speed); var h = b.speed; c.addClass("slide-pane"); var i = 0; f.children().each(function () { a(this).height() > i && (i = a(this).height()) }), e.height(i), f.children().clone().appendTo(f); var j = 0; f.children().each(function () { var b = a(this); b.css("left", j), j += b.outerWidth(!0) }); var k = j / 2, l = d.width(), m = function () { var a = d.scrollLeft(), b = a + g.currentSpeed; b > 2 * k - l ? b -= k : b < 0 && (b += k), d.scrollLeft(b) }; setInterval(m, 20), this.tweenToNewSpeed(h), b.scrollOnMouseOver && this.scrollOnMouseOver(d), c.css("visibility", "visible") }, tweenToNewSpeed: function (b, c) { c === d && (c = 0), a(this.controller).stop(!0).animate({ currentSpeed: b }, c) }, scrollOnMouseOver: function (c) { var d = this.settings, e = this; c.mousemove(function (c) { var f = a(b).width(), g = f / 2, h = c.pageX, i = 0, j = d.maxSpeed; i = h < g ? -(100 - (h / g * 100).toFixed(2)) : ((h - g) / g * 100).toFixed(2), j *= i / 100, e.tweenToNewSpeed(j) }), d.resetOnMouseOut && c.mouseout(function () { e.tweenToNewSpeed(d.speed, 500) }) } }), a.fn[f] = function (b) { return this.each(function () { a.data(this, "plugin_" + f) || a.data(this, "plugin_" + f, new e(this, b)) }) } }(jQuery, window, document); createBanner(appElement, orgLogo, htmlContent, bannerTitle, textColor, backgroundColor); callback(); } function infiniteS() { $(".scrollingBanner").infiniteScroller( { scrollOnMouseOver: true, resetOnMouseOut: true, maxSpeed: 10, speed: 1, direction: 'left' }); } aSlider(infiniteS); } }); }); function convertTableToJson(htmlString) { const parser = new DOMParser(); const htmlWithTable = parser.parseFromString(htmlString, 'text/html'); const table = htmlWithTable.querySelector("table"); var header = []; var rows = []; for (var i = 0; i < table.rows[0].cells.length; i++) { header.push(table.rows[0].cells[i].innerText); } for (var i = 1; i < table.rows.length; i++) { var row = {}; for (var j = 0; j < table.rows[i].cells.length; j++) { row[header[j]] = table .rows[i] .cells[j] .innerText; } rows.push(row); } const jsonFromTable = JSON.stringify(rows); return jsonFromTable; } function createBanner(appElement, orgLogo, htmlContent, bannerTitle, textColor, backgroundColor, positionOnPage) { const bannerOuter = document.createElement("div"); bannerOuter.classList.add("bannerContainer"); const bannerTitleDiv = document.createElement("div"); bannerTitleDiv.classList.add("banner-heading"); const bannerTitleH = document.createElement("h3"); bannerTitleH.innerText = bannerTitle; bannerOuter.style.setProperty('--banner-text-color', textColor); bannerOuter.style.setProperty('--banner-background-color', backgroundColor); bannerOuter.style.setProperty('--logo-url', orgLogo); if(bannerTitle.length > 1) { bannerTitleDiv.appendChild(bannerTitleH); bannerOuter.appendChild(bannerTitleDiv); } bannerOuter.appendChild(htmlContent); appElement.prepend(bannerOuter); } // ----------------- // Horizontal scrolling banner END // -----------------

Moulton ISD

Pearl Harbor Parade