added fullscreen
This commit is contained in:
parent
272be3eba0
commit
f9c8b4131c
front
6
front/dist/index.tmpl.html
vendored
6
front/dist/index.tmpl.html
vendored
@ -71,7 +71,11 @@
|
|||||||
</aside>
|
</aside>
|
||||||
<main id="cowebsite-main">
|
<main id="cowebsite-main">
|
||||||
</main>
|
</main>
|
||||||
<button class="close-btn" id="cowebsite-close">
|
<button class="top-right-btn" id="cowebsite-fullscreen">
|
||||||
|
<img id="cowebsite-fullscreen-open" src="resources/logos/monitor.svg"/>
|
||||||
|
<img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/monitor-close.svg"/>
|
||||||
|
</button>
|
||||||
|
<button class="top-right-btn" id="cowebsite-close">
|
||||||
<img src="resources/logos/close.svg"/>
|
<img src="resources/logos/close.svg"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
17
front/dist/resources/style/style.css
vendored
17
front/dist/resources/style/style.css
vendored
@ -358,7 +358,7 @@ body {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cowebsite .close-btn{
|
#cowebsite .top-right-btn{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: -100px;
|
right: -100px;
|
||||||
@ -368,7 +368,7 @@ body {
|
|||||||
animation: right .2s ease;
|
animation: right .2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cowebsite .close-btn img {
|
#cowebsite .top-right-btn img {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
background-color: rgba(0,0.0,0,0.3);
|
background-color: rgba(0,0.0,0,0.3);
|
||||||
@ -376,13 +376,22 @@ body {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cowebsite .close-btn img:hover {
|
#cowebsite .top-right-btn img:hover {
|
||||||
background-color: rgba(0,0,0,0.4);
|
background-color: rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
#cowebsite:hover .close-btn{
|
#cowebsite #cowebsite-close {
|
||||||
|
right: -140px;
|
||||||
|
}
|
||||||
|
#cowebsite:hover #cowebsite-close{
|
||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
|
#cowebsite #cowebsite-fullscreen {
|
||||||
|
right: -100px;
|
||||||
|
}
|
||||||
|
#cowebsite:hover #cowebsite-fullscreen{
|
||||||
|
right: 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (max-aspect-ratio: 1/1) {
|
@media (max-aspect-ratio: 1/1) {
|
||||||
.game-overlay {
|
.game-overlay {
|
||||||
|
@ -5,12 +5,16 @@ enum iframeStates {
|
|||||||
closed = 1,
|
closed = 1,
|
||||||
loading, // loading an iframe can be slow, so we show some placeholder until it is ready
|
loading, // loading an iframe can be slow, so we show some placeholder until it is ready
|
||||||
opened,
|
opened,
|
||||||
|
fullscreen,
|
||||||
}
|
}
|
||||||
|
|
||||||
const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
|
const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
|
||||||
const cowebsiteMainDomId = 'cowebsite-main'; // the id of the parent div of the iframe.
|
const cowebsiteMainDomId = 'cowebsite-main'; // the id of the parent div of the iframe.
|
||||||
const cowebsiteAsideDomId = 'cowebsite-aside'; // the id of the parent div of the iframe.
|
const cowebsiteAsideDomId = 'cowebsite-aside'; // the id of the parent div of the iframe.
|
||||||
const cowebsiteCloseButtonId = 'cowebsite-close';
|
const cowebsiteCloseButtonId = 'cowebsite-close';
|
||||||
|
const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
|
||||||
|
const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
|
||||||
|
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
|
||||||
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 {
|
||||||
@ -26,7 +30,6 @@ class CoWebsiteManager {
|
|||||||
private currentOperationPromise: Promise<void> = Promise.resolve();
|
private currentOperationPromise: Promise<void> = Promise.resolve();
|
||||||
private cowebsiteDiv: HTMLDivElement;
|
private cowebsiteDiv: HTMLDivElement;
|
||||||
private resizing: boolean = false;
|
private resizing: boolean = false;
|
||||||
private currentWidth: number = 0;
|
|
||||||
private cowebsiteMainDom: HTMLDivElement;
|
private cowebsiteMainDom: HTMLDivElement;
|
||||||
private cowebsiteAsideDom: HTMLDivElement;
|
private cowebsiteAsideDom: HTMLDivElement;
|
||||||
|
|
||||||
@ -48,6 +51,9 @@ class CoWebsiteManager {
|
|||||||
HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId).addEventListener('click', () => {
|
HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId).addEventListener('click', () => {
|
||||||
this.closeCoWebsite();
|
this.closeCoWebsite();
|
||||||
});
|
});
|
||||||
|
HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => {
|
||||||
|
this.fullscreen();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private initResizeListeners() {
|
private initResizeListeners() {
|
||||||
@ -169,6 +175,22 @@ class CoWebsiteManager {
|
|||||||
private fire(): void {
|
private fire(): void {
|
||||||
this._onStateChange.next();
|
this._onStateChange.next();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private fullscreen(): void {
|
||||||
|
if (this.opened === iframeStates.fullscreen) {
|
||||||
|
this.opened = iframeStates.opened;
|
||||||
|
this.width = window.innerWidth / 2;
|
||||||
|
//we don't trigger a resize of the phaser game since it won't be visible anyway.
|
||||||
|
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
|
||||||
|
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
|
||||||
|
} else {
|
||||||
|
this.opened = iframeStates.fullscreen;
|
||||||
|
this.width = window.innerWidth;
|
||||||
|
//we don't trigger a resize of the phaser game since it won't be visible anyway.
|
||||||
|
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'none';
|
||||||
|
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'inline';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const coWebsiteManager = new CoWebsiteManager();
|
export const coWebsiteManager = new CoWebsiteManager();
|
Loading…
Reference in New Issue
Block a user