source: Dev/trunk/src/client/dojox/app/tests/mediaQuery3ColumnApp/controllers/NavigationController.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 8.1 KB
Line 
1define(["dojo/_base/lang","dojo/_base/declare", "dojo/dom", "dojo/dom-style", "dojo/sniff", "dojo/_base/window", "dojo/_base/config",
2                "dojo/dom-class", "dojo/dom-attr", "dojo/dom-construct", "dojox/app/Controller"],
3function(lang, declare, dom, domStyle, has, win, config, domClass, domAttr, domConstruct, Controller){
4        // module:
5        //              dojox/app/tests/mediaQuery3ColumnApp/controllers/NavigationController
6        // summary:
7        //              Used to handle Navigation for the application
8        //             
9
10        return declare("dojox/app/tests/mediaQuery3ColumnApp/controllers/NavigationController", Controller, {
11
12                constructor: function(app){
13                        this.app = app;
14                        // large > 860 medium <= 860  small <= 560
15                        this.small = 560;
16                        this.medium = 860;
17       
18                        this.lastTransition = "";
19                        this.lastParams = "";
20                        this.lastEvent = null;
21                        this.lastSize = "";
22                       
23                        this.events = {
24                                "MQ3ColApp/TestOption1": this.TestOption1,
25                                "MQ3ColApp/MainOption1": this.MainOption1,
26                                "MQ3ColApp/MainOption2": this.MainOption2,
27                                "MQ3ColApp/MainOption3": this.MainOption3,
28                                "MQ3ColApp/LastOption1": this.LastOption1,
29                                "MQ3ColApp/LastOption2": this.LastOption2,
30                                "MQ3ColApp/LastOption3": this.LastOption3,
31                                "MQ3ColApp/BackFromMain": this.BackFromMain,
32                                "MQ3ColApp/BackFromTest": this.BackFromTest,
33                                "MQ3ColApp/BackFromLast": this.BackFromLast
34                        };
35                       
36                        // if we are using dojo mobile & we are hiding address bar we need to be bit smarter and listen to
37                        // dojo mobile events instead
38                        if(config.mblHideAddressBar){
39                                topic.subscribe("/dojox/mobile/afterResizeAll", lang.hitch(this, this.onResize));
40                        }else{
41                                // bind to browsers orientationchange event for ios otherwise bind to browsers resize
42                                this.bind(win.global, has("ios") ? "orientationchange" : "resize", lang.hitch(this, this.onResize));
43                        }
44                },
45               
46                TestOption1: function(e){
47                        this.doTransition(e, "navLeft","TestInfo","lastRight", null, null);
48                },
49                MainOption1: function(e){
50                        var params = {"mainCenter":{'mainSel':"MainOption1","tparam1":"tValue1"}};
51                        console.log("in NavigationController MainOption1 called.");
52                        this.doTransition(e, "navLeft","mainCenter","lastRight", params, false);
53                },
54                MainOption2: function(e){
55                        var params = {"mainCenter2":{'mainSel':"MainOption2"}};
56                        console.log("in NavigationController MainOption2 called.");
57                        this.doTransition(e, "navLeft","mainCenter2","lastRight", params, false);
58                },
59                MainOption3: function(e){
60                        var params = {"mainCenter3":{'mainSel':"MainOption3"}};
61                        console.log("in NavigationController MainOption3 called.");
62                        this.doTransition(e, "navLeft","mainCenter3","lastRight", params, false);
63                },
64                LastOption1: function(e){
65                        var params = lang.mixin(this.lastParams,{'lastSel':"LastOption1"});
66                        if(!this.isLarge()){
67                                console.log("in NavigationController LastOption1 called with isMedium or isSmall.");
68                                this.doTransition(e, "navLeft","lastCenter","lastRight", params, false);
69                        }else{
70                                console.log("in NavigationController LastOption1 called with isLarge.");
71                                this.doTransition(e, "navLeft", this._getMainCenter(),"lastRight", params, false);
72                        }
73                },
74                LastOption2: function(e){
75                        var params = lang.mixin(this.lastParams,{'lastSel':"LastOption2"});
76                        if(!this.isLarge()){
77                                console.log("in NavigationController LastOption2 called with isMedium or isSmall.");
78                                this.doTransition(e, "navLeft","lastCenter","lastRight", params, false);
79                        }else{
80                                console.log("in NavigationController LastOption2 called with isLarge.");
81                                this.doTransition(e, "navLeft", this._getMainCenter(),"lastRight", params, false);
82                        }
83                },
84                LastOption3: function(e){
85                        var params = lang.mixin(this.lastParams,{'lastSel':"LastOption3"});
86                        if(!this.isLarge()){
87                                console.log("in NavigationController LastOption3 called with isMedium or isSmall.");
88                                this.doTransition(e, "navLeft","lastCenter","lastRight", params, false);
89                        }else{ 
90                                console.log("in NavigationController LastOption2 called with isLarge.");
91                                this.doTransition(e, "navLeft", this._getMainCenter(),"lastRight", params, false);
92                        }
93                },
94
95                // Called to get the correct mainCenter
96                _getMainCenter: function(){
97                        if(this.lastCenter == "mainCenter" || this.lastCenter == "mainCenter2" || this.lastCenter == "mainCenter3"){
98                                return this.lastCenter;
99                        }
100                        return "mainCenter";
101
102                },
103                // These BackFrom ones need work to really go back in the history.
104                BackFromMain: function(e){
105                        if(this.isSmall()){
106                                console.log("in NavigationController BackFromMain called with isSmall.");
107                                // not sure about using his.lastParams
108                                this.doTransition(e, "navLeft","navCenter","lastRight", this.lastParams, true);
109                        }else{
110                                console.log("in NavigationController BackFromMain called with !isSmall.");
111                                this.doTransition(e, "mainCenter","navLeft","lastRight", this.lastParams, true);
112                        }
113                },
114                BackFromTest: function(e){
115                        if(this.isSmall()){
116                                console.log("in NavigationController BackFromTest called with isSmall.");
117                                this.doTransition(e, "navLeft","navCenter","lastRight", this.lastParams, true);
118                        }else{
119                                console.log("in NavigationController BackFromTest called with !isSmall.");
120                                this.doTransition(e, "navLeft","mainCenter","lastRight", this.lastParams, true);
121                        }
122                },
123                BackFromLast: function(e){
124                        console.log("in NavigationController BackFromLast called.");
125                        this.doTransition(e, "navLeft","mainCenter","lastRight", this.lastParams, true);
126                },
127
128                doTransition: function(e, left, center, right, params, back){
129                        this.lastLeft = left;
130                        this.lastCenter = center;
131                        this.lastRight = right;
132                        this.lastParams = params;
133                        var views = this.lastTransition = left+"+"+center;
134                        if(right !== "-lastRight"){
135                                views = this.lastTransition = views+"+"+right;
136                        }else{
137                                views = this.lastTransition = views+right;
138                        }
139                        console.log("in NavigationController views = "+views+"  this.params="+this.params);
140                       
141                        this.lastParams = params;
142                        this.lastEvent = e;
143                        var transOpts = {
144                                title: views,
145                                target: views,
146                                url: "#"+views,
147                                reverse: back,
148                        //      "transition": "none",
149                                params:params
150                        };
151                        this.app.transitionToView(e.target,transOpts,e);
152                },
153
154       
155               
156                onResize: function(){
157                        // this is called on a resize, normally we want to use css to adjust, but a resize or an orientation change
158                        // causes us to be showing duplicate views, then we need to update the views being shown.
159                       
160                        if(this.lastSize == this.getSize()){
161                                return;
162                        }
163                        this.lastSize = this.getSize();
164                       
165                        // for a large screen we should always be showing "navLeft+mainCenter+lastRight"
166                        if(this.isLarge() && this.lastEvent &&
167                                (this.lastTransition !== "navLeft+mainCenter+lastRight" && this.lastTransition !== "navLeft+TestInfo+lastRight")){
168                                console.log("in NavigationController onResize isLarge calling transition with navLeft+mainCenter+lastRight");
169                                this.doTransition(this.lastEvent, "navLeft","mainCenter","lastRight", this.lastParams);
170                        }else if(this.isMedium() && this.lastEvent){
171                                // for a medium screen we need to check for "navLeft+navCenter+lastRight" and for "navLeft+lastCenter+lastRight"
172                                if(this.lastTransition == "navLeft+navCenter+lastRight"){
173                                        console.log("in NavigationController onResize isMedium and navCenter calling transition with navLeft+mainCenter+lastRight");
174                                        this.doTransition(this.lastEvent, "navLeft","mainCenter","lastRight", this.lastParams);
175                                }else if(this.lastTransition == "navLeft+lastCenter+lastRight"){
176                                        console.log("in NavigationController onResize isMedium and lastCenter calling transition with navLeft+LastCenter+lastRight");
177                                        this.doTransition(this.lastEvent, "navLeft","lastCenter","lastRight", this.lastParams);
178                                }
179                        }
180
181                },
182
183                getSize: function(){
184                        if(this.isLarge()){
185                                return "large";
186                        }else if(this.isMedium()){
187                                return "medium";
188                        }else{
189                                return "small";
190                        }
191                },
192               
193                // large > 860 medium <= 860  small <= 560
194                isLarge: function(){
195                        var width = window.innerWidth || document.documentElement.clientWidth;
196                        return width > this.medium;
197
198                },
199
200                isMedium: function(){
201                        var width = window.innerWidth || document.documentElement.clientWidth;
202                        return width <= this.medium && width > this.small;
203
204                },
205
206                isSmall: function(){
207                        var width = window.innerWidth || document.documentElement.clientWidth;
208                        return width <= this.small;
209
210                }
211               
212        });
213});
Note: See TracBrowser for help on using the repository browser.