MOBILE-1392 course: Automatically load General section instead of All

Author: dpalou

www/core/components/course/templates/sections.html

@@ -1,6 +1,6 @@
 <ion-view>
     <ion-nav-title><mm-format-text watch="true">{{fullname}}</mm-format-text></ion-nav-title>
-    <mm-split-view load-when="sectionsLoaded" component="mmCoreCourseSectionsList">
+    <mm-split-view load-when="sectionsLoaded" load="2" component="mmCoreCourseSectionsList">
         <ion-content>
            <ion-refresher on-refresh="doRefresh()" pulling-text="{{ 'mm.core.pulltorefresh' | translate }}" ng-if="sectionsLoaded"></ion-refresher>
             <mm-loading hide-until="sectionsLoaded">

www/core/directives/splitview.js

@@ -24,23 +24,32 @@ angular.module('mm.core')
  * @name mmSplitView
  * @description
  * Usage:
- * <mm-split-view>
+ * <mm-split-view component="mmaCalendarEventsList">
  *     <!-- CONTENT TO SHOW ON THE LEFT PANEL (MENU) -->
  * </mm-split-view>
  *
  * To change the right pane contents (content pane), mmSplitViewLink directive is needed.
- * mmSplitView will try to load the first mmSplitViewLink when the view is loaded.
+ * mmSplitView will automatically try to load a mmSplitViewLink when the view is loaded. This can be configured using
+ * the attributes "load" and "loadWhen".
+ *
+ * If you don't have access to the directive's scope but you still want to configure when should the data be loaded and which
+ * element should it load you can use the mmCoreSplitViewLoad event. When the directive receives this event it will try to
+ * immediately load the link set (if no link is set it will load the first link found). Example:
+ * $rootScope.$broadcast(mmCoreSplitViewLoad, {load: 2});
  *
  * Accepts the following params:
  *
  * @param {String} [menuWidth] Width of the left menu. Can be specified in pixels ('200px') or in percentage ('30%').
  *
- * @param {String} [loadWhen]  Name of a scope variable. When that variable is set to true, the first mm-split-view-link
- *                             found will be loaded in the contents pane. If not set, try to load it right at the start.
+ * @param {String} [loadWhen]  Name of a scope variable. When that variable is set to true, a mm-split-view-link will be loaded in
+ *                             in the contents pane. If not set, try to load it right at the start. See "load" param.
  *
  * @param {String} component   Component. In tablet, the new view will be named after the component.
+ *
+ * @param {Number} [load] Link to load. If not set then the first link will be loaded by default. If it's set then it will
+ *                        try to load the nth link. E.g. load=2 will load the second link in the page.
  */
-.directive('mmSplitView', function($log, $state, $ionicPlatform, $timeout, $mmUtil, mmCoreSplitViewLoad) {
+.directive('mmSplitView', function($log, $state, $ionicPlatform, $timeout, $mmUtil, $interpolate, mmCoreSplitViewLoad) {
 
     $log = $log.getInstance('mmSplitView');
 
@@ -94,21 +103,40 @@ angular.module('mm.core')
         /**
          * Load a mm-split-view-link.
          *
-         * @param {Boolean} retrying True if we're retrying because the function failed (link wasn't ready), false otherwise.
+         * @param {Object} [scope]           Directive's scope.
+         * @param {String|Number} [loadAttr] Number of link to load.
+         * @param {Boolean} retrying         True if we're retrying because the function failed (link wasn't ready).
          */
-        this.loadLink = function(retrying) {
+        this.loadLink = function(scope, loadAttr, retrying) {
             if ($ionicPlatform.isTablet()) {
                 if (!linkToLoad) {
-                    // No link set. Get first link inside the directive.
-                    linkToLoad = angular.element(element.querySelector('[mm-split-view-link]'));
+                    // No link set. Let's determine if loadAttr is set and its real value.
+                    if (typeof loadAttr != 'undefined') {
+                        var position = parseInt(loadAttr);
+                        if (!position) {
+                            // Seems it's not a number. Try to interpolate it.
+                            position = parseInt($interpolate(loadAttr)(scope), 10); // "Evaluate" scope variables.
+                        }
+                        if (position) {
+                            var links = element.querySelectorAll('[mm-split-view-link]');
+                            position = position > links.length ? 0 : position - 1;
+                            linkToLoad = angular.element(links[position]);
+                        } else {
+                            // Load first link
+                            linkToLoad = angular.element(element.querySelector('[mm-split-view-link]'));
+                        }
+                    } else {
+                        // Load first link
+                        linkToLoad = angular.element(element.querySelector('[mm-split-view-link]'));
+                    }
                 }
 
                 if (!triggerClick(linkToLoad)) {
                     // Link not found. Let's retry once in the next digest.
                     if (!retrying) {
                         linkToLoad = undefined;
                         $timeout(function() {
-                            self.loadLink(true);
+                            self.loadLink(scope, loadAttr, true);
                         });
                     }
                 }
@@ -185,25 +213,29 @@ angular.module('mm.core')
                 // Load link when variable is set to true.
                 scope.$watch(attrs.loadWhen, function(newValue) {
                     if (newValue) {
-                        controller.loadLink();
+                        controller.loadLink(scope, attrs.load);
                     }
                 });
             } else {
-                controller.loadLink();
+                controller.loadLink(scope, attrs.load);
             }
 
             // Load last opened link when we re-enter the same state. We use $stateChangeSuccess instead of $ionicView.enter
             // because $ionicView.enter is not triggered when going to the same state.
             scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
                 // Compare that name and params are similar. We'll only compare 1st level of params, it's not a deep compare.
                 if (toState.name === menuState && $mmUtil.basicLeftCompare(toParams, menuParams, 1)) {
-                    controller.loadLink();
+                    controller.loadLink(); // No need to pass scope and load, link should be set.
                 }
             });
 
             // Listen for event to load link.
-            scope.$on(mmCoreSplitViewLoad, function() {
-                controller.loadLink();
+            scope.$on(mmCoreSplitViewLoad, function(e, data) {
+                if (data && data.load) {
+                    controller.loadLink(scope, data.load);
+                } else {
+                    controller.loadLink(scope, attrs.load);
+                }
             });
         }
     };