Merge pull request #2042 from mozilla/bug-1014648-tips-page-hash-scroll

[fix bug 1014648] Loading /firefox/desktop/tips/ with a hash should not scroll the page

bedrock/firefox/templates/firefox/desktop/tips.html

@@ -51,7 +51,7 @@
   </div>{# /#page-header #}
 
   <div id="page-content">
-    <div class="container pager">
+    <div class="container pager pager-no-history">
       <div id="tips-nav-prev-next">
         <button class="link-button" id="tip-prev">{{ _('back') }}</button>
 
@@ -67,7 +67,7 @@
       </div>
 
       <div id="tips-wrapper" class="pager-content">
-        <div class="tip pager-page default-page" id="bookmarks">
+        <div class="tip pager-page default-page" id="bookmarks-tip">
           <div class="tip-copy">
             <div class="ordinal">{{ _('1') }}</div>
 
@@ -92,7 +92,7 @@
           </figure>
         </div>
 
-        <div class="tip pager-page" id="simplify">
+        <div class="tip pager-page" id="simplify-tip">
           <div class="tip-copy">
             <div class="ordinal">{{ _('2') }}</div>
 
@@ -117,7 +117,7 @@
           </figure>
         </div>
 
-        <div class="tip" id="arrange">
+        <div class="tip" id="arrange-tip">
           <div class="tip-copy">
             <div class="ordinal">{{ _('3') }}</div>
 
@@ -141,7 +141,7 @@
           </figure>
         </div>
 
-        <div class="tip" id="sync">
+        <div class="tip" id="sync-tip">
           <div class="tip-copy">
             <div class="ordinal">{{ _('4') }}</div>
 
@@ -169,7 +169,7 @@
           </figure>
         </div>
 
-        <div class="tip" id="addons">
+        <div class="tip" id="addons-tip">
           <div class="tip-copy">
             <div class="ordinal">{{ _('5') }}</div>
 

media/css/firefox/desktop/tips.less

@@ -398,6 +398,10 @@ html[lang^='en'] #tips-nav-direct li a span:after {
         display: none;
         margin-bottom: 0;
     }
+
+    #page-content {
+        visibility: hidden;
+    }
 }
 
 /* {{{ RTL overrides */

media/js/firefox/desktop/tips.js

@@ -27,11 +27,31 @@
 
         var pager = Mozilla.Pager.rootPagers[0];
 
+        // sets the current pager tab based on the url hash
+        function setCurrentPage () {
+            var currentHash = window.location.hash.replace(/#/, '') + '-tip';
+            if (window.location.hash !== '') {
+                // loop through all pages, find page with matching id
+                for (var i = 0; i < pager.pages.length; i++) {
+                    if (pager.pages[i].id === currentHash) {
+                        pager.setPage(pager.pages[i]);
+                        break;
+                    }
+                }
+            }
+        }
+
+        // set the initial page content
+        setCurrentPage();
+        $('#page-content').css('visibility', 'visible');
+
         // updates nav links based on current page index
         var updateNavLinks = function() {
+            var current = pager.currentPage.id.replace('-tip', '');
+
             // update direct nav links
             $tipsNavDirect.find('a').removeClass('selected');
-            $tipsNavDirect.find('a[href="#' + pager.currentPage.id + '"]').addClass('selected');
+            $tipsNavDirect.find('a[href="#' + current + '"]').addClass('selected');
 
             // update next/prev links
             if (pager.currentPage.index === 0) {
@@ -47,7 +67,7 @@
 
             // update dots (visible on mobile only)
             $tipsNavDots.find('span').removeClass('active');
-            $tipsNavDots.find('span[data-tip="' + pager.currentPage.id + '"]').addClass('active');
+            $tipsNavDots.find('span[data-tip="' + current + '"]').addClass('active');
         };
 
         // update nav links based on page visible on load (using URL hash)
@@ -59,7 +79,7 @@
 
             var $this = $(this);
 
-            var selectedPageId = $this.attr('href').replace(/#/, '');
+            var selectedPageId = $this.attr('href').replace('#', '') + '-tip';
             var selectedPageIndex;
 
             // loop through all pages, find page with matching id
@@ -75,6 +95,8 @@
 
             updateNavLinks();
 
+            window.location.hash = $this.attr('href').replace('#', '');
+
             // GA tracking
             gaTrack(['_trackEvent', '/desktop/tips/ Interactions', 'tab clicks to', $this.attr('href')]);
         });
@@ -95,6 +117,8 @@
 
                 updateNavLinks();
 
+                window.location.hash = pager.currentPage.id.replace('-tip', '');
+
                 // GA tracking
                 var gaAction = (isPrev) ? 'prev link to' : 'next link to';
                 gaTrack(['_trackEvent', '/desktop/tips/ Interactions', gaAction, '#' + pager.currentPage.id]);