mirror of
https://github.com/yacy/yacy_search_server.git
synced 2024-09-19 00:01:41 +02:00
0b0980b364
Added keyboard navigation support and missing WAI-ARIA attributes. Tested with NVDA 2017.3 screenreader on recent major browsers.
209 lines
11 KiB
HTML
209 lines
11 KiB
HTML
<script>
|
|
if (document.getElementById("progressbar") != null && document.getElementById("progressbar").getAttribute('class') != "progress-bar progress-bar-success") {
|
|
document.getElementById("progressbar").setAttribute('style',"width:100%");
|
|
document.getElementById("progressbar").setAttribute('style',"transition:transform 0s;-webkit-transition:-webkit-transform 0s;");
|
|
document.getElementById("progressbar").setAttribute('class',"progress-bar progress-bar-success");
|
|
window.setTimeout(fadeOutBar, 500);
|
|
}
|
|
</script>
|
|
|
|
#(resource-select)#::
|
|
<form
|
|
action="yacysearch.html" method="get" accept-charset="UTF-8" id="resource-switch-form"
|
|
data-trigger="hover" data-placement="right" data-container="body"
|
|
data-original-title="Your search is done using peers in the YaCy P2P network."
|
|
data-content="You can switch to 'Stealth Mode' which will switch off P2P, giving you full privacy. Expect less results then, because then only your own search index is used."
|
|
>
|
|
<input checked="checked"
|
|
data-label-text="Privacy"
|
|
data-on-text="<span> Peer-to-Peer </span>"
|
|
data-off-text="<span> Stealth Mode </span>"
|
|
data-on-color="warning" data-off-color="success"
|
|
data-animate="false"
|
|
type="checkbox" name="resource-switch" value="local" data-size="large"
|
|
onchange="document.getElementById('resource').value='local';document.searchform.submit();">
|
|
</form>
|
|
<script>$("#resource-switch-form").popover(); $("[name='resource-switch']").bootstrapSwitch();</script>
|
|
::
|
|
<form action="yacysearch.html" method="get" accept-charset="UTF-8" id="resource-switch-form"
|
|
data-trigger="hover" data-placement="right" data-container="body"
|
|
data-original-title="Your search is done using only your own peer, locally."
|
|
data-content="You can switch to 'Peer-to-Peer Mode' which will cause that your search is done using the other peers in the YaCy network."
|
|
>
|
|
<input
|
|
data-label-text="Peer-to-Peer"
|
|
data-on-text="<span> Peer-to-Peer </span>"
|
|
data-off-text="<span> Stealth Mode </span>"
|
|
data-on-color="warning" data-off-color="success"
|
|
data-animate="false"
|
|
type="checkbox" name="resource-switch" value="global" data-size="large"
|
|
onchange="document.getElementById('resource').value='global';document.searchform.submit();">
|
|
</form>
|
|
<script>$("#resource-switch-form").popover(); $("[name='resource-switch']").bootstrapSwitch();</script>
|
|
#(/resource-select)#
|
|
|
|
<p class="navbutton"></p>
|
|
<div class="btn-group btn-group-justified">
|
|
<div class="btn-group btn-group-xs"><button type="button" id="sort_button_context" class="btn btn-default" onclick="document.getElementById('search').value=document.getElementById('search').value.replace(' /date','');document.searchform.submit();">Context Ranking</button></div>
|
|
<div class="btn-group btn-group-xs"><button type="button" id="sort_button_date" class="btn btn-default" onclick="document.getElementById('search').value=document.getElementById('search').value + ' /date';document.searchform.submit();">Sort by Date</button></div>
|
|
</div>
|
|
<script>
|
|
if (document.getElementById('search').value.indexOf(" /date") == -1) {
|
|
document.getElementById("sort_button_context").setAttribute("class","btn btn-default active");
|
|
document.getElementById("sort_button_context").setAttribute("onclick","");
|
|
} else {
|
|
document.getElementById("sort_button_date").setAttribute("class","btn btn-default active");
|
|
document.getElementById("sort_button_date").setAttribute("onclick","");
|
|
}
|
|
</script>
|
|
|
|
#(searchdomswitches)#::<p class="navbutton"></p>
|
|
<div class="btn-group btn-group-justified">
|
|
#(searchtext)#::<div class="btn-group btn-group-xs"><button type="button" class="btn btn-default#(check)#:: active#(/check)#"#(check)# onclick="document.getElementById('contentdom').value='text';document.searchform.submit();"::#(/check)#>Documents</button></div>#(/searchtext)#
|
|
#(searchimage)#::<div class="btn-group btn-group-xs"><button type="button" class="btn btn-default#(check)#:: active#(/check)#"#(check)# onclick="document.getElementById('contentdom').value='image';document.searchform.submit();"::#(/check)#>Images</button></div>#(/searchimage)#
|
|
#(searchaudio)#::<div class="btn-group btn-group-xs"><button type="button" class="btn btn-default#(check)#:: active#(/check)#"#(check)# onclick="document.getElementById('contentdom').value='audio';document.searchform.submit();"::#(/check)#>Audio</button></div>#(/searchaudio)#
|
|
#(searchvideo)#::<div class="btn-group btn-group-xs"><button type="button" class="btn btn-default#(check)#:: active#(/check)#"#(check)# onclick="document.getElementById('contentdom').value='video';document.searchform.submit();"::#(/check)#>Video</button></div>#(/searchvideo)#
|
|
#(searchapp)#::<div class="btn-group btn-group-xs"><button type="button" class="btn btn-default#(check)#:: active#(/check)#"#(check)# onclick="document.getElementById('contentdom').value='app';document.searchform.submit();"::#(/check)#>Apps</button></div>#(/searchapp)#
|
|
</div>
|
|
#(/searchdomswitches)#
|
|
|
|
#(nav-protocols)#::
|
|
<p class="navbutton"></p>
|
|
<div id="nav-protocols" class="btn-group btn-group-justified">
|
|
#{element}#
|
|
<div id="nav-protocols-#[name]#" class="btn-group btn-group-xs"><button type="button" class="btn btn-default#(on)#:: active#(/on)#"#(onclick)# onclick="window.location.href='#[url]#';"::#(/onclick)#>#[name]# (#[count]#)</button></div>
|
|
#{/element}#
|
|
</div>
|
|
#(/nav-protocols)#
|
|
|
|
#(nav-topics)#<p> </p>::
|
|
<div id="tagcloud" style="text-align:justify">#{element}#
|
|
<a href="#[url]#" style="text-decoration:none;font-size:#[size]#px;">#[name]#</a>
|
|
#{/element}#</div>
|
|
#(/nav-topics)#
|
|
|
|
#(cat-location)#::
|
|
<ul id="cat-location" class="nav nav-sidebar menugroup">
|
|
<li><h3>Location</h3></li>
|
|
<li>
|
|
<a href="yacysearch_location.html?query=#[queryenc]#" class="MenuItemLink">
|
|
<img src="env/grafics/earthsearch.png" width="100%" height="86" alt="earthsearchlogo" /><br/>
|
|
show search results for "#[query]#" on map</a>
|
|
</li>
|
|
</ul>
|
|
#(/cat-location)#
|
|
|
|
#(nav-dates)#::
|
|
<link rel="stylesheet" href="env/morris.css">
|
|
<script src="js/raphael.min.js"></script>
|
|
<script src="js/morris.js"></script>
|
|
<script type="text/javascript" src="js/accessibleHistogram.js" charset="UTF-8"></script>
|
|
<script>
|
|
var histogramContainer = document.getElementById("datehistogram");
|
|
if(histogramContainer != null) {
|
|
dates_in_content_dts = [#{element}#"#[name]#","#[count]#"#(nl)#::,#(/nl)##{/element}#];
|
|
var parsed = [];
|
|
for (var i = 0; i < dates_in_content_dts.length; i = i + 2) {
|
|
var date = dates_in_content_dts[i];
|
|
var count = dates_in_content_dts[i + 1];
|
|
if (date && count) {parsed[parsed.length] = {x: date,y: count};};
|
|
};
|
|
if (parsed.length > 0) {
|
|
histogramContainer.style = "height:200px; cursor: pointer;";
|
|
|
|
var histogramClickhandler = function(row) {
|
|
var query = document.getElementsByClassName('searchinput')[0].getAttribute("value");
|
|
var onp = -1, fromp = -1, top = -1;
|
|
if ((onp = query.indexOf("on:")) >= 0) {
|
|
query = query.substring(0, onp - 1);
|
|
}
|
|
if ((fromp = query.indexOf("from:")) < 0) {
|
|
query = query + " from:" + row.x;
|
|
document.getElementsByClassName('searchinput')[0].value = query;
|
|
document.getElementById('Enter').click();
|
|
} else if ((top = query.indexOf("to:")) < 0) {
|
|
query = query + " to:" + row.x;
|
|
document.getElementsByClassName('searchinput')[0].value = query;
|
|
document.getElementById('Enter').click();
|
|
} else {
|
|
query = query.substring(0, fromp) + " on:" + row.x;
|
|
document.getElementsByClassName('searchinput')[0].value = query;
|
|
document.getElementById('Enter').click();
|
|
}
|
|
console.log(i, row, query);
|
|
}
|
|
|
|
var histogram = Morris.Bar({
|
|
element: 'datehistogram',
|
|
data: parsed,
|
|
xkey: 'x',
|
|
ykeys: ['y'],
|
|
labels: ['number of documents about this date'],
|
|
yLabelFormat: function (y) { return y.toString() + ' docs'; },
|
|
barColors: function (row, series, type) {
|
|
var d = new Date(row.label);
|
|
if (d.getDay() === 6) return '#4aaf46'; //saturday
|
|
if (d.getDay() === 0) return '#4aaf46'; //sunday
|
|
return '#3574c0';
|
|
},
|
|
hideHover: 'false'
|
|
}).on('click', function(i, row) {
|
|
histogramClickhandler(row);
|
|
});
|
|
|
|
/* Add keyboard navigation support and accessible attributes */
|
|
makeAccessibleMorrisBar(histogram,
|
|
"Number of documents per date histogram",
|
|
function(data) {return data.x + " : " + data.y + " docs"},
|
|
"link",
|
|
histogramClickhandler);
|
|
}
|
|
}
|
|
</script>
|
|
#(/nav-dates)#
|
|
|
|
<script>
|
|
function toggleVisibility(name, count) {
|
|
if (document.getElementById(name + "_0").style.display == "none") {
|
|
for (i = 0; i < count; i++) document.getElementById(name + "_" + i).style.display="block";
|
|
document.getElementById("chevron-" + name).className = "glyphicon glyphicon-chevron-up";
|
|
} else {
|
|
for (i = 0; i < count; i++) document.getElementById(name + "_" + i).style.display="none";
|
|
document.getElementById("chevron-" + name).className = "glyphicon glyphicon-chevron-down";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
#(nav-languages)#::
|
|
<ul id="nav-languages" class="nav nav-sidebar menugroup">
|
|
<li style="cursor: pointer; cursor: hand;"><h3 onclick="toggleVisibility('languages', #[count]#);">Language [#[count]#] <span style="float:right" id="chevron-languages" class="glyphicon glyphicon-chevron-down" title="click to expand facet"></span></h3></li>
|
|
#{element}#
|
|
<li style="display:none" id="#[id]#"><a href="#[url]#" class="MenuItemLink"><input type="checkbox" onchange="window.location.href='#[url]#'"#(on)# checked="checked"::#(/on)#/> #[name]# (#[count]#)</a></li>
|
|
#{/element}#</ul>
|
|
<script>if (#[count]# <= 8) toggleVisibility('languages', #[count]#);</script>
|
|
#(/nav-languages)#
|
|
|
|
#{navs}#
|
|
<ul id="nav-#[name]#" class="nav nav-sidebar menugroup">
|
|
<li style="cursor: pointer; cursor: hand;"><h3 onclick="toggleVisibility('#[name]#', #[count]#);">#[displayname]# [#[count]#] <span style="float:right" id="chevron-#[name]#" class="glyphicon glyphicon-chevron-down" title="click to expand facet"></span></h3></li>
|
|
#{element}#
|
|
<li style="display:none" id="#[id]#"><a href="#[url]#" class="MenuItemLink"><input type="checkbox" onchange="window.location.href='#[url]#'"#(on)# checked="checked"::#(/on)#/> #[name]# (#[count]#)</a></li>
|
|
#{/element}#</ul>
|
|
<script>if (#[count]# <= 8) toggleVisibility('#[name]#', #[count]#);</script>
|
|
#{/navs}#
|
|
|
|
#{nav-vocabulary}#
|
|
<ul id="nav-vocabulary" class="nav nav-sidebar menugroup">
|
|
<li style="cursor: pointer; cursor: hand;"><h3 onclick="toggleVisibility('vocabulary_#[navname]#', #[count]#);">#[navname]# [#[count]#] <span style="float:right" id="chevron-vocabulary_#[navname]#" class="glyphicon glyphicon-chevron-down" title="click to expand facet"></span></h3></li>
|
|
#{element}#
|
|
<li style="display:none" id="#[id]#"><a href="#[url]#" class="MenuItemLink"><input type="checkbox" onchange="window.location.href='#[url]#'"#(on)# checked="checked"::#(/on)#/> #[name]# (#[count]#)</a></li>
|
|
#{/element}#</ul>
|
|
<script>if (#[count]# <= 8) toggleVisibility('vocabulary_#[navname]#', #[count]#);</script>
|
|
#{/nav-vocabulary}#
|
|
|
|
#(nav-about)#::
|
|
<ul class="nav nav-sidebar menugroup">
|
|
<li><h3>#[headline]#</h3></li>
|
|
<li>#[body]#</li>
|
|
</ul>
|
|
#(/nav-about)# |