Commit 18bed83d authored by Mario Botsch's avatar Mario Botsch Committed by Henrik Tramberend

Updates to Henrik's engine & scrollbar in whiteboard

- For details, see merge rquest !191
parent 89249e12
......@@ -2,7 +2,7 @@ export { contactEngine };
// TODO Make into a proper Reveal 4 plugin
// Start with a 0.5 s retry interval. Back off exponentally.
// Start with a 0.5 s retry interval. Back off exponentially.
var timeout = 500;
let engine = {
......@@ -55,19 +55,6 @@ function prepareEngine() {
buildInterface();
});
}
// Build the menu, once Reval and the menu are ready.
if (
Reveal.isReady() &&
Reveal.hasPlugin("menu") &&
Reveal.getPlugin("menu").isInit()
) {
buildMenu();
} else {
Reveal.addEventListener("menu-ready", _ => {
buildMenu();
});
}
})
.catch(e => {
// Nothing goes without a token
......@@ -237,12 +224,56 @@ function buildInterface() {
};
let renderSubmit = () => {
updateComments();
updateCommentsAndMenu();
text.value = "";
text.commentId = null;
text.answered = null;
};
// given the list of questions, update question counter of menu items
let updateMenuItems = (list) => {
document.querySelectorAll('ul.slide-menu-items > li.slide-menu-item').forEach( (li) => {
li.removeAttribute('data-questions');
});
for (let comment of list) {
// get slide info
const slideID = comment.slide;
const slide = document.getElementById(slideID);
if (slide) {
const indices = Reveal.getIndices(slide);
// build query string, get menu item
let query = 'ul.slide-menu-items > li.slide-menu-item';
if (indices.h) query += '[data-slide-h=\"' + indices.h + '\"]';
if (indices.v) query += '[data-slide-v=\"' + indices.v + '\"]';
let li = document.querySelector(query);
// update question counter
if (li) {
li.setAttribute('data-questions', li.hasAttribute('data-questions') ? parseInt(li.getAttribute('data-questions')) + 1 : 1);
}
}
else {
// slide not found. should not happen. user probably used wrong (duplicate) deckID.
console.warn("Could not find slide " + slideID);
}
}
};
// query list of questions, then update menu items
let updateMenu = () => {
engine.api
.getComments(engine.deckId)
.then(updateMenuItems)
.catch(console.log);
};
let updateCommentsAndMenu = () => {
updateComments();
updateMenu();
};
let canDelete = comment => {
return engine.token.admin !== null || comment.author === user.value;
};
......@@ -308,7 +339,7 @@ function buildInterface() {
del.addEventListener("click", _ => {
engine.api
.deleteComment(comment.id, engine.token.admin || user.value)
.then(updateComments);
.then(updateCommentsAndMenu);
});
// Edit button
let mod = document.createElement("button");
......@@ -434,42 +465,8 @@ function buildInterface() {
}
});
Reveal.addEventListener("slidechanged", _ => {
updateComments();
});
Reveal.addEventListener("slidechanged", updateCommentsAndMenu);
initUser();
updateComments();
}
function buildMenu() {
let updateMenu = list => {
for (let comment of list) {
// get slide info
const slideID = comment.slide;
const slide = document.getElementById(slideID);
const indices = Reveal.getIndices(slide);
// build query string, get menu item
let query = "ul.slide-menu-items > li.slide-menu-item";
if (indices.h) query += '[data-slide-h="' + indices.h + '"]';
if (indices.v) query += '[data-slide-v="' + indices.v + '"]';
let li = document.querySelector(query);
// update question counter
if (li) {
li.setAttribute(
"data-questions",
li.hasAttribute("data-questions")
? parseInt(li.getAttribute("data-questions")) + 1
: 1
);
}
}
};
engine.api
.getComments(engine.deckId)
.then(updateMenu)
.catch(console.log);
updateCommentsAndMenu();
}
......@@ -50,7 +50,7 @@ var RevealPrint = (function(){
if (slideHeight > configHeight)
{
console.error("slide " + slideNumber() + " is " + (slideHeight-configHeight) + "px too high");
console.warn("slide " + slideNumber() + " is " + (slideHeight-configHeight) + "px too high");
slide.style.border = "1px dashed red";
}
else
......
......@@ -417,7 +417,7 @@ var RevealQuiz = (function(){
break;
default:
console.log("should not happen");
console.error("this should not happen");
hideChart();
hideVotes();
ballotState = "not_init";
......
......@@ -72,6 +72,12 @@
}
/* animate scroll down */
.reveal .slides.animateScroll {
scroll-behavior: smooth;
}
/* style for SVG whiteboard pages */
.reveal svg.whiteboard {
border: none;
......@@ -129,23 +135,23 @@
display: flex;
flex-direction: column-reverse;
}
#whiteboardButtons.active {
#whiteboardButtons.whiteboardActive {
border: 1px solid #eeeeee;
background: var(--whiteboard-background-color);
}
/* toggle whiteboard buttons with .active on container */
/* toggle whiteboard buttons with .whiteboardActive on container */
#whiteboardButtons>button {
display: none;
}
#whiteboardButtons.active>button {
#whiteboardButtons.whiteboardActive>button {
display: inline-block;
}
/* button tooltips, specified by data-tooltip
* use :after, since :before is used by fontawesome */
#whiteboardButtons.active>button[data-tooltip]::after {
#whiteboardButtons.whiteboardActive>button[data-tooltip]::after {
content: attr(data-tooltip);
padding: 0.5em;
border-radius: 0.25em;
......@@ -163,12 +169,12 @@
pointer-events: none;
}
/* activate tooltip after 1s delay */
#whiteboardButtons.active>button[data-tooltip]:hover::after {
#whiteboardButtons.whiteboardActive>button[data-tooltip]:hover::after {
opacity: 1;
transition: opacity 0s linear 1s;
}
/* toggle main whiteboard button with .active on container */
/* toggle main whiteboard button with .whiteboardActive on container */
#whiteboardButtons>#whiteboardButton {
display: inline-block;
opacity: 0.5;
......@@ -178,7 +184,7 @@
color: var(--whiteboard-active-color) !important;
opacity: 1.0;
}
#whiteboardButtons.active>#whiteboardButton {
#whiteboardButtons.whiteboardActive>#whiteboardButton {
display: inline-block;
color: var(--whiteboard-active-color);
opacity: 1.0;
......@@ -244,3 +250,25 @@
border: 0;
}
/* MacOS only shows scrollbars when they are used.
This prevents dragging them with the Wacom pen (w/o using the mouse).
The following setting show the scrollbar when the whiteboard is active.
Only works on WebKit browswers (Chrome, Safari), not on Firefox. */
.reveal .slides.whiteboardActive::-webkit-scrollbar {
width:9px;
}
.reveal .slides.whiteboardActive::-webkit-scrollbar-track {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.1);
}
.reveal .slides.whiteboardActive::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.2);
}
.reveal .slides.whiteboardActive::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);
}
......@@ -495,8 +495,11 @@ let RevealWhiteboard = (function(){
if (!whiteboardActive)
{
// hide scrollbar
slides.classList.remove('whiteboardActive');
// hide buttons
buttons.classList.remove('active');
buttons.classList.remove('whiteboardActive');
buttonWhiteboard.style.color = inactiveColor;
hideColorPicker();
......@@ -514,8 +517,11 @@ let RevealWhiteboard = (function(){
{
if (userShouldBeWarned && !userHasBeenWarned) warnUser();
// show scrollbar
slides.classList.add('whiteboardActive');
// show buttons
buttons.classList.add('active');
buttons.classList.add('whiteboardActive');
buttonWhiteboard.style.color = activeColor;
// activate SVG
......@@ -544,6 +550,8 @@ let RevealWhiteboard = (function(){
if (!svg) return;
let boardHeight = svg.clientHeight;
setWhiteboardHeight(boardHeight + pageHeight);
slides.classList.add('animateScroll');
slides.scrollTop = boardHeight;
}
......@@ -825,7 +833,7 @@ let RevealWhiteboard = (function(){
reader.readAsText(filename);
}
else {
console.log("Your browser does not support the File API");
console.error("Your browser does not support the File API");
}
}
......@@ -949,21 +957,20 @@ let RevealWhiteboard = (function(){
if (window.saveAnnotation) {
if (window.saveAnnotation(annotationData(), annotationURL()))
{
console.log("whiteboard: save success");
console.log("whiteboard annotations saved to local file");
needToSave(false);
return;
}
}
console.log("whiteboard: save annotations to decker");
let xhr = new XMLHttpRequest();
xhr.open('put', annotationURL(), true);
xhr.onloadend = function() {
if (xhr.status == 200) {
console.log("whiteboard: save success");
console.log("whiteboard annotations saved to deck directory");
needToSave(false);
} else {
console.log("whiteboard: could not save to decker, download instead");
console.warn("whiteboard annotation could not be save to decker, trying to download the file instead.");
downloadAnnotations();
}
};
......@@ -982,9 +989,8 @@ let RevealWhiteboard = (function(){
try {
a.download = annotationFilename();
a.href = window.URL.createObjectURL( annotationBlob() );
} catch( error ) {
console.error("whiteboard download error: " + error);
console.error("whiteboard annotations could not be downloaded: " + error);
}
a.click();
document.body.removeChild(a);
......@@ -1321,7 +1327,7 @@ let RevealWhiteboard = (function(){
}
else
{
console.err("whiteboard requires PointerEvents");
console.error("whiteboard requires support for PointerEvents");
}
......@@ -1409,6 +1415,7 @@ let RevealWhiteboard = (function(){
adjustWhiteboardHeight();
// setup slides container
slides.classList.remove('animateScroll')
slides.scrollTop = 0;
if (svg.clientHeight > slides.clientHeight)
slides.classList.add('needScrollbar');
......
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