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

FEATURE: complete control over the iframe size

This commit is contained in:
kharhamel 2021-03-15 18:43:13 +01:00
parent 19856c0ee9
commit 3f6c61633a
3 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -330,6 +330,10 @@ body {
top: 0; top: 0;
width: 50%; width: 50%;
height: 100vh; height: 100vh;
cursor: ew-resize;
}
#cowebsite iframe {
margin-left: 30px;
} }
#cowebsite.loading { #cowebsite.loading {
transform: translateX(90%); transform: translateX(90%);

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

@ -22,9 +22,26 @@ class CoWebsiteManager {
*/ */
private currentOperationPromise: Promise<void> = Promise.resolve(); private currentOperationPromise: Promise<void> = Promise.resolve();
private cowebsiteDiv: HTMLDivElement; private cowebsiteDiv: HTMLDivElement;
private resizing: boolean = false;
constructor() { constructor() {
this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId); this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
this.cowebsiteDiv.addEventListener('mousedown', (event) => {
this.resizing = true;
this.getIframeDom().style.display = 'none';
document.onmousemove = (event) => {
this.cowebsiteDiv.style.width = (this.cowebsiteDiv.clientWidth - event.movementX) + 'px';
}
});
document.addEventListener('mouseup', (event) => {
if (!this.resizing) return;
document.onmousemove = null;
this.getIframeDom().style.display = 'block';
this.resizing = false;
});
} }
private close(): void { private close(): void {
@ -41,6 +58,12 @@ class CoWebsiteManager {
this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
this.opened = iframeStates.opened; this.opened = iframeStates.opened;
} }
private getIframeDom(): HTMLIFrameElement {
const iframe = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId).querySelector('iframe');
if (!iframe) throw new Error('Could not find iframe!');
return iframe;
}
public loadCoWebsite(url: string, base: string, allowPolicy?: string): void { public loadCoWebsite(url: string, base: string, allowPolicy?: string): void {
this.load(); this.load();

2
front/src/index.ts
View File

@ -5,8 +5,6 @@ import {LoginScene} from "./Phaser/Login/LoginScene";
import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene"; import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene"; import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene"; import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
import {CustomizeScene} from "./Phaser/Login/CustomizeScene"; import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
import {ResizableScene} from "./Phaser/Login/ResizableScene"; import {ResizableScene} from "./Phaser/Login/ResizableScene";
import {EntryScene} from "./Phaser/Login/EntryScene"; import {EntryScene} from "./Phaser/Login/EntryScene";