Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code | Sign in
(1274)

Delta Between Two Patch Sets: app/index.html

Issue 7314082: Add a loading messages and animation.
Left Patch Set: Add a loading animation. Created 11 years, 1 month ago
Right Patch Set: Add a loading messages and animation. Created 11 years, 1 month ago
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments. Please Sign in to add in-line comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « app/assets/javascripts/spin.min.js ('k') | app/views/login.js » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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
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
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>
LEFTRIGHT

Powered by Google App Engine
RSS Feeds Recent Issues | This issue
This is Rietveld f62528b