implement #15: allow custom object to pass through jquery mobile chan…

…gePage
opitzconsulting · Feb 1, 2012 · 1633d5c · 1633d5c
1 parent fcf7e81
commit 1633d5c
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 39 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -1,6 +1,13 @@
 Changelog
 =====================
 
+1.0.5
+------------
+- Allow an object to be passed to `$navigate` service as first argument to leverage the full power
+  of jqm `changePage` function.
+
+
+
 1.0.4
 ------------
 - Update to jQuery Mobile 1.0. The adapter itself was not changed,

diff --git a/README.md b/README.md
@@ -172,6 +172,10 @@ Service to change the given page.
 - To go back one page use `$navigate('back')`.
 - If the `activateFn` function is given, it will be called after the navigation on the target page with
   `activateFnParam1, ...` as arguments. The invocation is done before the `pagebeforeshow` event on the target page.
+- If you want to pass special options to the jquery mobile `changePage` function:
+  Pass in an object to the `$navigate` function instead of a pageId. This object will be forwarded
+  to jqm `changePage`. To define the new pageId, this object needs the additional property `target`.
+
 
 ### Service $waitDialog
 The service `$waitDialog` allows the access to the jquery mobile wait dialog. It provides the following functions:

diff --git a/src/main/webapp/jqmng/navigate.js b/src/main/webapp/jqmng/navigate.js
@@ -36,37 +36,46 @@ define(['jquery', 'angular'], function($, angular) {
      */
     function navigate(target, activateFunctionName) {
         var activateParams = Array.prototype.slice.call(arguments, 2);
-        var parts = splitAtFirstColon(target);
-        var animation, pageId;
+        var navigateOptions, pageId;
         callActivateFnOnPageChange(activateFunctionName, activateParams);
-        if (parts.length === 2 && parts[0] === 'back') {
-            var pageId = parts[1];
-            var relativeIndex = getIndexInStack(pageId);
-            if (relativeIndex === undefined) {
-                pageId = jqmChangePage(pageId, undefined);
+        if (typeof target === 'object') {
+            navigateOptions = target;
+            pageId = navigateOptions.target;
+        } else {
+            var parts = splitAtFirstColon(target);
+            if (parts.length === 2 && parts[0] === 'back') {
+                var pageId = parts[1];
+                var relativeIndex = getIndexInStack(pageId);
+                if (relativeIndex === undefined) {
+                    pageId = jqmChangePage(pageId, undefined);
+                } else {
+                    window.history.go(relativeIndex);
+                }
+                return;
+            } else if (parts.length === 2) {
+                navigateOptions = { transition: parts[0] };
+                pageId = parts[1];
             } else {
-                window.history.go(relativeIndex);
+                pageId = parts[0];
+                navigateOptions = undefined;
             }
-            return;
-        } else if (parts.length === 2) {
-            animation = parts[0];
-            pageId = parts[1];
-        } else {
-            pageId = parts[0];
-            animation = undefined;
         }
         if (pageId === 'back') {
             window.history.go(-1);
         } else {
-            jqmChangePage(pageId, animation);
+            jqmChangePage(pageId, navigateOptions);
         }
     }
 
-    function jqmChangePage(pageId, animation) {
+    function jqmChangePage(pageId, navigateOptions) {
         if (pageId.charAt(0) !== '#') {
             pageId = '#' + pageId;
         }
-        $.mobile.changePage.call($.mobile, pageId, animation);
+        var callArgs = [pageId];
+        if (navigateOptions) {
+            callArgs.push(navigateOptions);
+        }
+        $.mobile.changePage.apply($.mobile, callArgs);
         return pageId;
     }
 

diff --git a/src/test/webapp/devSnippetPage.html b/src/test/webapp/devSnippetPage.html
@@ -21,28 +21,18 @@
 </head>
 <body>
 
-<script>
-
-    function TestController($defer) {
-        var self = this;
-        self.cities = [{"id":1,"name":"Bergisch Gladbach"},{"id":2,"name":"Berlin"},{"id":4,"name":"Frankfurt"},{"id":3,"name":"Köln"},{"id":5,"name":"Leverkusen"},{"id":6,"name":"München"},{"id":7,"name":"Rosenheim"}];
-        this.testIt = function() {
-            var options = $("#start").find("option");
-            console.log(options.eq(1).attr("selected"));
-        }
-    }
-
-    TestController.$inject = ['$defer'];
-</script>
-
-<div data-role="page" id="start" ng:controller="TestController">
+<div data-role="page" id="start">
     <div data-role="content">
-        <input ng:repeat="item in [1]" name="mysel" id="mysel" type="text">
-        {{myNumber}}
-        <a href="" ngm:click="testIt()">Test</a>
+        <a href="" ngm:click="$navigate({target: 'page2', transition:'pop'})">Test</a>
+    </div>
+</div>
 
+<div data-role="page" id="page2">
+    <div data-role="content">
+        <a href="" ngm:click="$navigate('page2:pop','pop')">Test2</a>
     </div>
 </div>
 
+
 </body>
 </html>
diff --git a/src/test/webapp/unit/navigateSpec.js b/src/test/webapp/unit/navigateSpec.js
@@ -13,12 +13,18 @@ define(['angular'], function(angular) {
             });
             it('should be able to change the page', function() {
                 navigate('somePage');
-                expect(changePageSpy).toHaveBeenCalledWith('#somePage', undefined);
+                expect(changePageSpy).toHaveBeenCalledWith('#somePage');
+            });
+
+            it('should allow an object to pass through to changePage', function() {
+                var changePageObj = {target: 'somePage', transition: 'someTransition'};
+                navigate(changePageObj);
+                expect(changePageSpy).toHaveBeenCalledWith('#somePage', changePageObj);
             });
 
             it('should be able to change the page with a transition', function() {
                 navigate('someTransition:somePage');
-                expect(changePageSpy).toHaveBeenCalledWith('#somePage', 'someTransition');
+                expect(changePageSpy).toHaveBeenCalledWith('#somePage', {transition: 'someTransition'});
             });
 
             it('should be able to go back', function() {
@@ -46,7 +52,7 @@ define(['angular'], function(angular) {
                 ];
                 navigate('back:page4');
                 expect(goSpy).not.toHaveBeenCalled();
-                expect(changePageSpy).toHaveBeenCalledWith('#page4', undefined);
+                expect(changePageSpy).toHaveBeenCalledWith('#page4');
             });
         });