(WIP) Fix the sidebar when Javascript resorting is in use.

TODO: Add some markup so that DOM traversal in the animations is less painful.

htroot/js/yacysort.js

@@ -72,6 +72,163 @@ var laterPage = function() {
   displayPage();
 };
 
+var processSidebarNavProtocols = function(navProtocolsOld, navProtocolsNew) {
+  navProtocolsOld.find(".btn-group-xs").each( function(index, oldProtocol) {
+    var protocolId = $(oldProtocol).attr("id");
+
+    var newProtocol = navProtocolsNew.find("#" + protocolId);
+
+    // Check whether the protocol has been removed in the new sidebar.
+    if (newProtocol.length === 0) {
+      console.log("Deleting nav-protocol...");
+      $(oldProtocol).hide(1000);
+    }
+  } );
+
+  navProtocolsNew.find(".btn-group-xs").each( function(index, newProtocol) {
+    var protocolId = $(newProtocol).attr("id");
+
+    var oldProtocol = navProtocolsOld.find("#" + protocolId);
+
+    // Check whether the protocol exists in both the new and old sidebar
+    if (oldProtocol.length === 1) {
+      // Replace the HTML.
+      // TODO: Look into smoother animations.
+      $(oldProtocol).html($(newProtocol).html()).show(1000);
+    }
+
+    // Check whether the protocol has been added in the new sidebar.
+    if (oldProtocol.length === 0) {
+      // We need to insert the protocol in the right position.
+
+      // TODO: Insert in the correct position instead of the end.
+      $(newProtocol).hide();
+      $(navProtocolsOld).append($(newProtocol));
+      $(newProtocol).show(1000);
+    }
+  } );
+};
+
+// TODO: test this function
+// This is for sidebar items that are <ul> elements with the "menugroup" class.
+var processSidebarMenuGroup = function(listOld, listNew) {
+  if ( $(listNew).length === 1) {
+    if ( $(listOld).length < 1) {
+      console.warn("listOld doesn't exist, so can't replace it with listNew.");
+      return;
+    }
+
+    var childrenOld = $(listOld).children("li");
+    if ( childrenOld.length >= 2 ) {
+      // There are at least 2 <li> elements in the list.
+      // The first one is the heading, so skip that one.
+      var childToCheck = childrenOld[1];
+      if ( $(childToCheck).css("display") == "block" ) {
+        // The list has been expanded by the user already.
+        // That means we need to expand the new list to match.
+        // If we don't do this, the new list will be collapsed every time we update,
+        // which would annoy the user.
+
+        $(listNew).children("li").css("display", "block");
+      }
+    }
+
+    // TODO: animate
+    listOld.html(listNew.html());
+  }
+};
+
+var processSidebar = function(data) {
+  var oldSidebar = $("#sidebar");
+  var newSidebar = $('<div class="col-sm-4 col-md-3 sidebar" id="sidebar">\n\n' + data + '\n\n</div>');
+
+  /*
+  if( old_sidebar.html() == data ) {
+    console.log("Sidebar unchanged.");
+    return;
+  }
+  */
+  /*
+  if( $.trim(old_sidebar.html()) == $.trim(data) ) {
+    console.log("Sidebar unchanged.");
+    return;
+  }
+  */
+  //else if( $.trim(old_sidebar.html()) == $.trim("") ) {
+  if( oldSidebar.children().length === 0 ) {
+    console.log("Initializing sidebar...");
+    oldSidebar.html(newSidebar.html());
+  }
+  else {
+    console.log("Sidebar has changed, updating...");
+
+    var navProtocolsOld = $("#nav-protocols");
+    var navProtocolsNew = newSidebar.find("#nav-protocols");
+    
+    if( navProtocolsNew.length === 1 ) {
+      processSidebarNavProtocols(navProtocolsOld, navProtocolsNew);
+    }
+
+    var tagCloudOld = $("#tagcloud");
+    var tagCloudNew = newSidebar.find("#tagcloud");
+
+    if ( tagCloudNew.length === 1 ) {
+      // TODO: animate
+      tagCloudOld.html(tagCloudNew.html());
+    }
+
+    var catLocationOld = $("#cat-location");
+    var catLocationNew = newSidebar.find("#cat-location");
+
+    if ( catLocationNew.length === 1 ) {
+      // TODO: animate
+      catLocationOld.html(catLocationNew.html());
+    }
+
+    // TODO: nav-dates
+
+    // domains (AKA providers)
+    // TODO: test domains
+    // TODO: we should assign an "id" attribute to the "domains" <ul>.
+    processSidebarMenuGroup($("#domains_0").parent(), newSidebar.find("#domains_0").parent());
+    
+    // TODO: test languages
+    // TODO: we should assign an "id" attribute to the "languages" <ul>.
+    processSidebarMenuGroup($("#languages_0").parent(), newSidebar.find("#languages_0").parent());
+
+    // TODO: test authors
+    // TODO: we should assign an "id" attribute to the "authors" <ul>.
+    processSidebarMenuGroup($("#authors_0").parent(), newSidebar.find("#authors_0").parent());
+
+    // TODO: Wiki Name Space
+
+    // TODO: test filetype
+    // TODO: we should assign an "id" attribute to the "authors" <ul>.
+    processSidebarMenuGroup($("#filetype_0").parent(), newSidebar.find("#filetype_0").parent());
+
+    // TODO: navs
+
+    // TODO: nav-vocabulary
+
+    // TODO: nav-about
+  }
+
+  // TODO: figure out if a better timeout strategy is feasible
+  setTimeout(updateSidebar, 500);
+};
+
+var updateSidebar = function() {
+  $.get(
+    "yacysearchtrailer.html",
+    {
+      "eventID": theEventID,
+    },
+    processSidebar
+  );
+  
+  //$("#sidebar").load("yacysearchtrailer.html", {"eventID": theEventID});
+};
+
 var processItem = function(data) {
   var newItem = $(data).hide();
 
@@ -126,6 +283,10 @@ var processItem = function(data) {
 
   displayPage();
 
+  if (itemCount === 0) {
+    updateSidebar();
+  }
+
   // Increment itemCount and get another item.
   itemCount++;
   $.get(

htroot/yacysearch.html

@@ -221,7 +221,10 @@ document.getElementById("Enter").innerHTML = "search again";
 
 <div class="col-sm-4 col-md-3 sidebar" id="sidebar">
 <!-- navigation begin -->
+#(jsResort)#
 <!--#include virtual="yacysearchtrailer.html?eventID=#[eventID]#" -->
+::
+#(/jsResort)#
 <!-- navigation end -->
 
 </div> <!-- close sidebar -->

htroot/yacysearchtrailer.html

@@ -69,9 +69,9 @@
 
 #(nav-protocols)#::
 <p class="navbutton"></p>
-<div class="btn-group btn-group-justified">
+<div id="nav-protocols" class="btn-group btn-group-justified">
 #{element}#
-  <div 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>
+  <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)#
@@ -83,7 +83,7 @@
 #(/nav-topics)#
 
 #(cat-location)#::
-<ul class="nav nav-sidebar menugroup">
+<ul id="cat-location" class="nav nav-sidebar menugroup">
 <li><h3>Location</h3></li>
 <li>
 <a href="yacysearch_location.html?query=#[queryenc]#" class="MenuItemLink">