diff --git a/webapp/src/main/webapp/js/individual/propertyGroupControls.js b/webapp/src/main/webapp/js/individual/propertyGroupControls.js index c4386256..1f844409 100644 --- a/webapp/src/main/webapp/js/individual/propertyGroupControls.js +++ b/webapp/src/main/webapp/js/individual/propertyGroupControls.js @@ -1,19 +1,22 @@ /* $This file is distributed under the terms of the license in /doc/license.txt$ */ $(document).ready(function(){ - + $.extend(this, individualLocalName); adjustFontSize(); padSectionBottoms(); 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"); + $(this).css('margin-bottom', 1000-sectionHeight + "px"); } }); } @@ -22,9 +25,9 @@ $(document).ready(function(){ $.each($('li.clickable'), function() { var groupName = $(this).attr("groupName"); var $propertyGroupLi = $(this); - + $(this).click(function() { - + if ( $propertyGroupLi.attr("class") == "nonSelectedGroupTab clickable" ) { $.each($('li.selectedGroupTab'), function() { $(this).removeClass("selectedGroupTab clickable"); @@ -41,69 +44,107 @@ $(document).ready(function(){ var $visibleSection = $('section.property-group:visible'); $visibleSection.hide(); $('h2[pgroup=tabs]').addClass("hidden"); - $('nav#scroller').addClass("hidden"); + $('nav#scroller').addClass("hidden"); $('section#' + groupName).show(); } + manageLocalStorage(); return false; }); }); - + + + function removeHash () { + if ( location.hash ) { + var scrollV, scrollH, loc = window.location; + if ("pushState" in history) + history.replaceState("", document.title, loc.pathname + loc.search); + else { + // Prevent scrolling by storing the page's current scroll offset + scrollV = document.body.scrollTop; + scrollH = document.body.scrollLeft; + + loc.hash = ""; + + // Restore the scroll offset, should be flicker free + document.body.scrollTop = scrollV; + document.body.scrollLeft = scrollH; + } + } + } + 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(); + $(this).show(); $('h2[pgroup=tabs]').removeClass("hidden"); - $('nav#scroller').removeClass("hidden"); - }); + $('nav#scroller').removeClass("hidden"); + }); } - - // If users click a marker on the home page map, they are taken to the profile - // page of the corresponding country. The url contains the word "Research" in - // the location hash. Use this to select the Research tab, which displays the - // researchers who have this countru as a geographic focus. + + // 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') + if ( location.hash ) { // remove the trailing white space location.hash = location.hash.replace(/\s+/g, ''); - if ( location.hash.indexOf("map") >= 0 ) { - // get the name of the group that contains the geographicFocusOf property. - // if it doesn't exist, don't do anything. + var tabExists = $("[groupname=" + location.hash.replace('#', '') + "]") + + if ( tabExists.length > 0 ) { + tabName = location.hash.replace('#', '') + } + + else if ( location.hash.indexOf("map") >= 0 ) { if ( $('h3#geographicFocusOf').length ) { var tabName = $('h3#geographicFocusOf').parent('article').parent('div').attr("id"); tabName = tabName.replace("Group",""); - tabNameCapped = tabName.charAt(0).toUpperCase() + tabName.slice(1); - // if the name of the first tab section = tabName we don't have to do anything; - // otherwise, select the correct tab and deselect the first one - var $firstTab = $('li.clickable').first(); - if ( $firstTab.text() != tabNameCapped ) { - // select the correct tab - $('li[groupName="' + tabName + '"]').removeClass("nonSelectedGroupTab clickable"); - $('li[groupName="' + tabName + '"]').addClass("selectedGroupTab clickable"); - // deselect the first tab - $firstTab.removeClass("selectedGroupTab clickable"); - $firstTab.addClass("nonSelectedGroupTab clickable"); - $('section.property-group:visible').hide(); - // show the selected tab section - $('section#' + tabName).show(); - } } - // if there is a more link, "click" more to show all the researchers - // we need the timeout delay so that the more link can get rendered - setTimeout(geoFocusExpand,250); } + + if ( tabName ) { + if ( tabName != currentTab ) { + swapTabs(tabName, currentTab) + } + } + + // the requested tab was gibberish, try the local storage else { - retrieveLocalStorage(); - } + retrieveLocalStorage(currentTab); + } } + else { - retrieveLocalStorage(); + retrieveLocalStorage(currentTab); } } + 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 + // 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 ) @@ -116,7 +157,7 @@ $(document).ready(function(){ $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, // the same property group will be selected as before. @@ -153,20 +194,20 @@ $(document).ready(function(){ } } - function retrieveLocalStorage() { - + function retrieveLocalStorage(currentTab) { + var localName = this.individualLocalName; var selectedTab = amplify.store(individualLocalName); - + if ( selectedTab != undefined ) { var groupName = selectedTab[0]; - - // unlikely, but it's possible a tab that was previously selected and stored won't be - // displayed because the object properties would have been deleted (in non-edit mode). - // So ensure that the tab in local storage has been rendered on the page. - if ( $("ul.propertyTabsList li[groupName='" + groupName + "']").length ) { + + // unlikely, but it's possible a tab that was previously selected and stored won't be + // displayed because the object properties would have been deleted (in non-edit mode). + // So ensure that the tab in local storage has been rendered on the page. + if ( $("ul.propertyTabsList li[groupName='" + groupName + "']").length ) { // if the selected tab is the default first one, don't do anything - if ( $('li.clickable').first().attr("groupName") != groupName ) { + if ( $('li.clickable').first().attr("groupName") != groupName ) { // deselect the default first tab var $firstTab = $('li.clickable').first(); $firstTab.removeClass("selectedGroupTab clickable"); @@ -186,8 +227,14 @@ $(document).ready(function(){ } } } + // 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) +// } +// -- End view all mod } - // if there are so many tabs that they wrap to a second line, adjust the font size to + // if there are so many tabs that they wrap to a second line, adjust the font size to //prevent wrapping function adjustFontSize() { var width = 0; @@ -231,6 +278,5 @@ $(document).ready(function(){ $('ul.propertyTabsList li:last-child').css('width', newDiff + 'px'); } } -}); - +}); \ No newline at end of file