Skip to content

Commit ec17d08

Browse files
author
Iain J McCallum
committed
fade out spinner
1 parent d74d425 commit ec17d08

File tree

13 files changed

+32
-17
lines changed

13 files changed

+32
-17
lines changed

‎_write-your-code-in-here/components/_api/_api.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="api">
1+
<div class="api js-api">
22
<div class="api__spinner">
33
{{> _svg/spinner }}
44
</div>

‎_write-your-code-in-here/components/_api/_api.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,30 @@
66

77
module.exports = {
88
init(){
9-
9+
1010
eventManager.subscribe('SEARCH_BY_FILTERS_FORM_SUBMITTED', function(queryString){
11-
11+
$('.js-api').addClass('api--waiting');
1212
$.ajax({
1313
url: "https://data.phila.gov/resource/4t9v-rppq.json?$where=" + queryString,
1414
type: "GET"
1515
}).done(function(data){
1616
console.log("returned!", arguments);
1717
eventManager.fire('SEARCH_BY_FILTERS_API_RETURNED', {owner:'general-search-form', data: {query: queryString, results: data}});
18+
$('.js-api').removeClass('api--waiting');
1819
});
1920

2021
});
2122

2223
eventManager.subscribe('SEARCH_BY_ID_SUBMITTED', function(requestID){
23-
console.log("making request", requestID);
24+
25+
$('.js-api').addClass('api--waiting');
2426
$.ajax({
2527
url: "https://data.phila.gov/resource/4t9v-rppq.json?service_request_id=" + requestID,
2628
type: "GET"
2729
}).done(function(data){
2830
console.log('returned!', arguments);
2931
eventManager.fire('GET_ISSUE_BY_ID_RETURNED', { data: {results: data}});
32+
$('.js-api').removeClass('api--waiting');
3033
});
3134
});
3235
},

‎_write-your-code-in-here/components/_api/_api.scss

+9
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,22 @@
66

77
.api {
88

9+
910
&__spinner {
11+
opacity: 0;
12+
transition: opacity 1s ease;
1013
svg {
1114
width: 12px;
1215
height: 12px;
1316
animation: spin 1s infinite linear;
1417
}
1518
}
19+
&--waiting {
20+
.api__spinner {
21+
transition: opacity 0s ease;
22+
opacity: 1;
23+
}
24+
}
1625

1726
&__error {
1827

‎_write-your-code-in-here/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
// =============== base_scripts
2020
window.eventManager = require('./base_scripts/eventManager');
2121
window.api = require('./components/_api/_api.js'); //sits in components as it has an associated dom component (in the footer)
22-
api.init();
2322
window.urlParameter = require('./base_scripts/urlParameterHandler.js');
2423
window.$ = require('jquery');
2524
window.threeOneOne = {}; //container for all the 311 app modules
2625

26+
api.init();
2727
// =============== component scripts (todo: figure out how to not buundle these in the big bundle)
2828
require('./components/_header/_header.js').init();
2929

‎philly311/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
ga('create', 'UA-86116273-1', 'auto');
77
ga('send', 'pageview');</script><script type=text/javascript src=/philly311/main.js></script></head><body><header class="header js-header"><h1 class=header__title><a href=/ class=header__title-text>Philly 311</a> <span class="header__title-menu-icon js-header__menu-icon"><svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 477.175 477.175"><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
88
c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
9-
"/></svg></span></h1><div class=header__nav-wrap><nav class=main-nav><div class=main-nav__links><a href=/philly311/submit-request class=main-nav__link>Submit Request </a><a href=/philly311/stats class=main-nav__link>Explore Stats</a></div><form class=main-nav__search action=/philly311/search class=js-header-search><input name=search class=main-nav__search-input placeholder="Request ID / ZIP"><label class=main-nav__search-submit><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg> <input type=submit value=Search></label></form></nav></div></header><div class=landing><div class=landing__content><h2 class=landing__title>Hackadashery</h2><div class=landing__description>This is a volunteer built web-app from <a href=https://codeforphilly.org/ >Code for Philly's</a> <a href=https://codeforphilly.org/blog/city_as_a_service_hackathon_2016>2016 City as a Service Hackathon</a>, as such - it's not an "official" 311 app, nope - you can thank the <a href=https://github.com/hackadashery>Hackadashery</a> team for all this magic! The project's on github and we're open to pull requests - so feel free to get involved! Unless you don't live in Philly (yet), you guys are probably too busy arranging your move over here so it's ok not to get involved until you're settled.</div></div></div><footer class=footer><div class=footer__left><small>*Not an official City of Philadelphia app.</small></div><div class=footer__right><div class=api><div class=api__spinner><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 20.298 20.298"><path style=fill:white d="M0.952,11.102c0-0.264,0.213-0.474,0.475-0.474h2.421c0.262,0,0.475,0.21,0.475,0.474
9+
"/></svg></span></h1><div class=header__nav-wrap><nav class=main-nav><div class=main-nav__links><a href=/philly311/submit-request class=main-nav__link>Submit Request </a><a href=/philly311/stats class=main-nav__link>Explore Stats</a></div><form class=main-nav__search action=/philly311/search class=js-header-search><input name=search class=main-nav__search-input placeholder="Request ID / ZIP"><label class=main-nav__search-submit><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg> <input type=submit value=Search></label></form></nav></div></header><div class=landing><div class=landing__content><h2 class=landing__title>Hackadashery</h2><div class=landing__description>This is a volunteer built web-app from <a href=https://codeforphilly.org/ >Code for Philly's</a> <a href=https://codeforphilly.org/blog/city_as_a_service_hackathon_2016>2016 City as a Service Hackathon</a>, as such - it's not an "official" 311 app, nope - you can thank the <a href=https://github.com/hackadashery>Hackadashery</a> team for all this magic! The project's on github and we're open to pull requests - so feel free to get involved! Unless you don't live in Philly (yet), you guys are probably too busy arranging your move over here so it's ok not to get involved until you're settled.</div></div></div><footer class=footer><div class=footer__left><small>*Not an official City of Philadelphia app.</small></div><div class=footer__right><div class="api js-api"><div class=api__spinner><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 20.298 20.298"><path style=fill:white d="M0.952,11.102c0-0.264,0.213-0.474,0.475-0.474h2.421c0.262,0,0.475,0.21,0.475,0.474
1010
c0,3.211,2.615,5.826,5.827,5.826s5.827-2.615,5.827-5.826c0-3.214-2.614-5.826-5.827-5.826c-0.34,0-0.68,0.028-1.016,0.089
1111
v1.647c0,0.193-0.116,0.367-0.291,0.439C8.662,7.524,8.46,7.482,8.322,7.347L3.49,4.074c-0.184-0.185-0.184-0.482,0-0.667
1212
l4.833-3.268c0.136-0.136,0.338-0.176,0.519-0.104c0.175,0.074,0.291,0.246,0.291,0.438V1.96c0.34-0.038,0.68-0.057,1.016-0.057

‎philly311/main.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -246,27 +246,30 @@ module.exports = {
246246

247247
module.exports = {
248248
init(){
249-
249+
250250
eventManager.subscribe('SEARCH_BY_FILTERS_FORM_SUBMITTED', function(queryString){
251-
251+
$('.js-api').addClass('api--waiting');
252252
$.ajax({
253253
url: "https://data.phila.gov/resource/4t9v-rppq.json?$where=" + queryString,
254254
type: "GET"
255255
}).done(function(data){
256256
console.log("returned!", arguments);
257257
eventManager.fire('SEARCH_BY_FILTERS_API_RETURNED', {owner:'general-search-form', data: {query: queryString, results: data}});
258+
$('.js-api').removeClass('api--waiting');
258259
});
259260

260261
});
261262

262263
eventManager.subscribe('SEARCH_BY_ID_SUBMITTED', function(requestID){
263-
console.log("making request", requestID);
264+
265+
$('.js-api').addClass('api--waiting');
264266
$.ajax({
265267
url: "https://data.phila.gov/resource/4t9v-rppq.json?service_request_id=" + requestID,
266268
type: "GET"
267269
}).done(function(data){
268270
console.log('returned!', arguments);
269271
eventManager.fire('GET_ISSUE_BY_ID_RETURNED', { data: {results: data}});
272+
$('.js-api').removeClass('api--waiting');
270273
});
271274
});
272275
},
@@ -1216,11 +1219,11 @@ function buildChart(){
12161219
// =============== base_scripts
12171220
window.eventManager = require('./base_scripts/eventManager');
12181221
window.api = require('./components/_api/_api.js'); //sits in components as it has an associated dom component (in the footer)
1219-
api.init();
12201222
window.urlParameter = require('./base_scripts/urlParameterHandler.js');
12211223
window.$ = require('jquery');
12221224
window.threeOneOne = {}; //container for all the 311 app modules
12231225

1226+
api.init();
12241227
// =============== component scripts (todo: figure out how to not buundle these in the big bundle)
12251228
require('./components/_header/_header.js').init();
12261229

‎philly311/search/index.html

+1-1
Large diffs are not rendered by default.

‎philly311/stats/burndown/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
ga('create', 'UA-86116273-1', 'auto');
77
ga('send', 'pageview');</script><script type=text/javascript src=/philly311/main.js></script></head><body><header class="header js-header"><h1 class=header__title><a href=/ class=header__title-text>Philly 311</a> <span class="header__title-menu-icon js-header__menu-icon"><svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 477.175 477.175"><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
88
c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
9-
"/></svg></span></h1><div class=header__nav-wrap><nav class=main-nav><div class=main-nav__links><a href=/philly311/submit-request class=main-nav__link>Submit Request </a><a href=/philly311/stats class=main-nav__link>Explore Stats</a></div><form class=main-nav__search action=/philly311/search class=js-header-search><input name=search class=main-nav__search-input placeholder="Request ID / ZIP"><label class=main-nav__search-submit><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg> <input type=submit value=Search></label></form></nav></div></header><section class=sidebar-layout><div class=sidebar-layout__sidebar><nav class=stats-nav><a href=/philly311/stats/total-over-time class="stats-nav__link button">Total over time </a><a href=/philly311/stats/total-by-dept class="stats-nav__link button">Total requests by Dept </a><a href=/philly311/stats/burndown class="stats-nav__link button">Burndown</a></nav></div><div class=sidebar-layout__body><div class=toolbar>Dept picker | Timespan</div><svg id=burnchart class=burnchart></svg><script>threeOneOne.burndown.init();</script></div></section><footer class=footer><div class=footer__left><small>*Not an official City of Philadelphia app.</small></div><div class=footer__right><div class=api><div class=api__spinner><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 20.298 20.298"><path style=fill:white d="M0.952,11.102c0-0.264,0.213-0.474,0.475-0.474h2.421c0.262,0,0.475,0.21,0.475,0.474
9+
"/></svg></span></h1><div class=header__nav-wrap><nav class=main-nav><div class=main-nav__links><a href=/philly311/submit-request class=main-nav__link>Submit Request </a><a href=/philly311/stats class=main-nav__link>Explore Stats</a></div><form class=main-nav__search action=/philly311/search class=js-header-search><input name=search class=main-nav__search-input placeholder="Request ID / ZIP"><label class=main-nav__search-submit><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg> <input type=submit value=Search></label></form></nav></div></header><section class=sidebar-layout><div class=sidebar-layout__sidebar><nav class=stats-nav><a href=/philly311/stats/total-over-time class="stats-nav__link button">Total over time </a><a href=/philly311/stats/total-by-dept class="stats-nav__link button">Total requests by Dept </a><a href=/philly311/stats/burndown class="stats-nav__link button">Burndown</a></nav></div><div class=sidebar-layout__body><div class=toolbar>Dept picker | Timespan</div><svg id=burnchart class=burnchart></svg><script>threeOneOne.burndown.init();</script></div></section><footer class=footer><div class=footer__left><small>*Not an official City of Philadelphia app.</small></div><div class=footer__right><div class="api js-api"><div class=api__spinner><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 20.298 20.298"><path style=fill:white d="M0.952,11.102c0-0.264,0.213-0.474,0.475-0.474h2.421c0.262,0,0.475,0.21,0.475,0.474
1010
c0,3.211,2.615,5.826,5.827,5.826s5.827-2.615,5.827-5.826c0-3.214-2.614-5.826-5.827-5.826c-0.34,0-0.68,0.028-1.016,0.089
1111
v1.647c0,0.193-0.116,0.367-0.291,0.439C8.662,7.524,8.46,7.482,8.322,7.347L3.49,4.074c-0.184-0.185-0.184-0.482,0-0.667
1212
l4.833-3.268c0.136-0.136,0.338-0.176,0.519-0.104c0.175,0.074,0.291,0.246,0.291,0.438V1.96c0.34-0.038,0.68-0.057,1.016-0.057

‎philly311/stats/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
ga('create', 'UA-86116273-1', 'auto');
77
ga('send', 'pageview');</script><script type=text/javascript src=/philly311/main.js></script></head><body><header class="header js-header"><h1 class=header__title><a href=/ class=header__title-text>Philly 311</a> <span class="header__title-menu-icon js-header__menu-icon"><svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 477.175 477.175"><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
88
c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
9-
"/></svg></span></h1><div class=header__nav-wrap><nav class=main-nav><div class=main-nav__links><a href=/philly311/submit-request class=main-nav__link>Submit Request </a><a href=/philly311/stats class=main-nav__link>Explore Stats</a></div><form class=main-nav__search action=/philly311/search class=js-header-search><input name=search class=main-nav__search-input placeholder="Request ID / ZIP"><label class=main-nav__search-submit><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg> <input type=submit value=Search></label></form></nav></div></header><section class=sidebar-layout><div class=sidebar-layout__sidebar><nav class=stats-nav><a href=/philly311/stats/total-over-time class="stats-nav__link button">Total over time </a><a href=/philly311/stats/total-by-dept class="stats-nav__link button">Total requests by Dept </a><a href=/philly311/stats/burndown class="stats-nav__link button">Burndown</a></nav></div><div class=sidebar-layout__body>Stats landing message! Describe the process? Requests handled by the 311 dept, put into a system, sent to one of ... departments, updated & hopefully closed</div></section><footer class=footer><div class=footer__left><small>*Not an official City of Philadelphia app.</small></div><div class=footer__right><div class=api><div class=api__spinner><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 20.298 20.298"><path style=fill:white d="M0.952,11.102c0-0.264,0.213-0.474,0.475-0.474h2.421c0.262,0,0.475,0.21,0.475,0.474
9+
"/></svg></span></h1><div class=header__nav-wrap><nav class=main-nav><div class=main-nav__links><a href=/philly311/submit-request class=main-nav__link>Submit Request </a><a href=/philly311/stats class=main-nav__link>Explore Stats</a></div><form class=main-nav__search action=/philly311/search class=js-header-search><input name=search class=main-nav__search-input placeholder="Request ID / ZIP"><label class=main-nav__search-submit><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg> <input type=submit value=Search></label></form></nav></div></header><section class=sidebar-layout><div class=sidebar-layout__sidebar><nav class=stats-nav><a href=/philly311/stats/total-over-time class="stats-nav__link button">Total over time </a><a href=/philly311/stats/total-by-dept class="stats-nav__link button">Total requests by Dept </a><a href=/philly311/stats/burndown class="stats-nav__link button">Burndown</a></nav></div><div class=sidebar-layout__body>Stats landing message! Describe the process? Requests handled by the 311 dept, put into a system, sent to one of ... departments, updated & hopefully closed</div></section><footer class=footer><div class=footer__left><small>*Not an official City of Philadelphia app.</small></div><div class=footer__right><div class="api js-api"><div class=api__spinner><svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 0 20.298 20.298"><path style=fill:white d="M0.952,11.102c0-0.264,0.213-0.474,0.475-0.474h2.421c0.262,0,0.475,0.21,0.475,0.474
1010
c0,3.211,2.615,5.826,5.827,5.826s5.827-2.615,5.827-5.826c0-3.214-2.614-5.826-5.827-5.826c-0.34,0-0.68,0.028-1.016,0.089
1111
v1.647c0,0.193-0.116,0.367-0.291,0.439C8.662,7.524,8.46,7.482,8.322,7.347L3.49,4.074c-0.184-0.185-0.184-0.482,0-0.667
1212
l4.833-3.268c0.136-0.136,0.338-0.176,0.519-0.104c0.175,0.074,0.291,0.246,0.291,0.438V1.96c0.34-0.038,0.68-0.057,1.016-0.057

0 commit comments

Comments
 (0)