From 2a66021e508fe2ff6912e6e6578eaf035e1ffdd8 Mon Sep 17 00:00:00 2001 From: dweller Date: Tue, 27 Feb 2024 20:48:15 +0200 Subject: add section and arch dropdowns, wow that was a pain --- common.php | 5 ++++- index.php | 42 ++++++++++++++++++++++++++++++------- js/lmmtfy.js | 18 ++++++++++++++++ js/query_opts.js | 27 ++++++++++++++++++++++++ search.php | 64 +++++++++++++++++++++++++++++++++++++++++++------------- style/main.css | 49 ++++++++++++++++++++++++++++++++----------- 6 files changed, 170 insertions(+), 35 deletions(-) create mode 100644 js/query_opts.js diff --git a/common.php b/common.php index 370141d..b9bc1d4 100644 --- a/common.php +++ b/common.php @@ -8,11 +8,14 @@ $root = (!empty($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST']; - $manpath = "/usr/share/man"; + $manpath = "/home/dwlr/nfs_red/deb_man/mans/bookworm/man"; + require "$manpath/archs.php"; + $action = trim($_GET['action'] ?? null); $query = trim($_GET['query'] ?? null); $section = trim($_GET['section'] ?? null); + $arch = trim($_GET['arch'] ?? null); /* diff --git a/index.php b/index.php index c31c733..d83456b 100644 --- a/index.php +++ b/index.php @@ -23,6 +23,9 @@ +
@@ -50,13 +53,35 @@
+
- + '; ?> diff --git a/js/lmmtfy.js b/js/lmmtfy.js index a029c8f..2c5a642 100644 --- a/js/lmmtfy.js +++ b/js/lmmtfy.js @@ -8,10 +8,19 @@ const dom_query = document.getElementById("query"); const dom_sect = document.getElementById("sect"); +const dom_arch = document.getElementById("arch"); const dom_man = document.getElementById("man"); const query = dom_query.value; +const sect = dom_sect.value; +const arch = dom_arch.value; + dom_query.value = ""; +dom_sect.value = ""; +dom_arch.value = ""; + +fix_width(dom_sect); +fix_width(dom_arch); let i = 0, j = 0; let elapsed = 0; @@ -19,6 +28,15 @@ let actions = [ [250, () => { dom_query.focus(); }, 1], [150, () => { dom_query.value += query[j++]; }, query.length], + + [100, () => { dom_sect.focus(); }, 1], + [100, () => { dom_sect.value = sect; }, 1], + [100, () => { fix_width(dom_sect); }, 1], + + [100, () => { dom_arch.focus(); }, 1], + [100, () => { dom_arch.value = arch; }, 1], + [100, () => { fix_width(dom_arch); }, 1], + [250, () => { dom_man.focus(); }, 1], [250, () => { dom_man.click(); }, 1], ]; diff --git a/js/query_opts.js b/js/query_opts.js new file mode 100644 index 0000000..f81ee0c --- /dev/null +++ b/js/query_opts.js @@ -0,0 +1,27 @@ +const min_width = 20; +const rpad = 15; + +const tmp = document.getElementById('js_tmp'); +const opts = new Array(document.getElementById('sect'), + document.getElementById('arch')); + +function fix_width(e) +{ + let style = window.getComputedStyle(e, null); + let font_sz = parseFloat(style.getPropertyValue('font-size')); + + tmp.style.fontSize = font_sz + "px"; + tmp.innerHTML = e.options[e.selectedIndex].text; + + let tmp_width = parseFloat(window.getComputedStyle(tmp, null).width); + let width = (min_width + tmp_width + (tmp_width > 0 ? rpad : 0)) + "px"; + + e.style.width = width; +} + +for(let i=0; i < opts.length; i++) +{ + opts[i].addEventListener("change", (ev) => { fix_width(opts[i]); }); + fix_width(opts[i]); +} + diff --git a/search.php b/search.php index 5e3c5f4..4d3129b 100644 --- a/search.php +++ b/search.php @@ -25,6 +25,9 @@ +
@@ -45,10 +48,36 @@
+
+ diff --git a/style/main.css b/style/main.css index bd7a758..5b6a064 100644 --- a/style/main.css +++ b/style/main.css @@ -94,6 +94,15 @@ html body { height: 100dvh; } +#js_tmp +{ + position: absolute; + height: auto; + width: auto; + visibility: hidden; + white-space: nowrap; +} + a { cursor: pointer; @@ -230,10 +239,7 @@ a:hover { text-decoration: underline; } animation: logo-ver_scale 3.5s ease infinite; } -#search_pane -{ - flex-grow: 1; -} +#search_pane { flex-grow: 1; } form { @@ -247,12 +253,13 @@ button, input { all: unset; } #query_wrap { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; justify-content: flex-start; + align-items: center; font-size: large; - width: min(42rem, 80vw); + width: min(42rem, 80vw); padding: 1rem 1.5rem; margin: 1rem; @@ -271,18 +278,36 @@ button, input { all: unset; } box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); } -#query -{ - width: 100%; -} +#query { width: 100%; } #query_icon { background: no-repeat url("/imgs/search.svg"); background-size: contain; background-position: center; - width: 16pt; margin-right: 1rem; + flex-shrink: 0; + width: 14pt; + height: 14pt; +} + +.query_opt +{ + flex-shrink: 0; + user-select: none; + width: 20pt; + color: var(--fg-light); +} + +#sect { margin-right: 6pt; } +#sect, #arch +{ + background-color: transparent; + color: var(--fg-mid); + border: none; + + cursor: pointer; + user-select: none; } button, input[type=submit] -- cgit v1.2.3