diff --git a/assets/js/firebase.js b/assets/js/firebase.js new file mode 100644 index 00000000..fb97bdd3 --- /dev/null +++ b/assets/js/firebase.js @@ -0,0 +1,208 @@ +const pageScriptElement = document.currentScript; +const configEl = document.getElementById("firebase-config"); + +if (!configEl?.textContent) { + console.error("Firebase config element not found"); + document + .querySelectorAll( + '[id^="views_"], [id^="likes_"], #button_likes_heart, #button_likes_emtpty_heart, #button_likes_text', + ) + .forEach((el) => el.remove()); +} else { + const data = JSON.parse(configEl.textContent); + const oid = data.oids?.views; + const oid_likes = data.oids?.likes; + + let liked_page = false; + const id = oid ? oid.replaceAll("/", "-") : oid; + const id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes; + + function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + + function toggleLoaders(node) { + var classesString = node.className; + if (classesString == "") return; + var classes = classesString.split(" "); + for (var i in classes) { + node.classList.toggle(classes[i]); + } + } + + var update_views = function (node, id) { + db.collection("views") + .doc(id) + .onSnapshot((doc) => { + var data = doc.data(); + if (data) { + node.innerText = numberWithCommas(data.views); + } else { + node.innerText = 0; + } + toggleLoaders(node); + }); + }; + + var update_likes = function (node, id) { + db.collection("likes") + .doc(id) + .onSnapshot((doc) => { + var data = doc.data(); + if (data) { + node.innerText = numberWithCommas(data.likes); + } else { + node.innerText = 0; + } + toggleLoaders(node); + }); + }; + + if (typeof auth !== "undefined") { + const viewed = localStorage.getItem(id); + + if (!viewed && id) { + auth + .signInAnonymously() + .then(() => { + const docRef = db.collection("views").doc(id); + localStorage.setItem(id, true); + docRef + .get() + .then((doc) => { + if (doc.exists) { + db.collection("views") + .doc(id) + .update({ + views: firebase.firestore.FieldValue.increment(1), + }); + } else { + db.collection("views").doc(id).set({ views: 1 }); + } + }) + .catch((error) => { + console.log("Error getting document:", error); + }); + }) + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + console.error(errorCode, errorMessage); + }); + } + + const liked = localStorage.getItem(id_likes); + + if (liked) { + liked_page = true; + document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = ""; + document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none"; + document.querySelectorAll("span[id='button_likes_text']")[0].innerText = ""; + } + + auth + .signInAnonymously() + .then(() => { + var views_nodes = document.querySelectorAll("span[id^='views_']"); + + for (var i in views_nodes) { + var node = views_nodes[i]; + var id = node.id ? node.id.replaceAll("/", "-") : node.id; + if (id) { + update_views(node, id); + } + } + + var likes_nodes = document.querySelectorAll("span[id^='likes_']"); + + for (var i in likes_nodes) { + var node = likes_nodes[i]; + var id = node.id ? node.id.replaceAll("/", "-") : node.id; + if (id) { + update_likes(node, id); + } + } + }) + .catch((error) => { + var errorCode = error.code; + var errorMessage = error.message; + console.error(errorCode, errorMessage); + }); + } + + function like_article(id_likes) { + auth + .signInAnonymously() + .then(() => { + const docRef = db.collection("likes").doc(id_likes); + docRef + .get() + .then((doc) => { + liked_page = true; + localStorage.setItem(id_likes, true); + document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = ""; + document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none"; + document.querySelectorAll("span[id='button_likes_text']")[0].innerText = ""; + if (doc.exists) { + db.collection("likes") + .doc(id_likes) + .update({ + likes: firebase.firestore.FieldValue.increment(1), + }); + } else { + db.collection("likes").doc(id_likes).set({ likes: 1 }); + } + }) + .catch((error) => { + console.log("Error getting document:", error); + }); + }) + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + console.error(errorCode, errorMessage); + }); + } + + function remove_like_article(id_likes) { + auth + .signInAnonymously() + .then(() => { + const docRef = db.collection("likes").doc(id_likes); + docRef + .get() + .then((doc) => { + liked_page = false; + localStorage.removeItem(id_likes); + document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = "none"; + document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = ""; + document.querySelectorAll("span[id='button_likes_text']")[0].innerText = "\xa0Like"; + if (doc.exists) { + db.collection("likes") + .doc(id_likes) + .update({ + likes: firebase.firestore.FieldValue.increment(-1), + }); + } else { + db.collection("likes").doc(id_likes).set({ likes: 0 }); + } + }) + .catch((error) => { + console.log("Error getting document:", error); + }); + }) + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + console.error(errorCode, errorMessage); + }); + } + + window.process_article = function () { + if (!liked_page) { + like_article(id_likes); + } else { + remove_like_article(id_likes); + } + }; +} diff --git a/assets/js/page.js b/assets/js/page.js deleted file mode 100644 index 00eada1c..00000000 --- a/assets/js/page.js +++ /dev/null @@ -1,131 +0,0 @@ -const pageScriptElement = document.currentScript; -const oid = - pageScriptElement && pageScriptElement.getAttribute("data-oid") - ? pageScriptElement.getAttribute("data-oid") - : (console.error("data-oid is null"), null); -const oid_likes = - pageScriptElement && pageScriptElement.getAttribute("data-oid-likes") - ? pageScriptElement.getAttribute("data-oid-likes") - : (console.error("data-oid-likes is null"), null); -let liked_page = false; -const id = oid ? oid.replaceAll("/", "-") : oid; -const id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes; - -if (typeof auth !== "undefined") { - const viewed = localStorage.getItem(id); - - if (!viewed) { - auth - .signInAnonymously() - .then(() => { - const docRef = db.collection("views").doc(id); - localStorage.setItem(id, true); - docRef - .get() - .then((doc) => { - if (doc.exists) { - db.collection("views") - .doc(id) - .update({ - views: firebase.firestore.FieldValue.increment(1), - }); - } else { - db.collection("views").doc(id).set({ views: 1 }); - } - }) - .catch((error) => { - console.log("Error getting document:", error); - }); - }) - .catch((error) => { - const errorCode = error.code; - const errorMessage = error.message; - console.error(errorCode, errorMessage); - }); - } - - const liked = localStorage.getItem(id_likes); - - if (liked) { - liked_page = true; - document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = ""; - document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none"; - document.querySelectorAll("span[id='button_likes_text']")[0].innerText = ""; - } -} - -function like_article(id_likes) { - auth - .signInAnonymously() - .then(() => { - const docRef = db.collection("likes").doc(id_likes); - docRef - .get() - .then((doc) => { - liked_page = true; - localStorage.setItem(id_likes, true); - document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = ""; - document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none"; - document.querySelectorAll("span[id='button_likes_text']")[0].innerText = ""; - if (doc.exists) { - db.collection("likes") - .doc(id_likes) - .update({ - likes: firebase.firestore.FieldValue.increment(1), - }); - } else { - db.collection("likes").doc(id_likes).set({ likes: 1 }); - } - }) - .catch((error) => { - console.log("Error getting document:", error); - }); - }) - .catch((error) => { - const errorCode = error.code; - const errorMessage = error.message; - console.error(errorCode, errorMessage); - }); -} - -function remove_like_article(id_likes) { - auth - .signInAnonymously() - .then(() => { - const docRef = db.collection("likes").doc(id_likes); - docRef - .get() - .then((doc) => { - liked_page = false; - localStorage.removeItem(id_likes); - document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = "none"; - document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = ""; - document.querySelectorAll("span[id='button_likes_text']")[0].innerText = "\xa0Like"; - if (doc.exists) { - db.collection("likes") - .doc(id_likes) - .update({ - likes: firebase.firestore.FieldValue.increment(-1), - }); - } else { - db.collection("likes").doc(id_likes).set({ likes: 0 }); - } - }) - .catch((error) => { - console.log("Error getting document:", error); - }); - }) - .catch((error) => { - const errorCode = error.code; - const errorMessage = error.message; - console.error(errorCode, errorMessage); - }); -} - -function process_article() { - if (!liked_page) { - like_article(id_likes); - } else { - remove_like_article(id_likes); - } -} diff --git a/assets/js/process.js b/assets/js/process.js deleted file mode 100644 index e8cb4fbf..00000000 --- a/assets/js/process.js +++ /dev/null @@ -1,70 +0,0 @@ -if (typeof auth !== "undefined") { - var viewsCollection = db.collection("views"); - var likesCollection = db.collection("likes"); - - function numberWithCommas(x) { - return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); - } - - function toggleLoaders(node) { - var classesString = node.className; - if (classesString == "") return; - var classes = classesString.split(" "); - for (var i in classes) { - node.classList.toggle(classes[i]); - } - } - - var update_views = function (node, id) { - viewsCollection.doc(id).onSnapshot((doc) => { - var data = doc.data(); - if (data) { - node.innerText = numberWithCommas(data.views); - } else { - node.innerText = 0; - } - toggleLoaders(node); - }); - }; - - var update_likes = function (node, id) { - likesCollection.doc(id).onSnapshot((doc) => { - var data = doc.data(); - if (data) { - node.innerText = numberWithCommas(data.likes); - } else { - node.innerText = 0; - } - toggleLoaders(node); - }); - }; - - auth - .signInAnonymously() - .then(() => { - var views_nodes = document.querySelectorAll("span[id^='views_']"); - - for (var i in views_nodes) { - var node = views_nodes[i]; - var id = node.id ? node.id.replaceAll("/", "-") : node.id; - if (id) { - update_views(node, id); - } - } - - var likes_nodes = document.querySelectorAll("span[id^='likes_']"); - - for (var i in likes_nodes) { - var node = likes_nodes[i]; - var id = node.id ? node.id.replaceAll("/", "-") : node.id; - if (id) { - update_likes(node, id); - } - } - }) - .catch((error) => { - var errorCode = error.code; - var errorMessage = error.message; - console.error(errorCode, errorMessage); - }); -} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f2fa8d63..640def99 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -22,22 +22,6 @@