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

View File

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

View File

@ -22,9 +22,26 @@ class CoWebsiteManager {
*/
private currentOperationPromise: Promise<void> = Promise.resolve();
private cowebsiteDiv: HTMLDivElement;
private resizing: boolean = false;
constructor() {
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 {
@ -41,6 +58,12 @@ class CoWebsiteManager {
this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
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 {
this.load();

View File

@ -5,8 +5,6 @@ import {LoginScene} from "./Phaser/Login/LoginScene";
import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
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 {ResizableScene} from "./Phaser/Login/ResizableScene";
import {EntryScene} from "./Phaser/Login/EntryScene";