8d6b0d868d
* Add MVP for live events * Modify and finalize live now for events * Add profile to front end of live article indicator * Check for footer container before doing calculations on it
76 lines
No EOL
2.9 KiB
Text
76 lines
No EOL
2.9 KiB
Text
function initializeLiveArticle() {
|
|
initializeLiveArticle.called = true;
|
|
var el = document.getElementById("live-article-indicator");
|
|
var articleEl = document.getElementById("article-show-container");
|
|
if (el && articleEl && articleEl.dataset.live == "true") {
|
|
el.innerHTML = "";
|
|
}
|
|
window.fetch("/live_articles")
|
|
.then(function(response){
|
|
response.json().then(function(article){
|
|
checkForOnPage(article);
|
|
if(localStorageTest() === true){
|
|
if (localStorage.getItem("exited_live_article_alert") == article.path) {
|
|
return;
|
|
}
|
|
}
|
|
if( article.path && window.location.href.indexOf(article.path) == -1 && window.location.href.indexOf("/live") == -1) {
|
|
el.innerHTML = liveIndicator(article);
|
|
document.getElementById("live-exit-button").onclick = function(event){
|
|
event.preventDefault();
|
|
el.innerHTML = "";
|
|
event.target.innerHTML = "";
|
|
if(localStorageTest() === true){
|
|
localStorage.setItem("exited_live_article_alert", article.path);
|
|
}
|
|
}
|
|
el.onclick = function(){
|
|
setTimeout(function(){
|
|
if (document.getElementById("live-article-indicator-inner")){
|
|
fadeOutElement(document.getElementById("live-article-indicator-inner"));
|
|
fadeOutElement(document.getElementById("live-exit-button"));
|
|
}
|
|
},20)
|
|
}
|
|
}
|
|
});
|
|
})
|
|
}
|
|
|
|
function liveIndicator(article) {
|
|
var tagsHTML = article.tag_list.map(function(t){return "<span class='live-tag'>#"+t+"</span>"}).join(" ")
|
|
return '<a href="#" class="live-exit-button" id="live-exit-button"><%=image_tag("/assets/cancel.svg")%></a>\
|
|
<a href="'+article.path+'" class="live-link" id="live-link"><div class="live-article-indicator-inner" id="live-article-indicator-inner">\
|
|
<div class="live-pre-header"><span class="pulsating-circle"></span>Live Now</div>\
|
|
<div class="live-article-title">'+article.title+'</div>\
|
|
<div class="live-user"><img src="'+article.user.profile_pic+'" />'+article.user.name+'</div>\
|
|
<div class="live-tags">'+tagsHTML+'</div>\
|
|
</div></a>'
|
|
}
|
|
|
|
function fadeOutElement(fadeTarget) {
|
|
var fadeEffect = setInterval(function () {
|
|
if (!fadeTarget.style.opacity) {
|
|
fadeTarget.style.opacity = 1;
|
|
}
|
|
if (fadeTarget.style.opacity < 0.1) {
|
|
clearInterval(fadeEffect);
|
|
} else {
|
|
fadeTarget.style.opacity -= 0.1;
|
|
}
|
|
},25);
|
|
}
|
|
|
|
function checkForOnPage(article){
|
|
if (InstantClick == undefined){
|
|
return
|
|
}
|
|
InstantClick.on('change', function() {
|
|
if( article.path && window.location.href.indexOf(article.path) > -1) {
|
|
if (document.getElementById("live-article-indicator-inner")){
|
|
fadeOutElement(document.getElementById("live-article-indicator-inner"));
|
|
fadeOutElement(document.getElementById("live-exit-button"));
|
|
}
|
|
}
|
|
});
|
|
} |