Skip to content

Commit b192824

Browse files
danbjosephdanbjoseph
committed
google sheets fix
1 parent 729ccfb commit b192824

File tree

6 files changed

+123
-70
lines changed

6 files changed

+123
-70
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ app/assets/scripts/config/local.js
1515
app/_data/events
1616
app/_posts
1717
app/.jekyll-cache
18+
app/assets/google-sheets/*
19+
!app/assets/google-sheets/README.md
1820

1921

2022
#Foundation additions

‎app/_includes/events.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,8 @@ <h1 class="title feature-header">{{site.data[locale].events.title}}</h1>
4040
var today = luxon.DateTime.local().startOf('day');
4141
var siteBaseUrl = "{{ site.baseurl }}";
4242

43-
/* USE PAPAPARSE TO GRAB EVENT DATA FROM GOOGLE SHEET */
4443
function init() {
45-
Papa.parse('https://cors-anywhere.herokuapp.com/https://docs.google.com/spreadsheets/d/e/2PACX-1vSENK52p0o0dEpEfEH-qvloWEkILbcf-X8aSWdStVHKZuAF-G8-80NsRcouqBlB3DSsqerzVvPmnxDu/pub?gid=469941282&single=true&output=csv', {
44+
Papa.parse('{{ site.baseurl }}/assets/google-sheets/events.csv', {
4645
download: true,
4746
header: true,
4847
complete: function(results) {

‎app/_includes/events_min.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@
1818
var today = luxon.DateTime.local().startOf('day');
1919
var siteBaseUrl = "{{ site.baseurl }}";
2020

21-
/* USE PAPAPARSE TO GRAB EVENT DATA FROM GOOGLE SHEET */
2221
function init() {
23-
Papa.parse('https://docs.google.com/spreadsheets/d/e/2PACX-1vSENK52p0o0dEpEfEH-qvloWEkILbcf-X8aSWdStVHKZuAF-G8-80NsRcouqBlB3DSsqerzVvPmnxDu/pub?gid=469941282&single=true&output=csv', {
22+
Papa.parse('{{ site.baseurl }}/assets/google-sheets/events.csv', {
2423
download: true,
2524
header: true,
2625
complete: function(results) {

‎app/_includes/helper-map.html

+82-57
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,13 @@
5252
</div>
5353

5454

55-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
55+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
5656
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
5757
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/4.0.6/what-input.min.js"></script>
5858
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
5959
<script src="https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js"></script>
6060
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
61-
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
61+
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
6262
<!-- <script src="https://use.fontawesome.com/eb154e6e77.js"></script> -->
6363

6464
<script>
@@ -281,7 +281,7 @@
281281

282282

283283
// get the contact data from the google spreadhsheet
284-
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vT12UwGG1A10zICCvRL5tcd4uF89xXNOQ9RS4R9vDLax7H2vMKOUV3kODbFAA5RPP6LQathslaUIO-9/pub?gid=1040223163&single=true&output=csv';
284+
var publicSpreadsheetUrl = '{{ site.baseurl }}/assets/google-sheets/eventHelpers.csv';
285285
function init() {
286286
Papa.parse(publicSpreadsheetUrl, {
287287
download: true,
@@ -357,52 +357,77 @@
357357
subdomains: 'abcd',
358358
maxZoom: 19
359359
}).addTo(map);
360-
361-
// initialize the SVG layer for D3 drawn markers
362-
L.svg().addTo(map);
363-
// pick up the SVG from the map object
364-
var svg = d3.select('#map').select('svg');
365-
markersGroup = svg.append('g').attr('id', 'markers').attr('class', 'leaflet-zoom-hide');
366-
367-
// add markers to the map for each contact
368-
mappedContacts = d3.select('svg #markers').selectAll('text').data(validMarkers)
369-
.enter().append('text')
370-
.text('\uf276')
371-
.attr('font-family', 'FontAwesome')
372-
.attr('class', function(d) {
373-
if(d[supportKey].length === 1) {
374-
return 'map-font ' + supportClass(d[supportKey][0]);
375-
} else { return 'map-font help_all'; }
376-
})
377-
.classed('mapmarker', true)
378-
.on('click', function(d) {
379-
var lang = [];
380-
$.each(d[languageKey], function(i, item){ lang.push(languageLookup[item]); });
381-
var support = [];
382-
$.each(d[supportKey], function(i, item) {
383-
support.push('<span class="' + supportClass(item) + '">' + item + '</span>');
384-
});
385-
var supportHtml = support.join(', ');
386-
var htmlpop = '<div><b>' + osmHtml(d[osmKey]) + '&nbsp; ' + d[nameKey] + '</b></div>' +
387-
'<div>' +
388-
supportHtml + '<br>' +
389-
contactInfo(d[emailKey], d[phoneKey], d[skypeKey], d[twitterKey]) + '<br>' +
390-
'<i class="fa fa-fw fa-language" aria-hidden="true"></i>&nbsp; ' + lang.join('; ') + '<br>' +
391-
'<em>' + d[noteKey] + '</em>' +
392-
'</div>';
393-
var popup = L.popup({closeOnClick: false})
394-
.setLatLng(d.LatLng)
395-
.setContent(htmlpop)
396-
.openOn(map);
360+
361+
validMarkers.forEach(function(d, index){
362+
var marker = L.marker(d.LatLng)
363+
var lang = [];
364+
$.each(d[languageKey], function(i, item){ lang.push(languageLookup[item]); });
365+
var support = [];
366+
$.each(d[supportKey], function(i, item) {
367+
support.push('<span class="' + supportClass(item) + '">' + item + '</span>');
397368
});
398-
399-
// when map view changes adjust the locations of the svg circles
400-
updatemarker = function() {
401-
mappedContacts.attr('x',function(d) { return map.latLngToLayerPoint(d.LatLng).x; });
402-
mappedContacts.attr('y',function(d) { return map.latLngToLayerPoint(d.LatLng).y; });
403-
}
404-
// set the starting locations of the markers
405-
updatemarker();
369+
var supportHtml = support.join(', ');
370+
var htmlpop = '<div><b>' + osmHtml(d[osmKey]) + '&nbsp; ' + d[nameKey] + '</b></div>' +
371+
'<div>' +
372+
supportHtml + '<br>' +
373+
contactInfo(d[emailKey], d[phoneKey], d[skypeKey], d[twitterKey]) + '<br>' +
374+
'<i class="fa fa-fw fa-language" aria-hidden="true"></i>&nbsp; ' + lang.join('; ') + '<br>' +
375+
'<em>' + d[noteKey] + '</em>' +
376+
'</div>';
377+
marker.bindPopup(htmlpop);
378+
marker.addTo(map);
379+
});
380+
381+
382+
// ############
383+
// ## using D3 to render SVG was really bogging down for some reason
384+
// ############
385+
386+
// // initialize the SVG layer for D3 drawn markers
387+
// L.svg().addTo(map);
388+
// // pick up the SVG from the map object
389+
// var svg = d3.select('#map').select('svg');
390+
// markersGroup = svg.append('g').attr('id', 'markers').attr('class', 'leaflet-zoom-hide');
391+
//
392+
// // add markers to the map for each contact
393+
// mappedContacts = d3.select('svg #markers').selectAll('text').data(validMarkers)
394+
// .enter().append('text')
395+
// .text('\uf276')
396+
// .attr('font-family', 'FontAwesome')
397+
// .attr('class', function(d) {
398+
// if(d[supportKey].length === 1) {
399+
// return 'map-font ' + supportClass(d[supportKey][0]);
400+
// } else { return 'map-font help_all'; }
401+
// })
402+
// .classed('mapmarker', true)
403+
// .on('click', function(d) {
404+
// var lang = [];
405+
// $.each(d[languageKey], function(i, item){ lang.push(languageLookup[item]); });
406+
// var support = [];
407+
// $.each(d[supportKey], function(i, item) {
408+
// support.push('<span class="' + supportClass(item) + '">' + item + '</span>');
409+
// });
410+
// var supportHtml = support.join(', ');
411+
// var htmlpop = '<div><b>' + osmHtml(d[osmKey]) + '&nbsp; ' + d[nameKey] + '</b></div>' +
412+
// '<div>' +
413+
// supportHtml + '<br>' +
414+
// contactInfo(d[emailKey], d[phoneKey], d[skypeKey], d[twitterKey]) + '<br>' +
415+
// '<i class="fa fa-fw fa-language" aria-hidden="true"></i>&nbsp; ' + lang.join('; ') + '<br>' +
416+
// '<em>' + d[noteKey] + '</em>' +
417+
// '</div>';
418+
// var popup = L.popup({closeOnClick: false})
419+
// .setLatLng(d.LatLng)
420+
// .setContent(htmlpop)
421+
// .openOn(map);
422+
// });
423+
//
424+
// // when map view changes adjust the locations of the svg circles
425+
// updatemarker = function() {
426+
// mappedContacts.attr('x',function(d) { return map.latLngToLayerPoint(d.LatLng).x; });
427+
// mappedContacts.attr('y',function(d) { return map.latLngToLayerPoint(d.LatLng).y; });
428+
// }
429+
// // set the starting locations of the markers
430+
// updatemarker();
406431

407432
filter = function(){
408433

@@ -497,22 +522,22 @@
497522
}
498523

499524
toggleMarkerVis = function(language, type) {
500-
mappedContacts.each(function(d) {
501-
if( (($.inArray(language, d[languageKey]) !== -1) || (language == 'all')) && ( ($.inArray(type, d[supportKey]) !== -1) || (type == 'all')) ){
502-
d3.select(this).classed('no-language', false);
503-
} else {
504-
d3.select(this).classed('no-language', true);
505-
}
506-
});
525+
// mappedContacts.each(function(d) {
526+
// if( (($.inArray(language, d[languageKey]) !== -1) || (language == 'all')) && ( ($.inArray(type, d[supportKey]) !== -1) || (type == 'all')) ){
527+
// d3.select(this).classed('no-language', false);
528+
// } else {
529+
// d3.select(this).classed('no-language', true);
530+
// }
531+
// });
507532
}
508533

509534

510535
// when map view changes check what markers are visible in the extent
511536
map.on('load moveend zoomend viewreset', filter);
512537
// filter();
513538

514-
// when map view changes adjust the locations of the markers
515-
map.on('zoom move viewreset', updatemarker);
539+
// // when map view changes adjust the locations of the markers
540+
// map.on('zoom move viewreset', updatemarker);
516541

517542
$('#language-filter').change(function(){
518543
filter();

‎app/assets/google-sheets/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
the gulp build process grabs the data from the google sheets and drops it here
2+
we get a CORS error if we try to pull the data directly from Sheets into the browser client-side

‎gulpfile.js

+35-9
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const cp = require('child_process');
88
const fs = require('fs');
99
const git = require('gulp-git');
1010
const markdownpdf = require("markdown-pdf");
11+
const path = require('path');
1112
const plumber = require('gulp-plumber');
1213
const request = require('request');
1314
const runSequence = require('run-sequence').use(gulp);
@@ -16,6 +17,38 @@ const sourcemaps = require('gulp-sourcemaps');
1617
const uglify = require('gulp-uglify');
1718
const zip = require('gulp-zip');
1819

20+
function grabEvents(cb){
21+
var options = {
22+
url: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSENK52p0o0dEpEfEH-qvloWEkILbcf-X8aSWdStVHKZuAF-G8-80NsRcouqBlB3DSsqerzVvPmnxDu/pub?gid=469941282&single=true&output=csv'
23+
};
24+
request(options, function (err, res) {
25+
var fileName = "events.csv";
26+
const outputFile = path.join(__dirname,'app','assets','google-sheets',fileName);
27+
if (fs.existsSync(outputFile)) {
28+
fs.unlinkSync(outputFile);
29+
}
30+
fs.writeFileSync(outputFile, res.body, 'utf8');
31+
cb();
32+
});
33+
}
34+
exports.grabEvents = grabEvents;
35+
36+
function grabEventHelpers(cb){
37+
var options = {
38+
url: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vT12UwGG1A10zICCvRL5tcd4uF89xXNOQ9RS4R9vDLax7H2vMKOUV3kODbFAA5RPP6LQathslaUIO-9/pub?gid=1040223163&single=true&output=csv'
39+
};
40+
request(options, function (err, res) {
41+
var fileName = "eventHelpers.csv";
42+
const outputFile = path.join(__dirname,'app','assets','google-sheets',fileName);
43+
if (fs.existsSync(outputFile)) {
44+
fs.unlinkSync(outputFile);
45+
}
46+
fs.writeFileSync(outputFile, res.body, 'utf8');
47+
cb();
48+
});
49+
}
50+
exports.grabEventHelpers = grabEventHelpers;
51+
1952

2053
function clean() {
2154
return gulp.src(['_site', '.tmp', 'app/_data/events', 'app/_posts'], {read: false, allowEmpty: true})
@@ -86,13 +119,6 @@ function validationPdf(cb) {
86119
}
87120
exports.validationPdf = validationPdf;
88121

89-
function cloneEvents(cb) {
90-
git.clone('https://github.com/MissingMaps/events', {args: './app/_data/events'}, function(err) {
91-
// handle err
92-
cb();
93-
});
94-
}
95-
exports.cloneEvents = cloneEvents
96122

97123
function cloneBlog(cb) {
98124
git.clone('https://github.com/MissingMaps/blog', {args: './app/_posts'}, function(err) {
@@ -137,7 +163,7 @@ function watching() {
137163
}
138164
exports.serve = gulp.series(
139165
clean,
140-
gulp.parallel(cloneEvents, cloneBlog),
166+
gulp.parallel(cloneBlog, grabEvents, grabEventHelpers),
141167
jekyll,
142168
gulp.parallel(javascripts, styles, icons, zipMaterials, validationPdf),
143169
copyAssets,
@@ -147,7 +173,7 @@ var environment = 'development';
147173
function setProd(cb) { environment = 'production'; cb(); }
148174
exports.prod = gulp.series(
149175
clean,
150-
gulp.parallel(cloneEvents, cloneBlog),
176+
gulp.parallel(cloneBlog, grabEvents, grabEventHelpers),
151177
setProd,
152178
jekyll,
153179
gulp.parallel(javascripts, styles, icons, zipMaterials, validationPdf),

0 commit comments

Comments
 (0)