Commit 7af4ce5f authored by gijs's avatar gijs
Browse files

Homepage in simplified structure. AJAX loading of event details.

parent eeaad96e
......@@ -105,6 +105,8 @@ def generate ():
os.mkdir(os.path.join(outputdir, 'questions'))
# os.mkdir(os.path.join(outputdir, 'trajectories'))
os.mkdir(os.path.join(outputdir, 'reflections'))
os.mkdir(os.path.join(outputdir, 'api'))
os.mkdir(os.path.join(outputdir, 'api', 'activities'))
models = parse_pads()
......@@ -228,6 +230,7 @@ def generate ():
generate_single_pages(tags.models, 'tag.html', outputdir, lambda tag: { 'tag': tag })
generate_single_pages(filter(lambda e: not hasattr(e, 'programmeItems') or not e.programmeItems, events.models), 'event.html', outputdir, lambda event: { 'event': event })
generate_single_pages(filter(lambda e: hasattr(e, 'programmeItems') and e.programmeItems, events.models), 'event-with-programme-items.html', outputdir, lambda event: { 'event': event, 'groupedProgrammeItems': groupedProgrammeItems(event)})
generate_single_pages(events.models, 'snippets/home_event_detail.html', os.path.join(outputdir, 'api'), lambda event: { 'event': event })
generate_single_pages(notes.models, 'note.html', outputdir, lambda note: { 'note': note })
generate_single_pages(reflections.models, 'reflection.html', outputdir, lambda reflection: { 'reflection': reflection })
......
......@@ -11,20 +11,25 @@
{% block content %}
{% for event in events %}
<article id="{{ event.key }}" class="event presentation" data-image="{{ event.image }}">
<time datetime="2019-05-24" class="date-header">{{ event.date }}</time>
<h2 class="event-title">{{ event }}</h2>
<article id="{{ event.key }}" class="event presentation" data-image="{{ event.image }}" {% if forloop.first %} data-active{% endif %}>
<time datetime="2019-05-24" class="date-header"><a href="{{ event.link }}">{{ event.date }}</a></time>
<h2 class="event-title"><a href="{{ event.link }}">{{ event }}</a></h2>
{{ event.summary }}
{% if event.programmeItems %}
<p><a href="{{ event.link }}" class="read-further">See programme ({{ event.programmeItems.value|length }} events)</a></p>
{% endif %}
</article>
{% endfor %}
{% endblock %}
{% block sidebar_class %}home event-detail{% endblock %}
{% block sidebar %}
{% with events|first as event %}
{% include "snippets/home_event_detail.html" %}
{% endwith %}
{% endblock %}
{% block footerresources %}
<script src="{{ SITE_URL }}static/js/events.js"></script>
{% endblock %}
\ No newline at end of file
......@@ -8,32 +8,104 @@
<li>{% if produser.name %}{{ produser.name }}{% else %}{{ produser.produser }}{% endif %}</li>
</ul>
</nav>
<h1 class="produser">{% if produser.name %}{{ produser.name }}{% else %}{{ produser.produser }}{% endif %}</h1>
{% if produser.trajectories %}
{% for trajectory in produser.trajectories.targets %}
<article>
<h1 class="produser">{% if produser.name %}{{ produser.name }}{% else %}{{ produser.produser }}{% endif %}</h1>
{% if produser.trajectories %}
{% for trajectory in produser.trajectories.targets %}
<section class="long-text">
<h2>Trajectory</h2>
{{ trajectory.content }}
</section>
{% with trajectory.tags|without_inline_links as tags %}
{% if tags %}
{% include "snippets/tags.html" %}
{% endif %}
{% endwith %}
{% endfor %}
{% endif %}
{% if produser.content %}
<section class="long-text">
<h2>Trajectory</h2>
{{ trajectory.content }}
<h2>Biography</h2>
{{ produser.content }}
</section>
{% with trajectory.tags|without_inline_links as tags %}
{% if tags %}
{% include "snippets/tags.html" %}
{% endif %}
{% endwith %}
{% endfor %}
{% endif %}
{% if produser.content %}
<section class="long-text">
<h2>Biography</h2>
{{ produser.content }}
</section>
{% endif %}
{% if produser.events and produser.events.targets %}
<h2>Activities</h2>
{% endif %}
{% if produser.events and produser.events.targets %}
<h2>Activities</h2>
<ul class="simplelist">
{% for event in produser.events.targets %}
<li>
<section class="event-preview">
<a href="{{ event.link }}">{{ event }}</a>
{{ event.summary }}
</section>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.bibliography and produser.bibliography.targets %}
<h2>Bibliography</h2>
<ul class="simplelist">
{% for entry in produser.bibliography.targets %}
<li>{{ entry }}</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.video %}
<h2>Video</h2>
<ul class="simplelist">
{% for video in produser.video.targets %}
<li>
<video controls>
<source type="{{ video.type }}" src="{{ video.video }}">
</video>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.audio %}
<h2>Audio</h2>
<ul class="simplelist">
{% for audio in produser.audio.targets %}
<li>
<audio controls>
<source type="{{ audio.type }}" src="{{ audio.audio }}">
</audio>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.notes %}
<h2>Notes</h2>
<ul class="simplelist">
{% for note in produser.notes.targets %}
<li>
<a href="{{ note.link }}" class="note">{{ note }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.reflections %}
<h2>Reflections</h2>
<ul class="simplelist">
{% for reflection in produser.reflections.targets %}
<li>
<a href="{{ reflection.link }}" class="reflection">{{ reflection }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.events_participant %}
<h2>Activities (participant)</h2>
<ul class="simplelist">
{% for event in produser.events.targets %}
{% for event in produser.events_participant.targets %}
<li>
<section class="event-preview">
<a href="{{ event.link }}">{{ event }}</a>
......@@ -42,88 +114,17 @@
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.bibliography and produser.bibliography.targets %}
<h2>Bibliography</h2>
<ul class="simplelist">
{% for entry in produser.bibliography.targets %}
<li>{{ entry }}</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.video %}
<h2>Video</h2>
{% endif %}
{% if produser.notes_participant %}
<h2>Notes (participant)</h2>
<ul class="simplelist">
{% for video in produser.video.targets %}
{% for note in produser.notes_participant.targets %}
<li>
<video controls>
<source type="{{ video.type }}" src="{{ video.video }}">
</video>
<a href="{{ note.link }}" class="note">{{ note }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.audio %}
<h2>Audio</h2>
<ul class="simplelist">
{% for audio in produser.audio.targets %}
<li>
<audio controls>
<source type="{{ audio.type }}" src="{{ audio.audio }}">
</audio>
</li>
{% endfor %}
{% endfor %}
</ul>
{% endif %}
{% if produser.notes %}
<h2>Notes</h2>
<ul class="simplelist">
{% for note in produser.notes.targets %}
<li>
<a href="{{ note.link }}" class="note">{{ note }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.reflections %}
<h2>Reflections</h2>
<ul class="simplelist">
{% for reflection in produser.reflections.targets %}
<li>
<a href="{{ reflection.link }}" class="reflection">{{ reflection }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if produser.events_participant %}
<h2>Activities (participant)</h2>
<ul class="simplelist">
{% for event in produser.events_participant.targets %}
<li>
<section class="event-preview">
<a href="{{ event.link }}">{{ event }}</a>
{{ event.summary }}
</section>
</li>
{% endfor %}
</ul>
{% if produser.notes_participant %}
<h2>Notes (participant)</h2>
<ul class="simplelist">
{% for note in produser.notes_participant.targets %}
<li>
<a href="{{ note.link }}" class="note">{{ note }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
{% endif %}
</article>
{% endblock %}
\ No newline at end of file
{% load generator_utils %}
<article class="long-text">
<time datetime="2019-05-24" class="date-header"><a href="{{ event.link }}">{{ event.date }}</a></time>
<h2 class="event-title"><a href="{{ event.link }}">{{ event }}</a></h2>
{% if event.time.value %}
<p class="event-infos">{{ event.time }}</p>
{% endif %}
{% if event.location.value %}
<p class="event-infos">{{ event.location }}</p>
{% endif %}
{% for line in event.address.value %}
<p class="event-infos">{{ line }}</p>
{% endfor %}
<p class="event-infos">
{% for link, source, produser in event.produser|link_iterator %}
<a href="{{ produser.link }}">{{ produser }}</a>
{% endfor %}
</p>
{% if event.programmeItems %}
<p><a href="{{ event.link }}">See programme</a></p>
{% endif %}
{{ event.content }}
{% if event.notes %}
<h4>Related documents</h4>
<ul class="simplelist">
{% for note in event.notes.targets %}
<li><a href="{{ note.link }}" class="note">{{ note }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% if event.programmeItems %}
<p><a href="{{ event.link }}">See programme</a></p>
{% endif %}
</article>
\ No newline at end of file
<figure class="image">
<figure class="image content-image">
{% if image.title.value %}
<h4>{{ image.title }}</h4>
{% endif %}
......
(function () {
var entries = NodeList;
// var eventCloseButton = document.querySelector('#detail-container .close-button');
// eventCloseButton.addEventListener('click', function () {
// setHash(null);
// document.body.className = document.body.className.replace(/\s*event-active-through-click/, '');
// });
function setImageListeners () {
var images = document.querySelectorAll('aside.home.event-detail img');
for (var i=0; i < images.length; i++) {
images[i].addEventListener('click', function () {
if (this.parentElement && this.parentElement.tagName.toLowerCase() == 'figure') {
this.parentElement.classList.toggle('full');
} else {
this.classList.toggle('full');
}
})
}
};
function setHash(hash) {
if (hash) {
hash = '#' + hash;
}
else {
hash = '/';
}
if (history.pushState) {
history.pushState(null, null, hash);
}
else {
location.hash = hash;
}
}
function showImage(path) {
var holder = document.getElementById('prolog');
if (path && path != 'None') {
holder.style.backgroundImage = 'url(' + path + ')';
} else {
holder.style.removeProperty('background-image');
}
}
function activate(entry, entries) {
for (var e = 0; e < entries.length; e++) {
delete entries[e].dataset.active;
}
entry.dataset.active = 'true';
var container = document.querySelector('aside.home.event-detail');
fetch('/api/activities/' + entry.id + '.html', {
method: "GET"
}).then(function (response) {
if (response.ok) {
response.text().then(function (text) {
container.innerHTML = text;
setImageListeners();
});
}
});
}
function show(entry, entries) {
document.body.className += ' event-active-through-click';
activate(entry, entries);
}
function getEntryByHash(hash) {
var id = window.location.hash.substr(1);
var entry = document.getElementById(id);
if (entry && entry.className.indexOf('event') > -1) {
return entry;
}
return false
}
if (window.location.hash) {
var entry = getEntryByHash(window.location.hash);
if (entry) {
show(entry, entries);
}
}
window.onhashchange = function () {
var entry = getEntryByHash(window.location.hash);
if (entry) {
show(entry, entries);
} else {
document.body.className = document.body.className.replace(/\s*event-active-through-click/, '');
}
};
window.addEventListener('load', function () {
entries = document.querySelectorAll('.event-list .event');
for (var i = 0; i < entries.length; i++) {
(function (entry, entries) {
entry.addEventListener('click', function () {
setHash(entry.id);
show(entry, entries)
});
})(entries[i], entries);
}
});
})();
\ No newline at end of file
......@@ -510,7 +510,7 @@ ul.inlinelist > li:last-child:after {
display: none;
}
main img, main figure {
img.content-image, figure.content-image {
width: 33%;
float: left;
margin-right: .5em;
......@@ -520,29 +520,29 @@ main img, main figure {
clear: left;
}
main figure {
figure.content-image {
margin-left: 0;
}
main img.full, main figure.full img {
img.content-image.full, figure.content-image.full img {
cursor: zoom-out;
}
main img.full,
main audio,
main video,
main figure.full {
img.full,
audio,
video,
figure.full {
max-width: 47.5em;
width: 100%;
/* margin-top: .5em; */
/* margin-bottom: .5em; */
}
main figure.full figcaption {
figure.content-image.full figcaption {
width: 80%;
}
main figure img {
figure.content-image img {
width: 100%;
float: none;
margin-top: 0;
......@@ -821,37 +821,11 @@ section.audio {
margin-top: var(--line-height);
}
main > :last-child {
main > :last-child,
aside.event-detail > :last-child {
margin-bottom: calc(3 * var(--line-height));
}
main.event-list {
padding: 0;
}
.event-list .event {
border-bottom: 2px solid currentColor;
padding: calc(.5 * var(--line-height)) 1em var(--line-height) 1em;
cursor: pointer;
}
.event-list .event.active,
.event-list .event:hover {
background-color: var(--bleu-bille);
color: white;
}
.event:hover .read-further:after {
background: url(images/jump-arrow-white.svg) no-repeat;
}
.read-further:hover:after,
.event:hover .read-further:hover:after {
background: url(images/jump-arrow-orange.svg) no-repeat;
}
div.footnote hr {
display: none;
}
......@@ -888,4 +862,53 @@ sup:hover {
sup a {
text-decoration: none;
border-bottom: 0;
}
/**
Homepage
*/
main.event-list {
padding: 0;
}
.event-list .event {
border-bottom: 2px solid black; /* currentColor */
padding: calc(.5 * var(--line-height)) 1em var(--line-height) 1em;
cursor: pointer;
}
.event-list .event[data-active],
.event-list .event:hover {
background-color: var(--bleu-bille);
color: white;
}
.event[data-active] .read-further:after,
.event:hover .read-further:after {
background: url(images/jump-arrow-white.svg) no-repeat;
}
.read-further:hover:after,
.event:hover .read-further:hover:after,
.event[data-active] .read-further:hover:after{
background: url(images/jump-arrow-orange.svg) no-repeat;
}
aside.event-detail {
background: var(--bleu-bille);
color: white;
padding: var(--line-height) 1em;
}
.home h2 a,
.home time a {
border-bottom: none;
}
aside.event-detail .question {
-webkit-text-stroke: 1.1px white;
color: transparent;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment