www: Drop search autocomplete, but make search itself a bit more useful
This commit is contained in:
Yorhel
parent
fc9a19e7c4
commit
9a81147983
3 changed files with 31 additions and 252 deletions
71
www/index.pl
71
www/index.pl
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
use v5.26;
|
||||
use warnings;
|
||||
use TUWF ':html5_', ':xml';
|
||||
use TUWF ':html5_', ':xml', 'uri_escape';
|
||||
use POSIX 'ceil';
|
||||
use List::Util 'uniq', 'min';
|
||||
use SQL::Interp 'sql', 'sql_interp';
|
||||
|
|
@ -206,14 +206,14 @@ sub framework_ {
|
|||
|
||||
html_ lang => 'en', sub {
|
||||
head_ sub {
|
||||
link_ rel => 'stylesheet', type => 'text/css', href => '/man.css?5';
|
||||
link_ rel => 'stylesheet', type => 'text/css', href => '/man.css?6';
|
||||
title_ $o{title}.' - manned.org';
|
||||
};
|
||||
body_ sub {
|
||||
header_ sub {
|
||||
a_ href => '/', 'Manned.org';
|
||||
form_ action => '/browse/search', method => 'get', sub {
|
||||
input_ type => 'text', name => 'q', id => 'q', tabindex => 1;
|
||||
input_ type => 'text', name => 'q', id => 'q', placeholder => 'ncdu, btrfs.8, git-*', value => $o{q}, tabindex => 1;
|
||||
input_ type => 'submit', value => 'Search';
|
||||
}
|
||||
};
|
||||
|
|
@ -226,7 +226,7 @@ sub framework_ {
|
|||
};
|
||||
span_ 'all manual pages are copyrighted by their respective authors.';
|
||||
};
|
||||
script_ type => 'text/javascript', src => '/man.js', '';
|
||||
script_ type => 'text/javascript', src => '/man.js?2', '';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -592,57 +592,46 @@ TUWF::get '/info/about' => sub {
|
|||
};
|
||||
|
||||
|
||||
# Very simple (and fast) prefix match.
|
||||
sub search_man {
|
||||
my($q, $limit) = @_;
|
||||
|
||||
my $sect = $q =~ s/^([0-9])\s+// || $q =~ s/\(([a-zA-Z0-9]+)\)$// ? $1 : '';
|
||||
my $name = $q =~ s/^([a-zA-Z0-9,.:_-]+)// ? $1 : '';
|
||||
|
||||
return !$name ? [] : tuwf->dbAlli(
|
||||
'SELECT name, section FROM mans WHERE', sql_and(
|
||||
sql('lower(name) LIKE', \(escape_like(lc $name).'%')),
|
||||
$sect ? sql('section ILIKE', \(escape_like(lc $sect).'%')) : (),
|
||||
), 'ORDER BY name, section LIMIT', \$limit,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
TUWF::get '/browse/search' => sub {
|
||||
my $q = tuwf->reqGet('q')||'';
|
||||
my $man = search_man $q, 150;
|
||||
return tuwf->resRedirect("/$man->[0]{name}.$man->[0]{section}", 'temp') if @$man == 1;
|
||||
|
||||
framework_ title => 'Search results for '.$q, mainclass => 'searchres', sub {
|
||||
h1_ 'Search results for '.$q;
|
||||
# Package search would also be useful.
|
||||
p_ 'Note: This is just a simple case-insensitive prefix match on the man names. In the future we\'ll have more powerful search functionality. Hopefully.';
|
||||
if(@$man) {
|
||||
my $name = $q;
|
||||
my $sect = $name =~ s/^([0-9])\s+// || $name =~ s/\(([a-zA-Z0-9]+)\)$// || $name =~ s/\.([0-9][a-zA-Z0-9]*)$// ? $1 : '';
|
||||
($name,$sect) = ($sect,'') if !length $name;
|
||||
|
||||
# Redirect if we have an exact match
|
||||
my @sectsql = length $sect ? ('AND section =', \$sect) : ();
|
||||
my $man = length $name && tuwf->dbRowi('SELECT name, section FROM mans WHERE name =', \$name, @sectsql);
|
||||
return tuwf->resRedirect("/man/$man->{name}.$man->{section}", 'temp') if length $man->{name};
|
||||
|
||||
# Otherwise, do case-insensitive glob search
|
||||
my $nameq = escape_like(lc $name) =~ tr/?*/_%/r;
|
||||
my $lst = !length $nameq ? [] : tuwf->dbAlli('
|
||||
SELECT name, section
|
||||
FROM mans WHERE lower(name) LIKE', \$nameq, @sectsql, '
|
||||
ORDER BY name, section
|
||||
LIMIT 500');
|
||||
|
||||
framework_ title => 'Search results for '.$q, mainclass => 'searchres', q => $q, sub {
|
||||
h1_ 'Search results for '.(length $sect ? "$name in section $sect" : $q);
|
||||
if(@$lst) {
|
||||
p_ 'Truncated to the first 500 results.' if @$lst >= 150;
|
||||
ul_ sub {
|
||||
li_ sub {
|
||||
a_ href => "/$_->{name}.$_->{section}", $_->{name};
|
||||
a_ href => "/man/$_->{name}.$_->{section}", $_->{name};
|
||||
small_ " $_->{section}";
|
||||
} for @$man;
|
||||
} for @$lst;
|
||||
}
|
||||
} else {
|
||||
p_ 'No results :-(';
|
||||
p_ sub {
|
||||
a_ href => '?q='.uri_escape($name), 'Try again in other sections?' if length $sect;
|
||||
};
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
TUWF::get '/xml/search.xml' => sub {
|
||||
my $q = tuwf->reqGet('q')||'';
|
||||
my $man = search_man $q, 20;
|
||||
|
||||
tuwf->resHeader('Content-Type' => 'text/xml; charset=UTF-8');
|
||||
xml;
|
||||
tag 'results', sub {
|
||||
tag 'item', id => "$_->{name}.$_->{section}", %$_, undef for @$man;
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
# Object to represent the various URLs to a man page.
|
||||
#
|
||||
# Parameters:
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ thead td { font-weight: bold }
|
|||
header { border-bottom: 3px dotted #ccc; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap }
|
||||
header a { font: 24px "Arial", serif; font-weight: bold }
|
||||
header form { padding-bottom: 3px }
|
||||
header input[type=text] { width: 100px }
|
||||
header input[type=text] { width: 200px }
|
||||
|
||||
footer { border-top: 3px dotted #ccc; color: #666; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap }
|
||||
|
||||
|
|
|
|||
210
www/man.js
210
www/man.js
|
|
@ -70,20 +70,6 @@ function tag() {
|
|||
}
|
||||
return el;
|
||||
}
|
||||
function addBody(el) {
|
||||
if(document.body.appendChild)
|
||||
document.body.appendChild(el);
|
||||
else if(document.documentElement.appendChild)
|
||||
document.documentElement.appendChild(el);
|
||||
else if(document.appendChild)
|
||||
document.appendChild(el);
|
||||
}
|
||||
function setContent() {
|
||||
setText(arguments[0], '');
|
||||
for(var i=1; i<arguments.length; i++)
|
||||
if(arguments[i] != null)
|
||||
arguments[0].appendChild(tag(arguments[i]));
|
||||
}
|
||||
function getText(obj) {
|
||||
return obj.textContent || obj.innerText || '';
|
||||
}
|
||||
|
|
@ -123,202 +109,6 @@ function setClass(obj, c, set) {
|
|||
}
|
||||
|
||||
|
||||
// Dropdown Search
|
||||
|
||||
function dsInit(obj, url, trfunc, serfunc, retfunc, parfunc) {
|
||||
obj.setAttribute('autocomplete', 'off');
|
||||
obj.onkeydown = dsKeyDown;
|
||||
obj.onblur = function() { setTimeout(function () { setClass(byId('ds_box'), 'hidden', true) }, 250) };
|
||||
obj.ds_returnFunc = retfunc;
|
||||
obj.ds_trFunc = trfunc;
|
||||
obj.ds_serFunc = serfunc;
|
||||
obj.ds_parFunc = parfunc;
|
||||
obj.ds_searchURL = url;
|
||||
obj.ds_selectedId = 0;
|
||||
obj.ds_dosearch = null;
|
||||
if(!byId('ds_box'))
|
||||
addBody(tag('div', {id: 'ds_box', 'class':'hidden'}, tag('b', 'Loading...')));
|
||||
}
|
||||
|
||||
function dsKeyDown(ev) {
|
||||
var c = document.layers ? ev.which : document.all ? event.keyCode : ev.keyCode;
|
||||
var obj = this;
|
||||
|
||||
if(c == 9) // tab
|
||||
return true;
|
||||
|
||||
// do some processing when the enter key has been pressed
|
||||
if(c == 13) {
|
||||
var frm = obj;
|
||||
while(frm && frm.nodeName.toLowerCase() != 'form')
|
||||
frm = frm.parentNode;
|
||||
if(frm) {
|
||||
var oldsubmit = frm.onsubmit;
|
||||
frm.onsubmit = function() { return false };
|
||||
setTimeout(function() { frm.onsubmit = oldsubmit }, 100);
|
||||
}
|
||||
|
||||
if(obj.ds_selectedId != 0)
|
||||
obj.value = obj.ds_serFunc(byId('ds_box_'+obj.ds_selectedId).ds_itemData, obj);
|
||||
if(obj.ds_returnFunc)
|
||||
obj.ds_returnFunc(obj);
|
||||
|
||||
setClass(byId('ds_box'), 'hidden', true);
|
||||
setContent(byId('ds_box'), tag('b', 'Loading...'));
|
||||
obj.ds_selectedId = 0;
|
||||
if(obj.ds_dosearch) {
|
||||
clearTimeout(obj.ds_dosearch);
|
||||
obj.ds_dosearch = null;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// process up/down keys
|
||||
if(c == 38 || c == 40) {
|
||||
var l = byName(byId('ds_box'), 'tr');
|
||||
if(l.length < 1)
|
||||
return true;
|
||||
|
||||
// get new selected id
|
||||
if(obj.ds_selectedId == 0) {
|
||||
if(c == 38) // up
|
||||
obj.ds_selectedId = l[l.length-1].id.substr(7);
|
||||
else
|
||||
obj.ds_selectedId = l[0].id.substr(7);
|
||||
} else {
|
||||
var sel = null;
|
||||
for(var i=0; i<l.length; i++)
|
||||
if(l[i].id == 'ds_box_'+obj.ds_selectedId) {
|
||||
if(c == 38) // up
|
||||
sel = i>0 ? l[i-1] : l[l.length-1];
|
||||
else
|
||||
sel = l[i+1] ? l[i+1] : l[0];
|
||||
}
|
||||
obj.ds_selectedId = sel.id.substr(7);
|
||||
}
|
||||
|
||||
// set selected class
|
||||
for(var i=0; i<l.length; i++)
|
||||
setClass(l[i], 'selected', l[i].id == 'ds_box_'+obj.ds_selectedId);
|
||||
return true;
|
||||
}
|
||||
|
||||
// perform search after a timeout
|
||||
if(obj.ds_dosearch)
|
||||
clearTimeout(obj.ds_dosearch);
|
||||
obj.ds_dosearch = setTimeout(function() {
|
||||
dsSearch(obj);
|
||||
}, 500);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function dsSearch(obj) {
|
||||
var box = byId('ds_box');
|
||||
var val = obj.ds_parFunc ? obj.ds_parFunc(obj.value) : obj.value;
|
||||
|
||||
clearTimeout(obj.ds_dosearch);
|
||||
obj.ds_dosearch = null;
|
||||
|
||||
// hide the ds_box div
|
||||
if(val.length < 2) {
|
||||
setClass(box, 'hidden', true);
|
||||
setContent(box, tag('b', 'Loading...'));
|
||||
obj.ds_selectedId = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// position the div
|
||||
var ddx=0;
|
||||
var ddy=obj.offsetHeight;
|
||||
var o = obj;
|
||||
do {
|
||||
ddx += o.offsetLeft;
|
||||
ddy += o.offsetTop;
|
||||
} while(o = o.offsetParent);
|
||||
|
||||
box.style.position = 'absolute';
|
||||
box.style.left = ddx+'px';
|
||||
box.style.top = ddy+'px';
|
||||
box.style.width = obj.offsetWidth+'px';
|
||||
setClass(box, 'hidden', false);
|
||||
|
||||
// perform search
|
||||
ajax(obj.ds_searchURL + encodeURIComponent(val), function(hr) {
|
||||
dsResults(hr, obj);
|
||||
});
|
||||
}
|
||||
|
||||
function dsResults(hr, obj) {
|
||||
var lst = hr.responseXML.getElementsByTagName('item');
|
||||
var box = byId('ds_box');
|
||||
if(lst.length < 1) {
|
||||
setContent(box, tag('b', 'No results'));
|
||||
obj.selectedId = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
var tb = tag('tbody', null);
|
||||
for(var i=0; i<lst.length; i++) {
|
||||
var id = lst[i].getAttribute('id');
|
||||
var tr = tag('tr', {id: 'ds_box_'+id, ds_itemData: lst[i]} );
|
||||
setClass(tr, 'selected', obj.selectedId == id);
|
||||
|
||||
tr.onmouseover = function() {
|
||||
obj.ds_selectedId = this.id.substr(7);
|
||||
var l = byName(box, 'tr');
|
||||
for(var j=0; j<l.length; j++)
|
||||
setClass(l[j], 'selected', l[j].id == 'ds_box_'+obj.ds_selectedId);
|
||||
};
|
||||
tr.onmousedown = function() {
|
||||
obj.value = obj.ds_serFunc(this.ds_itemData, obj);
|
||||
if(obj.ds_returnFunc)
|
||||
obj.ds_returnFunc();
|
||||
setClass(box, 'hidden', true);
|
||||
obj.ds_selectedId = 0;
|
||||
};
|
||||
|
||||
obj.ds_trFunc(lst[i], tr);
|
||||
tb.appendChild(tr);
|
||||
}
|
||||
setContent(box, tag('table', tb));
|
||||
|
||||
if(obj.ds_selectedId != 0 && !byId('ds_box_'+obj.ds_selectedId))
|
||||
obj.ds_selectedId = 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* What follows is specific to manned.org */
|
||||
|
||||
// Search box
|
||||
(function(){
|
||||
searchRedir = false;
|
||||
dsInit(byId('q'), '/xml/search.xml?q=', function(item, tr) {
|
||||
tr.appendChild(tag('td', item.getAttribute('name'), tag('i', '('+item.getAttribute('section')+')')));
|
||||
},
|
||||
function(item) {
|
||||
searchRedir = true;
|
||||
location.href = '/'+item.getAttribute('name')+'.'+item.getAttribute('section');
|
||||
return item.getAttribute('name')+'('+item.getAttribute('section')+')';
|
||||
},
|
||||
function() {
|
||||
if(!searchRedir) {
|
||||
var frm=byId('q');
|
||||
while(frm && frm.nodeName.toLowerCase() != 'form')
|
||||
frm = frm.parentNode;
|
||||
frm.submit();
|
||||
}
|
||||
}
|
||||
);
|
||||
})();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// The tabs on man pages
|
||||
(function(){
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue