docbrown/app/assets/javascripts/initializers/initializeLiveArticle.js.erb
2018-02-28 16:11:08 -05:00

76 lines
No EOL
2.8 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) {
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">'+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"));
}
}
});
}