New media-search ui:

- uses the progressbar introduced in the image-search
- results are displayed using the same layout as the text-search
- results are displayed in the order they arrive


git-svn-id: https://svn.berlios.de/svnroot/repos/yacy/trunk@4041 6c8d7289-2bf4-0310-a012-ef5d649a1542

htroot/js/yacysearch.js

@@ -61,14 +61,13 @@ function AllTextSnippets(query) {
 	}
 }
 
-function AllMediaSnippets(query, mediatype) {
-	var span = document.getElementsByTagName("span");
-	for(var x=0;x<span.length;x++) {
-		if (span[x].className == 'snippetLoading') {
-				var url = document.getElementById("url" + span[x].id);
-				requestMediaSnippet(url,query,mediatype);
-		}
-	}
+function AllMediaSnippets(urls, query, mediatype) {
+  document.getElementById("linkcount").innerHTML = 0;
+  var container = document.getElementById("results");
+  var progressbar = new Progressbar(urls.length, container);
+  for (url in urls) {
+    requestMediaSnippet(urls[url],query,mediatype,progressbar);
+  }
 }
 
 function AllImageSnippets(urls, query) {
@@ -87,10 +86,10 @@ function requestTextSnippet(url, query){
 	request.send(null);
 }
 
-function requestMediaSnippet(url, query, mediatype){
+function requestMediaSnippet(url, query, mediatype, progressbar){
 	var request=createRequestObject();
 	request.open('get', '/xml/snippet.xml?url=' + escape(url) + '&remove=true&media=' + escape(mediatype) + '&search=' + escape(query),true);
-	request.onreadystatechange = function () {handleMediaState(request)};
+	request.onreadystatechange = function () {handleMediaState(request, progressbar)};
 	request.send(null);
 }
 
@@ -165,54 +164,55 @@ function handleTextState(req) {
 	}
 }
 
-function handleMediaState(req) {
-    if(req.readyState != 4){
-		return;
-	}
-	
-	var response = req.responseXML;
-	var urlHash = response.getElementsByTagName("urlHash")[0].firstChild.data;
-	var links = response.getElementsByTagName("links")[0].firstChild.data;
-	var span = document.getElementById(urlHash)
-	removeAllChildren(span);
+function handleMediaState(req, progressbar) {
+  if(req.readyState != 4){
+    return;
+  }
+
+  var response = req.responseXML;
+  // On errors, the result might not contain what we look for...
+  if (response.getElementsByTagName("urlHash")) {
+    var urlHash = response.getElementsByTagName("urlHash")[0].firstChild.data;
+    var links = response.getElementsByTagName("links")[0].firstChild.data;
+    var container = document.getElementById("results");
 	
-	if (links > 0) {
-		span.className = "snippetLoaded";
-		for (i = 0; i < links; i++) {
-			var type = response.getElementsByTagName("type")[i].firstChild.data;
-			var href = response.getElementsByTagName("href")[i].firstChild.data;
-			var name = response.getElementsByTagName("name")[i].firstChild.data;
-			var attr = response.getElementsByTagName("attr")[i].firstChild.data;
-
-			var nameanchor = document.createElement("a");
-			nameanchor.setAttribute("href", href);
-			nameanchor.appendChild(document.createTextNode(name));
-			
-			var linkanchor = document.createElement("a");
-			linkanchor.setAttribute("href", href);
-			linkanchor.appendChild(document.createTextNode(href));
-			
-			var col1 = document.createElement("td");
-			col1.setAttribute("width", "200");
-			col1.appendChild(nameanchor);
-			
-			var col2 = document.createElement("td");
-			col2.setAttribute("width", "500");
-			col2.appendChild(linkanchor);
-			
-			var row = document.createElement("tr");
-			row.className = "TableCellDark";
-			row.appendChild(col1);
-			row.appendChild(col2);
-
-			var table = document.createElement("table");
-			table.appendChild(row);
-			span.appendChild(table);
-		}
-	} else {
-		span.className = "snippetError";
-		span.appendChild(document.createTextNode(""));
-	}
+    if (links > 0) {
+      for (i = 0; i < links; i++) {
+        var type = response.getElementsByTagName("type")[i].firstChild.data;
+        var href = response.getElementsByTagName("href")[i].firstChild.data;
+        var name = response.getElementsByTagName("name")[i].firstChild.data;
+        var attr = response.getElementsByTagName("attr")[i].firstChild.data;
+
+        var link = document.createElement("a");
+        link.setAttribute("href", href);
+        link.setAttribute("target", "_parent");
+        link.appendChild(document.createTextNode(name));
+
+        var title = document.createElement("h4");
+        title.className = "linktitle";
+        title.appendChild(link);
+
+        var urllink = document.createElement("a");
+        urllink.setAttribute("href", href);
+        urllink.setAttribute("target", "_parent");
+        urllink.appendChild(document.createTextNode(href));
+
+        var url = document.createElement("p");
+        url.className = "url";
+        url.appendChild(urllink);
+
+        var searchresultcontainer = document.createElement("div");
+        searchresultcontainer.className = "searchresults";
+        searchresultcontainer.appendChild(title);
+        searchresultcontainer.appendChild(url);
+
+        container.appendChild(searchresultcontainer);
+
+        document.getElementById("linkcount").innerHTML++;
+      }
+    }
+  }
+  progressbar.step(1);
 }
 
 function handleImageState(req, progressbar) {

htroot/yacysearch.html

@@ -180,22 +180,38 @@ document.getElementById("Enter").value = "search again - catch up more links";
 	</p>
 	#(/resultbottomline)#
 	::<!-- type 1: media search -->
-	<!-- linklist begin -->
-	#{results}#
-	<!-- link begin -->
-	    <span class="snippetLoading" id="#[urlhash]#">loading snippet from <a href="#[url]#" id="url#[urlhash]#">#[urlname]#</a><br /></span>
-	<!-- link end -->
-	#{/results}#
+  <!-- non-js variant -->
+  <noscript>
+    <p>
+      Sorry, at the moment you need JavaScript in order to use this search. But here are the urls where YaCy would have looked for your searchresults. Perhaps you can find them there. Sorry for the inconvenience. If you want a non-JavaScript search, beg the developers for it.
+    </p>
+    <!-- linklist begin -->
+    <ul>
+	    #{results}#
+      <!-- link begin -->
+      <li><a href="#[url]#">#[urlname]#</a></li>
+	    <!-- link end -->
+	    #{/results}#
+    </ul>
+	  <!-- linklist end -->
+  </noscript>
+  <!-- linklist start-->
+  <div id="results">
+  </div>
+  <!-- linklist end-->
 	<script type="text/javascript">
-	AllMediaSnippets("#[former]#", "#[mediatype]#");
-	addHover();
+    var urls = "#{results}##[urlname]# #{/results}#".split(" ");
+    // the last element is always empty because the split gets a space at the end of the string
+    urls.length--;
+    if(urls.length > 0) {
+	    AllMediaSnippets(urls, "#[former]#", "#[mediatype]#");
+    }
 	</script> 
 	
-	<!-- linklist end -->
 	::<!-- type 2: image search: presents image thumbnails -->
   <noscript>
     <p>
-      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.
+      Sorry, but in order to use the image search, you need JavaScript. But here are the urls where 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.
     </p>
     <ul>
     #{results}#