Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

cinera_player_pre.js: Improve sizing and scrolling 

This commit fixes the sizing of the player's menus to not protrude below
the player.

It also adds scrolling of the references menu to the first menu item
cited in the newly-current timestamp, and fixes scrolling of the markers
container when switching to a timestamp after the user has scrolled the
container away from its default position.
This commit is contained in:
Matt Mascarenhas 2023-02-20 20:29:16 +00:00
parent 44a5008aa7
commit c9bf96c7aa
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cinera/cinera.c
View File

@ -23,7 +23,7 @@ typedef struct
version CINERA_APP_VERSION = {
.Major = 0,
.Minor = 10,
.Patch = 23
.Patch = 24
};
#define __USE_XOPEN2K8 // NOTE(matt): O_NOFOLLOW

48
cinera/cinera_player_pre.js
View File

@ -69,6 +69,8 @@ function Player(htmlContainer, refsCallback) {
this.currentTime = -1;
this.scrollTo = -1;
this.scrollPosition = 0;
this.scrollRefsTo = -1;
this.scrollRefsPosition = 0;
this.nextFrame = null;
this.looping = false;
@ -577,7 +579,7 @@ Player.prototype.updateSize = function() {
this.markersContainer.style.height = height + "px";
var VacantPixelsBelowMenus = 4;
var MenuMaxHeight = cinera.offsetHeight - titleBar.offsetHeight - VacantPixelsBelowMenus;
var MenuMaxHeight = height - VacantPixelsBelowMenus;
MenuContainerRule.style.maxHeight = MenuMaxHeight + "px";
}
else
@ -729,8 +731,11 @@ Player.prototype.updateProgress = function() {
localStorage.setItem(lastTimestampStorageItem, this.currentMarker.timestamp);
}
this.currentMarker.el.classList.add("current");
this.scrollTo = this.currentMarker.el.offsetTop + this.currentMarker.el.offsetHeight/2.0;
this.scrollPosition = this.markersContainer.scrollTop;
if(this.scrollTo == -1)
{
this.scrollTo = this.currentMarker.el.offsetTop + this.currentMarker.el.offsetHeight/2.0;
this.scrollPosition = this.markersContainer.scrollTop;
}
this.refsCallback(this.currentMarker.ref, this.currentMarker.el, this);
} else if (prevMarker && prevMarker.ref) {
this.refsCallback(null);
@ -776,6 +781,18 @@ Player.prototype.doFrame = function() {
}
}
if(referencesMenu && this.scrollRefsTo >= 0) {
var targetRefsPosition = this.scrollRefsTo;
targetRefsPosition = Math.max(0, Math.min(targetRefsPosition, referencesMenu.scrollHeight - referencesMenu.offsetHeight));
this.scrollRefsPosition += (targetRefsPosition - this.scrollRefsPosition) * 0.1;
if (Math.abs(this.scrollRefsPosition - targetRefsPosition) < 1.0) {
referencesMenu.scrollTop = targetRefsPosition;
this.scrollRefsTo = -1;
} else {
referencesMenu.scrollTop = this.scrollRefsPosition;
}
}
this.nextFrame = requestAnimationFrame(this.doFrame.bind(this));
updateLink();
};
@ -2093,28 +2110,43 @@ function onRefChanged(ref, element, player) {
{
for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
{
var Menu = sourceMenus[MenuIndex];
var SetMenu = 0;
if (ref !== undefined && ref !== null) {
var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
var refElements = Menu.querySelectorAll(".refs .ref");
var refs = ref.split(",");
for (var i = 0; i < refElements.length; ++i) {
if (refs.includes(refElements[i].getAttribute("data-id"))) {
refElements[i].classList.add("current");
if(!SetMenu)
{
if(!referencesMenu.classList.contains("visible"))
{
referencesMenu.classList.add("visible");
referencesMenu.scrollTop = refElements[i].offsetTop;
referencesMenu.classList.remove("visible");
}
else
{
player.scrollRefsTo = refElements[i].offsetTop;
player.scrollRefsPosition = referencesMenu.scrollTop;
}
}
SetMenu = 1;
} else {
refElements[i].classList.remove("current");
}
}
if(SetMenu) {
sourceMenus[MenuIndex].classList.add("current");
Menu.classList.add("current");
} else {
sourceMenus[MenuIndex].classList.remove("current");
Menu.classList.remove("current");
}
} else {
sourceMenus[MenuIndex].classList.remove("current");
var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
Menu.classList.remove("current");
var refs = Menu.querySelectorAll(".refs .ref");
for (var i = 0; i < refs.length; ++i) {
refs[i].classList.remove("current");
}