Left: | ||
Right: |
LEFT | RIGHT |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html manifest="/juju-ui/assets/manifest.appcache"> | 2 <html manifest="/juju-ui/assets/manifest.appcache"> |
3 <!-- !IE will be true for all non-IE browsers and IE10 since it does not | 3 <!-- !IE will be true for all non-IE browsers and IE10 since it does not |
4 recognize conditional flags. --> | 4 recognize conditional flags. --> |
5 <!--[if !IE]><!--><script> | 5 <!--[if !IE]><!--><script> |
6 if (/*@cc_on!@*/false) { | 6 if (/*@cc_on!@*/false) { |
7 // Only IE10 has cc_on as false. | 7 // Only IE10 has cc_on as false. |
8 document.documentElement.className+=' ie10'; | 8 document.documentElement.className+=' ie10'; |
9 } | 9 } |
10 </script><!--<![endif]--> | 10 </script><!--<![endif]--> |
(...skipping 12 matching lines...) Expand all Loading... | |
23 <link rel="shortcut icon" href="/favicon.ico"> | 23 <link rel="shortcut icon" href="/favicon.ico"> |
24 <link rel="stylesheet" href="/juju-ui/assets/combined-css/all-static.css"> | 24 <link rel="stylesheet" href="/juju-ui/assets/combined-css/all-static.css"> |
25 <link rel="stylesheet" href="/juju-ui/assets/juju-gui.css"> | 25 <link rel="stylesheet" href="/juju-ui/assets/juju-gui.css"> |
26 <link rel="stylesheet" href="/juju-ui/assets/sprite.css"> | 26 <link rel="stylesheet" href="/juju-ui/assets/sprite.css"> |
27 <!--[if lt IE 9]> | 27 <!--[if lt IE 9]> |
28 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | 28 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
29 <![endif]--> | 29 <![endif]--> |
30 </head> | 30 </head> |
31 | 31 |
32 <body> | 32 <body> |
33 <!-- This <img> tag is here just to force early loading of the background | |
34 image so it displays more quickly. This makes a large improvment to the | |
35 way the app looks while loading on a slow connection. --> | |
36 <img src="/juju-ui/assets/images/pattern_tile.png" style="display: none;"> | |
37 | |
33 <div id="full-screen-mask" class="crosshatch-background"> | 38 <div id="full-screen-mask" class="crosshatch-background"> |
34 <div id="browser-warning" class="centered-column" | 39 <div id="browser-warning" class="centered-column" |
35 style="display:none;"> | 40 style="display:none;"> |
36 <i class="sprite juju_logo" title="Juju GUI"></i> | 41 <i class="sprite juju_logo" title="Juju GUI"></i> |
37 <div class="panel"> | 42 <div class="panel"> |
38 <div class="header"> | 43 <div class="header"> |
39 <div class="error"> | 44 <div class="error"> |
40 <span><i class="sprite alert_icon2"></i> | 45 <span><i class="sprite alert_icon2"></i> |
41 Your browser is not fully supported.</span> | 46 Your browser is not fully supported</span> |
42 </div> | 47 </div> |
43 </div> | 48 </div> |
44 <p> | 49 <p> |
45 If you continue to use Juju with your current browser your | 50 If you continue to use Juju with your current browser your |
46 experience may not be as good as we would like it to be. | 51 experience may not be as good as we would like it to be. |
47 </p> | 52 </p> |
48 <p> | 53 <p> |
49 Please use the latest version of | 54 Please use the latest version of |
50 <a href="http://www.google.com/chrome">Chrome</a> to be fully | 55 <a href="http://www.google.com/chrome">Chrome</a> to be fully |
51 supported. | 56 supported. |
52 </p> | 57 </p> |
53 <form onsubmit="return continueWithCurrentBrowser();"> | 58 <form onsubmit="return continueWithCurrentBrowser();"> |
54 <input type="submit" value="Continue"/> | 59 <input type="submit" value="Continue"/> |
55 </form> | 60 </form> |
56 </div> | 61 </div> |
57 </div> | 62 </div> |
58 <div id="loading-message" class="centered-column" | 63 <div id="loading-message" class="centered-column"> |
59 style="display: none;"> | |
60 <i class="sprite juju_logo" title="Juju GUI"></i> | 64 <i class="sprite juju_logo" title="Juju GUI"></i> |
61 <div class="panel"> | 65 <div class="panel"> |
62 <div class="header">Loading the Juju GUI</div> | 66 <div id="loading-message-text" class="header"> |
67 Loading the Juju GUI | |
68 </div> | |
63 <div id="loading-spinner"></div> | 69 <div id="loading-spinner"></div> |
64 </div> | 70 </div> |
65 </div> | 71 </div> |
66 </div> | 72 </div> |
67 <div id="notifier-box"></div> | 73 <div id="notifier-box"></div> |
68 <div id="viewport-wrapper"> | 74 <div id="viewport-wrapper"> |
69 <div id="vp-left-border"></div> | 75 <div id="vp-left-border"></div> |
70 <div id="viewport"> | 76 <div id="viewport"> |
71 <div class="navbar"> | 77 <div class="navbar"> |
72 <div id="nav-brand-env"> | 78 <div id="nav-brand-env"> |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
108 <div id="content"> | 114 <div id="content"> |
109 <div id="main"> | 115 <div id="main"> |
110 </div> <!-- /container --> | 116 </div> <!-- /container --> |
111 </div> | 117 </div> |
112 | 118 |
113 </div> | 119 </div> |
114 <div id="vp-right-border"></div> | 120 <div id="vp-right-border"></div> |
115 </div> | 121 </div> |
116 <script src="/juju-ui/assets/javascripts/spin.min.js"></script> | 122 <script src="/juju-ui/assets/javascripts/spin.min.js"></script> |
117 <script id="app-startup"> | 123 <script id="app-startup"> |
118 isBrowserSupported = function(agent) { | 124 startSpinner = function() { |
119 // At the moment, only Chrome is supported. | |
120 return (/Chrome/.test(agent)); | |
121 }; | |
122 | |
123 getDocument = function() { | |
124 return document; | |
125 }; | |
126 | |
127 displayBrowserWarning = function() { | |
128 getDocument() | |
129 .getElementById('browser-warning').style.display = 'block'; | |
130 }; | |
131 | |
132 hideBrowserWarning = function() { | |
133 getDocument() | |
134 .getElementById('browser-warning').style.display = 'none'; | |
135 }; | |
136 | |
137 displayLoadingMessage = function() { | |
138 var opts = { | 125 var opts = { |
139 lines: 17, // The number of lines to draw | 126 lines: 17, // The number of lines to draw |
140 length: 0, // The length of each line | 127 length: 0, // The length of each line |
141 width: 3, // The line thickness | 128 width: 3, // The line thickness |
142 radius: 30, // The radius of the inner circle | 129 radius: 30, // The radius of the inner circle |
143 corners: 1, // Corner roundness (0..1) | 130 corners: 1, // Corner roundness (0..1) |
144 rotate: 14, // The rotation offset | 131 rotate: 14, // The rotation offset |
145 color: '#000', // #rgb or #rrggbb | 132 color: '#000', // #rgb or #rrggbb |
146 speed: 1.3, // Rounds per second | 133 speed: 1.3, // Rounds per second |
147 trail: 60, // Afterglow percentage | 134 trail: 60, // Afterglow percentage |
148 shadow: false, // Whether to render a shadow | 135 shadow: false, // Whether to render a shadow |
149 hwaccel: true, // Whether to use hardware acceleration | 136 hwaccel: true, // Whether to use hardware acceleration |
150 className: 'spinner', // The CSS class to assign to the spinner | 137 className: 'spinner', // The CSS class to assign to the spinner |
151 zIndex: 2e9, // The z-index (defaults to 2000000000) | 138 zIndex: 2e9, // The z-index (defaults to 2000000000) |
152 top: '15', // Top position relative to parent in px | 139 top: '15', // Top position relative to parent in px |
153 left: 'auto' // Left position relative to parent in px | 140 left: 'auto' // Left position relative to parent in px |
154 }; | 141 }; |
155 var document = getDocument(); | 142 var document = getDocument(); |
156 var target = document.getElementById('loading-spinner'); | 143 var target = document.getElementById('loading-spinner'); |
157 // If we are in a testing environment, then actually starting the | 144 // If we are in a testing environment, then actually starting the |
158 // spinner is unneccesary and counter productive. | 145 // spinner is unneccesary and counter productive. |
159 if (target.style !== undefined) { | 146 if (target.style !== undefined) { |
160 var spinner = new Spinner(opts).spin(target); | 147 spinner = new Spinner(opts).spin(target); |
161 } | 148 } |
162 document.getElementById('loading-message').style.display = 'block'; | 149 }; |
150 | |
151 setLoadingMessageText = function(newText) { | |
152 getDocument() | |
153 .getElementById('loading-message-text').innerHTML = newText; | |
154 }; | |
155 | |
156 isBrowserSupported = function(agent) { | |
157 // At the moment only Chrome is supported. | |
158 return (/Chrome/.test(agent)); | |
159 }; | |
160 | |
161 getDocument = function() { | |
162 return document; | |
163 }; | |
164 | |
165 displayBrowserWarning = function() { | |
166 getDocument() | |
167 .getElementById('browser-warning').style.display = 'block'; | |
168 }; | |
169 | |
170 hideBrowserWarning = function() { | |
171 getDocument() | |
172 .getElementById('browser-warning').style.display = 'none'; | |
173 }; | |
174 | |
175 displayLoadingMessage = function() { | |
176 getDocument() | |
177 .getElementById('loading-message').style.display = 'block'; | |
178 }; | |
179 | |
180 hideLoadingMessage = function() { | |
181 getDocument() | |
182 .getElementById('loading-message').style.display = 'none'; | |
163 }; | 183 }; |
164 | 184 |
165 continueWithCurrentBrowser = function() { | 185 continueWithCurrentBrowser = function() { |
166 hideBrowserWarning(); | 186 hideBrowserWarning(); |
167 displayLoadingMessage(); | 187 displayLoadingMessage(); |
168 startTheApp(); | 188 startTheApp(); |
189 // Signal that we want to stop even propagation. | |
169 return false; | 190 return false; |
170 }; | 191 }; |
171 | 192 |
172 startTheApp = function() { | 193 startTheApp = function() { |
173 // This function will be redefined when all the app's JavaScript is | 194 // This function will be redefined when all the app's JavaScript is |
174 // loaded. We want to keep trying until that happens. | 195 // loaded. We want to keep trying until that happens. |
175 | 196 |
176 // Tell jslint that we really do want to evaluate a string: | 197 // Tell jslint that we really do want to evaluate a string: |
177 /*jslint evil: true */ | 198 /*jslint evil: true */ |
178 window.setTimeout('startTheApp', 100); | 199 window.setTimeout('startTheApp()', 100); |
179 }; | 200 }; |
180 | 201 |
181 go = function(agent) { | 202 go = function(agent) { |
182 if (isBrowserSupported(agent)) { | 203 if (isBrowserSupported(agent)) { |
183 displayLoadingMessage(); | |
184 startTheApp(); | 204 startTheApp(); |
185 } else { | 205 } else { |
206 hideLoadingMessage(); | |
186 displayBrowserWarning(); | 207 displayBrowserWarning(); |
187 } | 208 } |
188 }; | 209 }; |
210 </script> | |
211 <script> | |
212 // This code is here instead of in the "app-startup" script tag above | |
213 // because we extract that JS in order to test it. This bit here is just | |
214 // to bootstrap the app when actually loaded into a browser. | |
215 startSpinner(); | |
216 go(navigator.userAgent); | |
189 </script> | 217 </script> |
190 <!-- | 218 <!-- |
191 Load the (potentially slow to download) core of the app. We do this here | 219 Load the (potentially slow to download) core of the app. We do this here |
192 because we want the browser warning to execute before spending the time | 220 because we want the browser warning to execute before spending the time |
193 to download an app the user might not be able to use anyway. | 221 to download an app the user might not be able to use anyway. |
194 --> | 222 --> |
195 <script src="/juju-ui/assets/all-yui.js"></script> | 223 <script src="/juju-ui/assets/all-yui.js"></script> |
196 <script src="/juju-ui/assets/modules.js"></script> | 224 <script src="/juju-ui/assets/modules.js"></script> |
197 <script src="/juju-ui/assets/config.js"></script> | 225 <script src="/juju-ui/assets/config.js"></script> |
198 <script> | 226 <script> |
199 // Now that all of the above JS is loaded we can define the real start | 227 // Now that all of the above JS is loaded we can define the real start |
200 // function which will be picked up by the setTimeout and the app will | 228 // function which will be picked up by the setTimeout and the app will |
201 // start. | 229 // start. |
202 startTheApp = function() { | 230 startTheApp = function() { |
231 setLoadingMessageText('Trying to connect to the Juju environment'); | |
203 YUI(GlobalConfig).use(['juju-gui'], function(Y) { | 232 YUI(GlobalConfig).use(['juju-gui'], function(Y) { |
gary.poster
2013/02/12 23:08:08
Actually, when qa-ing this branch, I realized that
benji
2013/02/13 16:39:23
I have rearranged the code so this should work now
| |
204 app = new Y.juju.App(juju_config); | 233 app = new Y.juju.App(juju_config); |
205 // We need to activate the hotkeys when running the application | 234 // We need to activate the hotkeys when running the application |
206 // in production. Unit tests should call it manually. | 235 // in production. Unit tests should call it manually. |
207 app.activateHotkeys(); | 236 app.activateHotkeys(); |
208 }); | 237 }); |
209 }; | 238 }; |
210 // This call is here instead of in the "app-startup" script tag above | |
211 // because we extract that JS in order to test it. This bit here is just | |
212 // to bootstrap the app when actually loaded into a browser. | |
213 go(navigator.userAgent); | |
214 </script> | 239 </script> |
215 </body> | 240 </body> |
216 </html> | 241 </html> |
LEFT | RIGHT |