Skip to content

Commit

Permalink
Reimplemented tab state persistence after refresh feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@milospp
milospp committed Dec 7, 2023
1 parent 60e0ef9 commit d54cb8e
Showing 1 changed file with 34 additions and 111 deletions.
145 changes: 34 additions & 111 deletions webapp/src/main/webapp/js/individual/propertyGroupControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,70 +4,39 @@ $(document).ready(function(){

$.extend(this, individualLocalName);
adjustFontSize();
// padSectionBottoms();
// checkLocationHash();
checkLocationHash();

// prevents the page jumping down when loading a page with a requested tab in the url
removeHash();

// ensures that shorter property group sections don't cause the page to "jump around"
// when the tabs are clicked
function padSectionBottoms() {
$.each($('section.property-group'), function() {
var sectionHeight = $(this).height();
if ( sectionHeight < 1000 ) {
$(this).css('margin-bottom', 1000-sectionHeight + "px");
}
});
}

// controls the property group tabs
let showAllBtn = $('#show-all-tabs')[0];
let tabList = $('ul.propertyTabsList')[0];

showAllBtn.addEventListener('show.bs.tab', function (event) {
event.preventDefault()
$('.propertyTabsList.nav.nav-tabs > li').each(function() {
$(this).attr("aria-selected", "false");
$(this).removeClass("active");
});

$('#show-all-tabs').addClass("active").attr("aria-selected", "true");
$(".tab-content>section.tab-pane").addClass('active show') })
showAllTabs();
manageLocalStorage();
})

showAllBtn.addEventListener('hide.bs.tab', function (event) {
$(".tab-content>section.tab-pane").removeClass('show active')
})

// controls the property group tabs
// $.each($('li.clickable'), function() {
// var groupName = $(this).attr("groupName");
// var $propertyGroupLi = $(this);

// $(this).click(function() {
tabList.addEventListener('shown.bs.tab', function (event) {
manageLocalStorage();
})

// if ( $propertyGroupLi.attr("class") == "nonSelectedGroupTab clickable" ) {
// $.each($('li.selectedGroupTab'), function() {
// $(this).removeClass("selectedGroupTab clickable");
// $(this).addClass("nonSelectedGroupTab clickable");
// });
// $propertyGroupLi.removeClass("nonSelectedGroupTab clickable");
// $propertyGroupLi.addClass("selectedGroupTab clickable");
// }
// if ( $propertyGroupLi.attr("groupname") == "viewAll" ) {
// processViewAllTab();
// }
// else {
// padSectionBottoms();
// var $visibleSection = $('section.property-group:visible');
// $visibleSection.hide();
// $('h2[pgroup=tabs]').addClass("hidden");
// $('nav#scroller').addClass("hidden");
// $('section#' + groupName).show();
// }

// manageLocalStorage();
// return false;
// });
// });
function showAllTabs() {
$('.propertyTabsList.nav.nav-tabs > li').each(function() {
$(this).attr("aria-selected", "false");
$(this).removeClass("active");
});

$('#show-all-tabs').addClass("active").attr("aria-selected", "true");
$(".tab-content>section.tab-pane").addClass('active show')
}


function removeHash () {
Expand All @@ -89,22 +58,13 @@ $(document).ready(function(){
}
}

function processViewAllTab() {
$.each($('section.property-group'), function() {
$(this).css("margin-bottom", "1px");
$(this).children('h2').css("margin-top", "-15px").css("border-bottom","1px solid #DFEBE5").css("padding","12px 25px 10px 20px");
$(this).show();
$('h2[pgroup=tabs]').removeClass("hidden");
$('nav#scroller').removeClass("hidden");
});
}

// If a page is requested with a hash this script will try to open a property
// group tab matching that hash value.
// The geographic focus map links to a county's page with a #map hash. This will
// select the research tab and expand the 'geographic focus of' property list.
function checkLocationHash() {
var currentTab = $('li.selectedGroupTab').attr('groupName')
var currentTab = $('li.nav-link').attr('groupName')

if ( location.hash ) {
// remove the trailing white space
Expand All @@ -124,55 +84,23 @@ $(document).ready(function(){

if ( tabName ) {
if ( tabName != currentTab ) {
swapTabs(tabName, currentTab)
let tabSelect = $('li[groupName="' + tabName + '"]');
let tab = new bootstrap.Tab(tabSelect);
tab.show()
}
}

// the requested tab was gibberish, try the local storage
else {
retrieveLocalStorage(currentTab);
retrieveLocalStorage();
}
}

else {
retrieveLocalStorage(currentTab);
retrieveLocalStorage();
}
}

function swapTabs(tabName, currentTab) {
$('li[groupName="' + tabName + '"]').removeClass("nonSelectedGroupTab clickable");
$('li[groupName="' + tabName + '"]').addClass("selectedGroupTab clickable");
// deselect the first tab
$('li[groupName="' + currentTab + '"]').removeClass("selectedGroupTab clickable");
$('li[groupName="' + currentTab + '"]').addClass("nonSelectedGroupTab clickable");

if ( tabName == 'viewAll'){
processViewAllTab();
}

else {
padSectionBottoms();
$('section.property-group:visible').hide();
// show the selected tab section
$('section#' + tabName).show();
}

}

function geoFocusExpand() {
// if the ontology is set to collate by subclass, $list.length will be > 0
// this ensures both possibilities are covered
var $list = $('ul#geographicFocusOfList').find('ul');
if ( $list.length > 0 )
{
var $more = $list.find('a.more-less');
$more.click();
}
else {
var $more = $('ul#geographicFocusOfList').find('a.more-less');
$more.click();
}
}

// Next two functions -- keep track of which property group tab was selected,
// so if we return from a custom form or a related individual, even via the back button,
Expand Down Expand Up @@ -202,15 +130,15 @@ $(document).ready(function(){
}
}
var selectedTab = [];
selectedTab.push($('li.selectedGroupTab').attr('groupName'));
selectedTab.push($('li.nav-link.active').attr('groupName'));
amplify.store(localName, selectedTab);
var checkLength = amplify.store(localName);
if ( checkLength.length == 0 ) {
amplify.store(localName, null);
}
}

function retrieveLocalStorage(currentTab) {
function retrieveLocalStorage() {

var localName = this.individualLocalName;
var selectedTab = amplify.store(individualLocalName);
Expand All @@ -225,28 +153,23 @@ $(document).ready(function(){
// if the selected tab is the default first one, don't do anything
if ( $('li.clickable').first().attr("groupName") != groupName ) {
// deselect the default first tab
var $firstTab = $('li.clickable').first();
$firstTab.removeClass("selectedGroupTab clickable");
$firstTab.addClass("nonSelectedGroupTab clickable");
// select the stored tab
$("li[groupName='" + groupName + "']").removeClass("nonSelectedGroupTab clickable");
$("li[groupName='" + groupName + "']").addClass("selectedGroupTab clickable");
// hide the first tab section
$('section.property-group:visible').hide();

if ( groupName == "viewAll" ) {
processViewAllTab();
}
console.log("View all")
showAllTabs();
} else {

// show the selected tab section
$('section#' + groupName).show();
let tabSelect = $('li[groupName="' + groupName + '"]');
let tab = new bootstrap.Tab(tabSelect);
tab.show();
}
}
}
}
// If you wish to default to the "all" tab for small profiles, uncomment the following lines
// -- Start view all mod
// else if ( $('article.property').length < 10 ) {
// swapTabs('viewAll', currentTab)
// showAllTabs();
// }
// -- End view all mod
}
Expand Down

0 comments on commit d54cb8e

Please sign in to comment.