_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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/dist/index.tmpl.html vendored
View File

@ -78,6 +78,10 @@
<button class="top-right-btn" id="cowebsite-close" alt="close the iframe"> <button class="top-right-btn" id="cowebsite-close" alt="close the iframe">
<img src="resources/logos/close.svg"/> <img src="resources/logos/close.svg"/>
</button> </button>
<button class="top-right-btn" id="cowebsite-focus" alt="focus the iframe">
<img id="cowebsite-focus-inactive" src="resources/logos/cinema.svg"/>
<img id="cowebsite-focus-active" style="display: none;" src="resources/logos/cinema-close.svg"/>
</button>
</div> </div>
<div id="audioplayerctrl" class="hidden"> <div id="audioplayerctrl" class="hidden">

3
front/dist/resources/style/cowebsite-mobile.scss vendored
View File

@ -43,6 +43,9 @@
&#cowebsite-fullscreen { &#cowebsite-fullscreen {
left: 0; left: 0;
} }
&#cowebsite-focus {
left: 25px;
}
} }
} }
} }

8
front/dist/resources/style/cowebsite.scss vendored
View File

@ -4,12 +4,15 @@
position: fixed; position: fixed;
transition: transform 0.5s; transition: transform 0.5s;
background-color: white; background-color: white;
z-index: 999;
&.loading { &.loading {
background-color: gray; background-color: gray;
} }
&.focus {
z-index: 999;
}
main { main {
iframe { iframe {
width: 100%; width: 100%;
@ -85,6 +88,9 @@
&#cowebsite-fullscreen { &#cowebsite-fullscreen {
top: 25px; top: 25px;
} }
&#cowebsite-focus {
top: 50px;
}
} }
} }
} }

4
front/dist/resources/style/style.css vendored
View File

@ -166,8 +166,8 @@ video#myCamVideo {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
width: 450px; width: 300px;
height: 150px; height: 50px;
} }

27
front/src/WebRtc/CoWebsiteManager.ts
View File

@ -15,6 +15,9 @@ const cowebsiteCloseButtonId = 'cowebsite-close';
const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen'; const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open'; const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close'; 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. const animationTime = 500; //time used by the css transitions, in ms.
class CoWebsiteManager { class CoWebsiteManager {
@ -70,6 +73,9 @@ class CoWebsiteManager {
HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => { HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => {
this.fullscreen(); this.fullscreen();
}); });
HtmlUtils.getElementByIdOrFail(cowebsiteFocusButtonId).addEventListener('click', () => {
this.toggleFocus();
});
} }
private initResizeListeners() { private initResizeListeners() {
@ -90,6 +96,8 @@ class CoWebsiteManager {
document.removeEventListener('mousemove', movecallback); document.removeEventListener('mousemove', movecallback);
this.getIframeDom().style.display = 'block'; this.getIframeDom().style.display = 'block';
this.resizing = false; 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.opened = iframeStates.closed;
this.resetStyle(); 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 { private load(): void {
this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add('loading'); this.cowebsiteDiv.classList.add('loading');
this.opened = iframeStates.loading; this.opened = iframeStates.loading;
} }
private open(): void { 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.opened = iframeStates.opened;
this.resetStyle(); this.resetStyle();
} }
@ -119,6 +140,10 @@ class CoWebsiteManager {
public resetStyle() { public resetStyle() {
this.cowebsiteDiv.style.width = ''; this.cowebsiteDiv.style.width = '';
this.cowebsiteDiv.style.height = ''; 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 { private getIframeDom(): HTMLIFrameElement {