From b8960d61ad7158be3fb58826fd614bb4833320cd Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Thu, 21 Oct 2021 15:57:05 +0200 Subject: [PATCH] dev21w42 --- public/assets/css/search.css | 58 ++++++++++++++++++++++++++++- public/assets/js/modules/Search.mjs | 40 ++++++++++++++++++++ public/assets/js/search.js | 25 +++++++++++++ public/search.html | 13 ++++++- 4 files changed, 133 insertions(+), 3 deletions(-) create mode 100644 public/assets/js/modules/Search.mjs create mode 100644 public/assets/js/search.js diff --git a/public/assets/css/search.css b/public/assets/css/search.css index 84377e0..0440309 100644 --- a/public/assets/css/search.css +++ b/public/assets/css/search.css @@ -61,15 +61,71 @@ header h1 { } .card { - padding: var(--padding); + --padding-multiplier: 1.2; + flex: none; + display: flex; + flex-direction: column; + gap: calc(var(--padding) * var(--padding-multiplier)); + padding: calc(var(--padding) * var(--padding-multiplier)); box-sizing: border-box; width: 100%; overflow: auto; border: solid 1px var(--swatch-contrast); } +.card > div { + --icon-size: 40px; + display: grid; + grid-template-columns: var(--icon-size) 1fr; + align-items: center; + font-weight: bold; + gap: calc(var(--padding) * var(--padding-multiplier)); +} + +.card > div *:not(p) { + width: var(--icon-size); +} + +.card > div p { + font-size: clamp(16px,1vw,20px); + word-break: break-word; +} + +.button { + padding: var(--padding); + text-align: center; + background-color: var(--swatch-contrast); + color: var(--swatch-background); + box-shadow: inset 0 0 0 2px var(--swatch-contrast); + user-select: none; +} + /* -- Media Queries -- */ +@media (max-width: 300px) { + .card > div { + grid-template-columns: 1fr; + } + + .card > div *:not(p) { + display: none; + } +} + +@media (hover: hover) { + .button:hover { + background-color: rgba(var(--palette-contrast),0); + color: var(--swatch-contrast); + cursor: pointer; + } + + .button:active { + background-color: rgba(var(--palette-contrast),.1); + color: var(--swatch-contrast); + cursor: pointer; + } +} + @media (pointer: fine) { #search input:focus { outline: solid 5px rgba(var(--palette-contrast),.2); diff --git a/public/assets/js/modules/Search.mjs b/public/assets/js/modules/Search.mjs new file mode 100644 index 0000000..e7f2dab --- /dev/null +++ b/public/assets/js/modules/Search.mjs @@ -0,0 +1,40 @@ +export default class Search { + constructor(input,results) { + const self = this; + + this.endpoint = new URL("api/search",window.location.href); + + this.lastQuery = ""; + this.timeout = null; + + this.results = { + element: results, + set content(html) { + this.results?.insertAdjacentHTML("beforeend",html); + } + }; + input?.addEventListener("keydown",event => this.keyEvent(event)) ?? false; + } + + async search(query) { + const url = new URL(this.endpoint); + url.searchParams.set("q",query); + + const timeout = setTimeout(() => this.showSpinner(),1000); + const api = await fetch(url); + + return result; + } + + queue(query) { + clearTimeout(this.timeout); + this.timeout = setTimeout(() => this.search(query),500); + } + + async keyEvent(event) { + if(event.target.value === this.lastQuery) { + return false; + } + this.queue(event.target.value); + } +} \ No newline at end of file diff --git a/public/assets/js/search.js b/public/assets/js/search.js new file mode 100644 index 0000000..01011be --- /dev/null +++ b/public/assets/js/search.js @@ -0,0 +1,25 @@ +import { default as Search } from "./modules/Search.mjs"; +// import { default as Monkey } from "./modules/monkeydo/Monkeydo.mjs"; + +const searchField = document.getElementById("search"); +const resultsContainer = document.getElementById("results"); + +const search = new Search(searchField,resultsContainer); +window.addEventListener("keydown",() => searchField.focus()); + +/* const monkey = new Monkey({ + keyPress: (key) => searchField.dispatchEvent(new KeyboardEvent("keydown",{"key":key})), + log: (message) => console.log(message) +}); + +monkey.load(JSON.stringify({ + tasks: [ + [200,"log","hello friend"], + [200,"keyPress","h"], + [400,"keyPress","e"], + [100,"keyPress","l"], + [500,"keyPress","l"], + [700,"keyPress","o"] + ] +})).then(() => monkey.do()); +*/ \ No newline at end of file diff --git a/public/search.html b/public/search.html index 0161c0b..a8cc2c0 100644 --- a/public/search.html +++ b/public/search.html @@ -20,12 +20,21 @@
- + +

github/​victorwesterlund.com

+
+

Lorem ipsum

+

read more

+
+
+
+

github/victorwesterlund.com

-

Lorem ipsum

+

read more

+