_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add website focus overlay

Browse Source
This commit is contained in:
_Bastler
2021-05-16 18:48:48 +02:00
parent 6ebec9ce68
commit 3e66a541e3
5 changed files with 42 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/WebRtc/CoWebsiteManager.ts
+26 -1
View File
@@ -15,6 +15,9 @@ const cowebsiteCloseButtonId = 'cowebsite-close';
const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
const cowebsiteFocusButtonId = 'cowebsite-focus';
const cowebsiteFocusInactiveImageId = 'cowebsite-focus-inactive';
const cowebsiteFocusActiveImageId = 'cowebsite-focus-active';
const animationTime = 500; //time used by the css transitions, in ms.
class CoWebsiteManager {
@@ -70,6 +73,9 @@ class CoWebsiteManager {
HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => {
this.fullscreen();
});
HtmlUtils.getElementByIdOrFail(cowebsiteFocusButtonId).addEventListener('click', () => {
this.toggleFocus();
});
}
private initResizeListeners() {
@@ -90,6 +96,8 @@ class CoWebsiteManager {
document.removeEventListener('mousemove', movecallback);
this.getIframeDom().style.display = 'block';
this.resizing = false;
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
});
}
@@ -105,13 +113,26 @@ class CoWebsiteManager {
this.opened = iframeStates.closed;
this.resetStyle();
}
private toggleFocus(): void {
if (this.cowebsiteDiv.classList.contains('focus')) {
this.cowebsiteDiv.classList.remove('focus');
HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'none';
} else {
this.cowebsiteDiv.classList.add('focus');
HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'none';
HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'inline';
}
}
private load(): void {
this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add('loading');
this.opened = iframeStates.loading;
}
private open(): void {
this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.remove('loading', 'hidden', 'focus'); //edit the css class to trigger the transition
this.opened = iframeStates.opened;
this.resetStyle();
}
@@ -119,6 +140,10 @@ class CoWebsiteManager {
public resetStyle() {
this.cowebsiteDiv.style.width = '';
this.cowebsiteDiv.style.height = '';
HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'none';
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
}
private getIframeDom(): HTMLIFrameElement {