Skip to content

Commit

Permalink
Better tooltips in map and real counts.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikeal
mikeal committed Nov 27, 2015
1 parent efbad69 commit 54690a0
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 17 deletions.
77 changes: 60 additions & 17 deletions layouts/events.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,23 +43,24 @@
{{#each regions}}
<div class="region">
<h1>{{region}}</h1>
{{#if conferences}}<h2>Conferences</h2>{{/if}}
{{#each conferences}}
<div class="conference">
<h3><a href="{{link}}">{{name}}</a>
{{#if location}}
- <small class="map-link"><a href="https://www.google.com/maps/place/{{location}}">map</a></small>
{{/if}}
</h3>
{{#if desc}}
<p class="conference-description">{{desc}}</p>
{{/if}}
</div>
{{#if conferences}}<h2>Conferences <span class="events-number"></span></h2>{{/if}}
<div class ="conference-list">
{{#each conferences}}
<div class="conference">
<h3><a href="{{link}}">{{name}}</a>
{{#if location}}
- <small class="map-link"><a href="https://www.google.com/maps/place/{{location}}">map</a></small>
{{/if}}
</h3>
{{#if desc}}
<p class="conference-description">{{desc}}</p>
{{/if}}
</div>
{{/each}}

</div>
<h2>
<span class="arrow">&#62;</span>
<a class="js-list-toggle-link" href="#">NodeSchools <span class="events-number">10</span></a>
<a class="js-list-toggle-link" href="#">NodeSchools <span class="events-number"></span></a>
</h2>
<ul class="events-list">
{{#each nodeschools}}
Expand All @@ -79,7 +80,7 @@

<h2>
<span class="arrow">&#62;</span>
<a class="js-list-toggle-link" href="#">Meetups <span class="events-number">10</span></a>
<a class="js-list-toggle-link" href="#">Meetups <span class="events-number"></span></a>
</h2>
<ul class="events-list">
{{#each meetups}}
Expand All @@ -98,7 +99,12 @@

<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />

<style>
div.marker-image img {
max-width:320px;
max-height:100px;
}
</style>
<script>
function haversine() {
var radians = Array.prototype.map.call(arguments, function(deg) { return deg/180.0 * Math.PI; });
Expand All @@ -114,6 +120,29 @@
L.mapbox.accessToken = 'pk.eyJ1IjoibWlrZWFsIiwiYSI6ImNpaGY5ajk5ZTA0ZTN0cmo3MzZ5NnV5eHIifQ.YBfpOTUwcbaZrNvAfDaDcQ';
var map = L.mapbox.map('events-map', 'mapbox.streets-basic')
var featureLayer = L.mapbox.featureLayer()
featureLayer.on('layeradd', function(e) {
var marker = e.layer
var feature = marker.feature
var props = feature.properties
var html = ''
if (props.link) {
html += '<div class="marker-title"><a href="' + props.link + '">' + props.title + '</a></div>'
} else {
html += '<div class="marker-title">' + props.title + '</div>'
}
if (props.description && props.description.length > 400) {
html += '<div class="marker-description">' + props.description.slice(0, 400) + '...</div>'
} else if (props.description) {
html += '<div class="marker-description">' + props.description + '</div>'
}
if (props.image) {
html += '<div class="marker-image"><img src="' + props.image + '"></img></div>'
}
marker.bindPopup(html, { minWidth: 320 })
})
featureLayer.on('ready', function () {
if ("geolocation" in navigator) {
Expand Down Expand Up @@ -156,7 +185,21 @@
toggleEventsDisplay(evt);
}
});
var selector = document.querySelectorAll("div.region h2")
var totals = {}
for (var i=0;i<selector.length;i++) {
var ch = selector[i]
var regionSubHeading = ch
var regionEventsList = regionSubHeading.nextElementSibling
var evKey = ch.textContent.replace(/[^a-zA-Z]/g, '')
if (!totals[evKey]) totals[evKey] = 0
totals[evKey] += regionEventsList.children.length
ch.querySelector('span.events-number').textContent = regionEventsList.children.length
}
document.querySelector('span.key-meetup').textContent += (' ('+totals['Meetups']+')')
document.querySelector('span.key-nodeschool').textContent += (' ('+totals['NodeSchools']+')')
document.querySelector('span.key-conference').textContent += (' ('+totals['Conferences']+')')
function toggleEventsDisplay(evt) {
evt.preventDefault();
var regionSubHeading = evt.target.parentNode;
Expand Down
6 changes: 6 additions & 0 deletions scripts/event-geo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ function _meetup (ev) {
properties:
{ title: ev.name,
description: desc,
link: ev.link,
image: ev.group_photo ? ev.group_photo.photo_link : '',
'marker-size': 'medium',
'marker-symbol': 'star',
'marker-color': '#80bd01'
Expand All @@ -74,6 +76,8 @@ function _conference (ev) {
properties:
{ title: ev.name,
description: ev.desc,
link: ev.link,
image: ev.image,
'marker-size': 'medium',
'marker-symbol': 'triangle',
'marker-color': '#3887be'
Expand All @@ -91,6 +95,8 @@ function _nodeschool (ev) {
},
properties:
{ title: ev.name,
link: ev.website || ev.repo,
image: ev.image,
description: `${ev.name} ${ev.repo || ''} ${ev.website || ''}`,
'marker-size': 'medium',
'marker-symbol': 'star-stroked',
Expand Down

1 comment on commit 54690a0

@rnsloan
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mikeal is their a reason counting the events in javascript is better than getting the length from handlebars e203d04 ?

I made another commit when I remembered how to do this.

Please sign in to comment.