-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprogress.html
235 lines (203 loc) · 8.31 KB
/
progress.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!doctype html>
<html lang="en-gb" dir="ltr" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Progress popup demo</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="apple-touch-icon" sizes="180x180" href=" img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href=" img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href=" img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href=" img/favicons/manifest.json">
<link rel="mask-icon" href=" img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<link rel='stylesheet prefetch' href=' css/semantic.css'>
<link rel="stylesheet" href=" css/styles.css">
<link rel="stylesheet" href=" css/legacy-main.css" media="all">
<link rel="stylesheet" href=" css/components/progress.css" media="all">
<script src=" js/jquery.min.js"></script>
<script src=" js/polyfills.js"></script>
<script src=" js/progress.js"></script>
</head>
<body>
<header class="page__header">
<div class="logo_container">
<div class="wrapper">
<div class="group">
<div class="col-7">
<div class="logo_header">
<img src=" img/logo.svg" alt="Office for National Statistics" class="logo__img"/>
</div>
</div>
<div class="col-5">
<div class="header_links">
<ul class="menubar" role="menubar" id="appmenu">
<li role="menuitem"><span id="givenName"></span></li>
<li class="menubar" role="menuitem"><a href="#" class="logout username">Sign out</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="page_title">
<div class="wrapper">
<div class="group">
<div class="col-12">
<div><h1 class="jupiter main_heading">Progress Demo</h1></div>
</div>
</div>
</div>
</div>
<div class="page_title">
<div class="wrapper">
<div class="bar bar__sitenavigation not-mvpx top_15_extra_space" role="banner">
<div class="bar__inner container">
</div>
</div>
</div>
</div>
</header>
<!--
homePanel
-->
<section class="wrapper">
<div class="col-12 top_50_extra_space">
<div class="panel panel--success u-mb-l">
<div class="group panel__body buttom_15_extra_space">
<div class="group">
<div class="col-8">
<h2 class="saturn title_extra_space">Article title</h2>
</div>
</div>
<div style="padding: 1em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut vehicula libero,
at maximus ligula. Donec vitae eros condimentum, sollicitudin elit vel, sodales
velit. Integer a sollicitudin ex, ut pharetra lorem. Fusce ultricies lorem vitae
leo cursus, sed porta mi dignissim. Duis neque est, euismod vehicula molestie a,
iaculis ac velit. Suspendisse potenti. Ut fringilla mi in ipsum pharetra
consectetur. Praesent interdum ultrices consectetur. Donec non auctor turpis.
Proin convallis in nisl eu euismod. In laoreet ligula sed eleifend rhoncus.
Aenean vitae lorem dignissim, sagittis mauris vitae, finibus orci. In ut risus
tempor, porta ligula non, tempor dui. Duis molestie nulla in nunc euismod, at
pulvinar mi dapibus. Mauris ut urna mi. Etiam posuere sapien est, in efficitur
sem aliquam eget.</p>
<p>Donec velit justo, tristique sit amet orci non, vestibulum hendrerit est. Sed
commodo consequat nunc sit amet eleifend. Maecenas accumsan commodo est,
imperdiet imperdiet nisl mollis eu. Vivamus viverra risus ut auctor pharetra.
Aliquam condimentum neque eget blandit consequat. Duis iaculis maximus nulla vel
faucibus. Aenean viverra nunc id aliquet porta. Phasellus vulputate posuere laoreet.
Fusce fermentum id augue eget ultricies. Nam a libero a ligula dictum vulputate a
non magna. Duis sodales sagittis urna, a dapibus erat maximus id. Integer nec odio
viverra, porttitor turpis id, elementum augue.</p>
<p>Suspendisse erat ante, sagittis non arcu a, iaculis molestie diam. Mauris sed
efficitur lorem. Donec id maximus mi, non scelerisque nulla. Nullam luctus sem et
lorem eleifend convallis. Vestibulum ligula felis, porta eu neque eget, pretium
imperdiet mi. Suspendisse in blandit ex. Aliquam ultricies tempus lectus, vel
gravida nisl semper sit amet.</p>
<p><button id="startHappyProgress">Start (Happy) Progress Demo</button> <em>- or -</em> <button id="startBadProgress">Start (Bad) Progress Demo</button></p>
</div>
</div>
</div>
</section>
<!--
progressDialog
-->
<section id="progressDialog" style="display: none;" aria-hidden="true">
<div class="dialog js-dialog js-timeout-container">
<div class="dialog__overlay" tabindex="-1"></div>
<div class="dialog__body" role="dialog" aria-labelledby="dialog-title">
<div role="document">
<div class="mars u-mb-s application_title">Application</div>
<h1 class="saturn dialog__title" id="dialog-title" tabindex="0"></h1>
<div class="time js-timeout">
<svg class="time__visual" width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="40" stroke="#D3D3D3" stroke-width="6" fill="none"></circle>
<circle class="time__circle js-timeout-circle"
cx="40" cy="40" r="40" transform="rotate(-90 40 40)" fill="none" stroke="red" stroke-width="6" stroke-linecap="round" pathLength="100" style="stroke-dasharray: 0px, 1000px;"></circle>
</svg>
<div class="progress-pc time__text venus js-timeout-time">0%</div>
</div>
<div class="mars u-mb-s progress-msg"> </div>
<br>
<button class="btn btn--secondary btn--border js-timeout-save">Cancel</button>
</div>
</div>
</div>
</section>
<footer class="page__footer">
<div class="wrapper">
<div class="group">
<div class="col-12">
<span class="new">This release is in development. Please raise a <a href="https://ons.service-now.com/">Service Now</a> request to report any bugs.</span>
</div>
</div>
</div>
</footer>
<script>
// Let's demo the progress dialog!
//
// In real life, you might have this fed by
// messages over a WebSockets channel, but
// here it's just a timer setting messages and percent.
var progressDialog = new ProgressDialog('#progressDialog');
var messages = { 0: ' ',
1: 'Reticulating splines',
11: 'Interpolating RPIH',
24: 'Juicing mangoes',
39: 'Balancing the books',
46: 'Overegging the demo',
55: 'Delivering the goods',
70: 'Honesty, Integrity, Impartiality, Objectivity',
88: 'Running out of ideas'};
$('#startHappyProgress').click(function() {
let pc = 0;
console.log("Starting progress dialogue demo...");
progressDialog.setApplicationTitle("Progress popup demo")
.setActivityTitle("Something's going well")
.setMessage(messages[0])
.show();
let cancelToken = window.setInterval(function () {
if (++pc >= 100) {
window.clearInterval(cancelToken);
progressDialog.setButtonText('OK')
.success();
}
if (messages[pc]) {
progressDialog.setMessage(messages[pc]);
}
progressDialog.setProgress(pc);
}, 250);
progressDialog.setButtonHandler(function() {
window.clearInterval(cancelToken);
progressDialog.reset()
.hide();
});
});
// - or -
$('#startBadProgress').click(function() {
console.log("Starting progress dialogue demo...");
progressDialog.setApplicationTitle("Progress popup demo")
.setActivityTitle("I've got a bad feeling about this...")
.setMessage(messages[0])
.show();
let pc = 0;
let cancelToken = window.setInterval(function () {
if (++pc >= 31) {
window.clearInterval(cancelToken);
progressDialog.failed();
}
if (messages[pc]) {
progressDialog.setMessage(messages[pc]);
}
progressDialog.setProgress(pc);
}, 250);
progressDialog.setButtonHandler(function() {
window.clearInterval(cancelToken);
progressDialog.reset()
.hide();
});
});
</script>
</body>
</html>