summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authordweller <dweller@cabin.digital>2024-02-27 20:48:15 +0200
committerdweller <dweller@cabin.digital>2024-02-27 20:48:15 +0200
commit2a66021e508fe2ff6912e6e6578eaf035e1ffdd8 (patch)
tree6a2066ac5a617ef3b02798e1e27d89d5368889fb
parentcd0894ddefbc9c0be2d59b9160fc911e16b67bd2 (diff)
add section and arch dropdowns, wow that was a pain
Diffstat
-rw-r--r--common.php5
-rw-r--r--index.php42
-rw-r--r--js/lmmtfy.js18
-rw-r--r--js/query_opts.js27
-rw-r--r--search.php64
-rw-r--r--style/main.css49
6 files changed, 170 insertions, 35 deletions
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 @@
<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]);
+}
+
diff --git a/search.php b/search.php
index 5e3c5f4..4d3129b 100644
--- a/search.php
+++ b/search.php
@@ -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) ."&ampsection=". 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) ."&section=". 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]
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-25 06:47:47 +0000