diff --git a/output/index.css b/output/index.css index 6d5784c..93d8c93 100644 --- a/output/index.css +++ b/output/index.css @@ -133,6 +133,16 @@ html.js .noscript, .hidden { /* box-shadow: 0.05em 0.05em 0.1em 0 #4444;*/ } +.highlight { + animation: highlight 1s ease-in-out 0.1s 1 forwards; +} + +@keyframes highlight { + 0% { } + 50% { scale: 2; filter: brightness(125%); } + 100% { } +} + .room-label, .sample-search { color: black; } @@ -218,6 +228,10 @@ header { margin-inline: 1rem; } +#search > div { + width: 50%; +} + #search-bar { height: 1.25rem; color: var(--primary-color); @@ -231,12 +245,15 @@ header { color: red; } -#search-bar:placeholder-shown + #btn-clear-search { +#search-actions > * { + display: inline-block; +} + +#search-bar:placeholder-shown + #search-actions > :is(#btn-clear-search, #btn-share-search) { visibility: hidden; } .btn-clear-search { - margin-right: 1rem; font-size: 1.5rem; padding: 0.25rem 1rem; } diff --git a/output/js/util.js b/output/js/util.js index b1ad9d0..a076efe 100644 --- a/output/js/util.js +++ b/output/js/util.js @@ -144,6 +144,7 @@ export const dom = { /** @return {HTMLInputElement | null} */ search_bar: () => document.querySelector('#search-bar'), btn_clear_search: () => document.querySelector("#btn-clear-search"), + btn_share_search: () => document.querySelector("#btn-share-search"), search_container: () => document.querySelector("#search-container"), sample_searches: () => document.querySelectorAll(".sample-search") } diff --git a/output/main.js b/output/main.js index 3b5c456..acd63f2 100644 --- a/output/main.js +++ b/output/main.js @@ -89,7 +89,7 @@ function reactToURLParameters() { const rawHash = location.hash; if (rawHash == "") return; - const hash = rawHash.slice(1); + const hash = decodeURIComponent(rawHash.slice(1)); if (hash.startsWith("q=")) { useSearchTerm(decodeURIComponent(hash.slice(2)), true); @@ -97,8 +97,8 @@ function reactToURLParameters() { return; } - if (!hash.includes("+")) { - useSearchTerm(`#${decodeURIComponent(hash)}`, true); + if (!hash.includes("+") && !document.querySelector(`#${hash}`)) { + useSearchTerm(`#${hash}`, true); toggleSearchBarVisibility(); return; } @@ -491,9 +491,19 @@ function addServerIconInteractions() { } } -function toggleSearchBarVisibility() { +/** + * @param {?boolean} setShown + */ +function toggleSearchBarVisibility(setShown = null) { const container = dom.search_container(); - container?.classList.toggle(CLASSES.COMPONENTS.COLLAPSED); + const hadClass = container?.classList.contains(CLASSES.COMPONENTS.COLLAPSED); + if (setShown == null) { + container?.classList.toggle(CLASSES.COMPONENTS.COLLAPSED); + } else if (setShown == true) { + container?.classList.remove(CLASSES.COMPONENTS.COLLAPSED); + } else if (setShown == false) { + container?.classList.add(CLASSES.COMPONENTS.COLLAPSED); + } if (!container?.classList.contains(CLASSES.COMPONENTS.COLLAPSED)) { const searchBar = dom.search_bar(); searchBar?.focus(); @@ -502,6 +512,9 @@ function toggleSearchBarVisibility() { } else { useSearchTerm(""); } + if (setShown == hadClass) { + return true; + } } function addSearchInteractions() { @@ -526,6 +539,22 @@ function addSearchInteractions() { dom.search_bar()?.focus(); }) + dom.btn_share_search()?.addEventListener('click', function() { + const searchTerm = dom.search_bar()?.value; + if (!searchTerm) return; + const searchTermIsTag = searchTerm.startsWith('#') && !searchTerm.includes("+"); + const hash = searchTermIsTag ? searchTerm : `#q=${searchTerm}`; + const newLocation = new URL(location.href); + newLocation.hash = hash; + if (navigator.share) { + navigator.share({ + url: newLocation.href + }); + } else { + copyToClipboard(newLocation.href, "Share link copied to clipboard.") + } + }); + Array.from(dom.sample_searches()).forEach(button => button.addEventListener('click', function() { const targetSearch = button.getAttribute(ATTRIBUTES.SEARCH.TARGET_SEARCH); if (targetSearch === null) { @@ -752,3 +781,13 @@ function sortTable(column) { document.documentElement.classList.add("js"); document.addEventListener('DOMContentLoaded', () => onLoad()); + +document.addEventListener('DOMContentLoaded', () => { + document.querySelector("#banner-sample-search")?.addEventListener('click', function() { + useSearchTerm(this.getAttribute('search-target'), true); + const changed = toggleSearchBarVisibility(true); + if (!changed) return; + dom.btn_share_search()?.classList.add('highlight'); + setTimeout(() => dom.btn_share_search()?.classList.remove('highlight'), 2000); + }) +}); diff --git a/sites/+components/communities-search.php b/sites/+components/communities-search.php index 6280b64..c7b653b 100644 --- a/sites/+components/communities-search.php +++ b/sites/+components/communities-search.php @@ -27,9 +27,12 @@ - +
- × +
+ × + Share +
diff --git a/sites/+components/issue-banner.php b/sites/+components/issue-banner.php index dc7db6d..3f96c7b 100644 --- a/sites/+components/issue-banner.php +++ b/sites/+components/issue-banner.php @@ -12,7 +12,7 @@ } .banner-subtitle { - font-size: 1.5rem; + font-size: 1.25rem; } .banner-note { @@ -24,13 +24,15 @@