mirror of
https://github.com/voc/streaming-website
synced 2024-11-10 06:34:17 +00:00
feat(schedule): finish first iteration of modal event details popover
This commit is contained in:
Andreas Hubel
parent
6a423a8090
commit
9977b7f20a
4 changed files with 82 additions and 80 deletions
|
|
@ -129,8 +129,8 @@ body .schedule {
|
|||
display: none;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid #d3d3d3;
|
||||
background-color: @schedule-pause-bg;
|
||||
border: 1px solid @schedule-pause;
|
||||
padding: 2px;
|
||||
|
||||
#modal-header {
|
||||
|
|
@ -138,12 +138,14 @@ body .schedule {
|
|||
cursor: move;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
background-color: #2196F3;
|
||||
color: #fff;
|
||||
background-color: @link-color;
|
||||
color: @schedule-pause;
|
||||
}
|
||||
|
||||
#modal-title {
|
||||
text-transform:none
|
||||
#modal-title, #modal-title * {
|
||||
text-transform: none;
|
||||
color: @schedule-pause;
|
||||
;
|
||||
}
|
||||
|
||||
#modal-content {
|
||||
|
|
@ -153,13 +155,13 @@ body .schedule {
|
|||
}
|
||||
|
||||
#modal-body {
|
||||
max-height: 100%;
|
||||
overflow-x:auto
|
||||
max-height: 400px;
|
||||
overflow-x: auto
|
||||
}
|
||||
|
||||
#modal-data {
|
||||
display: grid;
|
||||
grid: auto/1fr 3fr 1fr 2fr
|
||||
grid: min-content max-content;
|
||||
}
|
||||
|
||||
.modal-close * {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
@jumbo-line-height: 45px;
|
||||
|
||||
@schedule-now: @brand-danger;
|
||||
@schedule-now-bg: fade(lighten(@brand-danger, 5%), 60%);
|
||||
@schedule-now-bg: fade(lighten(@brand-danger, 5%), 50%);
|
||||
@schedule-border: lighten(@brand-primary, 50%);
|
||||
|
||||
@schedule-room: darken(@brand-primary, 15%);
|
||||
|
|
|
|||
|
|
@ -1,85 +1,89 @@
|
|||
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;
|
||||
// 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;
|
||||
// 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;
|
||||
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";
|
||||
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;
|
||||
// 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';
|
||||
function showEventDetails(e, data, force=false) {
|
||||
const acronym = 'jev22';
|
||||
if (!force && (data.type || previousTitle == data.title)) {
|
||||
return;
|
||||
}
|
||||
let popover = document.getElementById("schedule-event-detail-popover");
|
||||
if (e) {
|
||||
console.debug(e || window.event)
|
||||
popover.style.left = (e.pageX) + "px";
|
||||
popover.style.top = (e.pageY) + "px";
|
||||
}
|
||||
|
||||
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").innerHTML = data.title + (data.subtitle && `<br/><small>${data.subtitle}`);
|
||||
document.getElementById("modal-data").innerHTML = `
|
||||
<dt>Origin:</dt>
|
||||
<dd><a class="a" href="${data.url}" alt="Details" target="_blank">${data.url}</a></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>
|
||||
`;
|
||||
text = document.getElementById("modal-text");
|
||||
text.innerHTML = `
|
||||
<p>${data.abstract || ''}</p>
|
||||
<p>${(data.description || '').replace('\n\n', '<br/><br/>')}</p>
|
||||
`;
|
||||
|
||||
popover.style.display = 'block';
|
||||
if (!previousTitle) { dragElement(popover); }
|
||||
previousTitle = data.title;
|
||||
// fetch additional data
|
||||
if(!force) { fetchAdditionalData(data) };
|
||||
}
|
||||
|
||||
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;
|
||||
function fetchAdditionalData(e) {
|
||||
let q = { query: `{event(guid:"${e.guid}"){guid,title,subtitle,abstract,description,url}}`, operation: 'EventDetails', variables: JSON.stringify({guid: e.guid}) };
|
||||
return fetch("https://data.c3voc.de/graphql?query=" + q.query, {
|
||||
method: "GET",
|
||||
headers: { Accept: "application/json" },
|
||||
}).then(r => r.json().then(r => {
|
||||
let data = Object.assign(e, r.data?.event)
|
||||
showEventDetails(null, data, true);
|
||||
}));
|
||||
}
|
||||
|
|
@ -8,11 +8,7 @@
|
|||
<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>
|
||||
<p id="modal-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue