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

[WIP]2018/page html #174

Open
wants to merge 39 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
61075c6
Added pages to partials
AndrewZamora Nov 21, 2018
29487fc
Added page.ejs
AndrewZamora Nov 21, 2018
e7f8e2a
used npm run dev
AndrewZamora Nov 21, 2018
a631aef
fixed multiple rendering of biographies.
martinheidegger Nov 21, 2018
73bec25
Put summary, description and bio in HTML tags to make more visible
AndrewZamora Nov 21, 2018
a33f6bb
Added slots and used hh function to format start and end times
AndrewZamora Nov 21, 2018
da8d1e4
Deleted pages.ejs partial because it was not needed
AndrewZamora Nov 21, 2018
bde8aa9
Changed page.html and page.ejs to room
AndrewZamora Nov 21, 2018
7e4c64f
Added room.js and requied room.html path in main.js
AndrewZamora Nov 21, 2018
a8f5a01
Added a module export to room.js
AndrewZamora Nov 21, 2018
293eda2
Added room navigation.
martinheidegger Nov 22, 2018
402090c
Using proper isoString
martinheidegger Nov 22, 2018
403d777
If a room is selected, let it contain all the list entries.
martinheidegger Nov 22, 2018
e1a29e9
Added time display.
martinheidegger Nov 22, 2018
18f69de
Added hour/minute override to hash (to only select a certain time)
martinheidegger Nov 22, 2018
515149d
Showing only the list items that are relevant right now.
martinheidegger Nov 22, 2018
ca1bdf2
Added first & last closed.
martinheidegger Nov 22, 2018
e247b98
Performance improvement.
martinheidegger Nov 22, 2018
0ec0498
Added breaks.
martinheidegger Nov 22, 2018
1e27460
Fixed selection logic (current/before/after)
martinheidegger Nov 22, 2018
b915487
Put clock component in a container for positioning with flexbox
AndrewZamora Nov 22, 2018
f55ab40
Positioned and added styles to clock
AndrewZamora Nov 22, 2018
8c1078e
Ran npm run dev
AndrewZamora Nov 22, 2018
dbb745e
Ran npm run dev
AndrewZamora Nov 22, 2018
fdd9e0d
Removed box around clock, changed font color and added white text shadow
AndrewZamora Nov 22, 2018
3398280
Changed ul id rooms to rooms-container
AndrewZamora Nov 22, 2018
38be351
change room img tags to divs with background images
AndrewZamora Nov 22, 2018
6bbc3cd
Added gray overlay for room-entry-before and made room-time-container…
AndrewZamora Nov 22, 2018
e10e520
Went crazy with flexbox
AndrewZamora Nov 22, 2018
c146111
Making sure that the entire container is hidden.
martinheidegger Nov 22, 2018
c929554
Adding clear background to page.
martinheidegger Nov 22, 2018
82509b6
Making the screen full.
martinheidegger Nov 22, 2018
88feabc
Ran npm run dev
AndrewZamora Nov 22, 2018
be80137
Using the translated biographies first.
martinheidegger Nov 22, 2018
9b022fb
Another stab at selecting the right nodes.
martinheidegger Nov 22, 2018
4d55109
Better descriptions of the entries.
martinheidegger Nov 22, 2018
4768108
its previousSibling not prevSibling in javascript ... doh
martinheidegger Nov 22, 2018
dc422c4
Well, if we check for > in one if we need to do the <= in the other f…
martinheidegger Nov 22, 2018
d41396c
I am too tired to fix if switches.
martinheidegger Nov 22, 2018
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
2 changes: 1 addition & 1 deletion 2018/main.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion 2018/main.js

Large diffs are not rendered by default.

1,065 changes: 1,065 additions & 0 deletions 2018/room.html

Large diffs are not rendered by default.

102 changes: 102 additions & 0 deletions 2018/src/html/room.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<%
var page = {
title: 'Room'
}
var _enableBr = function(str) { return str.replace(/\n/g, '<br>'); };

function itemHeader (start, end, clazz) {
%><li
data-start="<%= momentTz(start).tz('Asia/Tokyo').toISOString() %>"
data-end="<%= momentTz(start).tz('Asia/Tokyo').toISOString() %>"
class="<%- clazz %>"
><p class="room-entry-time"><%= hh(start) + ' - ' + hh(end) %></p><%
}
function itemFooter () {
%></li><%
}
%>


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Room</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="room-page">
<div id="room-time-container">
<div id="room-time" class="room-time"></div>
</div>
<div id="rooms-container">
<h1>Rooms</h1>
<ul id="rooms">
<%
for (const calName in calendar ) {
const cal = calendar[calName]
var count = 0
for (const room in cal.rooms) {
const entries = cal.rooms[room]
%>
<li><a href="#<%= calName %>-<%= count %>"><%= calName %> - <%= room %></a></li><%
count += 1
}
}
%>
</ul>
</div>
<div>
<%
for (const calName in calendar ) {
const cal = calendar[calName]
function hh (time) {
return momentTz(time).tz(cal.googleObject.timeZone).format('H:mm')
}
var count = 0.
for (const room in cal.rooms) {
const entries = cal.rooms[room]
const firstEntry = entries[0]
%>
<ul id="list-<%= calName + '-' + count %>" class="room-list">
<li class="room-entry-closed room-entry-notstarted">This rooms opens at <%= hh(firstEntry.start) %></li>
<%
var formerEnd;
for (const entry of entries) {
const speaker = speakers[entry.person]
const slotClasses = new Map()
if (formerEnd && entry.start > formerEnd) {
itemHeader(formerEnd, entry.start, 'room-entry-break')
%>Break<%
itemFooter()
}
itemHeader(entry.start, entry.end)
%>
<hr/>
<h3><%= entry.summary %></h3>
<p><%= entry.description %></p>
<hr/>
<%
if (speaker) {
%><div class="room-image" style="background-image:url(img/speakers/pic-<%=speaker.id%>.jpg);"></div><%
var translation = translations.speaker[speaker.id] || {}
var bio = speaker['自己紹介'] || translation.ja || speaker.biography
if (bio) {
%><p><%- _enableBr(bio) %></p><%
}
}
itemFooter()
formerEnd = entry.end
}
%>
<li class="room-entry-closed room-entry-finished">This room closes at <%= hh(formerEnd) %>. Thank you for joining us today!</li>
</ul><%
count += 1
}
}%>
</div>
</body>
<script src="main.js"></script>
</html>

1 change: 1 addition & 0 deletions 2018/src/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ var scripts = {
'/venues.html': require('./page/venues'),
'/speakers.html': require('./page/speakers'),
'/schedule.html': require('./page/schedule'),
'/room.html': require('./page/room'),
};

(scripts[main] || function() {})({});
138 changes: 138 additions & 0 deletions 2018/src/js/page/room.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
var hashChange = require('../vendor/hashChange');
var momentTz = require('moment-timezone');

function compareHmm (time, now) {
if (time.hours() === now.hours()) {
if (time.minutes() === now.minutes()) {
return 0
}
if (time.minutes() < now.minutes()) {
return -1
}
return 1
}
if (time.hours() < now.hours()) {
return -1
}
return 1
}

function toggle (node, clazz, flag) {
if (flag) {
if (!node.classList.contains(clazz)) {
node.classList.add(clazz)
}
} else {
if (node.classList.contains(clazz)) {
node.classList.remove(clazz)
}
}
}

function findNode (type, node, op) {
node = op(node)
while (node) {
if (type.test(node.nodeName)) {
return node
}
node = op(node)
}
return null
}

module.exports = function () {
var overview = document.getElementById('rooms-container')
var timeNode = document.getElementById('room-time')
var rooms = [].slice.call(document.querySelectorAll('.room-list'))
var allParts = rooms.concat(overview)
rooms = rooms.map(function (roomNode) {
var entries = [].slice.call(roomNode.querySelectorAll('li'))
var before = entries.shift()
var after = entries.pop()
entries.forEach(function (entryNode) {
var start = entryNode.attributes['data-start']
entryNode.start = momentTz(start.value).tz('Asia/Tokyo')
var end = entryNode.attributes['data-end']
entryNode.end = momentTz(end.value).tz('Asia/Tokyo')
})

return {
node: roomNode,
entries: entries,
allEntries: [before].concat(entries).concat(after),
before: before,
after: after
}
})
var selectedRoom
var hour
var minute
hashChange.addListener(function (hash) {
var parts = /^[\/|#]?([^-]+)-([^-]+)(-(\d{2}):(\d{2}))?/.exec(hash);
var day = parts && parts[1];
var roomName = parts && parts[2];
hour = parts && parts[4];
minute = parts && parts[5];
selectedRoom = null
if (day) {
var lookupId = 'list-' + day + '-' + roomName;
selectedRoom = rooms.filter(function (part) {
return part.node.id === lookupId;
})[0];
}
var selectedPart = (selectedRoom && selectedRoom.node) || overview
allParts.forEach(function (part) {
if (part === selectedPart) {
part.style.display = ''
} else {
part.style.display = 'none'
}
})
})

function updateTime (time) {
if (time !== timeNode.innerText) {
timeNode.innerText = time
}
}

function render () {
var now = momentTz(Date.now()).tz('Asia/Tokyo')
if (hour) {
now.hours(hour)
}
if (minute) {
now.minutes(minute)
}
updateTime(now.format('HH:mm'))
if (!selectedRoom) {
return
}
var current
var firstEntry = selectedRoom.entries[0]
if (compareHmm(firstEntry.start, now) > 0) {
current = selectedRoom.before
} else {
selectedRoom.entries.forEach(function (entryNode) {
var isAfter = compareHmm(entryNode.start, now) >= 0
if (isAfter && !current) {
current = entryNode
}
})
if (!current) {
current = selectedRoom.after
}
}
var nextSibling = findNode(/^li$/ig, current, function (curr) { return curr.nextSibling })
var prevSibling = findNode(/^li$/ig, current, function (curr) { return curr.previousSibling })
selectedRoom.allEntries.forEach(function (entryNode) {
toggle(entryNode, 'room-entry-current', entryNode === current)
toggle(entryNode, 'room-entry-after', entryNode === nextSibling)
toggle(entryNode, 'room-entry-before', entryNode === prevSibling)
})
toggle(selectedRoom.node, 'room-before-start', current === selectedRoom.before)
toggle(selectedRoom.node, 'room-after-finish', current === selectedRoom.after)
}
render()
setInterval(render, 100)
}
78 changes: 78 additions & 0 deletions 2018/src/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2738,3 +2738,81 @@ a.confcal-button-inactive {
border-bottom: 4px solid $color-sunred;
}
}

.room-page {
background: #eada96;
}

.room-list {
display: block;
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
overflow: hidden;
li {
display: none;
&.room-entry-before, &.room-entry-after, &.room-entry-current {
display: block;
overflow: hidden;
position: relative;
width: 100%
}
}
}

.room-entry-before,.room-entry-after {
height: 16%;
background: #1da1f2;
}

.room-entry-current {
height: 68%;
}
.room-before-start, .room-after-finish {
.room-entry-before,.room-entry-after {
height: 24%;
}
.room-entry-current {
height: 76%;
}
}

.room-entry-before {
// position: relative;
// top: 0;
// bottom: 0;
// left: 0;
// right: 0;
// height: 100%;
// width: 100%;
// opacity: 0.5;
// transition: .3s ease;
// background-color:#b3b3b3;
// z-index: 1;
}

#room-time-container {
width: 100%;
display: flex;
position: sticky;
top: 0;
z-index: 2;
}

.room-time {
margin: 0.5em 1em 0 auto;
font-size: 1.5em;
text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
padding: 0.1em 0.5em;
}

.room-image {
height: 100%;
width: 20%;
background-clip: content-box;
background-size: cover;
background-position: center;
border-radius: 50%;
}