diff --git a/assets/js/button-likes.js b/assets/js/button-likes.js deleted file mode 100644 index 2ffc71be..00000000 --- a/assets/js/button-likes.js +++ /dev/null @@ -1,4 +0,0 @@ -document.getElementById("button_likes") && - document.getElementById("button_likes").addEventListener("click", () => { - process_article(); - }); diff --git a/assets/js/firebase.js b/assets/js/firebase.js new file mode 100644 index 00000000..82550aa5 --- /dev/null +++ b/assets/js/firebase.js @@ -0,0 +1,154 @@ +import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"; +import { + getFirestore, + doc, + getDoc, + setDoc, + updateDoc, + increment, + onSnapshot, +} from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"; +import { getAuth, signInAnonymously } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"; + +let app, db, auth, oids; +try { + const configEl = document.getElementById("firebase-config"); + if (!configEl?.textContent) { + throw new Error("Firebase config element not found"); + } + + const data = JSON.parse(configEl.textContent); + app = initializeApp(data.config); + + oids = { + views: configEl.getAttribute("data-views"), + likes: configEl.getAttribute("data-likes"), + }; + + db = getFirestore(app); + auth = getAuth(app); +} catch (e) { + console.error("Firebase initialization failed:", e.message); + throw e; +} + +const id = oids?.views?.replaceAll("/", "-"); +const id_likes = oids?.likes?.replaceAll("/", "-"); +let liked = false; +let authReady = false; + +function formatNumber(n) { + return n.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]); + } +} + +function updateDisplay(collection, nodeId) { + const node = document.getElementById(nodeId); + if (!node) return; + + const docId = nodeId.replaceAll("/", "-"); + onSnapshot( + doc(db, collection, docId), + (snapshot) => { + node.innerText = snapshot.exists() ? formatNumber(snapshot.data()[collection]) : 0; + toggleLoaders(node); + }, + (error) => { + console.error("Firebase snapshot update failed:", error); + }, + ); +} + +async function recordView(id) { + if (!id || localStorage.getItem(id)) return; + + try { + const ref = doc(db, "views", id); + const snap = await getDoc(ref); + + snap.exists() ? await updateDoc(ref, { views: increment(1) }) : await setDoc(ref, { views: 1 }); + + localStorage.setItem(id, true); + } catch (e) { + console.error("Record view operation failed:", e.message); + } +} + +function updateButton(isLiked) { + const hearts = document.querySelectorAll("span[id='button_likes_heart']"); + const empties = document.querySelectorAll("span[id='button_likes_emtpty_heart']"); + const texts = document.querySelectorAll("span[id='button_likes_text']"); + + hearts.forEach((el) => { + el.style.display = isLiked ? "" : "none"; + }); + empties.forEach((el) => { + el.style.display = isLiked ? "none" : ""; + }); + texts.forEach((el) => { + el.innerText = isLiked ? "" : "\xa0Like"; + }); +} + +async function toggleLike(add) { + if (!id_likes || !authReady) return; + + try { + const ref = doc(db, "likes", id_likes); + const snap = await getDoc(ref); + + liked = add; + add ? localStorage.setItem(id_likes, true) : localStorage.removeItem(id_likes); + updateButton(add); + + snap.exists() + ? await updateDoc(ref, { likes: increment(add ? 1 : -1) }) + : await setDoc(ref, { likes: add ? 1 : 0 }); + } catch (e) { + console.error("Like operation failed:", e.message); + liked = !add; + add ? localStorage.removeItem(id_likes) : localStorage.setItem(id_likes, true); + updateButton(!add); + } +} + +signInAnonymously(auth) + .then(() => { + authReady = true; + + document.querySelectorAll("span[id^='views_']").forEach((node) => { + if (node.id) updateDisplay("views", node.id); + }); + + document.querySelectorAll("span[id^='likes_']").forEach((node) => { + if (node.id) updateDisplay("likes", node.id); + }); + + recordView(id); + + if (id_likes && localStorage.getItem(id_likes)) { + liked = true; + updateButton(true); + } + + const likeButton = document.getElementById("button_likes"); + if (likeButton) { + likeButton.addEventListener("click", () => { + toggleLike(!liked); + }); + } + }) + .catch((error) => { + console.error("Firebase anonymous sign-in failed:", error.message); + authReady = false; + }); + +window.process_article = () => toggleLike(!liked); 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 @@