Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Created an upcoming events widget #192

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions _includes/events.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="events">
<h2 class="col12 contain z1 fill-blue button events-header">Upcoming Events:</h2>
<ul class="events-list"></ul>
</div>
1 change: 0 additions & 1 deletion _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
<meta property='og:type' content='website' />
{% endif %}
<title>{% if page.url == '/' %}{{site.maptime.chapter}}{% else %}{{site.maptime.chapter}} | {{page.title}}{% endif %}</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='{{site.baseurl}}/css/site.css' type='text/css'/>
{% for stylesheet in page.css %}
Expand Down
7 changes: 7 additions & 0 deletions _includes/js/moment.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions _includes/js/tabletop.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 1 addition & 26 deletions _includes/menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,4 @@
</ul>
</nav>
<button class="nav-expand"><img src="/img/menu-hamburger.svg"></button>
</div>

<script>
var nav = $('#nav');
var menu = $('#nav .menu');
var navButton = $('.nav-expand');
$('button.nav-expand').on('click', function(){
menu.slideToggle(200);
navButton.toggleClass('open');
});
var blocked = false,
threshold = 800;
$(window).resize(function(){
menuCheck($(window).outerWidth(true), blocked, threshold);
});
function menuCheck(w, b, t) {
if (w>t && !b) {
menu.show();
blocked = !b;
$('.nav-expand').removeClass('open');
} else if (w<=t && b) {
menu.hide();
blocked = !b;
}
}
</script>
</div>
4 changes: 3 additions & 1 deletion _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@
</div>
</div>
</div>

{% include events.html %}
</aside>

<div class='col8 margin2r prose content'>
Expand All @@ -50,7 +52,7 @@
<p>This website is <a href='http://github.com/{{site.github_org}}/{{site.repo}}/'>open source</a> and you can improve it. Learn more about contributing <a href='https://guides.github.com/activities/forking/'>here</a>. In founding partnership with <a href="http://stamen.com">Stamen</a>.</p>
</div>
</footer>
<script src='{{site.baseurl}}/js/jquery.min.js'></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src='{{site.baseurl}}/js/underscore.min.js'></script>
<script src='{{site.baseurl}}/site.js'></script>

Expand Down
37 changes: 36 additions & 1 deletion css/site.css
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,6 @@ a.fill-darken0:hover { background-color:rgba(0,0,0,0.15); }
}

.followers {
max-height:480px;
position:relative;
}
.followers:after {
Expand Down Expand Up @@ -430,3 +429,39 @@ a.hover-link:hover:after {
.form-alert.show {
display:block;
}

.event {
background: white;
padding: 10px 5px;
border-bottom: 1px solid #eee;
}
.events-header {
font-size: 1em;
}

a.events-header {
text-decoration: underline;
}

.events-header:hover {
cursor: pointer;
}

.events-list {
display: none;
}

.event-title {
text-align: center;
}

@media (min-width: 704px) {
.events-list {
display: block;
max-height: 480px;
overflow-y: scroll;
}
.events-header:hover {
cursor: normal;
}
}
90 changes: 88 additions & 2 deletions site.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
---
---
//Tabletop.js
{% include js/tabletop.js %}
{% include js/moment.js %}

function githubWatchers() {
var watchers = $('.followers');
Expand All @@ -24,6 +27,89 @@ function githubWatchers() {
watchers.append(data);
}
});
};
}

$(githubWatchers);
function filterDates(events) {
// Ditch past events
var upcoming = _.filter(events, function(event){
return moment(event.datetime) > moment();
});

// Sort by date
upcoming.sort(function(a,b) {
var a = moment(a.datetime),
b = moment(b.datetime);
if (a < b)
return -1;
if (a > b)
return 1;
return 0;
});

return upcoming;
}

function processEvents(data, tabletop) {

// Filter and Sort dates
var filtered = filterDates(data);

var $eventList = $('.events-list'),
template = "<li class='event'>" +
"<% if (externalurl) { %>" +
"<a href='<%=externalurl%>'><%=whichchapter%></a></h3>" +
"<% } else { %>" +
"<h3 class='event-title'><%=whichchapter%></h3>" +
"<% } %>" +
"<p class='event-date'><%=moment(datetime).format('MMMM Do YYYY, h:mm a')%></p>" +
"<p><address><%=locationname%><br><%=locationaddress%></address></p>" +
"</li>";
var events = _(filtered)
.map(function(i) { return _(template).template(i); });

$eventList.append(events);
}

function initEvents() {
var $eventList = $('.events-list'),
$header = $('.events-header'),
$window = $(window),
events = Tabletop.init({
key: '1kswO9zq5UgQCdPwndBmQGtKhQtbQw8xSQhqHLcQHxKU',
callback: processEvents,
simpleSheet: true,
orderBy: 'datetime'
});

$header.on('click', function(){
if ($window.width() < 704) $eventList.toggle();
});
}

$(function() {
// Menu logic
var nav = $('#nav'),
menu = $('#nav .menu'),
navButton = $('.nav-expand');
$('button.nav-expand').on('click', function(){
menu.slideToggle(200);
navButton.toggleClass('open');
});
var blocked = false,
threshold = 800;
$(window).resize(function(){
menuCheck($(window).outerWidth(true), blocked, threshold);
});
function menuCheck(w, b, t) {
if (w>t && !b) {
menu.show();
blocked = !b;
$('.nav-expand').removeClass('open');
} else if (w<=t && b) {
menu.hide();
blocked = !b;
}
}
githubWatchers();
initEvents();
});