yacy_search_server/htroot/yacysearchtrailer.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>&nbsp;&nbsp;&nbsp;Peer-to-Peer&nbsp;&nbsp;&nbsp;&nbsp;</span>"
  data-off-text="<span>&nbsp;&nbsp;&nbsp;&nbsp;Stealth&nbsp;Mode&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;Peer-to-Peer&nbsp;&nbsp;&nbsp;&nbsp;</span>"
  data-off-text="<span>&nbsp;&nbsp;&nbsp;&nbsp;Stealth&nbsp;Mode&nbsp;&nbsp;&nbsp;</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 id="rankingButtons" class="btn-group btn-group-justified" data-nav-generation="#[nav-generation]#">
  <!-- data-nav-generation attribute helps the browser know whether the search navigators have to be refreshed -->
  <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>
#(strictContentDomSwitch)#::
<div class="btn-group btn-group-justified">
  <div class="btn-group btn-group-xs"><button type="button" title="Extend media search results to pages including such medias (provides generally more results, but eventually less relevant)" class="btn btn-default#(strictContentDom)# active::#(/strictContentDom)#" #(strictContentDom)#::onclick="document.getElementById('strictContentDom').value='false';document.searchform.submit();"#(/strictContentDom)#>Extended</button></div>
  <div class="btn-group btn-group-xs"><button type="button" title="Strictly limit media search results to indexed documents matching exactly the desired content domain." class="btn btn-default#(strictContentDom)#:: active#(/strictContentDom)#" #(strictContentDom)#onclick="document.getElementById('strictContentDom').value='true';document.searchform.submit();"::#(/strictContentDom)#>Strict</button></div>
</div>
#(/strictContentDomSwitch)#
#(/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>&nbsp;</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>

#{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)#