Skip to content

Commit

Permalink
Full schedule toggle (#72)
Browse files Browse the repository at this point in the history
  • Loading branch information
li-kai committed Aug 9, 2017
1 parent 002e3df commit 2b20b22
Show file tree
Hide file tree
Showing 6 changed files with 246 additions and 54 deletions.
79 changes: 79 additions & 0 deletions data/friday_hacks_1617_2.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
start_date: 2017-01-20 18:00:00 +0800
hacks:
- venue: The Hangar by NUS Enterprise
topics:
- speaker: Fazli Sapuan
from: Garena
title: The Art of Lockpicking
- speaker: Wang Chen
from: SAP
title: Smart Enterprise Software Empowered by Machine Learning
- nohack: CNY Eve
- venue: SR3, Town Plaza, University Town, NUS
topics:
- speaker: Jethro Kuan
from: NUS Hackers
title: 'Realtime Collaboration: A Brief History'
- speaker: Wang Leng
from: NUS School of Computing
title: Cross Site Scripting
- venue: SR3, Town Plaza, University Town, NUS
topics:
- speaker: Ding Feng
from: NUS CS
title: 'Hardware Hacks: The Whys and Hows'
- speaker: Raghav Sood
from: IBM Blockchain Innovation Center
title: 'Wi-Fi Hacks: Hacking the Air Around Us'
- venue: SR3, Town Plaza, University Town, NUS
topics:
- speaker: Emil Tan
from: Edgis
title: My Love-Hate Relationship with Honeypot
- speaker: Sunny Neo
from: BT Security
title: Web Security for Developers
- nohack: Recess Week
- venue: The Hangar by NUS Enterprise
topics:
- speaker: Kee Wee Teng
from: FSTD, MINDEF
title: An Introduction to DIY Laser Cutters
- speaker: Francis Regan, Xinxin Du and Shabbir
from: Ionic3DP
title: The Kappa 3D Printer
- venue: The Hangar by NUS Enterprise
topics:
- speaker: Virgil Griffith
from: Legalese
title: Bitcoin, Darkweb, Ethereum and LegalTech
- venue: SR5, Town Plaza, University Town, NUS
topics:
- speaker: John L. Gustafson
from: NUS
title: Weapons of Math Destruction
- venue: SR5, Town Plaza, University Town, NUS
topics:
- speaker: Abhilash Murthy
from: Bus Uncle
title: How to Build a Bot People Will Love
- speaker: Coreteam
from: NUS Hackers
title: Panel Discussion - Summer Plans
- venue: i-Cube Building Auditorium, NUS
topics:
- speaker: Jeff Moss
from: DEFCON & BlackHat
title: A Sharing on Cyber Security
- speaker: Halvar Flake
from: Google
title: Another Sharing on Cyber Security
- venue: SR5, Town Plaza, University Town, NUS
topics:
- speaker: Peter Hoeg
from: Speartail
title: '(Programming your OS && ignoring state) == bliss'
- speaker: Vishnu Prem
from: Coreteam
title: 'Row Hammer: Flipping Bits in Memory Without Accessing Them'
- nohack: Good Friday
12 changes: 12 additions & 0 deletions data/hacker_school.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,15 @@ events:
- topic: Introduction to programming, in Swift Playgrounds
venue: The Hangar by NUS Enterprise
date: 2017-02-18T13:00:00
- topic: Introduction to programming, in Swift Playgrounds
venue: The Hangar by NUS Enterprise
date: 2017-02-25T13:00:00
- topic: Introduction to programming, in Swift Playgrounds
venue: The Hangar by NUS Enterprise
date: 2017-03-04T13:00:00
- topic: Introduction to programming, in Swift Playgrounds
venue: The Hangar by NUS Enterprise
date: 2017-03-11T13:00:00
- topic: Introduction to programming, in Swift Playgrounds
venue: The Hangar by NUS Enterprise
date: 2017-03-18T13:00:00
113 changes: 59 additions & 54 deletions layouts/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,64 +18,68 @@ <h2>What we do</h2>
</ul>
</div>
</section>
<section class="col-12 section">
<section class="section col-12">
<header class="section-header">
<h1 class="section-title">Upcoming events</h1>
</header>
<div class="fh events">
<header class="front-header">
<h2 class="front-title">Friday Hacks</h2>
<ul class="front-list">
<li>
<a href="/sponsor">Supported</a> by NEC and IDA.
</li>
</ul>
</header>
<ol class="list row">
{{ $weekInSeconds := 604800 }}
{{ $date := $.Site.Data.friday_hacks.start_date }}
{{ $dateUnix := (time $date).Unix }}
<div class="row">
<div class="events fh col-12 col-md-6">
<header class="front-header">
<h2 class="front-title">Friday Hacks</h2>
<ul class="front-list">
<li>
<a href="/sponsor">Supported</a> by NEC and IDA.
</li>
</ul>
</header>
<ol class="list row">
{{ $weekInSeconds := 604800 }}
{{ $date := $.Site.Data.friday_hacks.start_date }}
{{ $dateUnix := (time $date).Unix }}

{{ range $index, $hack := $.Site.Data.friday_hacks.hacks }}
{{ if le $index 2 }}
<li class="fh-item item col-12 col-md-4">
{{ $hackDate := add $dateUnix (mul $index $weekInSeconds) }}
<time class="fh-time">{{ dateFormat "Jan 2" $hackDate }}</time>
{{ if eq $hack.nohack nil }}
<address class="fh-address">{{ $hack.venue }}</address>
<ul class="fh-topics">
{{ range $topicIndex, $topic := $hack.topics }}
<li class="fh-item">
<h3 class="fh-topic">{{ $topic.title }}</h3>
<div class="fh-speaker">
{{ $topic.speaker }} <span>({{ $topic.from }})</span>
</div>
</li>
{{ end }}
</ul>
{{ else }}
<em class="fh-span">{{ $hack.nohack }}, no Friday Hacks</em>
{{ end }}
</li>
{{ end }}
{{ end }}
</ol>
</div>
<div class="hs events">
<header class="front-header">
<h2 class="front-title hs-header">Hackerschool</h2>
</header>
<ol class="list row">
{{ range $index, $event := $.Site.Data.hacker_school.events }}
{{ if le $index 2 }}
<li class="item col-12 col-md-4">
<time class="hs-time">{{ dateFormat "Mon, Jan 2, 3pm" (time $event.date) }}</time>
<address class="hs-address">{{ $event.venue }}</address>
<h3 class=hs-topic>{{ $event.topic }}</h3>
</li>
{{ end }}
{{ end }}
</ol>
{{ range $index, $hack := $.Site.Data.friday_hacks.hacks }}
<li class="fh-item event-item item">
{{ $hackDate := add $dateUnix (mul $index $weekInSeconds) }}
<time class="fh-time" datetime={{ dateFormat "2006-01-02T15:04:05-0700" $hackDate}}>
{{ dateFormat "Jan 2" $hackDate }}
</time>
{{ if eq $hack.nohack nil }}
<address class="fh-address">{{ $hack.venue }}</address>
<ul class="fh-topics">
{{ range $topicIndex, $topic := $hack.topics }}
<li class="fh-item">
<h3 class="fh-topic">{{ $topic.title }}</h3>
<div class="fh-speaker">
{{ $topic.speaker }} <span>({{ $topic.from }})</span>
</div>
</li>
{{ end }}
</ul>
{{ else }}
<em class="fh-span">{{ $hack.nohack }}, no Friday Hacks</em>
{{ end }}
</li>
{{ end }}
</ol>
<div class="events-button" role="button">Show more</div>
</div>
<div class="events hs col-12 col-md-6">
<header class="front-header">
<h2 class="front-title hs-header">Hackerschool</h2>
</header>
<ol class="list row">
{{ range $index, $event := $.Site.Data.hacker_school.events }}
<li class="event-item item">
<time class="hs-time" datetime={{ dateFormat "2006-01-02T15:04:05-0700" $event.date}}>
{{ dateFormat "Mon, Jan 2, 3pm" (time $event.date) }}
</time>
<address class="hs-address">{{ $event.venue }}</address>
<h3 class=hs-topic>{{ $event.topic }}</h3>
</li>
{{ end }}
</ol>
<div class="events-button" role="button">Show more</div>
</div>
</div>
</section>
<section class="posts col-12 section">
Expand All @@ -101,4 +105,5 @@ <h3 class="posts-title"><a class="posts-link" href='{{ .Permalink }}'> {{ .LinkT
</ul>
</section>
</main>
<script>{{ readFile "static/js/toggleShowMore.js" | safeJS }}</script>
{{ end }}
66 changes: 66 additions & 0 deletions static/js/toggleShowMore.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
(function toggleShowMore() {
const SECOND = 10 * 100;
const TWENTY_FOUR_HOURS = 24 * 60 * 60 * SECOND;
const TWO_WEEKS = 2 * 7 * TWENTY_FOUR_HOURS;
const HIDE_TEXT = 'Hide';
const VISUALLY_HIDDEN_CLASS_NAME = 'visually-hidden';
const HIDDEN_CLASS_NAME = 'item-hidden';
const NOW = new Date();
const NO_EVENTS_NOTICE = (function() {
const div = document.createElement('div');
div.innerText = 'No events';
return div;
})();

// Store events beyond two weeks to be toggled
const eventsByListIndex = [];

const lists = document.querySelectorAll('.events > .list');
const buttons = document.querySelectorAll('.events-button');

lists.forEach((list, index) => {
const futureEvents = [];
list.querySelectorAll('.item').forEach(event => {
const dateString = event.querySelector('time').getAttribute('datetime');
const date = new Date(dateString);

// Remove events that have already occured (with buffer)
const isPastEvent = NOW - date > TWENTY_FOUR_HOURS / 4;
if (isPastEvent) {
event.remove();
}

// Hide events that are more than two weeks ahead
const isWithinTwoWeeks = date - NOW < TWO_WEEKS;
if (!isWithinTwoWeeks) {
event.classList.add(HIDDEN_CLASS_NAME, VISUALLY_HIDDEN_CLASS_NAME);
futureEvents.push(event);
}
});

if (!futureEvents.length) {
list.parentNode.appendChild(NO_EVENTS_NOTICE);
buttons[index].remove();
}
eventsByListIndex[index] = futureEvents;
});

buttons.forEach(function(button, index) {
const initialText = button.textContent;
button.addEventListener('click', function click(ele) {
// Toggle text of button
const elementText =
ele.target.textContent === initialText ? HIDE_TEXT : initialText;
ele.target.textContent = elementText;

// Toggle visibility of events
const events = eventsByListIndex[index];
events.forEach((event, index) => {
event.classList.toggle(VISUALLY_HIDDEN_CLASS_NAME);
setTimeout(() => {
event.classList.toggle(HIDDEN_CLASS_NAME);
}, 30 * index);
});
});
});
})();
18 changes: 18 additions & 0 deletions static/scss/front-page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,24 @@ $font-small: 0.9rem;
}
}

.events {
.events-button {
display: block;
text-align: center;
color: $button-link-color;
border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}
.item {
opacity: 1;
transform: none;
@include transition(deceleration);
}
.item-hidden {
opacity: 0;
transform: translateY(-1rem);
}
}

.fh {
.fh-time {
display: block;
Expand Down
12 changes: 12 additions & 0 deletions static/scss/main.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
$hackers-orange: #cc4100;
$highlight-orange: #f8941d;
$button-link-color: #4a4a4a;
$link-color: $hackers-orange;
$link-hover-color: $hackers-orange;

Expand Down Expand Up @@ -54,6 +55,17 @@ h6 {
list-style: none;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
}

.fh-sponsor {
display: block;
max-width: 16rem;
Expand Down

0 comments on commit 2b20b22

Please sign in to comment.