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

Side by Side Diff: app/index.html

Issue 7314082: Add a loading messages and animation.
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:
View unified diff | Download patch
« no previous file with comments | « app/assets/javascripts/spin.min.js ('k') | app/views/login.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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>
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
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>
OLDNEW
« no previous file with comments | « app/assets/javascripts/spin.min.js ('k') | app/views/login.js » ('j') | no next file with comments »

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