[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 | */ |
---|
[399] | 21 | define([ |
---|
| 22 | 'dojo/_base/Deferred', |
---|
| 23 | 'dojo/_base/json', |
---|
| 24 | 'dojo/_base/lang', |
---|
| 25 | 'dojo/_base/xhr', |
---|
| 26 | 'dojo/dom-attr', |
---|
| 27 | 'dojo/dom-construct', |
---|
| 28 | 'dijit/registry', |
---|
| 29 | './ui/_Page', |
---|
| 30 | 'dojo/domReady!' |
---|
| 31 | ],function(Deferred,json,lang,xhr,attr,domConstruct,registry,_Page){ |
---|
| 32 | return new (function(){ |
---|
| 33 | var self = this; |
---|
| 34 | var inited = false; |
---|
[292] | 35 | |
---|
[399] | 36 | var okay = new Deferred(); |
---|
| 37 | okay.resolve(); |
---|
| 38 | okay = okay.promise; |
---|
[256] | 39 | |
---|
[399] | 40 | var fail = new Deferred(); |
---|
[400] | 41 | fail.reject("No implementation available."); |
---|
[399] | 42 | fail = fail.promise; |
---|
| 43 | |
---|
| 44 | var contentPane = null; |
---|
| 45 | self.goToImpl = null; |
---|
| 46 | self.initialImpl = null; |
---|
| 47 | |
---|
| 48 | self.init = function() { |
---|
| 49 | contentPane = registry.byId('content'); |
---|
| 50 | inited = true; |
---|
| 51 | }; |
---|
| 52 | |
---|
| 53 | self.goTo = function(path,args) { |
---|
| 54 | if ( !inited ) { return fail; } |
---|
| 55 | if ( self.goToImpl !== null ) { |
---|
| 56 | return self.goToImpl(path,args); |
---|
| 57 | } else { |
---|
| 58 | return fail; |
---|
| 59 | } |
---|
| 60 | }; |
---|
| 61 | |
---|
| 62 | self.initial = function(path,args) { |
---|
| 63 | if ( !inited ) { return fail; } |
---|
| 64 | if ( self.initialImpl !== null ) { |
---|
| 65 | return self.initialImpl(path,args); |
---|
| 66 | } else { |
---|
| 67 | return fail; |
---|
| 68 | } |
---|
| 69 | }; |
---|
| 70 | |
---|
| 71 | self._loadPage = function(path,args) { |
---|
| 72 | if ( !inited ) { return fail; } |
---|
| 73 | var dfd = new Deferred(); |
---|
| 74 | |
---|
| 75 | function getFirstNode(html) { |
---|
| 76 | var nodeOrFragment = domConstruct.toDom(html); |
---|
| 77 | if (nodeOrFragment instanceof Element) { |
---|
| 78 | return nodeOrFragment; |
---|
[257] | 79 | } |
---|
[399] | 80 | if (nodeOrFragment instanceof DocumentFragment) { |
---|
| 81 | console.warn("Fragment found, will only use first Element"); |
---|
| 82 | for (var i in nodeOrFragment.childNodes) { |
---|
| 83 | var node = nodeOrFragment.childNodes[i]; |
---|
| 84 | if (node instanceof Element) { |
---|
| 85 | return node; |
---|
[347] | 86 | } |
---|
| 87 | } |
---|
| 88 | } |
---|
[399] | 89 | return domConstruct.toDom('<div>No Element found in template.</div>'); |
---|
[256] | 90 | } |
---|
| 91 | |
---|
[399] | 92 | function mixinArgs(node) { |
---|
| 93 | var props = {}; |
---|
| 94 | if ( attr.has(node,'data-dojo-props') ) { |
---|
| 95 | props = json.fromJson(attr.get(node,'data-dojo-props')); |
---|
[257] | 96 | } |
---|
[399] | 97 | lang.mixin(props,{pageArgs:args}); |
---|
| 98 | var jsonStr = json.toJson(props); |
---|
| 99 | attr.set(node,'data-dojo-props',jsonStr.slice(1,jsonStr.length-1)); |
---|
[257] | 100 | } |
---|
[399] | 101 | |
---|
| 102 | // load html |
---|
| 103 | var pageUrl = 'rft/pages'+path+'.html'; |
---|
| 104 | xhr.get({ |
---|
| 105 | url: pageUrl, |
---|
| 106 | failOk: true |
---|
| 107 | }) |
---|
| 108 | // initialize page or create error message |
---|
| 109 | .then(function(html){ |
---|
| 110 | var rootNode = getFirstNode(html); |
---|
| 111 | mixinArgs(rootNode); |
---|
| 112 | contentPane.set('content',rootNode); |
---|
| 113 | var page = registry.byNode(rootNode); |
---|
| 114 | if ( !page ) { |
---|
| 115 | page = new _Page({},rootNode); |
---|
[292] | 116 | } |
---|
[399] | 117 | dfd.resolve(page); |
---|
| 118 | },function(){ |
---|
| 119 | contentPane.set('content',"<div>Page "+path+" not found.</div>"); |
---|
| 120 | dfd.reject(); |
---|
[256] | 121 | }); |
---|
[257] | 122 | |
---|
[399] | 123 | return dfd.promise; |
---|
| 124 | }; |
---|
| 125 | |
---|
| 126 | })(); |
---|
| 127 | }); |
---|