Permalink
Browse files

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

TODO: Add some markup so that DOM traversal in the animations is less painful.
  • Loading branch information...
JeremyRand committed Apr 3, 2017
1 parent d37df75 commit 6ec256dc344d8bb042e58eb6686eeabccb6d2665
Showing with 167 additions and 3 deletions.
  1. +161 −0 htroot/js/yacysort.js
  2. +3 −0 htroot/yacysearch.html
  3. +3 −3 htroot/yacysearchtrailer.html
@@ -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(
@@ -221,7 +221,10 @@ <h4 class="linktitle">
<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 -->
@@ -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">

0 comments on commit 6ec256d

Please sign in to comment.