Merge pull request #34 from vivo-project/feature/1232

[VIVO-1232] Allow direct links to specific property tabs

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
+    // If a page is requested with a hash this script will try to open a property
-    // page of the corresponding country. The url contains the word "Research" in
+    // group tab matching that hash value.
-    // the location hash. Use this to select the Research tab, which displays the
+    // The geographic focus map links to a county's page with a #map hash. This will
-    // researchers who have this countru as a geographic focus.
+    // 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 ) {  
+            var tabExists = $("[groupname=" + location.hash.replace('#', '') + "]")
-                // get the name of the group that contains the geographicFocusOf property.
+
-                // if it doesn't exist, don't do anything.
+            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 
+            // 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). 
+            // 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.     
+            // So ensure that the tab in local storage has been rendered on the page.
-            if ( $("ul.propertyTabsList li[groupName='" + groupName + "']").length ) { 
+            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');
         }
     }
-});
-
 
+});