mirror of
https://github.com/voc/streaming-website
synced 2024-11-10 06:34:17 +00:00
feat(schedule): cleanup
This commit is contained in:
Andreas Hubel
parent
ae3707c173
commit
393c05cdbb
4 changed files with 80 additions and 58 deletions
|
|
@ -1,4 +1,6 @@
|
|||
body .schedule {
|
||||
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
|
||||
|
||||
&.scroll-container {
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
|
|
|
|||
|
|
@ -146,10 +146,10 @@ $(function() {
|
|||
offset = $('.js-schedule-settings').data('scheduleoffset');
|
||||
|
||||
$schedule.on('mouseenter mouseleave touchstart touchend', function(e) {
|
||||
console.log(e);
|
||||
// console.log(e);
|
||||
if(e.type == 'mouseleave' || e.type == 'touchend') {
|
||||
rewindTimeout = setTimeout(function() {
|
||||
scrollLock = false;
|
||||
scrollLock = false || window.scrollLock;
|
||||
}, rewindTime);
|
||||
} else {
|
||||
clearTimeout(rewindTimeout);
|
||||
|
|
|
|||
|
|
@ -1,59 +1,68 @@
|
|||
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;
|
||||
}
|
||||
var pos1 = 0,
|
||||
pos2 = 0,
|
||||
pos3 = 0,
|
||||
pos4 = 0,
|
||||
header = document.getElementById("popover-header");
|
||||
if (header) {
|
||||
// if present, the header is where you move the DIV from:
|
||||
header.onmousedown = dragMouseDown;
|
||||
// TODO: header.ontouchmove = 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 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 elementDrag(e, 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;
|
||||
}
|
||||
function closeDragElement() {
|
||||
// stop moving when mouse button is released:
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
}
|
||||
|
||||
var previousTitle = '';
|
||||
function showEventDetails(e, data, force=false) {
|
||||
const acronym = 'jev22';
|
||||
function closeEventDetails(e) {
|
||||
document.getElementById('schedule-event-detail-popover').style.display = 'none';
|
||||
window.scrollLock = false;
|
||||
}
|
||||
|
||||
var previousTitle = "";
|
||||
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";
|
||||
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-title").innerHTML =
|
||||
data.title + ('subtitle' in data && `<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>
|
||||
|
|
@ -66,24 +75,35 @@ function showEventDetails(e, data, force=false) {
|
|||
`;
|
||||
text = document.getElementById("modal-text");
|
||||
text.innerHTML = `
|
||||
<p>${data.abstract || ''}</p>
|
||||
<p>${(data.description || '').replace('\n\n', '<br/><br/>')}</p>
|
||||
<p>${data.abstract || ""}</p>
|
||||
<p>${(data.description || "").replace("\n\n", "<br/><br/>")}</p>
|
||||
`;
|
||||
|
||||
popover.style.display = 'block';
|
||||
if (!previousTitle) { dragElement(popover); }
|
||||
|
||||
popover.style.display = "block";
|
||||
if (!previousTitle) {
|
||||
dragElement(popover);
|
||||
}
|
||||
window.scrollLock = true;
|
||||
previousTitle = data.title;
|
||||
// fetch additional data
|
||||
if(!force) { fetchAdditionalData(data) };
|
||||
if (!force) {
|
||||
fetchAdditionalData(data);
|
||||
}
|
||||
}
|
||||
|
||||
function fetchAdditionalData(e) {
|
||||
let q = { query: `{event(guid:"${e.guid}"){guid,title,subtitle,abstract,description,url}}`, operation: 'EventDetails', variables: JSON.stringify({guid: e.guid}) };
|
||||
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);
|
||||
}));
|
||||
}
|
||||
}).then((r) =>
|
||||
r.json().then((r) => {
|
||||
let data = Object.assign(e, r.data?.event);
|
||||
showEventDetails(null, data, true);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<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>
|
||||
<button type="button" class="close modal-close" aria-label="Close" onclick="closeEventDetails()"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div id="modal-body">
|
||||
<dl id="modal-data"></dl>
|
||||
|
|
|
|||
Loading…
Reference in a new issue