/* --------- Homepage liveFeed -------------- */ const liveFeedApiUrl = window.clientWorkStateTemp.links.v4.live_feed.main; const numberOfliveFeedDisplayed = 9; const customliveFeedParent = "#homepage-live-feed"; const lfClassName = "liveFeed"; const lfpreTitle = " "; const lfTitle = "Live Feed"; const seeMoreliveFeed = "See All Posts" const seeMoreURL = "live-feed"; var schoolAlias = window.clientWorkStateTemp.alias; const liveFeedbackgroundColor = "#ffffff"; const liveFeedbackgroundImage = window.clientWorkStateTemp.globals.logo.url; const defaultImage = window.clientWorkStateTemp.globals.settings.liveFeedFallbackImage.url; const isSlider = true; if (document.getElementById("home") !== null) { fetch(liveFeedApiUrl).then(response => { return response.json(); }).then(result => { parseliveFeedData(result); }).catch(err => { }); } function parseliveFeedData(result) { var index = 0; const customliveFeedParentElement = document.querySelector(customliveFeedParent); if(liveFeedbackgroundColor){ customliveFeedParentElement.style.setProperty('--bgColor', liveFeedbackgroundColor); } if(liveFeedbackgroundImage){ customliveFeedParentElement.classList.add("has-bg-image"); customliveFeedParentElement.style.setProperty("--bgImage", "url('" + liveFeedbackgroundImage + "')"); } customliveFeedParentElement.insertAdjacentHTML("afterbegin", "

"); var elementContainer = document.querySelector('.custom-' + lfClassName + '__inner'); if (lfTitle) { elementContainer.insertAdjacentHTML("afterbegin", "

"); var liveFeedHeader = document.querySelector("." + lfClassName + "-header"); var liveFeedHeaderTitle = document.querySelector("." + lfClassName + "-header__title"); if(lfpreTitle){ liveFeedHeaderTitle.innerHTML += "" + lfpreTitle + ""; } liveFeedHeaderTitle.innerHTML += "

"+ lfTitle + "

"; if(seeMoreliveFeed){ if (schoolAlias !== null) { liveFeedHeader.insertAdjacentHTML("beforeend", "" + seeMoreliveFeed + ""); } else { liveFeedHeader.insertAdjacentHTML("beforeend", "" + seeMoreliveFeed + ""); } } } elementContainer.insertAdjacentHTML("beforeend", "

"); var lfSlider = document.querySelector('.lf-list-container'); for (const liveFeed of result.live_feeds) { if (liveFeed.to_live_feed) { index++; if (index <= numberOfliveFeedDisplayed) { const liveFeedStatus = liveFeed.status.replace(/]*>(.*?)<\/a>/g, '$1'); let elementHtml = createliveFeedHtml(liveFeed.id, liveFeed.avatar, liveFeedStatus, liveFeed.image_large, liveFeed.author_name, liveFeed.time_ago); lfSlider.innerHTML += elementHtml; } else { break; } } } elementContainer.innerHTML += "

"; if(isSlider){ customliveFeedParentElement.classList.add("has-slider"); setTimeout(() => { var slider = tns({ container: '.lf-list-container', items: 1, nav: false, arrowKeys: true, gutter: 10, "autoplayHoverPause": true, "swipeAngle": false, "startIndex": 0, // "rewind": true, responsive: { 850: { edgePadding: 10, gutter: 20, items: 2 }, 1200: { items: 3, gutter: 0, "startIndex": 12, } } }); slider.getInfo().slideItems[slider.getInfo().index].classList.add('donut-slider_item--active'); slider.events.on('indexChanged', () => { const info = slider.getInfo(); const indexPrev = info.indexCached; const indexCurr = info.index; console.log(indexPrev, indexCurr); info.slideItems[indexPrev].classList.remove('donut-slider_item--active'); info.slideItems[indexCurr].classList.add('donut-slider_item--active'); }); }, 100); } } function createliveFeedHtml(id, avatar, text, image, author, timeago) { let htmlItem = `

`; htmlItem += `

`; if (avatar) { htmlItem += `

`; } htmlItem += `

`; if (author) { htmlItem += `

${author}

`; } if (timeago) { htmlItem += `

${timeago}

`; } htmlItem += `

`; htmlItem += `

`; if (text) { if (schoolAlias !== null) { htmlItem += `

${text}

`; } else { htmlItem += `

${text}

`; } } htmlItem += `

`; if (image) { htmlItem += `

`; } else{ htmlItem += `

`; } htmlItem += `

`; htmlItem += `

`; return htmlItem; } /* --------- END Homepage liveFeed -------------- */

Northside Elementary

Administrative Team