noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edited CoWebsiteManager to manage vertical resizing

This commit is contained in:
kharhamel 2021-03-18 15:05:15 +01:00
parent 0701e607fa
commit 32fdfaab35
8 changed files with 70 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/dist/.gitignore vendored
View File

@ -1,3 +1,3 @@
index.html
index.tmpl.html.tmp
style.css
style.*.css

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

@ -29,8 +29,6 @@
<base href="/">
<link rel="stylesheet" href="/resources/style/style.css">
<link rel="stylesheet" href="/style.css">
<title>WorkAdventure</title>
</head>
<body id="body" style="margin: 0; background-color: #000">

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

@ -1,10 +1,27 @@
/* A potentially shared website could appear in an iframe in the cowebsite space. */
#cowebsite {
position: fixed;
transition: transform 0.5s;
background-color: white;
&.loading {
background-color: gray;
}
main {
iframe {
width: 100%;
height: 100%;
}
}
aside {
background: gray;
cursor: ew-resize;
align-items: center;
display: flex;
img {
cursor: ew-resize;
margin: 3px;
pointer-events: none;
height: 20px;
@ -52,10 +69,10 @@
aside {
width: 30px;
align-items: center;
display: flex;
cursor: ew-resize;
img {
cursor: ew-resize;
transform: rotate(90deg);
}
}
@ -85,7 +102,7 @@
}
#cowebsite-fullscreen{
right: 40px;
right: 45px;
}
}
}
@ -114,9 +131,12 @@
aside {
height: 30px;
align-items: center;
display: flex;
cursor: ns-resize;
flex-direction: column;
img {
cursor: ns-resize;
}
}
.top-right-btn{
@ -144,7 +164,7 @@
}
#cowebsite-fullscreen{
right: 40px;
right: 45px;
}
}
}

2
front/dist/resources/style/index.scss vendored
View File

@ -1,2 +1,2 @@
@import "cowebsite.scss";
/*@import "style.css"*/
@import "style.css";

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

@ -351,21 +351,6 @@ body {
position: relative; /* Position relative is needed for the game-overlay. */
}
/* A potentially shared website could appear in an iframe in the cowebsite space. */
#cowebsite {
position: fixed;
transition: transform 0.5s;
background-color: white;
}
#cowebsite.loading {
background-color: gray;
}
#cowebsite main iframe {
width: 100%;
height: 100%;
}
.audioplayer:first-child {
display: grid;
grid: 2rem / 4rem 10rem;

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

@ -5,7 +5,6 @@ enum iframeStates {
closed = 1,
loading, // loading an iframe can be slow, so we show some placeholder until it is ready
opened,
fullscreen,
}
const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
@ -21,8 +20,8 @@ class CoWebsiteManager {
private opened: iframeStates = iframeStates.closed;
private _onStateChange: Subject<void> = new Subject();
public onStateChange = this._onStateChange.asObservable();
private _onResize: Subject<void> = new Subject();
public onResize = this._onResize.asObservable();
/**
* Quickly going in and out of an iframe trigger can create conflicts between the iframe states.
* So we use this promise to queue up every cowebsite state transition
@ -40,6 +39,22 @@ class CoWebsiteManager {
set width(width: number) {
this.cowebsiteDiv.style.width = width+'px';
}
get height(): number {
return this.cowebsiteDiv.clientHeight;
}
set height(height: number) {
this.cowebsiteDiv.style.height = height+'px';
}
get verticalMode(): boolean {
return window.innerWidth < window.innerHeight;
}
get isFullScreen(): boolean {
return this.verticalMode ? this.height === this.cowebsiteDiv.clientHeight : this.width === this.cowebsiteDiv.clientWidth
}
constructor() {
this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
@ -57,19 +72,21 @@ class CoWebsiteManager {
}
private initResizeListeners() {
const movecallback = (event:MouseEvent) => {
this.verticalMode ? this.height -= event.movementY : this.width -= event.movementX;
this.fire();
}
this.cowebsiteAsideDom.addEventListener('mousedown', (event) => {
this.resizing = true;
this.getIframeDom().style.display = 'none';
document.onmousemove = (event) => {
this.width = this.width - event.movementX;
this.fire();
}
document.addEventListener('mousemove', movecallback);
});
document.addEventListener('mouseup', (event) => {
if (!this.resizing) return;
document.onmousemove = null;
document.removeEventListener('mousemove', movecallback);
this.getIframeDom().style.display = 'block';
this.resizing = false;
});
@ -79,6 +96,7 @@ class CoWebsiteManager {
this.cowebsiteDiv.classList.remove('loaded'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add('hidden');
this.opened = iframeStates.closed;
this.resetStyle();
}
private load(): void {
this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
@ -88,11 +106,12 @@ class CoWebsiteManager {
private open(): void {
this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
this.opened = iframeStates.opened;
this.resetWidth();
this.resetStyle();
}
private resetWidth() {
this.width = window.innerWidth / 2;
public resetStyle() {
this.cowebsiteDiv.style.width = '';
this.cowebsiteDiv.style.height = '';
}
private getIframeDom(): HTMLIFrameElement {
@ -159,7 +178,7 @@ class CoWebsiteManager {
height: window.innerHeight
}
}
if (window.innerWidth >= window.innerHeight) {
if (!this.verticalMode) {
return {
width: window.innerWidth - this.width,
height: window.innerHeight
@ -167,25 +186,23 @@ class CoWebsiteManager {
} else {
return {
width: window.innerWidth,
height: window.innerHeight / 2
height: window.innerHeight - this.height,
}
}
}
private fire(): void {
this._onStateChange.next();
this._onResize.next();
}
private fullscreen(): void {
if (this.opened === iframeStates.fullscreen) {
this.opened = iframeStates.opened;
this.width = window.innerWidth / 2;
if (this.isFullScreen) {
this.resetStyle();
//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;
this.verticalMode ? this.height = window.innerHeight : 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';

3
front/src/index.ts
View File

@ -109,6 +109,7 @@ const config: GameConfig = {
const game = new Phaser.Game(config);
window.addEventListener('resize', function (event) {
coWebsiteManager.resetStyle();
const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
@ -120,7 +121,7 @@ window.addEventListener('resize', function (event) {
}
});
coWebsiteManager.onStateChange.subscribe(() => {
coWebsiteManager.onResize.subscribe(() => {
const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
});

2
front/webpack.config.js
View File

@ -42,7 +42,7 @@ module.exports = {
require('webpack-require-http')
],
plugins: [
new MiniCssExtractPlugin({filename: 'style.css'}),
new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
new HtmlWebpackPlugin(
{
template: './dist/index.tmpl.html.tmp',