mirror of
https://github.com/voc/streaming-website
synced 2024-09-20 06:22:03 +00:00
feat(schedule): first draft for modal event details popover
This commit is contained in:
Andreas Hubel
parent
ebf75a4561
commit
6a423a8090
6 changed files with 174 additions and 1 deletions
|
|
@ -123,3 +123,66 @@ body .schedule {
|
|||
background-color: @schedule-selected-room;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#schedule-event-detail-popover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid #d3d3d3;
|
||||
padding: 2px;
|
||||
|
||||
#modal-header {
|
||||
padding: 10px;
|
||||
cursor: move;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
background-color: #2196F3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#modal-title {
|
||||
text-transform:none
|
||||
}
|
||||
|
||||
#modal-content {
|
||||
// max-width: 50vw;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#modal-body {
|
||||
max-height: 100%;
|
||||
overflow-x:auto
|
||||
}
|
||||
|
||||
#modal-data {
|
||||
display: grid;
|
||||
grid: auto/1fr 3fr 1fr 2fr
|
||||
}
|
||||
|
||||
.modal-close * {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #000;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
|
||||
opacity:.75
|
||||
}
|
||||
|
||||
button.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
padding: .75rem 1.25rem;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -146,10 +146,11 @@ $(function() {
|
|||
offset = $('.js-schedule-settings').data('scheduleoffset');
|
||||
|
||||
$schedule.on('mouseenter mouseleave touchstart touchend', function(e) {
|
||||
console.log(e);
|
||||
if(e.type == 'mouseleave' || e.type == 'touchend') {
|
||||
rewindTimeout = setTimeout(function() {
|
||||
scrollLock = false;
|
||||
}, 5000);
|
||||
}, rewindTime);
|
||||
} else {
|
||||
clearTimeout(rewindTimeout);
|
||||
scrollLock = true;
|
||||
|
|
|
|||
85
assets/js/schedule.js
Normal file
85
assets/js/schedule.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
function dragElement(elmnt) {
|
||||
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
||||
if (document.getElementById("popover-header")) {
|
||||
// if present, the header is where you move the DIV from:
|
||||
document.getElementById("popover-header").onmousedown = dragMouseDown;
|
||||
} else {
|
||||
// otherwise, move the DIV from anywhere inside the DIV:
|
||||
elmnt.onmousedown = dragMouseDown;
|
||||
}
|
||||
|
||||
function dragMouseDown(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
// get the mouse cursor position at startup:
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
document.onmouseup = closeDragElement;
|
||||
// call a function whenever the cursor moves:
|
||||
document.onmousemove = elementDrag;
|
||||
}
|
||||
|
||||
function elementDrag(e, data) {
|
||||
console.log(data);
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
// calculate the new cursor position:
|
||||
pos1 = pos3 - e.clientX;
|
||||
pos2 = pos4 - e.clientY;
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
// set the element's new position:
|
||||
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
|
||||
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
|
||||
}
|
||||
|
||||
function closeDragElement() {
|
||||
// stop moving when mouse button is released:
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
}
|
||||
|
||||
var previousTitle = '';
|
||||
function showEventDetails(e, data) {
|
||||
if (data.type || previousTitle == data.title) {
|
||||
return;
|
||||
}
|
||||
const acronym = 'jev22';
|
||||
|
||||
let popover = document.getElementById("schedule-event-detail-popover");
|
||||
console.log(data, e);
|
||||
// set the element's new position:
|
||||
popover.style.left = (e.pageX) + "px";
|
||||
popover.style.top = (e.pageY) + "px";
|
||||
|
||||
document.getElementById("modal-title").textContent = data.title;
|
||||
document.getElementById("modal-data").innerHTML = `
|
||||
<dt>Start:</dt>
|
||||
<dd><time datetime="27. Dezember 2021 11:30">27. Dezember 2021 11:30</time></dd>
|
||||
|
||||
<dt>Duration:</dt>
|
||||
<dd><time datetime="00:45:00">00:45</time></dd>
|
||||
|
||||
<dt>Room:</dt>
|
||||
<dd>c-base</dd>
|
||||
|
||||
<dt>Language:</dt>
|
||||
<dd>de</dd>
|
||||
|
||||
<dt>Speakers:</dt>
|
||||
<dd>Thomas Fricke</dd>
|
||||
|
||||
<dt>Video:</dt>
|
||||
<dd>
|
||||
<a class="a" href="/${acronym}/relive/${data.guid}" title="relive" target="_blank">relive</a>
|
||||
<a class="a" href="https://media.ccc.de/v/${data.guid}" title="recording" target="_blank">recording</a>
|
||||
</dd>
|
||||
|
||||
<dt>Origin:</dt>
|
||||
<dd width="100%"><a class="a" href="${data.url}" alt="Details" target="_blank">${data.url}</a></dd>
|
||||
`;
|
||||
popover.style.display = 'block';
|
||||
if (!previousTitle) { dragElement(popover); }
|
||||
previousTitle = data.title;
|
||||
}
|
||||
|
|
@ -238,10 +238,13 @@ class Schedule
|
|||
|
||||
// normal talk
|
||||
$talk = $this->makeEvent($start, $end);
|
||||
$talk['guid'] = (string)$event['guid'];
|
||||
$talk['title'] = (string)$event->title;
|
||||
$talk['speaker'] = implode(', ', $personnames);
|
||||
$talk['room_known'] = $this->isRoomMapped($roomName);
|
||||
$talk['optout'] = $this->isOptout($event);
|
||||
$talk['url'] = (string)$event->url;
|
||||
|
||||
$program[$roomName][] = $talk;
|
||||
|
||||
$laststart = $start;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,22 @@
|
|||
<div class="schedule scroll-container">
|
||||
<div id="schedule-event-detail-popover">
|
||||
<div id="modal-content">
|
||||
<div id="modal-header">
|
||||
<h3 id="modal-title"></h3>
|
||||
<button type="button" class="close modal-close" aria-label="Close" onclick="document.getElementById('schedule-event-detail-popover').style.display = 'none';"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div id="modal-body">
|
||||
<dl id="modal-data"></dl>
|
||||
<hr />
|
||||
<p>In den letzten Wochen der scheidenden Bundesregierung erhielt der Sprecher eine Mail von der Open Knowledge Foundation https://okfn.de/en/ über seine Meinung zur Open Source Sicherheit. Daraufhin erstellte er er eine Studie zum Thema Sicherheit von Open Source Projekten.
|
||||
Vier Projekte dienten als Beispiele und deren Hauptakteur:innen wurden befragt. Darunter "the random programmer from Nebraska" https://www.explainxkcd.com/wiki/index.php/2347:_Dependency Ariadne Connill https://twitter.com/ariadneconill/status/1445632043514155014
|
||||
Die Studie hat Eingang gefunden in den Vorschlag für einen öffentlichen Fonds zur finanziellen Förderung von Open Source Projekte https://sovereigntechfund.de/
|
||||
Die Finanzierung kann, vorbehaltlich der Annahme durch die nächste Bundesregierung, mit 10 Mio € im Jahr eine signifikante Absicherung wichtiger Open Source Projekte sein und ist zumindest in der Größenordnung des Open Tech Fund https://www.opentech.fund
|
||||
Der Vortrag gibt Einblicke in die Struktur von Open Source Projekten, ihre Bedeutung für die Sicherheit und beleuchtet wo Unterstützung dringend gebraucht wird.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-element">
|
||||
<? $totalWidth = round($schedule->getDurationSum() / $schedule->getScale()) ?>
|
||||
<div class="now" style="width: <?= h($totalWidth) ?>px">
|
||||
|
|
@ -28,6 +46,7 @@
|
|||
href="<?=h($scheduleRoom->createTabObject()->getLink($roomname))?>"
|
||||
<? endif ?>
|
||||
title="Switch to <?=h($scheduleRoom->getDisplay())?>"
|
||||
onmouseover="showEventDetails(event, {title:'<?=@$event['title']?>', guid:'<?=@$event['guid']?>', url:'<?=@$event['url']?>', type:'<?=@$event['special']?>'})"
|
||||
>
|
||||
<? else: ?>
|
||||
<div class="inner">
|
||||
|
|
|
|||
|
|
@ -74,6 +74,8 @@
|
|||
<script type="text/javascript" src="<?=h($assets)?>voc-player/clappr-thumbnails-plugin.js"></script>
|
||||
<script type="text/javascript" src="<?=h($assets)?>voc-player/clappr-playback-rate-plugin.js"></script>
|
||||
<script type="text/javascript" src="<?=h($assets)?>js/lustiges-script.js"></script>
|
||||
<script type="text/javascript" src="<?=h($assets)?>js/schedule.js"></script>
|
||||
|
||||
<? endif ?>
|
||||
|
||||
<? if(isset($subtitles) && $subtitles->isEnabled()): ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue