Page History
...
| Custom section | ||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||
| Custom section | ||||||||||||||||||||||||||||||||
|
| HTML |
|---|
<div class="filtersContainer events-search-main">
<div id="events-search-container">
<img src="/download/attachments/81517767/searchicon.png?api=v2" />
<input id="events-searchbar" type="text" autocomplete="off" placeholder="SEARCH FOR A SPECIFIC EVENT" />
</div>
<div class="countryFilterContainer">
<input type='text' id='country-placeholder' placeholder='Country' onkeyup='handleCountrySearch(this, event)' />
<ul id="countryFilter">
</ul>
<div id='country-clear-button' style="display:none;"><img src="/download/attachments/81517767/closeicon.png?api=v2" onclick="event.stopPropagation();clearFilter('countryFilter')" /></div>
</div>
<div class="dateFilterContainer">
<div class="dateFilter">
<p class="dateInputContainer"><input type="text" placeholder="Start Date" id="startdate"></p> <span>↔</span> <p class="dateInputContainer"><input type="text" placeholder="End Date" id="enddate"></p>
</div>
</div>
<div class="resetFilterContainer">
<a id="resetFilter">Clear All Filters</a>
</div>
</div>
<div id="additional-filters-button" style="display: none;">
<img src="/download/attachments/81517767/addfilters.png?api=v2" />
<span>Additional Filters</span>
</div> |
| HTML |
|---|
<script>
const getMinutesUntilEventStart = (startDate) => {
let nowDate = new Date();
let eventStartDate = new Date(startDate);
let diffMilliseconds = eventStartDate.getTime() - nowDate.getTime();
let diffMinutes = (diffMilliseconds / 60000);
return diffMinutes;
}
const getMinutesUntilEventEnd = (endDate) => {
let nowDate = new Date();
let eventEndDate = new Date(endDate);
let diffMilliseconds = eventEndDate.getTime() - nowDate.getTime();
let diffMinutes = (diffMilliseconds / 60000);
return diffMinutes;
}
const showPastWatchIndicators = () => {
let pastEvents = document.getElementById('scroll-section-3');
let pastCards = Array.from(pastEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < pastCards.length; i++) {
let currCard = pastCards[i];
// Check if event was offline
if (currCard.dataset.offline == "true") {
continue
}
let liveEl = document.createElement("div");
liveEl.classList.add('watch-indicator');
liveEl.innerHTML = "<img class='watch-indicator-icon' src='/download/attachments/81517767/playicon.png?api=v2' /> RECORDED";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
let allEvents = document.getElementById('all-events');
let allCards = Array.from(allEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < allCards.length; i++) {
let currCard = allCards[i];
let currCardEnd = currCard.dataset.enddate;
let minsTilEnd = getMinutesUntilEventEnd(currCardEnd);
if (minsTilEnd < 0) {
// Check if event was offline
if (currCard.dataset.offline == "true") {
continue
}
let liveEl = document.createElement("div");
liveEl.classList.add('watch-indicator');
liveEl.innerHTML = "<img class='watch-indicator-icon' src='/download/attachments/81517767/playicon.png?api=v2' /> RECORDED";
currCard.insertAdjacentElement('afterbegin', liveEl);
} else {
// Live now or upcoming (show live indicator if minsTilStart <= 0)
let currCardStart = currCard.dataset.startdate;
let minsTilStart = getMinutesUntilEventStart(currCardStart);
if (minsTilStart <= 0) {
// Check if event is offline
if (currCard.dataset.offline == "true") {
continue;
}
let liveEl = document.createElement("div");
liveEl.classList.add('live-circle');
liveEl.innerText = "LIVE";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
}
}
}
window.addEventListener('load', () => {
let upcomingEvents = document.getElementById('upcoming-events-section');
let upcomingCards = Array.from(upcomingEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < upcomingCards.length; i++) {
let currCard = upcomingCards[i];
let currCardStart = currCard.dataset.startdate;
let minsTilStart = getMinutesUntilEventStart(currCardStart);
if (minsTilStart <= 0) {
// Check if event is offline
if (currCard.dataset.offline == "true") {
continue;
}
let liveEl = document.createElement("div");
liveEl.classList.add('live-circle');
liveEl.innerText = "LIVE";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
}
//if (AJS.params.remoteUser == "alex@gsvlabs.com") {
showPastWatchIndicators()
//}
});
</script>
<style>
.live-circle {
font-size: 13px;
padding: 3px 18px;
text-transform: uppercase;
font-weight: bold;
background-color: #cc1f1f;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
box-shadow: 1px 1px 5px #00000054;
}
</style>
<style>
.watch-indicator {
font-size: 12px;
padding: 3px 10px;
text-transform: uppercase;
font-weight: bold;
background-color: #036bc4;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
box-shadow: 1px 1px 5px #00000054;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.watch-indicator-icon {
display: block;
width: 14px !important;
height: 14px !important;
margin-right: 6px;
padding-bottom: 2px;
}
</style> |
...
