From b5b8eebc0a39b2b339ca4a8e025bf7cb8d7a73a7 Mon Sep 17 00:00:00 2001 From: Nite <67828948+Niteletsplay@users.noreply.github.com> Date: Wed, 16 Aug 2023 15:49:31 +0200 Subject: [PATCH 01/12] add template.js --- web/guide.html | 1 + 1 file changed, 1 insertion(+) diff --git a/web/guide.html b/web/guide.html index 5bdf26fb..b2c6a1f5 100644 --- a/web/guide.html +++ b/web/guide.html @@ -20,6 +20,7 @@ + + + +
-
- -
+ + Select country: + WorldWide + United Kingdom + United States + Canada + Sweden + Germany +
diff --git a/web/ts/guide.ts b/web/ts/guide.ts index ab3dda18..12bb1b38 100644 --- a/web/ts/guide.ts +++ b/web/ts/guide.ts @@ -213,7 +213,10 @@ function preListHandler() { } } -document.querySelector(".select-selected")!.addEventListener("DOMSubtreeModified", preListHandler); +const foo = document.querySelector("body > div.dd-nav-bar > custom-dropdown[title='country']")!; +const selectedcountry = foo.shadowRoot!.querySelector("div > div > div > div.select-selected")!; + +selectedcountry!.addEventListener("DOMSubtreeModified", preListHandler); checkboxName.addEventListener('change', preListHandler); diff --git a/web/ts/templates.ts b/web/ts/templates.ts index af72ca6c..df5becf6 100644 --- a/web/ts/templates.ts +++ b/web/ts/templates.ts @@ -21,7 +21,10 @@ class CustomDropdown extends HTMLElement { // Get dropdown title attribute and set initial values const dropdownTitleAttr = this.getAttribute("title")!; const dropdownTitle = dropdownTitleAttr.charAt(0).toUpperCase() + dropdownTitleAttr.slice(1) + ":"; - dropdownTitleElement.textContent = dropdownTitle; + + if (!this.hasAttribute("no-tag")) { + dropdownTitleElement.textContent = dropdownTitle; + } // Set initial option for select element const selElmntTag = selElmnt.children[0] as HTMLOptionElement; @@ -43,6 +46,10 @@ class CustomDropdown extends HTMLElement { const labelText = selElmnt.options[0].innerHTML; selectSelectedDiv.innerHTML = labelText; + if (this.getAttribute("title") == "country") { + node.classList.add("country-select"); + } + const b = document.createElement("div"); b.className = "select-items select-hide"; From c76feb00409cda13fac4c7eaac59799eef1c07b3 Mon Sep 17 00:00:00 2001 From: Nite <67828948+Niteletsplay@users.noreply.github.com> Date: Wed, 16 Aug 2023 18:51:54 +0200 Subject: [PATCH 03/12] fix small thing --- web/css/guide.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/web/css/guide.css b/web/css/guide.css index 5f64fb70..b25343ba 100644 --- 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; From 11e7d88859440d00cb1dea862a1e54dd228f2e9e Mon Sep 17 00:00:00 2001 From: Nite <67828948+Niteletsplay@users.noreply.github.com> Date: Thu, 17 Aug 2023 16:15:47 +0200 Subject: [PATCH 04/12] Add clustrmaps --- web/guide.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/guide.html b/web/guide.html index d1cb3706..e79b5eb1 100644 --- a/web/guide.html +++ b/web/guide.html @@ -333,6 +333,12 @@
  • DasTelefonbuch / Business Lookup
    • +
  • + Clustrmaps / Name Lookup +
    • +
  • + Clustrmaps / Address Lookup +
    • From ee860fa726cd8a62d1e3fe5c542547bc8560a0f0 Mon Sep 17 00:00:00 2001 From: Nite <67828948+Niteletsplay@users.noreply.github.com> Date: Fri, 18 Aug 2023 16:09:56 +0200 Subject: [PATCH 05/12] Remove 1 option --- web/guide.html | 1 - 1 file changed, 1 deletion(-) diff --git a/web/guide.html b/web/guide.html index e79b5eb1..f7aae5a5 100644 --- a/web/guide.html +++ b/web/guide.html @@ -48,7 +48,6 @@
    - Select country: WorldWide United Kingdom United States From 37f43142ad0de74aeef600a36d202cca3e5060e1 Mon Sep 17 00:00:00 2001 From: Nite <67828948+Niteletsplay@users.noreply.github.com> Date: Fri, 18 Aug 2023 16:20:00 +0200 Subject: [PATCH 06/12] Comments --- web/ts/guide.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/ts/guide.ts b/web/ts/guide.ts index 12bb1b38..228314fd 100644 --- a/web/ts/guide.ts +++ b/web/ts/guide.ts @@ -213,11 +213,16 @@ function preListHandler() { } } + +// I need this to work with the shadow dom const foo = document.querySelector("body > div.dd-nav-bar > custom-dropdown[title='country']")!; const selectedcountry = foo.shadowRoot!.querySelector("div > div > div > div.select-selected")!; selectedcountry!.addEventListener("DOMSubtreeModified", preListHandler); + + + checkboxName.addEventListener('change', preListHandler); checkboxAddress.addEventListener('change', preListHandler); From 6f50c5fb58697e057de8789e8b1a95bef63cc61c Mon Sep 17 00:00:00 2001 From: Niteletsplay Date: Sat, 19 Aug 2023 23:38:28 +0200 Subject: [PATCH 07/12] this is torture --- web/ts/guide.ts | 11 +---------- web/ts/templates.ts | 10 ++++++++++ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/web/ts/guide.ts b/web/ts/guide.ts index 228314fd..e368168b 100644 --- a/web/ts/guide.ts +++ b/web/ts/guide.ts @@ -214,15 +214,6 @@ function preListHandler() { } -// I need this to work with the shadow dom -const foo = document.querySelector("body > div.dd-nav-bar > custom-dropdown[title='country']")!; -const selectedcountry = foo.shadowRoot!.querySelector("div > div > div > div.select-selected")!; - -selectedcountry!.addEventListener("DOMSubtreeModified", preListHandler); - - - - checkboxName.addEventListener('change', preListHandler); checkboxAddress.addEventListener('change', preListHandler); @@ -239,4 +230,4 @@ checkboxUsername.addEventListener('change', preListHandler); checkboxDomain.addEventListener('change', preListHandler); -export {}; \ No newline at end of file +export { listHandler }; \ No newline at end of file diff --git a/web/ts/templates.ts b/web/ts/templates.ts index df5becf6..9850ac34 100644 --- a/web/ts/templates.ts +++ b/web/ts/templates.ts @@ -1,3 +1,5 @@ +import { listHandler } from "./guide.js"; + class CustomDropdown extends HTMLElement { constructor() { super(); @@ -93,6 +95,14 @@ class CustomDropdown extends HTMLElement { s.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); + + const selectSelected = this.shadowRoot!.querySelector("div > div > div > div.select-selected")!; + + selectSelected.addEventListener("DOMSubtreeModified", function () { + if (selectSelected && selectSelected.innerHTML != "") { + listHandler(); + } + }); } } From 628fedbbe8e56bedd494a2eb7092c47fd4db5f53 Mon Sep 17 00:00:00 2001 From: 9glenda Date: Sun, 20 Aug 2023 05:54:37 +0200 Subject: [PATCH 08/12] added a new dropdown implementation written from scratch and simple to use The CSS still has to be changed but the javascript is about done --- web/css/dropdown.css | 87 ++++++++++++++++++++++++++++++++++++++++++ web/dropdowntest.html | 26 +++++++++++++ web/ts/dropdown.ts | 88 +++++++++++++++++++++++++++++++++++++++++++ web/ts/guide.ts | 2 +- web/ts/templates.ts | 2 +- 5 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 web/css/dropdown.css create mode 100644 web/dropdowntest.html create mode 100644 web/ts/dropdown.ts diff --git a/web/css/dropdown.css b/web/css/dropdown.css new file mode 100644 index 00000000..aaddaed1 --- /dev/null +++ b/web/css/dropdown.css @@ -0,0 +1,87 @@ +*{ + 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: #fafafa; +} + +.dropdown { + position: relative; + top: 50px; + left: 45%; + margin-top: 15px; + width: 300px; + height: 50px; +} + +.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.5s; + 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: #fff; + font-size: 1.2em; + border: none; + outline: none; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + padding: 12px 20px; + border-radius: 10px; +} + +.dropdown .options { + position: absolute; + top: 70px; + width: 100%; + background: #fff; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + border-radius: 10px; + overflow: hidden; + display: none; +} + +.dropdown.active .options { + z-index: 9999; + display: block; +} + +.dropdown .options div { + padding: 12px 20px; + cursor: pointer; +} + +.dropdown .options div:hover { + background: #62baea; + color: #fff; +} diff --git a/web/dropdowntest.html b/web/dropdowntest.html new file mode 100644 index 00000000..48fead1f --- /dev/null +++ b/web/dropdowntest.html @@ -0,0 +1,26 @@ + + + + + + Custom Dropdown + + + + + + + + + test1 + + test2 + + + + + + + + diff --git a/web/ts/dropdown.ts b/web/ts/dropdown.ts new file mode 100644 index 00000000..74310245 --- /dev/null +++ b/web/ts/dropdown.ts @@ -0,0 +1,88 @@ +const dropdowns: Set = new Set([]); + + +class CustomOption extends HTMLElement { + constructor() { + super(); + const id = this.textContent || "" + if (id == "") { + console.log("error no dropdown name") + return + } + this.setAttribute('id', id); + dropdowns.add(id); + + const options = this.getAttribute('options') || ""; + if (options == "") { + console.log("error empty dropdown options") + return + } + + const placeholder = this.getAttribute('placeholder') || "Select Item"; + this.attachShadow({ mode: 'open' }); + + this.shadowRoot!.innerHTML = ` + + + +
    + +
    + ${divTemplate(options)} +
    +
    + `; + + const dropdown = this.shadowRoot!.querySelector(".dropdown") as HTMLElement; + if (dropdown) { + dropdown.onclick = function() { + 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); + }); + }); + } +} + +customElements.define('custom-dropdown', CustomOption); + +function divTemplate(words: string): string { + const wordArray = words.split(',').map(word => word.trim()); + + let output = ''; + + wordArray.forEach(word => { + output += `
    ${word}
    `; + + }); + + return output; +} + +const button = document.getElementById('myButton'); + +button!.addEventListener('click', function() { + console.log(getValue("test1")); +}); + +function getValue(id: string): string { + if (!dropdowns.has(id)) { + console.log("Error: no dropdown with this name") + } + const customOptionElement = document.querySelector(`custom-dropdown#${id}`); + + return customOptionElement!.getAttribute("value") || "" +} + + +export { getValue }; diff --git a/web/ts/guide.ts b/web/ts/guide.ts index e368168b..96e6a0d4 100644 --- a/web/ts/guide.ts +++ b/web/ts/guide.ts @@ -230,4 +230,4 @@ checkboxUsername.addEventListener('change', preListHandler); checkboxDomain.addEventListener('change', preListHandler); -export { listHandler }; \ No newline at end of file +export { listHandler }; diff --git a/web/ts/templates.ts b/web/ts/templates.ts index 9850ac34..2a3284ac 100644 --- a/web/ts/templates.ts +++ b/web/ts/templates.ts @@ -129,4 +129,4 @@ function closeAllSelect(elmnt: HTMLElement) { selectItemsElements[selectItemsElementsIndex].classList.add("select-hide"); } } -} \ No newline at end of file +} From 274e0f6d58dd899ed6d060699902985ec9544f46 Mon Sep 17 00:00:00 2001 From: Nite <67828948+Niteletsplay@users.noreply.github.com> Date: Sun, 20 Aug 2023 20:46:02 +0200 Subject: [PATCH 09/12] fix ts error and speed up anim --- web/css/dropdown.css | 2 +- web/dropdowntest.html | 29 ++++++++++++++--------------- web/ts/dropdown.ts | 2 +- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/web/css/dropdown.css b/web/css/dropdown.css index aaddaed1..b818e2eb 100644 --- a/web/css/dropdown.css +++ b/web/css/dropdown.css @@ -35,7 +35,7 @@ border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); - transition: 0.5s; + transition: 0.2s; pointer-events: none; } diff --git a/web/dropdowntest.html b/web/dropdowntest.html index 48fead1f..844e36c6 100644 --- a/web/dropdowntest.html +++ b/web/dropdowntest.html @@ -1,26 +1,25 @@ - - - - Custom Dropdown + + + + Custom Dropdown - - - + + + - test1 + test1 - test2 + test2 - - - - - + + + + \ No newline at end of file diff --git a/web/ts/dropdown.ts b/web/ts/dropdown.ts index 74310245..1973bcb4 100644 --- a/web/ts/dropdown.ts +++ b/web/ts/dropdown.ts @@ -85,4 +85,4 @@ function getValue(id: string): string { } -export { getValue }; +export { getValue }; \ No newline at end of file From efb5ec0e203cd413b66bd213e6c4e6d6af40825f Mon Sep 17 00:00:00 2001 From: 9glenda Date: Mon, 21 Aug 2023 19:23:06 +0200 Subject: [PATCH 10/12] added event listener "change" --- web/dropdowntest.html | 6 ++--- web/ts/dropdown.ts | 59 ++++++++++++++++++++++++++++--------------- 2 files changed, 42 insertions(+), 23 deletions(-) diff --git a/web/dropdowntest.html b/web/dropdowntest.html index 844e36c6..b2165b7b 100644 --- a/web/dropdowntest.html +++ b/web/dropdowntest.html @@ -12,9 +12,9 @@ - test1 + - test2 + @@ -22,4 +22,4 @@ - \ No newline at end of file + diff --git a/web/ts/dropdown.ts b/web/ts/dropdown.ts index 1973bcb4..c74ef1f2 100644 --- a/web/ts/dropdown.ts +++ b/web/ts/dropdown.ts @@ -1,30 +1,34 @@ const dropdowns: Set = new Set([]); -class CustomOption extends HTMLElement { +class CustomDropdown extends HTMLElement { constructor() { super(); - const id = this.textContent || "" + const id = this.getAttribute("dropdown-id") || "" if (id == "") { - console.log("error no dropdown name") + console.error("error no dropdown name") + return + } else if (dropdowns.has(id)) { + console.error("ID" + id + "already exsists"); return } - this.setAttribute('id', id); dropdowns.add(id); - const options = this.getAttribute('options') || ""; + const options = this.getAttribute("options") || ""; if (options == "") { - console.log("error empty dropdown options") + console.error("error empty dropdown options") + dropdowns.delete(id) return } - const placeholder = this.getAttribute('placeholder') || "Select Item"; - this.attachShadow({ mode: 'open' }); + const placeholder = this.getAttribute("placeholder") || "Select Item"; + this.attachShadow({ mode: "open" }); this.shadowRoot!.innerHTML = ` + ${id}:
    @@ -40,26 +44,27 @@ class CustomOption extends HTMLElement { }; } - const internalDivs = this.shadowRoot!.querySelectorAll('.dropdown-option'); + const internalDivs = this.shadowRoot!.querySelectorAll(".dropdown-option"); internalDivs.forEach((internalDiv) => { - internalDiv.addEventListener('click', () => { - const optionName = internalDiv.textContent || ''; + 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.setAttribute("value", optionName); + this.dispatchEvent(new Event("change")); }); }); } } -customElements.define('custom-dropdown', CustomOption); +customElements.define("custom-dropdown", CustomDropdown); function divTemplate(words: string): string { - const wordArray = words.split(',').map(word => word.trim()); + const wordArray = words.split(",").map(word => word.trim()); - let output = ''; + let output = ""; wordArray.forEach(word => { output += `
    ${word}
    `; @@ -68,21 +73,35 @@ function divTemplate(words: string): string { return output; } +const button = document.querySelector("#myButton"); + +button!.addEventListener("click", function() { + console.log(getValue("test1")); + }); -const button = document.getElementById('myButton'); +const d = getDropdown("test1") -button!.addEventListener('click', function() { +d!.addEventListener("change", function() { console.log(getValue("test1")); }); +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.log("Error: no dropdown with this name") + console.error("Error: no dropdown with this name: " + id) + return "" } - const customOptionElement = document.querySelector(`custom-dropdown#${id}`); + const customOptionElement = getDropdown(id); return customOptionElement!.getAttribute("value") || "" } -export { getValue }; \ No newline at end of file +export { getValue, getDropdown }; From bbbf9586758f556c24444b86a46e707f9ffb6f46 Mon Sep 17 00:00:00 2001 From: 9glenda Date: Mon, 21 Aug 2023 19:52:23 +0200 Subject: [PATCH 11/12] close dropdowns in new one is open --- web/ts/dropdown.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/web/ts/dropdown.ts b/web/ts/dropdown.ts index c74ef1f2..8bd5c0dc 100644 --- a/web/ts/dropdown.ts +++ b/web/ts/dropdown.ts @@ -40,6 +40,18 @@ class CustomDropdown extends HTMLElement { 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"); }; } From faad4a45eabcff000ee5ac0a7ef56a65847bce04 Mon Sep 17 00:00:00 2001 From: 9glenda Date: Thu, 24 Aug 2023 03:27:10 +0200 Subject: [PATCH 12/12] new dropdown code in guide. I HATE CSS!!!!!!!! --- web/css/dropdown.css | 54 ++++++++++++++++++++++++++++++-------------- web/guide.html | 22 ++++++++++-------- web/ts/dropdown.ts | 12 ---------- web/ts/guide.ts | 30 ++++++------------------ 4 files changed, 56 insertions(+), 62 deletions(-) diff --git a/web/css/dropdown.css b/web/css/dropdown.css index b818e2eb..4db8db92 100644 --- a/web/css/dropdown.css +++ b/web/css/dropdown.css @@ -11,16 +11,20 @@ display: flex; justify-content: center; align-items: flex-start; - background: #fafafa; + background-color: var(--bg); } .dropdown { position: relative; - top: 50px; - left: 45%; - margin-top: 15px; - width: 300px; - height: 50px; + 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 { @@ -51,22 +55,23 @@ width: 100%; height: 100%; cursor: pointer; - background: #fff; + background: var(--bg); + + font-size: 1.2em; border: none; outline: none; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); - padding: 12px 20px; - border-radius: 10px; + 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 { - position: absolute; + font-size: 1.2em; + position: relative; top: 70px; width: 100%; - background: #fff; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); - border-radius: 10px; + background: var(--bg); overflow: hidden; display: none; } @@ -74,14 +79,29 @@ .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: 12px 20px; + 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: #62baea; - color: #fff; + background: var(--bg-bright); + color: var(--textColor-hover); } diff --git a/web/guide.html b/web/guide.html index d93e32cb..95bb6725 100644 --- a/web/guide.html +++ b/web/guide.html @@ -19,9 +19,9 @@ + - - +