@digital-ai/dot-illustrations 2.0.21 → 2.0.22

package/demo/script.js

@@ -1,3 +1,7 @@
+// Make currentTab and root globally accessible
+const root = document.documentElement;
+let currentTab = 'all';
+
 function myFunction() {
   var input, filter, divs, i, div, txtValue;
   input = document.getElementById('myInput');
@@ -15,114 +19,6 @@ function myFunction() {
   }
 }
 
-function doMagic() {
-  const list = document.getElementById("illustration-list");
-  const illustrations = [
-  // Global arrange from A-Z
-    "add-new",
-    "ai",
-    "add-new-grid",
-    "add-team",
-    "add-user",
-    "assets",
-    "analysis-circle",
-    "community",
-    "chart",
-    "custom-dashboards",
-    "dependency-down",
-    "dependency-up",
-    "disconnected",
-    "done",
-    "dora-metrics-circle",
-    "download",
-    "empty",
-    "error-fourhundredfour",
-    "error-fivehundred",
-    "error-fivehundredthree",
-    "error-fourhundredthree",
-    "favorite",
-    "features",
-    "folder-versioning",
-    "forbiden-access",
-    "filter-empty",
-    "launch",
-    "no-files",
-    "no-filters",
-    "nothing-defined",
-    "password-token",
-    "protection-in-progress",
-    "reports",
-    "scan-document",
-    "survey",
-    "user",
-    "ui-ux-improvements",
-    "upload",
-    "work-item",
-    "workflows-main",
-    "research",
-    "commitrepo",
-
-
-  // Dashboards arrange from A-Z
-    "analysis",
-    "automation",
-    "burn-down",
-    "burn-up",
-    "change-credit-score",
-    "change-data-quality",
-    "change-executive",
-    "change-impact-detection",
-    "change-impact-hotspots",
-    "change-failure-factors",
-    "change-failure-prediction",
-    "CRP-failure-prediction-monitoring",
-    "custom",
-    "defect",
-    "dependency",
-    "dora",
-    "executive",
-    "change-impact",
-    "item",
-    "late-task",
-    "onboarding",
-    "data-extraction",
-    "workflow"
-  ];
-  illustrations.forEach(illustration => {
-      const div = document.createElement("div");
-      div.setAttribute("class", "copy-container");
-      div.innerHTML = `
-          <img class="${illustration} light"></img>
-            <!-- Inner div wrapping only the buttons -->
-            <!-- Button for copying ID -->
-            <div class="button-group">
-              <button id="CopyID" class="button" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)"
-                onclick="copyText(this)">Copy ID
-                <span class="tooltiptext">Copy ID</span>
-              </button>
-              <!-- Button for copying Code -->
-              <button class="button" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyCode(this)">
-                Copy Code
-                <span class="tooltiptext">Copy Code</span>
-              </button>
-            </div>
-          <span  class="iconID">${illustration}</span>
-                    <!-- Code block to be copied -->
-              <pre class="codeBlock">
-                <code class="codeBlock">
-                  <span class="dot-illustration">
-                    <img class="${illustration} light"/>
-                  </span>
-                </code>
-              </pre>
-      `;
-      list.appendChild(div);
-  });
-}
-
-document.addEventListener("DOMContentLoaded", doMagic);
-
-
 function showTooltip(button) {
   var tooltip = button.querySelector('.tooltiptext');
   tooltip.style.visibility = 'visible';
@@ -133,59 +29,57 @@ function hideTooltip(button) {
   tooltip.style.visibility = 'hidden';
 }
 
-function copyCode(button) {
+// Toast logic
+function showToast(message) {
+  let toast = document.getElementById('toast-message');
+  if (!toast) {
+    toast = document.createElement('div');
+    toast.id = 'toast-message';
+    toast.className = 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-gray-900 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-2 text-base animate-fade-in';
+    document.body.appendChild(toast);
+  }
+  toast.textContent = message;
+  toast.style.display = 'flex';
+  clearTimeout(window._toastTimeout);
+  window._toastTimeout = setTimeout(() => {
+    toast.style.display = 'none';
+  }, 2000);
+}
+
+// Patch copyCode and copyText to show toast
+const origCopyCode = window.copyCode;
+window.copyCode = function(button) {
   // Find the closest div with class 'copy-container'
   var parentDiv = button.closest('.copy-container');
-
-  // Find the code block element within the same parent div
   var copyCode = parentDiv.querySelector('.codeBlock code');
-
-  // Get the HTML content inside the code block as a string
   var codeToCopy = copyCode.innerHTML;
-
-
-
-  // Use the Clipboard API to copy the text
   navigator.clipboard.writeText(codeToCopy).then(function() {
-    // Show the tooltip with the copied code message
     var tooltip = button.querySelector('.tooltiptext');
     tooltip.innerHTML = "Copied code block";
     tooltip.style.visibility = 'visible';
-
-    // Reset the tooltip back to "Copy Code" after 2 seconds
     setTimeout(function() {
-      tooltip.innerHTML = "Copy Code:";
+      tooltip.innerHTML = "Copy Code";
       tooltip.style.visibility = 'hidden';
     }, 2000);
-
+    showToast('Copied code: ' + codeToCopy);
   }, function(err) {
     console.error('Failed to copy code block: ', err);
   });
 }
-
-function copyText(button) {
-  // Find the closest div with class 'copy-container'
+const origCopyText = window.copyText;
+window.copyText = function(button) {
   var parentDiv = button.closest('.copy-container');
-
-  // Find the span with the class 'iconID'
   var copyText = parentDiv.querySelector('.iconID');
-
-  // Get the text content of the span
   var textToCopy = copyText.textContent;
-
-  // Use the Clipboard API to copy the text
   navigator.clipboard.writeText(textToCopy).then(function() {
-    // Show the tooltip with the copied ID message
     var tooltip = button.querySelector('.tooltiptext');
     tooltip.innerHTML = "Copied: " + textToCopy;
     tooltip.style.visibility = 'visible';
-
-    // Reset the tooltip back to "Copy ID" after 2 seconds
     setTimeout(function() {
       tooltip.innerHTML = "Copy ID";
       tooltip.style.visibility = 'hidden';
     }, 2000);
-
+    showToast('Copied ID: ' + textToCopy);
   }, function(err) {
     console.error('Failed to copy text: ', err);
   });
@@ -222,3 +116,260 @@ button.addEventListener('click', () => {
         button.textContent = 'Switch to dark mode';
     }
 });
+
+// --- THEME SWITCHER & TABS ---
+document.addEventListener('DOMContentLoaded', () => {
+  // Theme Switcher
+  const themeToggle = document.getElementById('theme-toggle');
+  const themeIcon = document.getElementById('theme-icon');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  function setTheme(dark) {
+    const imgs = document.querySelectorAll('img');
+    if (dark) {
+      root.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+      themeIcon.innerHTML = `<svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z' /></svg>`;
+      imgs.forEach(img => {
+        img.classList.remove('light');
+        img.classList.add('dark');
+      });
+    } else {
+      root.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+      themeIcon.innerHTML = `<svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v1m0 16v1m8.66-13.66l-.71.71M4.05 19.07l-.71.71M21 12h-1M4 12H3m16.66 6.66l-.71-.71M4.05 4.93l-.71-.71M16 12a4 4 0 11-8 0 4 4 0 018 0z' /></svg>`;
+      imgs.forEach(img => {
+        img.classList.remove('dark');
+        img.classList.add('light');
+      });
+    }
+  }
+
+  // Initial theme
+  const savedTheme = localStorage.getItem('theme');
+  setTheme(savedTheme === 'dark' || (!savedTheme && prefersDark));
+
+  themeToggle.addEventListener('click', () => {
+    setTheme(!root.classList.contains('dark'));
+  });
+
+  // --- TABS ---
+  const mainTabs = document.querySelectorAll('.tab-btn');
+  const floatingTabs = document.querySelectorAll('.floating-tab');
+
+  function setTab(tab) {
+    currentTab = tab;
+    // Update main tabs
+    mainTabs.forEach(t => {
+      t.classList.remove('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+      t.classList.add('text-gray-700', 'dark:text-gray-300');
+      t.setAttribute('aria-selected', 'false');
+      if (t.dataset.tab === tab) {
+        t.classList.add('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+        t.classList.remove('text-gray-700', 'dark:text-gray-300');
+        t.setAttribute('aria-selected', 'true');
+      }
+    });
+    // Update floating tabs
+    floatingTabs.forEach(t => {
+      t.classList.remove('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+      t.classList.add('text-gray-700', 'dark:text-gray-300');
+      t.setAttribute('aria-selected', 'false');
+      if (t.dataset.tab === tab) {
+        t.classList.add('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+        t.classList.remove('text-gray-700', 'dark:text-gray-300');
+        t.setAttribute('aria-selected', 'true');
+      }
+    });
+    renderIllustrations();
+  }
+
+  mainTabs.forEach(tab => {
+    tab.addEventListener('click', function() {
+      setTab(this.dataset.tab);
+    });
+  });
+  floatingTabs.forEach(tab => {
+    tab.addEventListener('click', function() {
+      setTab(this.dataset.tab);
+    });
+  });
+
+  // --- ILLUSTRATION DATA ---
+  const globalList = [
+    "add-new","ai","add-new-grid","add-team","add-user","assets","analysis-circle","community","chart","custom-dashboards","dependency-down","dependency-up","disconnected","done","dora-metrics-circle","download","empty","error-fourhundredfour","error-fivehundred","error-fivehundredthree","error-fourhundredthree","favorite","features","folder-versioning","forbiden-access","filter-empty","launch","no-files","no-filters","nothing-defined","password-token","protection-in-progress","reports","scan-document","survey","user","ui-ux-improvements","upload","work-item","workflows-main","research","commitrepo"
+  ];
+  const dashboardsList = [
+    "analysis","automation","burn-down","burn-up","change-credit-score","change-data-quality","change-executive","change-impact-detection","change-impact-hotspots","change-failure-factors","change-failure-prediction","CRP-failure-prediction-monitoring","custom","defect","dependency","dora","executive","change-impact","item","late-task","onboarding","data-extraction","workflow"
+  ];
+  const illustrations = [...globalList, ...dashboardsList, "my-new-illustration"];
+
+  // --- FAVOURITES LOGIC ---
+  function getFavourites() {
+    try {
+      return JSON.parse(localStorage.getItem('dot-illustration-favourites') || '[]');
+    } catch {
+      return [];
+    }
+  }
+  function setFavourites(favs) {
+    localStorage.setItem('dot-illustration-favourites', JSON.stringify(favs));
+  }
+  window.toggleFavourite = function(id) {
+    let favs = getFavourites();
+    if (favs.includes(id)) {
+      favs = favs.filter(f => f !== id);
+    } else {
+      favs.push(id);
+    }
+    setFavourites(favs);
+    renderIllustrations();
+  };
+
+  function renderIllustrations() {
+    const list = document.getElementById("illustration-list");
+    list.innerHTML = "";
+    let toShow = [];
+    if (currentTab === 'all') {
+      toShow = illustrations;
+    } else if (currentTab === 'global') {
+      toShow = globalList;
+    } else if (currentTab === 'dashboards') {
+      toShow = dashboardsList;
+    } else if (currentTab === 'favourites') {
+      const favs = getFavourites();
+      toShow = illustrations.filter(id => favs.includes(id));
+    }
+    const filter = (document.getElementById('myInput')?.value || '').toUpperCase();
+    toShow = toShow.filter(id => id.toUpperCase().includes(filter));
+    if (toShow.length === 0) {
+      list.innerHTML = '<div class="col-span-full text-center text-gray-500 dark:text-gray-400">No illustrations found.</div>';
+      return;
+    }
+    const favs = getFavourites();
+    const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
+    toShow.forEach(illustration => {
+      let categoryClass = "";
+      if (globalList.includes(illustration)) categoryClass = "global-illustration";
+      else if (dashboardsList.includes(illustration)) categoryClass = "dashboards-illustration";
+      const isFav = favs.includes(illustration);
+      const div = document.createElement("div");
+      div.setAttribute("class", "copy-container relative group flex flex-col items-center justify-between bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-2 md:p-3 transition-transform duration-200 hover:scale-105 hover:shadow-2xl h-[302px] w-full justify-center");
+      div.innerHTML = `
+        <button class="absolute top-2 right-2 z-10 p-1 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-yellow-100 dark:hover:bg-yellow-300 transition" title="Toggle favourite" onclick="event.stopPropagation(); window.toggleFavourite && window.toggleFavourite('${illustration}')">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="${isFav ? 'gold' : 'none'}" viewBox="0 0 24 24" stroke="gold">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/>
+          </svg>
+        </button>
+        <div class="flex-1 flex flex-col justify-center items-center">
+          <span class="dot-illustration">
+            <img src="./svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/>
+          </span>
+          <span class="iconID block text-center text-base font-medium text-gray-800 dark:text-gray-200 my-2">${illustration}</span>
+        </div>
+        <div class="button-group flex flex-row items-center justify-center gap-2 mt-2">
+          <button id="CopyID" class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyText(this)">
+            Copy ID
+            <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy ID</span>
+          </button>
+          <button class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyCode(this)">
+            Copy Code
+            <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Code</span>
+          </button>
+        </div>
+        <pre class="codeBlock"><code class="codeBlock"><span class="dot-illustration"><img src="./svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/></span></code></pre>
+      `;
+      list.appendChild(div);
+    });
+  }
+
+  // Search input
+  document.getElementById('myInput').addEventListener('input', renderIllustrations);
+  document.getElementById('floatingInput').addEventListener('input', () => {
+    document.getElementById('myInput').value = document.getElementById('floatingInput').value;
+    renderIllustrations();
+  });
+
+  // Clear both search inputs on load
+  document.getElementById('myInput').value = '';
+  document.getElementById('floatingInput').value = '';
+
+  // Set initial tab state to 'all' and update UI (this will also render illustrations)
+  setTab('all');
+
+  // --- FLOATING BAR LOGIC ---
+  const floatingBar = document.getElementById('floating-bar');
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 80) {
+      floatingBar.classList.add('floating-bar-visible');
+    } else {
+      floatingBar.classList.remove('floating-bar-visible');
+    }
+  });
+});
+
+// --- FUZZY SEARCH SUGGESTIONS ---
+const searchInput = document.getElementById('myInput');
+const suggestionsBox = document.getElementById('search-suggestions');
+
+function fuzzyMatch(str, query) {
+  // Simple fuzzy: all query chars in order in str
+  query = query.toLowerCase();
+  str = str.toLowerCase();
+  let qIdx = 0;
+  for (let s = 0; s < str.length && qIdx < query.length; s++) {
+    if (str[s] === query[qIdx]) qIdx++;
+  }
+  return qIdx === query.length;
+}
+
+function getSuggestions(query) {
+  if (!query) return [];
+  // Use current tab's list
+  let pool = [];
+  if (currentTab === 'all') pool = illustrations;
+  else if (currentTab === 'global') pool = globalList;
+  else if (currentTab === 'dashboards') pool = dashboardsList;
+  else if (currentTab === 'favourites') pool = getFavourites();
+  // Fuzzy match, sort by closeness (shorter index of first match, then length)
+  let scored = pool
+    .map(id => {
+      let idx = id.toLowerCase().indexOf(query.toLowerCase());
+      let fuzzy = fuzzyMatch(id, query);
+      return fuzzy ? {id, idx: idx === -1 ? 999 : idx, len: id.length} : null;
+    })
+    .filter(Boolean)
+    .sort((a, b) => a.idx - b.idx || a.len - b.len)
+    .slice(0, 7);
+  return scored.map(s => s.id);
+}
+
+function showSuggestions() {
+  const val = searchInput.value.trim();
+  const suggestions = getSuggestions(val);
+  if (!val || suggestions.length === 0) {
+    suggestionsBox.classList.add('hidden');
+    suggestionsBox.innerHTML = '';
+    return;
+  }
+  suggestionsBox.innerHTML = suggestions.map(s => `<div class="px-4 py-2 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900 transition" data-suggestion="${s}">${s}</div>`).join('');
+  suggestionsBox.classList.remove('hidden');
+}
+
+searchInput.addEventListener('input', () => {
+  renderIllustrations();
+  showSuggestions();
+});
+searchInput.addEventListener('focus', showSuggestions);
+searchInput.addEventListener('blur', () => setTimeout(() => suggestionsBox.classList.add('hidden'), 150));
+suggestionsBox.addEventListener('mousedown', e => {
+  if (e.target.dataset.suggestion) {
+    searchInput.value = e.target.dataset.suggestion;
+    renderIllustrations();
+    suggestionsBox.classList.add('hidden');
+  }
+});
+
+// Remove classic grid rendering to avoid conflicts with tabbed UI
+// document.addEventListener("DOMContentLoaded", doMagic);
+