diff options
Diffstat (limited to '')
| -rw-r--r-- | common.php | 5 | ||||
| -rw-r--r-- | index.php | 42 | ||||
| -rw-r--r-- | js/lmmtfy.js | 18 | ||||
| -rw-r--r-- | js/query_opts.js | 27 | ||||
| -rw-r--r-- | search.php | 64 | ||||
| -rw-r--r-- | style/main.css | 49 |
6 files changed, 170 insertions, 35 deletions
@@ -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); /* @@ -23,6 +23,9 @@ <link rel="stylesheet" href="style/normalize.css"/> <link rel="stylesheet" href="style/main.css"/> + <noscript> + <style>.jsonly{ display: none; }</style> + </noscript> </head> <body> <div id="main"> @@ -50,13 +53,35 @@ <nav id="search_pane"> <form action="/search.php"> <div id="query_wrap"> - <div id="query_icon"></div> - <input id="query" type='search' value='<?php if($action === 'lmmtfy') echo $query;?>' name='query' required autofocus/> - <button id="def" type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button> - <?php - if($action === 'lmmtfy') - echo '<input id="sect" type="hidden" value="' . $section . '" name= "section"/>'; - ?> + <div id="query_icon"></div> + <input id="query" type='search' value='<?php if($action === 'lmmtfy') echo $query;?>' name='query' required autofocus/> + <button id="def" type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button> + <span class="query_opt" title="section">-s</span> + <select id="sect" name='section' title="section" autocomplete="off"> + <option value=""></option> + <?php + for($i = 1; $i <= 9; $i++) + { + $sel = ""; + if((strlen($section) > 0) && ($section[0] == $i)) + $sel = 'selected="selected"'; + echo "<option value='$i' $sel>$i</option>"; + } + ?> + </select> + <span class="query_opt" title="architecture">-S</span> + <select id="arch" name='arch' title="architecture" autocomplete="off"> + <option value=""></option> + <?php + foreach($archs as $a) + { + $sel = ""; + if((strlen($arch) > 0) && ($arch == $a)) + $sel = 'selected="selected"'; + echo "<option value='$a' $sel>$a</option>"; + } + ?> + </select> </div> <div> <button id="mank" type='submit' value='apropos' name='action' title="apropos(1)">man -k</button> @@ -90,8 +115,9 @@ </section> </nav> </div> + <div id="js_tmp"></div> </body> - + <script src="js/query_opts.js"></script> <?php if($action === 'lmmtfy') echo '<script src="js/lmmtfy.js"></script>'; ?> 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]); +} + @@ -25,6 +25,9 @@ <link rel="stylesheet" href="style/main.css"/> <link rel="stylesheet" href="style/search.css"/> <link rel="stylesheet" href="style/man.css"/> + <noscript> + <style>.jsonly{ display: none; }</style> + </noscript> </head> <body> <div id="main"> @@ -45,10 +48,36 @@ <nav id="search_pane"> <form> <div id="query_wrap"> - <input id="query" type='searcg' value='<?=$query;?>' name='query' required/> - <button id="def" type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button> - <button id="mank" type='submit' value='apropos' name='action' title="apropos(1)">-k</button> - <button id="man" type='submit' value='man' name='action' title="Feeling lucky, punk?" class="btn-acc"> + <input id="query" type='searcg' value='<?=$query;?>' name='query' required/> + <span class="query_opt" title="section">-s</span> + <select id="sect" name='section' title="section" autocomplete="off"> + <option value=""></option> + <?php + for($i = 1; $i <= 9; $i++) + { + $sel = ""; + if((strlen($section) > 0) && ($section[0] == $i)) + $sel = 'selected="selected"'; + echo "<option value='$i' $sel>$i</option>"; + } + ?> + </select> + <span class="query_opt" title="architecture">-S</span> + <select id="arch" name='arch' title="architecture" autocomplete="off"> + <option value=""></option> + <?php + foreach($archs as $a) + { + $sel = ""; + if((strlen($arch) > 0) && ($arch == $a)) + $sel = 'selected="selected"'; + echo "<option value='$a' $sel>$a</option>"; + } + ?> + </select> + <button id="def" type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button> + <button id="mank" type='submit' value='apropos' name='action' title="apropos(1)">-k</button> + <button id="man" type='submit' value='man' name='action' title="Feeling lucky, punk?" class="btn-acc"> <div id="query_icon"></div> </button> </div> @@ -62,13 +91,15 @@ </header> <section id="results"> <?php + $arg_section = ""; + if(!empty($section)) + $arg_section .= " -s ". escapeshellarg($section); + if(!empty($arch)) + $arg_section .= " -S ". escapeshellarg($arch); + $found_man = false; if($action === "man") { - $arg_section = ""; - if(!empty($section)) - $arg_section = "-s ". escapeshellarg($section); - $res = exec("man -M $manpath -T html -O fragment,toc $arg_section " . escapeshellarg($query), $lines, $ret); if($ret === 0) @@ -78,7 +109,7 @@ preg_match('/\<td.*\>.+\((.+)\)\<\/td>/iu', $lines[4], $sect); $url = "$root/?query=". urlencode($query) ."&section=". urlencode($sect[1]) - ."&action=lmmtfy"; + ."&arch=". urlencode($arch) ."&action=lmmtfy"; /* HACK: fucking mandoc just generates tons of useless <br>s that make <code> stuff * look horrible. So I just remove it here. @@ -105,7 +136,7 @@ if(($action === "apropos") || !$found_man) { - $res = exec("man -M $manpath -k " . escapeshellarg($query), $lines, $ret); + $res = exec("man -M $manpath $arg_section -k " . escapeshellarg($query), $lines, $ret); if($ret === 0) { $n = count($lines); @@ -114,19 +145,22 @@ foreach($lines as $line) { - preg_match('/^((.+)(?:,.+)*)\(((.+)(?:,.+)*)\)\s?-\s?(.*)$/Uu', $line, $matches); + preg_match('/^((.+)(?:,.+)*)\((.+)\)\s?-\s?(.*)$/Uu', $line, $matches); $fname = $matches[1]; $name = $matches[2]; $fsect = $matches[3]; - $sect = $matches[4]; - $desc = $matches[5]; + $desc = $matches[4]; + $sect = explode(',', $fsect); + $arch = explode('/', end($sect)); + $sect = trim($arch[0]); + $arch = trim(end($arch)); $descl = strlen($desc); if($descl > 320) $desc = substr($desc, 0, 320) . "..."; elseif($descl === 0) $desc = "No synopsis."; $url = "$root/search.php?query=". urlencode($name) ."§ion=". urlencode($sect) - ."&action=man"; + ."&arch=". urlencode($arch) ."&action=man"; echo '<dl>'; echo " <dt><a href='".$url."'>$fname($fsect)</a></dt>"; @@ -147,5 +181,7 @@ </p> </footer> </div> + <div id="js_tmp"></div> </body> + <script src="js/query_opts.js"></script> </html> 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] |