[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 |
---|
[340] | 19 | * this e.g. to ask confirmation if changed values are not saved. |
---|
[264] | 20 | */ |
---|
[292] | 21 | define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr','dojo/_base/json', |
---|
| 22 | 'dojo/_base/lang','dojo/_base/Deferred','dojo/hash','dojo/dom-attr','dojo/dom-construct', |
---|
[311] | 23 | 'dojo/io-query','dijit','./util','./ui/_Page'], |
---|
[292] | 24 | function(declare,connect,xhr,json,lang,Deferred,hash,attr,domConstruct,uriQuery,dijit,util,_Page){ |
---|
[257] | 25 | return new (function() { |
---|
| 26 | var self = this; |
---|
[292] | 27 | |
---|
[257] | 28 | var HRI = declare(null,{ |
---|
[260] | 29 | constructor: function() { |
---|
[263] | 30 | this._path = this._fixPath('/'); |
---|
[257] | 31 | this._args = {}; |
---|
| 32 | if ( arguments.length == 1 ) { |
---|
| 33 | this.hash(arguments[0]); |
---|
| 34 | } else if ( arguments.length == 2 ) { |
---|
| 35 | this.path(arguments[0]); |
---|
| 36 | this.args(arguments[1]); |
---|
| 37 | } |
---|
| 38 | }, |
---|
| 39 | path: function(path) { |
---|
| 40 | if ( path ) |
---|
| 41 | this._path = this._fixPath(path); |
---|
| 42 | return this._path; |
---|
| 43 | }, |
---|
| 44 | args: function(args) { |
---|
| 45 | if ( args && lang.isObject(args) ) |
---|
| 46 | this._args = args; |
---|
| 47 | return this._args; |
---|
| 48 | }, |
---|
| 49 | hash: function(hash) { |
---|
| 50 | if ( hash && lang.isString(hash) ) { |
---|
| 51 | var parts = hash.split('!'); |
---|
| 52 | if ( parts[1] ) |
---|
| 53 | this._path = this._fixPath(parts[1]); |
---|
| 54 | if ( parts[2] ) |
---|
| 55 | this._args = uriQuery.queryToObject(parts[2]); |
---|
| 56 | } |
---|
| 57 | return '!'+this._path+'!'+uriQuery.objectToQuery(this._args); |
---|
| 58 | }, |
---|
| 59 | _fixPath: function(path) { |
---|
| 60 | if ( !lang.isString(path) || util.isEmptyString(path) ) { |
---|
| 61 | path = "/"; |
---|
| 62 | } |
---|
| 63 | if ( path[0] != '/' ) { |
---|
| 64 | path = '/'+path; |
---|
| 65 | } |
---|
| 66 | if ( path[path.length-1] == '/' ) { |
---|
| 67 | path = path + "index"; |
---|
| 68 | } |
---|
| 69 | return path; |
---|
| 70 | } |
---|
[256] | 71 | }); |
---|
| 72 | |
---|
[292] | 73 | var currentHri = null; |
---|
| 74 | var currentPage = null; |
---|
| 75 | |
---|
[257] | 76 | function _goTo(hri,replace) { |
---|
| 77 | var contentPane = dijit.byId('content'); |
---|
[263] | 78 | var dfd = new Deferred(); |
---|
| 79 | |
---|
| 80 | // if already there, return |
---|
[292] | 81 | if ( currentHri && currentHri.hash() === hri.hash() ) { |
---|
[263] | 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 |
---|
[292] | 90 | hash(currentHri.hash()); |
---|
[263] | 91 | dfd.reject(); |
---|
| 92 | return dfd.promise; |
---|
| 93 | } |
---|
[274] | 94 | currentPage = null; |
---|
[263] | 95 | } |
---|
| 96 | |
---|
[292] | 97 | function mixinArgs(node) { |
---|
| 98 | var props = {}; |
---|
| 99 | if ( attr.has(node,'data-dojo-props') ) { |
---|
| 100 | props = json.fromJson(attr.get(node,'data-dojo-props')); |
---|
| 101 | } |
---|
| 102 | lang.mixin(props,{pageArgs:hri.args()}); |
---|
| 103 | var jsonStr = json.toJson(props); |
---|
| 104 | attr.set(node,'data-dojo-props',jsonStr.slice(1,jsonStr.length-1)); |
---|
| 105 | } |
---|
| 106 | |
---|
[263] | 107 | // update hash |
---|
[292] | 108 | currentHri = hri; |
---|
| 109 | hash(hri.hash(),replace); |
---|
[263] | 110 | |
---|
| 111 | // load html |
---|
[274] | 112 | var pageUrl = 'rft/pages'+hri.path()+'.html'; |
---|
[257] | 113 | xhr.get({ |
---|
[263] | 114 | url: pageUrl, |
---|
[260] | 115 | failOk: true |
---|
[257] | 116 | }) |
---|
[263] | 117 | |
---|
| 118 | // initialize page or create error message |
---|
[257] | 119 | .then(function(html){ |
---|
[292] | 120 | var rootNode = domConstruct.toDom(html); |
---|
| 121 | mixinArgs(rootNode); |
---|
| 122 | contentPane.set('content',rootNode); |
---|
[274] | 123 | currentPage = dijit.byNode(rootNode); |
---|
| 124 | if ( !currentPage ) { |
---|
| 125 | currentPage = new _Page({},rootNode); |
---|
| 126 | } |
---|
[263] | 127 | dfd.resolve(); |
---|
[257] | 128 | },function(){ |
---|
[274] | 129 | contentPane.set('content',"<div>Page "+hri.path()+" not found.</div>"); |
---|
[263] | 130 | dfd.reject(); |
---|
[257] | 131 | }); |
---|
[263] | 132 | return dfd.promise; |
---|
[256] | 133 | } |
---|
| 134 | |
---|
[257] | 135 | self.initial = function(path,args) { |
---|
[292] | 136 | if ( currentHri ) { |
---|
[260] | 137 | var dfd = new Deferred(); |
---|
[263] | 138 | dfd.resolve(); |
---|
[260] | 139 | return dfd.promise; |
---|
[257] | 140 | } |
---|
| 141 | if ( hash() ) { |
---|
| 142 | var hri = new HRI(hash()); |
---|
[260] | 143 | return _goTo(hri, true); |
---|
[257] | 144 | } else { |
---|
[260] | 145 | return _goTo(new HRI(path,args)); |
---|
[257] | 146 | } |
---|
[311] | 147 | }; |
---|
[257] | 148 | |
---|
| 149 | self.goTo = function(path,args) { |
---|
[260] | 150 | return _goTo(new HRI(path,args)); |
---|
[257] | 151 | } |
---|
| 152 | |
---|
[292] | 153 | self.getArgs = function() { |
---|
| 154 | if ( currentHri ) { |
---|
| 155 | return currentHri.args(); |
---|
| 156 | } else { |
---|
| 157 | return {}; |
---|
| 158 | } |
---|
[311] | 159 | }; |
---|
[292] | 160 | |
---|
[257] | 161 | connect.subscribe('/dojo/hashchange', function(){ |
---|
| 162 | _goTo(new HRI(hash())); |
---|
[256] | 163 | }); |
---|
[257] | 164 | |
---|
| 165 | })(); |
---|
| 166 | }); |
---|