source: Dev/branches/rest-dojo-ui/client/rft/ui/Breadcrumbs.js @ 340

Last change on this file since 340 was 340, checked in by tjcschipper, 13 years ago
  • Fixed typo in rft/content.js description. No functionality touched, don't worry!;)
  • Some more markup and styling changes to make everything more consistent.
  • Created rft/ui/Breadcrumbs class, first draft of decoupled breadcrumbs system. Still needs a couple of fixes (see comments in file) and requires rft/content to expose "rft/content/goTo" event via connect.publish or topic.publish.
File size: 4.2 KB
Line 
1define([
2    'dojo/_base/declare',
3    'dojo/_base/array',
4    'dijit/form/Button',
5    'dojo/dom-class',
6    'dojo/topic',
7    'dijit/_WidgetBase'
8    ], function(declare, baseArray, Button, domClass, topic, _WidgetBase){
9        return declare('rft.ui.Breadcrumbs', [_WidgetBase], {
10            _crumbs: [],
11           
12            _last: function(){
13                return this._crumbs[this._crumbs.length-1];
14            },
15            _getIndexOf: function(label) {
16                dojo.forEach(this._crumbs, function(crumb, index){
17                    if (crumb.label == label) {
18                        return index;
19                    }
20                }, this);
21                return -1;
22            },
23           
24            addCrumb: function(label, path) {
25                this._crumbs.push({
26                    label: label,
27                    path:path
28                });
29            },
30            _removeAfter: function(index) {
31                var removals = this._crumbs.slice(index+1);
32                this._crumbs = this._crumbs.slice(0, index+1);
33                dojo.forEach(removals, function(removal){
34                    removal.widget.destroyRecursive(false); // boolean "keepDOMnode"
35                }, this);
36                this._highlightLast();
37            },
38           
39            _highlightLast: function() {
40                domClass.add(this._last().widget, "breadcrumbCurrent");
41            },
42            _unhighlightLast: function() {
43                domClass.remove(this._last(), "breadcrumbCurrent");
44            },
45           
46            _changeTo: function(label, path) {
47                // TODO: Differentiate between navigating backwards and sideways/forward!
48                var index = baseArray.indexOf({label:label , path:path});
49                //var index = this._getIndexOf(label);  // Use this if passing path as an argument is not possible!
50                if (index >= 0) this._removeAfter(index);
51                this._addCrumb(label, path);
52                this._createBreadcrumbs();
53            },
54           
55            _createBreadcrumb: function(label, path) {
56                return new Button({
57                    baseClass: "breadcrumb",
58                    label: label,
59                    showlabel: true,
60                    iconClass: "dijitNoIcon",
61                    onClick: lang.hitch(this, function(){
62                        rft.api.loadPage(path);  // TODO: fix this call!
63                    })
64                });
65            },
66            _createBreadcrumbs: function() {
67                dojo.forEach(this._crumbs, function(crumb, index){
68                    if (!crumb.widget) {
69                        crumb.widget = this._createBreadcrumb(crumb.label, crumb.path);
70                    }
71                }, this);
72                this._highlightLast();
73            },
74            startup: function() {
75                // TODO: start page crumb creation?
76                this._createBreadCrumbs();
77                this._setupEvents();
78                this.inherited(arguments);
79            },
80            _setupEvents: function() {
81            // TODO: Bind changeTo() listener to an "onLoadPage" event exposed by rft.api!
82            topic.subscribe("rft/content/goTo", this._changeTo(label, path));
83            }
84        });
85    });
86   
87    /*  Breadcrumbs system, which automatically generates styled buttons in the topBar.
88     *  Updates are triggered through a "changePage" subscription to "rft/connect/goTo" (method that loads pages in rft.connect.js)
89     *
90     * Todo: Startup() does not handle initial creation well. No initial breadcrumb is created on page load. What happens when I refresh the page, do all previous crumbs disappear?
91     * Todo: Pages should have a label/name besides the path, for display in the breadcrumbs bar. Perhaps the page main title? (Generate this header dynamically?)
92     * Todo: Put connect.publish("rft/content/goTo", args); call in rft/content, to trigger breadcrumbs updates
93     *      This method uses path and 'args'(?) instead of label and path, change terminology accordingly?
94     * Todo: breadcrumbs do not have context yet, unless we can somehow create that context from the path. Split path at "/" char, lookup label/title for each step?
95     *      (See before!)
96     *
97     */
Note: See TracBrowser for help on using the repository browser.