enhance script

src/common/core/antibot/ui/template.html

@@ -72,7 +72,7 @@ <h5 data-count class="mb-1 font-bold dark:text-white/90">"unknown"</h5>
  class="absolute right-7 top-1.5"
  >
  <svg
- class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5"
+ class="cursor-pointer fill-gray-300 dark:opacity-80 absolute h-5 w-5"
  xmlns="http:https://www.w3.org/2000/svg"
  viewBox="0 0 320 512"
  >
@@ -90,26 +90,33 @@ <h5 data-fetch-status class="text-lg mb-0 text-white dark:text-gray-300">
 </div>
 
 <script>
- class Plugin {
+ class SetupPlugin {
  constructor() {
  // Alert elements
  this.alertEl = document.querySelector("[data-fetch]");
  this.alertCloseEl = document.querySelector("[data-fetch-close]");
  this.alertStatusEl = document.querySelector("[data-fetch-status]");
  this.alertMsgEl = document.querySelector("[data-fetch-msg]");
  // Set data defaults elements and variables
+ // Key of this.data need to match key of fetch data json object to update values
+ // type<str> : text (target el), list (el need to be first element of list)
+ // listNames<arr> : list of names key on item, need to set data-name="nameKey" on el
  this.data = {
  info: {
  el: document.querySelector("[data-info]"),
- value: `"Anti-bot technology is designed to detect and mitigate suspicious or
+ value: `Anti-bot technology is designed to detect and mitigate suspicious or
  malicious bots, preventing them from reaching an organization's websites
- or IT ecosystem."`,
+ or IT ecosystem.`,
+ type: "text",
  },
  count: {
  el: document.querySelector("[data-count]"),
  value: "unknown",
+ type: "text",
  },
  };
+ // Hidden elements that will be shown on success, like ping buttons or list rendering
+ this.showOnSuccess = [];
 
  this.init();
  }
@@ -129,8 +136,16 @@ <h5 data-fetch-status class="text-lg mb-0 text-white dark:text-gray-300">
  })
  .then((response) => response.json())
  .then((res) => {
+ // Update data and DOM
  this.getFetchDataByKey(res.data);
  this.updateDataDOM();
+ // Show hidden elements
+ if (this.showOnSuccess.length > 0) {
+ this.showOnSuccess.forEach((el) => {
+ el.classList.remove("hidden");
+ });
+ }
+ // Feedback
  this.updateAlert("success");
  })
  .catch((error) => {
@@ -153,10 +168,18 @@ <h5 data-fetch-status class="text-lg mb-0 text-white dark:text-gray-300">
 
  updateDataDOM() {
  for (const [key, value] of Object.entries(this.data)) {
- this.data[key]["el"].textContent = this.data[key]["value"] || "";
+ // Case text
+ if (this.data[key]["type"] == "text") {
+ this.data[key]["el"].textContent = this.data[key]["value"] || "";
+ }
+ // Case list, we will render elements after the selected elements
+ if (this.data[key]["type"] == "text") {
+ this.data[key]["el"].textContent = this.data[key]["value"] || "";
+ }
  }
  }
 
+ // Show fetch state alert
  // type<str> : fetch, success, error
  updateAlert(type) {
  if (!type) return;
@@ -190,7 +213,7 @@ <h5 data-fetch-status class="text-lg mb-0 text-white dark:text-gray-300">
  }
  }
 
- new Plugin();
+ new SetupPlugin();
 </script>
 
 {% endblock %}