boxtec
/
yacy_search_server
mirror of https://github.com/yacy/yacy_search_server
4
1
Fork 0
Code Issues Projects Releases Wiki Activity

New image - search HTML/JavaScript - frontend:

Browse Source 
- <noscript> - area for non-JS - Browsers
- progressbar for the loading - process (may be used in other searches too)
- the image that is available first ist displayed first, so the images aren't moved around when new results arrive
- the correct number of results is displayed
- successfully tested in IE 5.5 and 6, Opera, Firefox and Konqueror (recent versions)



git-svn-id: https://svn.berlios.de/svnroot/repos/yacy/trunk@3904 6c8d7289-2bf4-0310-a012-ef5d649a1542
pull/1/head
michitux 18 years ago
parent 4ea8ccb71e
commit 184ba22ce9
2 changed files with 121 additions and 58 deletions
Show Stats Download Patch File Download Diff File

151
htroot/js/yacysearch.js
Unescape View File

@ -1,3 +1,56 @@
function Progressbar(length, parent) {
// the description, should be translated
var DESCRIPTION_STRING = "Loading results...";
// the number of steps of the bar
this.length = length;
// the current position, expressed in steps (so 100% = length)
this.position = 0;
// the current percentage of the bar
this.percentage = 0
// use this function to display the progress, because it updates everything
this.step = function(count) {
this.position += count;
// update the bar
this.percentage = this.position*(100/this.length);
this.fill.style.width = this.percentage + "%";
// if the end is reached, the bar is hidden/removed
if(this.position==this.length)
removeAllChildren(this.element);
}
// the actual progressbar
var bar = document.createElement("div");
bar.className = "ProgressBar";
bar.style.width = "100%";
bar.style.height = "20px";
bar.style.margin = "10px auto";
bar.style.textAlign = "left";
// the actual bar
this.fill = document.createElement("div");
this.fill.className = "ProgressBarFill";
this.fill.style.width = "0%"
bar.appendChild(this.fill);
// a description for the bar
var description = document.createTextNode(DESCRIPTION_STRING);
var textcontainer = document.createElement("strong");
textcontainer.appendChild(description);
// the container for the elements used by the Progressbar
this.element = document.createElement("div");
this.element.style.textAlign = "center";
// get hasLayout in IE, needed because of the percentage as width of the bar
this.element.className = "gainlayout";
this.element.appendChild(textcontainer);
this.element.appendChild(bar);
parent.appendChild(this.element);
}
function AllTextSnippets(query) { function AllTextSnippets(query) {
var span = document.getElementsByTagName("span"); var span = document.getElementsByTagName("span");
for(var x=0;x<span.length;x++) { for(var x=0;x<span.length;x++) {
@ -18,14 +71,13 @@ function AllMediaSnippets(query, mediatype) {
} }
} }
function AllImageSnippets(query) { function AllImageSnippets(urls, query) {
var div = document.getElementsByTagName("div"); document.getElementById("linkcount").innerHTML = 0;
for(var x=0;x<div.length;x++) { var container = document.getElementById("results");
if (div[x].className == 'snippetLoading') { var progressbar = new Progressbar(urls.length, container);
var url = document.getElementById("url" + div[x].id); for(url in urls) {
requestImageSnippet(url,query); requestImageSnippet(urls[url],query,progressbar);
} }
}
} }
function requestTextSnippet(url, query){ function requestTextSnippet(url, query){
@ -42,10 +94,10 @@ function requestMediaSnippet(url, query, mediatype){
request.send(null); request.send(null);
} }
function requestImageSnippet(url, query){ function requestImageSnippet(url, query, progressbar){
var request=createRequestObject(); var request=createRequestObject();
request.open('get', '/xml/snippet.xml?url=' + escape(url) + '&remove=true&media=image&search=' + escape(query),true); request.open('get', '/xml/snippet.xml?url=' + escape(url) + '&remove=true&media=image&search=' + escape(query),true);
request.onreadystatechange = function () {handleImageState(request)}; request.onreadystatechange = function () {handleImageState(request, progressbar)};
request.send(null); request.send(null);
} }
@ -160,55 +212,56 @@ function handleMediaState(req) {
} }
} }
function handleImageState(req) { function handleImageState(req, progressbar) {
if(req.readyState != 4){ if(req.readyState != 4)
return; return;
}
var response = req.responseXML; var response = req.responseXML;
var urlHash = response.getElementsByTagName("urlHash")[0].firstChild.data; // on errors, the result might not contain the expected elements and would throw an error, so we check for it here
var links = response.getElementsByTagName("links")[0].firstChild.data; if (response.getElementsByTagName("urlHash")) {
var div = document.getElementById(urlHash) // the urlHash is not needed anymore at the moment
removeAllChildren(div); //var urlHash = response.getElementsByTagName("urlHash")[0].firstChild.data;
var links = response.getElementsByTagName("links")[0].firstChild.data;
if (links > 0) { var div = document.getElementById("results")
div.className = "snippetLoaded";
for (i = 0; i < links; i++) { if (links > 0) {
var type = response.getElementsByTagName("type")[i].firstChild.data; for (i = 0; i < links; i++) {
var href = response.getElementsByTagName("href")[i].firstChild.data; var type = response.getElementsByTagName("type")[i].firstChild.data;
var name = response.getElementsByTagName("name")[i].firstChild.data; var href = response.getElementsByTagName("href")[i].firstChild.data;
var attr = response.getElementsByTagName("attr")[i].firstChild.data; var name = response.getElementsByTagName("name")[i].firstChild.data;
var attr = response.getElementsByTagName("attr")[i].firstChild.data;
// <a href="#[url]#"><img src="/ViewImage.png?maxwidth=96&amp;maxheight=96&amp;url=#[url]#" /></a><br /><a href="#[url]#">#[name]#</a> // <a href="#[url]#"><img src="/ViewImage.png?maxwidth=96&amp;maxheight=96&amp;url=#[url]#" /></a><br /><a href="#[url]#">#[name]#</a>
var img = document.createElement("img"); var img = document.createElement("img");
img.setAttribute("src", "/ViewImage.png?maxwidth=96&maxheight=96&url=" + href); img.setAttribute("src", "/ViewImage.png?maxwidth=96&maxheight=96&url=" + href);
img.setAttribute("alt", name); img.setAttribute("alt", name);
var imganchor = document.createElement("a"); var imganchor = document.createElement("a");
imganchor.setAttribute("href", href); imganchor.setAttribute("href", href);
imganchor.className = "thumblink"; imganchor.className = "thumblink";
imganchor.appendChild(img); imganchor.appendChild(img);
var nameanchor = document.createElement("a"); var nameanchor = document.createElement("a");
nameanchor.setAttribute("href", href); nameanchor.setAttribute("href", href);
nameanchor.appendChild(document.createTextNode(name)); nameanchor.appendChild(document.createTextNode(name));
var textcontainer = document.createElement("div"); var textcontainer = document.createElement("div");
textcontainer.className = "TableCellDark"; textcontainer.className = "TableCellDark";
textcontainer.appendChild(nameanchor); textcontainer.appendChild(nameanchor);
var thumbcontainer = document.createElement("div"); var thumbcontainer = document.createElement("div");
thumbcontainer.className = "thumbcontainer"; thumbcontainer.className = "thumbcontainer";
thumbcontainer.appendChild(imganchor); thumbcontainer.appendChild(imganchor);
thumbcontainer.appendChild(textcontainer); thumbcontainer.appendChild(textcontainer);
div.appendChild(thumbcontainer); div.appendChild(thumbcontainer);
//span.appendChild(imganchor); //span.appendChild(imganchor);
}
} else { document.getElementById("linkcount").innerHTML ++
div.className = "snippetError"; }
div.appendChild(document.createTextNode("")); }
} }
progressbar.step(1);
} }

28
htroot/yacysearch.html
Unescape View File

@ -193,17 +193,27 @@ document.getElementById("Enter").value = "search again - catch up more links";
<!-- linklist end --> <!-- linklist end -->
::<!-- type 2: image search: presents image thumbnails --> ::<!-- type 2: image search: presents image thumbnails -->
<!-- linklist begin --> <noscript>
#{results}# <p>
<!-- link begin --> Sorry, but in order to use the image search, you need JavaScript. But here are the urls, yacy would have looked for the images you want. Perhaps you can find them there. Sorry for the inconvenience. If you want a non-JavaScript image search, beg the developers for it.
<div class="snippetLoading" id="#[urlhash]#">loading snippet from <a href="#[url]#" id="url#[urlhash]#">#[urlname]#</a></div> </p>
<!-- link end --> <ul>
#{/results}# #{results}#
<li><a href="#[url]#">#[urlname]#</a></li>
#{/results}#
</ul>
</noscript>
<!-- linklist start -->
<div id="results">
</div>
<!-- linklist end -->
<script type="text/javascript"> <script type="text/javascript">
AllImageSnippets("#[former]#"); var urls = "#{results}##[urlname]# #{/results}#".split(" ");
addHover(); // the last element is always empty because the split gets a space at the end of the string
urls.length --;
if(urls.length > 0)
AllImageSnippets(urls, "#[former]#");
</script> </script>
<!-- linklist end -->
<br style="clear:left;" /> <br style="clear:left;" />
::<!-- type 3: image thumbnail list for one single url --> ::<!-- type 3: image thumbnail list for one single url -->
<table border="0" cellspacing="16" cellpadding="0"> <table border="0" cellspacing="16" cellpadding="0">

Write Preview
Loading…
Cancel
Save