From 32fdfaab35186d37ff16c35e9f5efb2cce08f160 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Thu, 18 Mar 2021 15:05:15 +0100 Subject: [PATCH] edited CoWebsiteManager to manage vertical resizing --- front/dist/.gitignore | 2 +- front/dist/index.tmpl.html | 2 - front/dist/resources/style/cowebsite.scss | 36 ++++++++++---- front/dist/resources/style/index.scss | 2 +- front/dist/resources/style/style.css | 15 ------ front/src/WebRtc/CoWebsiteManager.ts | 57 +++++++++++++++-------- front/src/index.ts | 3 +- front/webpack.config.js | 2 +- 8 files changed, 70 insertions(+), 49 deletions(-) diff --git a/front/dist/.gitignore b/front/dist/.gitignore index 50a1ae0c..05c474ec 100644 --- a/front/dist/.gitignore +++ b/front/dist/.gitignore @@ -1,3 +1,3 @@ index.html index.tmpl.html.tmp -style.css \ No newline at end of file +style.*.css \ No newline at end of file diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index e4423fdd..3ec6ad3b 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -29,8 +29,6 @@ - - WorkAdventure diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss index 8af87f42..ba8fdb84 100644 --- a/front/dist/resources/style/cowebsite.scss +++ b/front/dist/resources/style/cowebsite.scss @@ -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; } } } \ No newline at end of file diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss index bb4c167e..4d0355b7 100644 --- a/front/dist/resources/style/index.scss +++ b/front/dist/resources/style/index.scss @@ -1,2 +1,2 @@ @import "cowebsite.scss"; -/*@import "style.css"*/ \ No newline at end of file +@import "style.css"; \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 1ecbe889..05ff5a03 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -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; diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index a10fd111..ada438ad 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -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 = new Subject(); - public onStateChange = this._onStateChange.asObservable(); + private _onResize: Subject = 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(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'; diff --git a/front/src/index.ts b/front/src/index.ts index 3e0ae325..8b0a83b6 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -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); }); diff --git a/front/webpack.config.js b/front/webpack.config.js index dda5ee4e..7e376da1 100644 --- a/front/webpack.config.js +++ b/front/webpack.config.js @@ -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',