Change scroll position with javascript instead of CSS.

Makes scroll adjustment work for all types of anchors.
bug: 15129373

Change-Id: I0f934170613e8a60d94f09192e03117b8e9d4852

diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css
index 688d048..e8de87d 100644 (file)
--- a/tools/droiddoc/templates-sdk/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk/assets/css/default.css
@@ -895,7 +895,7 @@ scroll top left;
   .framed-nexus4-port-216 img {
     width: 216px;
     height: 360px; }
-    
+
 .framed-nexus5-port-span-5 {
   background: transparent url(../images/styles/device_nexus5_blank_port_span5.png) no-repeat
   scroll top left;
@@ -2762,7 +2762,7 @@ table.blank th, table.blank td {
 .caption {
   margin: 0.5em 0 2em 0;
   color: #000;
-  font-size: 11.5px; 
+  font-size: 11.5px;
 }
 
 .nolist, .nolist ul, .nolist ol {
@@ -5139,8 +5139,6 @@ a.download-sdk {
   margin-bottom: 0px;
   font-size: 20px;
   color: #363636;
-  padding-top: 70px;
-  margin-top:-60px;
 }
 .headerLine hr {
   overflow: hidden;
@@ -5381,7 +5379,7 @@ a.download-sdk {
   opacity: 0;
 }
 /* disabled to make way for fade/ellipsis truncation,
-   and the plusone moves up. 
+   and the plusone moves up.
 .resource-card:hover .card-info .description .text {
   padding-right: 70px;
 } */
@@ -6387,12 +6385,4 @@ height:30px;
 div.jd-descr > .resource-widget[data-section=distribute\/tools]
 .section-card-menu .card-info ul li {
   border-top-color: #7e3794 !important;
-}
-
-div.jd-descr > h2:before, h3:before {
-display:block;
-content: "   ";
-margin-top:-60px;
-height: 70px;
-visibility:hidden;
 }
\ No newline at end of file

diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index d8d5732..23f0660 100644 (file)
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -218,7 +218,7 @@ $(document).ready(function() {
     }
   } else if ($("body").hasClass("about")) {
     $("#sticky-header").addClass("about");
-  } 
+  }
 
   // set global variable so we can highlight the sidenav a bit later (such as for google reference)
   // and highlight the sidenav
@@ -894,7 +894,7 @@ function setStickyTop() {
 }
 
 /*
- * Displays sticky nav bar on pages when dac header scrolls out of view 
+ * Displays sticky nav bar on pages when dac header scrolls out of view
  */
 $(window).scroll(function(event) {
 
@@ -986,7 +986,10 @@ $(window).scroll(function(event) {
       $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'});
     });
 
-    resizeNav();  // must resize once loading is finished
+    // Resize once loading is finished
+    resizeNav();
+    // Check if there's an anchor that we need to scroll into view
+    offsetScrollForSticky();
   });
 
 })();
@@ -1821,13 +1824,12 @@ function search_changed(e, kd, toroot)
             return false;
         }
     }
-    // Stop here if Google results are showing
+    // If Google results are showing, return true to allow ajax search to execute
     else if ($("#searchResults").is(":visible")) {
-        //If search_results is scrolled out of view, scroll to top on input
+        // Also, if search_results is scrolled out of view, scroll to top to make results visible
         if ((sticky ) && (search.value != "")) {
           $('body,html').animate({scrollTop:0}, '500', 'swing');
         }
-        // if results aren't showing (and text not empty), return true to allow search to execute
         return true;
     }
     // 38 UP ARROW
@@ -2497,6 +2499,25 @@ google.setOnLoadCallback(function(){
   }
 }, true);
 
+/* Adjust the scroll position to account for sticky header, only if the hash matches an id */
+function offsetScrollForSticky() {
+  var hash = location.hash;
+  var $matchingElement = $(hash);
+  // If there's no element with the hash as an ID, then look for an <a name=''> with it.
+  if ($matchingElement.length < 1) {
+    $matchingElement = $('a[name="' + hash.substr(1) + '"]');
+  }
+  // Sanity check that hash is a real hash and that there's an element with that ID on the page
+  if ((hash.indexOf("#") == 0) && $matchingElement.length) {
+    // If the position of the target element is near the top of the page (<20px, where we expect it
+    // to be because we need to move it down 60px to become in view), then move it down 60px
+    if (Math.abs($matchingElement.offset().top - $(window).scrollTop()) < 20) {
+      $(window).scrollTop($(window).scrollTop() - 60);
+    } else {
+    }
+  }
+}
+
 // when an event on the browser history occurs (back, forward, load) requery hash and do search
 $(window).hashchange( function(){
   // If the hash isn't a search query or there's an error in the query,
@@ -2506,6 +2527,7 @@ $(window).hashchange( function(){
     if (!$("#searchResults").is(":hidden")) {
       hideResults();
     }
+    offsetScrollForSticky();
     return;
   }
 
@@ -3348,7 +3370,7 @@ function showSamples() {
     showing lines that are cut off. This works with the css ellipsis
     classes to fade last text line and apply an ellipsis char. */
 
-    //card text currently uses 15px line height. 
+    //card text currently uses 15px line height.
     var lineHeight = 15;
     $('.card-info .text').ellipsisfade(lineHeight);
   });
@@ -3516,6 +3538,7 @@ function showSamples() {
     while (i < resources.length) {
       var cardSize = cardSizes[j++ % cardSizes.length];
       cardSize = cardSize.replace(/^\s+|\s+$/,'');
+      // console.log("cardsize is " + cardSize);
       // Some card sizes do not get a plusone button, such as where space is constrained
       // or for cards commonly embedded in docs (to improve overall page speed).
       plusone = !((cardSize == "6x2") || (cardSize == "6x3") ||