[264] | 1 | /** rft/ui/content - Load page content |
---|
| 2 | * |
---|
| 3 | * The rft/ui/content module is responsible for loading content in the app. |
---|
| 4 | * Content is loaded by calling: |
---|
| 5 | * content.goTo('pageId'); |
---|
| 6 | * The page is then loaded from pages/pageId.html. This should contain one top node. |
---|
| 7 | * This top node gets a _Page widget instantiated on it. The template should not |
---|
| 8 | * specify another widget on the topnode. A page controller can be specified by |
---|
| 9 | * the data-rft-mixin attribute to a class inherited from _PageController. |
---|
| 10 | * You can also specify methods in the template in script tags as: |
---|
| 11 | * <script type="rft/method" data-rft-method-name="onVisit|onLeave"> |
---|
| 12 | * // code |
---|
| 13 | * </script> |
---|
| 14 | * The two relevant events are onVisit and onLeave. After loading and starting |
---|
| 15 | * the complete page onVisit is called. Use this to link widgets together and |
---|
| 16 | * load any dynamic content not handled by widget logic already. |
---|
| 17 | * The event onLeave is called before navigating to another page. If false is |
---|
| 18 | * returned from this function, the navigation will be cancelled. You can use |
---|
| 19 | * this e.g. to ask confirmation of changed values are not saved. |
---|
| 20 | */ |
---|
[263] | 21 | define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr', |
---|
| 22 | 'dojo/_base/lang','dojo/_base/Deferred','dojo/hash', |
---|
| 23 | 'dojo/io-query','dijit','rft/util','rft/ui/_Page'], |
---|
| 24 | function(declare,connect,xhr,lang,Deferred,hash,uriQuery,dijit,util,_Page){ |
---|
[257] | 25 | return new (function() { |
---|
| 26 | var self = this; |
---|
[263] | 27 | var currentHash = ""; |
---|
| 28 | var currentPage = null; |
---|
[256] | 29 | |
---|
[257] | 30 | var HRI = declare(null,{ |
---|
[260] | 31 | constructor: function() { |
---|
[263] | 32 | this._path = this._fixPath('/'); |
---|
[257] | 33 | this._args = {}; |
---|
| 34 | if ( arguments.length == 1 ) { |
---|
| 35 | this.hash(arguments[0]); |
---|
| 36 | } else if ( arguments.length == 2 ) { |
---|
| 37 | this.path(arguments[0]); |
---|
| 38 | this.args(arguments[1]); |
---|
| 39 | } |
---|
| 40 | }, |
---|
| 41 | path: function(path) { |
---|
| 42 | if ( path ) |
---|
| 43 | this._path = this._fixPath(path); |
---|
| 44 | return this._path; |
---|
| 45 | }, |
---|
| 46 | args: function(args) { |
---|
| 47 | if ( args && lang.isObject(args) ) |
---|
| 48 | this._args = args; |
---|
| 49 | return this._args; |
---|
| 50 | }, |
---|
| 51 | hash: function(hash) { |
---|
| 52 | if ( hash && lang.isString(hash) ) { |
---|
| 53 | var parts = hash.split('!'); |
---|
| 54 | if ( parts[1] ) |
---|
| 55 | this._path = this._fixPath(parts[1]); |
---|
| 56 | if ( parts[2] ) |
---|
| 57 | this._args = uriQuery.queryToObject(parts[2]); |
---|
| 58 | } |
---|
| 59 | return '!'+this._path+'!'+uriQuery.objectToQuery(this._args); |
---|
| 60 | }, |
---|
| 61 | _fixPath: function(path) { |
---|
| 62 | if ( !lang.isString(path) || util.isEmptyString(path) ) { |
---|
| 63 | path = "/"; |
---|
| 64 | } |
---|
| 65 | if ( path[0] != '/' ) { |
---|
| 66 | path = '/'+path; |
---|
| 67 | } |
---|
| 68 | if ( path[path.length-1] == '/' ) { |
---|
| 69 | path = path + "index"; |
---|
| 70 | } |
---|
| 71 | return path; |
---|
| 72 | } |
---|
[256] | 73 | }); |
---|
| 74 | |
---|
[257] | 75 | function _goTo(hri,replace) { |
---|
| 76 | var contentPane = dijit.byId('content'); |
---|
[263] | 77 | var dfd = new Deferred(); |
---|
[257] | 78 | var newHash = hri.hash(); |
---|
[263] | 79 | |
---|
| 80 | // if already there, return |
---|
| 81 | if ( currentHash === newHash ) { |
---|
| 82 | dfd.resolve(); |
---|
| 83 | return dfd.promise; |
---|
[257] | 84 | } |
---|
[263] | 85 | |
---|
| 86 | // check if we can leave current page |
---|
| 87 | if ( currentPage ) { |
---|
| 88 | if ( currentPage.onLeave() === false ) { |
---|
[264] | 89 | // restore hash if changed by hand or back button |
---|
| 90 | hash(currentHash); |
---|
[263] | 91 | dfd.reject(); |
---|
| 92 | return dfd.promise; |
---|
| 93 | } |
---|
| 94 | } |
---|
| 95 | |
---|
| 96 | // update hash |
---|
| 97 | currentHash = newHash; |
---|
[257] | 98 | hash(newHash,replace); |
---|
[263] | 99 | |
---|
| 100 | // load html |
---|
| 101 | var pageUrl = 'pages'+hri.path()+'.html'; |
---|
[257] | 102 | xhr.get({ |
---|
[263] | 103 | url: pageUrl, |
---|
[260] | 104 | failOk: true |
---|
[257] | 105 | }) |
---|
[263] | 106 | |
---|
| 107 | // initialize page or create error message |
---|
[257] | 108 | .then(function(html){ |
---|
[263] | 109 | currentPage = new _Page({ |
---|
| 110 | templateString: html, |
---|
| 111 | pageQuery: hri.args() |
---|
| 112 | }); |
---|
| 113 | contentPane.set('content',currentPage); |
---|
| 114 | dfd.resolve(); |
---|
[257] | 115 | },function(){ |
---|
[263] | 116 | currentPage = new _Page({ |
---|
| 117 | templateString: "<div>Page "+hri.path()+" not found.</div>" |
---|
| 118 | }); |
---|
| 119 | contentPane.set('content',currentPage); |
---|
| 120 | dfd.reject(); |
---|
[257] | 121 | }); |
---|
[263] | 122 | return dfd.promise; |
---|
[256] | 123 | } |
---|
| 124 | |
---|
[257] | 125 | self.initial = function(path,args) { |
---|
[263] | 126 | if ( currentHash ) { |
---|
[260] | 127 | var dfd = new Deferred(); |
---|
[263] | 128 | dfd.resolve(); |
---|
[260] | 129 | return dfd.promise; |
---|
[257] | 130 | } |
---|
| 131 | if ( hash() ) { |
---|
| 132 | var hri = new HRI(hash()); |
---|
[260] | 133 | return _goTo(hri, true); |
---|
[257] | 134 | } else { |
---|
[260] | 135 | return _goTo(new HRI(path,args)); |
---|
[257] | 136 | } |
---|
| 137 | } |
---|
| 138 | |
---|
| 139 | self.goTo = function(path,args) { |
---|
[260] | 140 | return _goTo(new HRI(path,args)); |
---|
[257] | 141 | } |
---|
| 142 | |
---|
| 143 | connect.subscribe('/dojo/hashchange', function(){ |
---|
| 144 | _goTo(new HRI(hash())); |
---|
[256] | 145 | }); |
---|
[257] | 146 | |
---|
| 147 | })(); |
---|
| 148 | }); |
---|