@@ -24,23 +24,32 @@ angular.module('mm.core')
2424 * @name mmSplitView
2525 * @description
2626 * Usage:
27- * <mm-split-view>
27+ * <mm-split-view component="mmaCalendarEventsList" >
2828 * <!-- CONTENT TO SHOW ON THE LEFT PANEL (MENU) -->
2929 * </mm-split-view>
3030 *
3131 * To change the right pane contents (content pane), mmSplitViewLink directive is needed.
32- * mmSplitView will try to load the first mmSplitViewLink when the view is loaded.
32+ * mmSplitView will automatically try to load a mmSplitViewLink when the view is loaded. This can be configured using
33+ * the attributes "load" and "loadWhen".
34+ *
35+ * 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
36+ * element should it load you can use the mmCoreSplitViewLoad event. When the directive receives this event it will try to
37+ * immediately load the link set (if no link is set it will load the first link found). Example:
38+ * $rootScope.$broadcast(mmCoreSplitViewLoad, {load: 2});
3339 *
3440 * Accepts the following params:
3541 *
3642 * @param {String } [menuWidth] Width of the left menu. Can be specified in pixels ('200px') or in percentage ('30%').
3743 *
38- * @param {String } [loadWhen] Name of a scope variable. When that variable is set to true, the first mm-split-view-link
39- * found will be loaded in the contents pane. If not set, try to load it right at the start.
44+ * @param {String } [loadWhen] Name of a scope variable. When that variable is set to true, a mm-split-view-link will be loaded in
45+ * in the contents pane. If not set, try to load it right at the start. See "load" param .
4046 *
4147 * @param {String } component Component. In tablet, the new view will be named after the component.
48+ *
49+ * @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
50+ * try to load the nth link. E.g. load=2 will load the second link in the page.
4251 */
43- . directive ( 'mmSplitView' , function ( $log , $state , $ionicPlatform , $timeout , $mmUtil , mmCoreSplitViewLoad ) {
52+ . directive ( 'mmSplitView' , function ( $log , $state , $ionicPlatform , $timeout , $mmUtil , $interpolate , mmCoreSplitViewLoad ) {
4453
4554 $log = $log . getInstance ( 'mmSplitView' ) ;
4655
@@ -94,21 +103,40 @@ angular.module('mm.core')
94103 /**
95104 * Load a mm-split-view-link.
96105 *
97- * @param {Boolean } retrying True if we're retrying because the function failed (link wasn't ready), false otherwise.
106+ * @param {Object } [scope] Directive's scope.
107+ * @param {String|Number } [loadAttr] Number of link to load.
108+ * @param {Boolean } retrying True if we're retrying because the function failed (link wasn't ready).
98109 */
99- this . loadLink = function ( retrying ) {
110+ this . loadLink = function ( scope , loadAttr , retrying ) {
100111 if ( $ionicPlatform . isTablet ( ) ) {
101112 if ( ! linkToLoad ) {
102- // No link set. Get first link inside the directive.
103- linkToLoad = angular . element ( element . querySelector ( '[mm-split-view-link]' ) ) ;
113+ // No link set. Let's determine if loadAttr is set and its real value.
114+ if ( typeof loadAttr != 'undefined' ) {
115+ var position = parseInt ( loadAttr ) ;
116+ if ( ! position ) {
117+ // Seems it's not a number. Try to interpolate it.
118+ position = parseInt ( $interpolate ( loadAttr ) ( scope ) , 10 ) ; // "Evaluate" scope variables.
119+ }
120+ if ( position ) {
121+ var links = element . querySelectorAll ( '[mm-split-view-link]' ) ;
122+ position = position > links . length ? 0 : position - 1 ;
123+ linkToLoad = angular . element ( links [ position ] ) ;
124+ } else {
125+ // Load first link
126+ linkToLoad = angular . element ( element . querySelector ( '[mm-split-view-link]' ) ) ;
127+ }
128+ } else {
129+ // Load first link
130+ linkToLoad = angular . element ( element . querySelector ( '[mm-split-view-link]' ) ) ;
131+ }
104132 }
105133
106134 if ( ! triggerClick ( linkToLoad ) ) {
107135 // Link not found. Let's retry once in the next digest.
108136 if ( ! retrying ) {
109137 linkToLoad = undefined ;
110138 $timeout ( function ( ) {
111- self . loadLink ( true ) ;
139+ self . loadLink ( scope , loadAttr , true ) ;
112140 } ) ;
113141 }
114142 }
@@ -185,25 +213,29 @@ angular.module('mm.core')
185213 // Load link when variable is set to true.
186214 scope . $watch ( attrs . loadWhen , function ( newValue ) {
187215 if ( newValue ) {
188- controller . loadLink ( ) ;
216+ controller . loadLink ( scope , attrs . load ) ;
189217 }
190218 } ) ;
191219 } else {
192- controller . loadLink ( ) ;
220+ controller . loadLink ( scope , attrs . load ) ;
193221 }
194222
195223 // Load last opened link when we re-enter the same state. We use $stateChangeSuccess instead of $ionicView.enter
196224 // because $ionicView.enter is not triggered when going to the same state.
197225 scope . $on ( '$stateChangeSuccess' , function ( event , toState , toParams , fromState , fromParams ) {
198226 // Compare that name and params are similar. We'll only compare 1st level of params, it's not a deep compare.
199227 if ( toState . name === menuState && $mmUtil . basicLeftCompare ( toParams , menuParams , 1 ) ) {
200- controller . loadLink ( ) ;
228+ controller . loadLink ( ) ; // No need to pass scope and load, link should be set.
201229 }
202230 } ) ;
203231
204232 // Listen for event to load link.
205- scope . $on ( mmCoreSplitViewLoad , function ( ) {
206- controller . loadLink ( ) ;
233+ scope . $on ( mmCoreSplitViewLoad , function ( e , data ) {
234+ if ( data && data . load ) {
235+ controller . loadLink ( scope , data . load ) ;
236+ } else {
237+ controller . loadLink ( scope , attrs . load ) ;
238+ }
207239 } ) ;
208240 }
209241 } ;
0 commit comments