seekr-osint · cn1t · Aug 16, 2023 · Aug 16, 2023 · Aug 16, 2023 · Aug 16, 2023
diff --git a/web/css/dropdown.css b/web/css/dropdown.css
@@ -0,0 +1,107 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+.container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: var(--bg);
+}
+
+.dropdown {
+    position: relative;
+    box-shadow: var(--shadowPreset-3);
+    border-radius: 1rem;
+    background: var(--bg);
+    /* top: 50px; */
+    /* left: 45%; */
+    margin-top: 10px;
+    margin-left: 10px;
+    width: 17rem;
+    height: 4rem;
+}
+
+.dropdown::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    z-index: 1000;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #333;
+    border-top: 2px solid #fff;
+    border-right: 2px solid #fff;
+    transform: rotate(-45deg);
+    transition: 0.2s;
+    pointer-events: none;
+}
+
+.dropdown.active::before {
+    top: 22px;
+    transform: rotate(-225deg);
+}
+
+.dropdown input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    background: var(--bg);
+
+
+    font-size: 1.2em;
+    border: none;
+    outline: none;
+    box-shadow: 0.3rem 0.3rem 0.6rem var(--shadow-1), -0.2rem -0.2rem 0.5rem var(--shadow-2);
+    padding: 1.2rem 2rem;
+    border-radius: 1rem;
+}
+
+.dropdown .options {
+    font-size: 1.2em;
+    position: relative;
+    top: 70px;
+    width: 100%;
+    background: var(--bg);
+    overflow: hidden;
+    display: none;
+}
+
+.dropdown.active .options {
+    z-index: 9999;
+    display: block;
+
+    position: relative;
+    font-family: Arial;
+    margin-top: 0.5rem;
+    width: 100%;
+    height: auto;
+
+    padding: 0.4rem 0.8rem;
+    border: 0.1rem solid transparent;
+    cursor: pointer;
+    border-radius: 1rem;
+    box-shadow: 0.3rem 0.3rem 0.6rem var(--shadow-1), -0.2rem -0.2rem 0.5rem var(--shadow-2);
+}
+
+.dropdown .options div {
+    padding: 0.4rem 0.6rem;
+    border: 0.1rem solid transparent;
+    cursor: pointer;
+    border-radius: 0.1rem;
+    color: var(--textColor-1);
+}
+
+.dropdown .options div:hover {
+    background: var(--bg-bright);
+    color: var(--textColor-hover);
+}
diff --git a/web/css/guide.css b/web/css/guide.css
@@ -14,10 +14,7 @@ body {
   overflow: hidden;
 }
 
-.ww,
-.us,
-.ca,
-.uk {
+li {
   margin-bottom: 1rem;
   justify-self: center;
   width: auto;

diff --git a/web/css/style.css b/web/css/style.css
@@ -35,30 +35,26 @@ html {
   height: unset !important;
 }
 
-.gender-select,
-.ethnicity-select,
-.religion-select,
-.civilstatus-select,
 .dropdown-select {
   position: relative;
   font-family: Arial;
   margin-top: 0.5rem;
   width: 17rem;
 }
 
-.gender-select select,
-.ethnicity-select select,
-.religion-select select,
-.civilstatus-select select,
 .dropdown-select select {
   display: none;
   /*hide original SELECT element:*/
 }
 
+.country-select {
+  margin-top: 0 !important;
+}
+
 .select-selected {
   margin-bottom: 1rem;
   justify-self: center;
-  width: 20rem;
+  width: 17rem;
   height: 3rem;
   border-radius: 1rem;
   box-shadow: var(--shadowPreset-3);
@@ -72,7 +68,7 @@ html {
   position: absolute;
   content: "";
   top: 14px;
-  right: -3.5rem;
+  right: 0.5rem;
   width: 0;
   height: 0;
   border: 6px solid transparent;

diff --git a/web/dropdowntest.html b/web/dropdowntest.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Dropdown</title>
+    <link rel="stylesheet" href="./css/style.css">
+
+    <link rel="stylesheet" href="./css/dropdown.css">
+
+    <script type="module" src="./dist/ts/dropdown.js" defer></script>
+  </head>
+  <body>
+
+    <custom-dropdown options="test,hello,world" dropdown-id="test1"></custom-dropdown>
+
+    <custom-dropdown options="test2,heeqwello,woadrld" dropdown-id="test2"></custom-dropdown>
+
+
+    <button id="myButton">Get results</button>
+
+    <style>
+    </style>
+  </body>
+</html>
diff --git a/web/guide.html b/web/guide.html
@@ -19,8 +19,9 @@
     <link rel="stylesheet" href="./css/style.css">
     <link rel="stylesheet" href="./css/guide.css">
     <script type="module" src="./dist/ts/framework.js" defer></script>
-    <script type="module" src="./dist/ts/guide.js"></script>
-    <script type="module" src="./dist/ts/hotfix.js" defer></script>
+    <script type="module" src="./dist/ts/dropdown.js" defer></script>
+    <script type="module" src="./dist/ts/guide.js" defer></script>
+    <!-- <script type="module" src="./dist/ts/templates.js" defer></script> -->
 
     <script type="text/javascript" defer>
       // Check local storage for theme setting
@@ -31,19 +32,32 @@
     </script>
   </head>
   <body>
+    <!-- Templates -->
+    <template id="dropdown-template">
+      <div class="dropdown">
+        <div class="table">
+          <p class="tag"></p> <!-- Gender -->
+          <div class="dropdown-select">
+            <select>
+              <option></option> <!-- Select gender: -->
+            </select>
+          </div>
+        </div>
+      </div>
+    </template>
+
     <div class="dd-nav-bar-top"></div>
     <div class="dd-nav-bar">
-      <div class="country-select">
-        <select>
-          <option value="0">Select country:</option>
-          <option value="WW">WorldWide</option>
-          <option value="UK">United Kingdom</option>
-          <option value="US">United States</option>
-          <option value="CA">Canada</option>
-          <option value="SE">Sweden</option>
-          <option value="DE">Germany</option>
-        </select>
-      </div>
+
+    <custom-dropdown options="WorldWide,United Kingdom,United States,Canada,Sweden,Germany" dropdown-id="country"></custom-dropdown>
+      <!-- <custom-dropdown title="country" no-tag> -->
+      <!--   <custom-option>WorldWide</custom-option> -->
+      <!--   <custom-option>United Kingdom</custom-option> -->
+      <!--   <custom-option>United States</custom-option> -->
+      <!--   <custom-option>Canada</custom-option> -->
+      <!--   <custom-option>Sweden</custom-option> -->
+      <!--   <custom-option>Germany</custom-option> -->
+      <!-- </custom-dropdown> -->
 
       <div class="existing-info-form">
         <div class="form-option">
@@ -321,6 +335,12 @@
         <li class="de business">
           <a class="link-a" href="https://www.dastelefonbuch.de" target="_blank">DasTelefonbuch / Business Lookup</a>
         </li>
+        <li class="us name">
+          <a class="link-a" href="https://clustrmaps.com" target="_blank">Clustrmaps / Name Lookup</a>
+        </li>
+        <li class="us address">
+          <a class="link-a" href="https://clustrmaps.com" target="_blank">Clustrmaps / Address Lookup</a>
+        </li>
       </ul>
     </div>
   </body>

diff --git a/web/ts/dropdown.ts b/web/ts/dropdown.ts
@@ -0,0 +1,107 @@
+const dropdowns: Set<string> = new Set([]);
+
+
+class CustomDropdown extends HTMLElement {
+  constructor() {
+    super();
+    const id = this.getAttribute("dropdown-id") || ""
+    if (id == "") {
+      console.error("error no dropdown name")
+      return
+    } else if (dropdowns.has(id)) {
+      console.error("ID" + id + "already exsists");
+      return
+    }
+    dropdowns.add(id);
+
+    const options = this.getAttribute("options") || "";
+    if (options == "") {
+      console.error("error empty dropdown options")
+      dropdowns.delete(id)
+      return
+    }
+
+    const placeholder = this.getAttribute("placeholder") || "Select Item";
+    this.attachShadow({ mode: "open" });
+
+    this.shadowRoot!.innerHTML = `
+      <link rel="stylesheet" href="./css/style.css">
+      <link rel="stylesheet" href="./css/dropdown.css">
+
+      <div class="dropdown">
+        <input class="text-box" type="text" placeholder="${placeholder}" readonly>
+        <div class="options">
+          ${divTemplate(options)}
+        </div>
+      </div>
+    `;
+
+    const dropdown = this.shadowRoot!.querySelector(".dropdown") as HTMLElement;
+    if (dropdown) {
+      dropdown.onclick = function() {
+      const allDropdowns = document.querySelectorAll("custom-dropdown");
+      console.log(allDropdowns);
+
+      allDropdowns.forEach((currentDropdown) => {
+      const shadowRoot = currentDropdown.shadowRoot;
+      if (shadowRoot) {
+        const dropdownElement = shadowRoot.querySelector(".dropdown");
+        if (dropdownElement && dropdownElement != dropdown) { // don't remove on teh dropdown the user clicked on
+          dropdownElement.classList.remove("active");
+        }
+      }
+      });
+        dropdown.classList.toggle("active");
+      };
+    }
+
+    const internalDivs = this.shadowRoot!.querySelectorAll(".dropdown-option");
+    internalDivs.forEach((internalDiv) => {
+      internalDiv.addEventListener("click", () => {
+        const optionName = internalDiv.textContent || "";
+        const textBox = this.shadowRoot!.querySelector(".text-box") as HTMLInputElement;
+        if (textBox) {
+          textBox.value = optionName;                  
+        }
+        this.setAttribute("value", optionName);
+        this.dispatchEvent(new Event("change"));
+      });
+    });
+  }
+}
+
+customElements.define("custom-dropdown", CustomDropdown);
+
+function divTemplate(words: string): string {
+  const wordArray = words.split(",").map(word => word.trim());
+
+  let output = "";
+
+  wordArray.forEach(word => {
+    output += `<div class="dropdown-option">${word}</div>`;
+
+  });
+
+  return output;
+}
+
+function getDropdown(id: string): Element | null {
+  if (!dropdowns.has(id)) {
+    console.error("Error: no dropdown with this name: " + id)
+    return null
+  }
+  return document.querySelector(`custom-dropdown[dropdown-id="${id}"]`);
+}
+
+function getValue(id: string): string {
+  if (!dropdowns.has(id)) {
+    console.error("Error: no dropdown with this name: " + id)
+    return ""
+  }
+  const customOptionElement = getDropdown(id);
+
+  return customOptionElement!.getAttribute("value") || ""
+}
+
+
+export { getValue, getDropdown };