feat(frontend): replace article system with Zibll 9.0

assets/js/core/misc.js

@@ -4,6 +4,102 @@
 (function () {
   "use strict";
 
+  function renderGradientBackground(container) {
+    if (!container || container.dataset.aksrtGradientState || typeof window.Grade !== "function") return;
+
+    var source = container.querySelector("img");
+    if (!source || (!source.classList.contains("lazyloaded") && !(source.complete && source.naturalWidth > 0))) return;
+
+    container.dataset.aksrtGradientState = "loading";
+    window.Grade(container, null, function (result) {
+      var gradientData = result && result[0];
+      var colors = gradientData && gradientData.gradientData;
+      if (!gradientData || !colors || !colors[0] || !colors[1]) {
+        delete container.dataset.aksrtGradientState;
+        return;
+      }
+
+      var opacity = container.getAttribute("data-opacity");
+      var colorName = opacity ? "rgba" : "rgb";
+      var alpha = opacity ? "," + opacity : "";
+      var color1 = colorName + "(" + colors[0].rgba.slice(0, 3).join(",") + alpha + ") 10%";
+      var color2 = colorName + "(" + colors[1].rgba.slice(0, 3).join(",") + alpha + ") 80%";
+
+      gradientData.element.classList.add("gradient-bg-loaded");
+      gradientData.element.style.backgroundImage = "linear-gradient(135deg, " + color1 + ", " + color2 + ")";
+      container.dataset.aksrtGradientState = "loaded";
+    });
+  }
+
+  function initGradientBackgrounds(root) {
+    var scope = root || document;
+    if (scope.nodeType === 1 && scope.matches(".gradient-bg")) {
+      renderGradientBackground(scope);
+    }
+    scope.querySelectorAll(".gradient-bg").forEach(renderGradientBackground);
+  }
+
+  document.addEventListener("lazyloaded", function (event) {
+    if (!(event.target instanceof Element) || !event.target.matches(".gradient-bg img")) return;
+    renderGradientBackground(event.target.closest(".gradient-bg"));
+  }, true);
+
+  function initPostThumbMedia(root) {
+    var scope = root || document;
+
+    scope.querySelectorAll("[data-post-thumb-slider]").forEach(function (el) {
+      if (el.dataset.aksrtThumbSliderBound === "1" || typeof Swiper === "undefined") return;
+      el.dataset.aksrtThumbSliderBound = "1";
+      new Swiper(el, {
+        slidesPerView: 1,
+        loop: el.querySelectorAll(".swiper-slide").length > 1,
+        pagination: {
+          el: el.querySelector(".swiper-pagination"),
+          clickable: true,
+        },
+      });
+    });
+
+    scope.querySelectorAll("[data-post-thumb-video]").forEach(function (box) {
+      if (box.dataset.aksrtThumbVideoBound === "1") return;
+      box.dataset.aksrtThumbVideoBound = "1";
+      var video = box.querySelector("video");
+      if (!video) return;
+
+      function loadVideo() {
+        if (!video.getAttribute("src") && video.dataset.src) {
+          video.setAttribute("src", video.dataset.src);
+          video.load();
+        }
+      }
+
+      function playVideo() {
+        loadVideo();
+        var result = video.play();
+        var postItem = box.closest(".posts-item");
+        if (postItem) postItem.classList.add("thumb-dplayer-playing");
+        if (result && typeof result.catch === "function") result.catch(function () {});
+      }
+
+      function pauseVideo() {
+        video.pause();
+        var postItem = box.closest(".posts-item");
+        if (postItem) postItem.classList.remove("thumb-dplayer-playing");
+      }
+
+      var item = box.closest(".item-thumbnail") || box;
+      item.addEventListener("mouseenter", playVideo);
+      item.addEventListener("mouseleave", pauseVideo);
+      item.addEventListener("focusin", playVideo);
+      item.addEventListener("focusout", pauseVideo);
+    });
+  }
+
+  window.AksrtFrontend.register("aksrt-post-thumb-media", function (root) {
+    initPostThumbMedia(root);
+    initGradientBackgrounds(root);
+  });
+
   function initRelatedSwiper() {
     var el = document.querySelector(".related-swiper[data-swiper-config]");
     if (!el || typeof Swiper === "undefined") return;