OLD | NEW |
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> |
| 63 <div id="loading-message" class="centered-column"> |
| 64 <i class="sprite juju_logo" title="Juju GUI"></i> |
| 65 <div class="panel"> |
| 66 <div id="loading-message-text" class="header"> |
| 67 Loading the Juju GUI |
| 68 </div> |
| 69 <div id="loading-spinner"></div> |
| 70 </div> |
| 71 </div> |
58 </div> | 72 </div> |
59 <div id="notifier-box"></div> | 73 <div id="notifier-box"></div> |
60 <div id="viewport-wrapper"> | 74 <div id="viewport-wrapper"> |
61 <div id="vp-left-border"></div> | 75 <div id="vp-left-border"></div> |
62 <div id="viewport"> | 76 <div id="viewport"> |
63 <div class="navbar"> | 77 <div class="navbar"> |
64 <div id="nav-brand-env"> | 78 <div id="nav-brand-env"> |
65 <span> | 79 <span> |
66 <a class="brand" href="/"> | 80 <a class="brand" href="/"> |
67 <i class="sprite juju_logo" title="Juju GUI"></i> | 81 <i class="sprite juju_logo" title="Juju GUI"></i> |
(...skipping 30 matching lines...) Expand all Loading... |
98 </div> | 112 </div> |
99 | 113 |
100 <div id="content"> | 114 <div id="content"> |
101 <div id="main"> | 115 <div id="main"> |
102 </div> <!-- /container --> | 116 </div> <!-- /container --> |
103 </div> | 117 </div> |
104 | 118 |
105 </div> | 119 </div> |
106 <div id="vp-right-border"></div> | 120 <div id="vp-right-border"></div> |
107 </div> | 121 </div> |
| 122 <script src="/juju-ui/assets/javascripts/spin.min.js"></script> |
108 <script id="app-startup"> | 123 <script id="app-startup"> |
| 124 startSpinner = function() { |
| 125 var opts = { |
| 126 lines: 17, // The number of lines to draw |
| 127 length: 0, // The length of each line |
| 128 width: 3, // The line thickness |
| 129 radius: 30, // The radius of the inner circle |
| 130 corners: 1, // Corner roundness (0..1) |
| 131 rotate: 14, // The rotation offset |
| 132 color: '#000', // #rgb or #rrggbb |
| 133 speed: 1.3, // Rounds per second |
| 134 trail: 60, // Afterglow percentage |
| 135 shadow: false, // Whether to render a shadow |
| 136 hwaccel: true, // Whether to use hardware acceleration |
| 137 className: 'spinner', // The CSS class to assign to the spinner |
| 138 zIndex: 2e9, // The z-index (defaults to 2000000000) |
| 139 top: '15', // Top position relative to parent in px |
| 140 left: 'auto' // Left position relative to parent in px |
| 141 }; |
| 142 var document = getDocument(); |
| 143 var target = document.getElementById('loading-spinner'); |
| 144 // If we are in a testing environment, then actually starting the |
| 145 // spinner is unneccesary and counter productive. |
| 146 if (target.style !== undefined) { |
| 147 spinner = new Spinner(opts).spin(target); |
| 148 } |
| 149 }; |
| 150 |
| 151 setLoadingMessageText = function(newText) { |
| 152 getDocument() |
| 153 .getElementById('loading-message-text').innerHTML = newText; |
| 154 }; |
| 155 |
109 isBrowserSupported = function(agent) { | 156 isBrowserSupported = function(agent) { |
110 // At the moment, only Chrome is supported. | 157 // At the moment only Chrome is supported. |
111 return (/Chrome/.test(agent)); | 158 return (/Chrome/.test(agent)); |
112 }; | 159 }; |
113 | 160 |
114 getDocument = function() { | 161 getDocument = function() { |
115 return document; | 162 return document; |
116 }; | 163 }; |
117 | 164 |
118 displayBrowserWarning = function() { | 165 displayBrowserWarning = function() { |
119 getDocument() | 166 getDocument() |
120 .getElementById('browser-warning').style.display = 'block'; | 167 .getElementById('browser-warning').style.display = 'block'; |
121 }; | 168 }; |
122 | 169 |
123 continueWithCurrentBrowser = function() { | 170 hideBrowserWarning = function() { |
124 getDocument() | 171 getDocument() |
125 .getElementById('browser-warning').style.display = 'none'; | 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'; |
| 183 }; |
| 184 |
| 185 continueWithCurrentBrowser = function() { |
| 186 hideBrowserWarning(); |
| 187 displayLoadingMessage(); |
126 startTheApp(); | 188 startTheApp(); |
| 189 // Signal that we want to stop even propagation. |
127 return false; | 190 return false; |
128 }; | 191 }; |
129 | 192 |
130 startTheApp = function() { | 193 startTheApp = function() { |
131 // 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 |
132 // loaded. We want to keep trying until that happens. | 195 // loaded. We want to keep trying until that happens. |
133 | 196 |
134 // Tell jslint that we really do want to evaluate a string: | 197 // Tell jslint that we really do want to evaluate a string: |
135 /*jslint evil: true */ | 198 /*jslint evil: true */ |
136 window.setTimeout('startTheApp', 100); | 199 window.setTimeout('startTheApp()', 100); |
137 }; | 200 }; |
138 | 201 |
139 go = function() { | 202 go = function(agent) { |
140 if (isBrowserSupported(navigator.userAgent)) { | 203 if (isBrowserSupported(agent)) { |
141 startTheApp(); | 204 startTheApp(); |
142 } else { | 205 } else { |
| 206 hideLoadingMessage(); |
143 displayBrowserWarning(); | 207 displayBrowserWarning(); |
144 } | 208 } |
145 }; | 209 }; |
146 </script> | 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); |
| 217 </script> |
147 <!-- | 218 <!-- |
148 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 |
149 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 |
150 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. |
151 --> | 222 --> |
152 <script src="/juju-ui/assets/all-yui.js"></script> | 223 <script src="/juju-ui/assets/all-yui.js"></script> |
153 <script src="/juju-ui/assets/modules.js"></script> | 224 <script src="/juju-ui/assets/modules.js"></script> |
154 <script src="/juju-ui/assets/config.js"></script> | 225 <script src="/juju-ui/assets/config.js"></script> |
155 <script> | 226 <script> |
156 // 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 |
157 // 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 |
158 // start. | 229 // start. |
159 startTheApp = function() { | 230 startTheApp = function() { |
| 231 setLoadingMessageText('Trying to connect to the Juju environment'); |
160 YUI(GlobalConfig).use(['juju-gui'], function(Y) { | 232 YUI(GlobalConfig).use(['juju-gui'], function(Y) { |
161 app = new Y.juju.App(juju_config); | 233 app = new Y.juju.App(juju_config); |
162 // We need to activate the hotkeys when running the application | 234 // We need to activate the hotkeys when running the application |
163 // in production. Unit tests should call it manually. | 235 // in production. Unit tests should call it manually. |
164 app.activateHotkeys(); | 236 app.activateHotkeys(); |
165 }); | 237 }); |
166 }; | 238 }; |
167 // This call is here instead of in the "app-startup" script tag above | |
168 // because we extract that JS in order to test it. This bit here is just | |
169 // to bootstrap the app when actually loaded into a browser. | |
170 go(); | |
171 </script> | 239 </script> |
172 </body> | 240 </body> |
173 </html> | 241 </html> |
OLD | NEW |