MOBILE-1513 navigation: Treat anchor links scrolling the current page

Author: crazyserver

www/core/directives/browser.js

@@ -23,19 +23,28 @@ angular.module('mm.core')
  *
  * @param {Boolean} [captureLink=false] If the link needs to be captured by the app.
  */
-.directive('mmBrowser', function($mmUtil, $mmContentLinksHelper) {
+.directive('mmBrowser', function($mmUtil, $mmContentLinksHelper, $location) {
 
     /**
-     * Convenience function to open file or url in the browser.
+     * Convenience function to correctly navigate, open file or url in the browser.
      *
      * @param  {String} href    HREF to be opened
      */
-    function openInBrowser(href) {
+    function navigate(href) {
         if (href.indexOf('cdvfile://') === 0 || href.indexOf('file://') === 0) {
             // We have a local file.
             $mmUtil.openFile(href).catch(function(error) {
                 $mmUtil.showErrorModal(error);
             });
+        } else if (href.charAt(0) == '#'){
+            href = href.substr(1);
+            // In site links
+            if (href.charAt(0) == '/') {
+                $location.url(href);
+            } else {
+                // Look for id or name
+                $mmUtil.scrollToElement(document, "#" + href + ", [name='" + href + "']");
+            }
         } else {
             // It's an external link, we will open with browser.
             $mmUtil.openInBrowser(href);
@@ -55,11 +64,11 @@ angular.module('mm.core')
                     if (attrs.captureLink && attrs.captureLink !== 'false') {
                         $mmContentLinksHelper.handleLink(href).then(function(treated) {
                             if (!treated) {
-                               openInBrowser(href);
+                               navigate(href);
                             }
                         });
                     } else {
-                        openInBrowser(href);
+                        navigate(href);
                     }
                 }
             });

www/core/lib/util.js

@@ -66,7 +66,7 @@ angular.module('mm.core')
     };
 
     this.$get = function($ionicLoading, $ionicPopup, $injector, $translate, $http, $log, $q, $mmLang, $mmFS, $timeout, $mmApp,
-                $mmText, mmCoreWifiDownloadThreshold, mmCoreDownloadThreshold) {
+                $mmText, mmCoreWifiDownloadThreshold, mmCoreDownloadThreshold, $ionicScrollDelegate) {
 
         $log = $log.getInstance('$mmUtil');
 
@@ -995,6 +995,50 @@ angular.module('mm.core')
             return div.html();
         };
 
+        /**
+         * Scroll to a certain element inside another element.
+         * This is done this way because using anchorScroll or $location.hash sticks the scroll to go upwards.
+         *
+         * @module mm.core
+         * @ngdoc method
+         * @name $mmUtil#scrollToElement
+         * @param  {Object} container           Element to search in.
+         * @param  {String} [selector]          Selector to find the element to scroll to. If not defined, scroll to the container.
+         * @param  {Object} [scrollDelegate]    Scroll delegate. If not defined, use $ionicScrollDelegate.
+         * @param  {String} [scrollParentClass] Scroll Parent Class where to stop calculating the position. Default scroll-content.
+         * @return {Boolean}                    True if the element is found, false otherwise.
+         */
+        self.scrollToElement = function(container, selector, scrollDelegate, scrollParentClass) {
+            if (!scrollDelegate) {
+                scrollDelegate = $ionicScrollDelegate;
+            }
+
+            if (!scrollParentClass) {
+                scrollParentClass = 'scroll-content';
+            }
+
+            var element = selector ? container.querySelector(selector) : container,
+                positionTop = positionLeft = 0;
+
+            if (!element) {
+                return false;
+            }
+
+            while (element) {
+                positionLeft += (element.offsetLeft - element.scrollLeft + element.clientLeft);
+                positionTop += (element.offsetTop - element.scrollTop + element.clientTop);
+
+                element = element.offsetParent;
+                // If scrolling element is reached, stop adding tops.
+                if (angular.element(element).hasClass(scrollParentClass)) {
+                    element = false;
+                }
+            }
+
+            scrollDelegate.scrollTo(positionLeft, positionTop);
+            return true;
+        };
+
         return self;
     };
 });