Re-implement set width of main cowebsite
This commit is contained in:
parent
9571a52f1e
commit
60c17ecea2
@ -5,6 +5,7 @@ export const isOpenCoWebsiteEvent = new tg.IsInterface()
|
||||
url: tg.isString,
|
||||
allowApi: tg.isOptional(tg.isBoolean),
|
||||
allowPolicy: tg.isOptional(tg.isString),
|
||||
widthPercent: tg.isOptional(tg.isNumber),
|
||||
position: tg.isOptional(tg.isNumber),
|
||||
closable: tg.isOptional(tg.isBoolean),
|
||||
lazy: tg.isOptional(tg.isBoolean),
|
||||
|
@ -45,6 +45,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
|
||||
url: string,
|
||||
allowApi?: boolean,
|
||||
allowPolicy?: string,
|
||||
widthPercent?: number,
|
||||
position?: number,
|
||||
closable?: boolean,
|
||||
lazy?: boolean
|
||||
@ -55,6 +56,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
|
||||
url,
|
||||
allowApi,
|
||||
allowPolicy,
|
||||
widthPercent,
|
||||
position,
|
||||
closable,
|
||||
lazy,
|
||||
|
@ -20,6 +20,7 @@ export enum GameMapProperties {
|
||||
OPEN_WEBSITE = "openWebsite",
|
||||
OPEN_WEBSITE_ALLOW_API = "openWebsiteAllowApi",
|
||||
OPEN_WEBSITE_POLICY = "openWebsitePolicy",
|
||||
OPEN_WEBSITE_WIDTH = "openWebsiteWidth",
|
||||
OPEN_WEBSITE_POSITION = "openWebsitePosition",
|
||||
OPEN_WEBSITE_TRIGGER = "openWebsiteTrigger",
|
||||
OPEN_WEBSITE_TRIGGER_MESSAGE = "openWebsiteTriggerMessage",
|
||||
|
@ -9,7 +9,6 @@ import { get } from "svelte/store";
|
||||
import { ON_ACTION_TRIGGER_BUTTON, ON_ICON_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
|
||||
import type { ITiledMapLayer } from "../Map/ITiledMap";
|
||||
import { GameMapProperties } from "./GameMapProperties";
|
||||
import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
|
||||
|
||||
enum OpenCoWebsiteState {
|
||||
ASLEEP,
|
||||
@ -66,6 +65,7 @@ export class GameMapPropertiesListener {
|
||||
let openWebsiteProperty: string | undefined;
|
||||
let allowApiProperty: boolean | undefined;
|
||||
let websitePolicyProperty: string | undefined;
|
||||
let websiteWidthProperty: number | undefined;
|
||||
let websitePositionProperty: number | undefined;
|
||||
let websiteTriggerProperty: string | undefined;
|
||||
let websiteTriggerMessageProperty: string | undefined;
|
||||
@ -81,6 +81,9 @@ export class GameMapPropertiesListener {
|
||||
case GameMapProperties.OPEN_WEBSITE_POLICY:
|
||||
websitePolicyProperty = property.value as string | undefined;
|
||||
break;
|
||||
case GameMapProperties.OPEN_WEBSITE_WIDTH:
|
||||
websiteWidthProperty = property.value as number | undefined;
|
||||
break;
|
||||
case GameMapProperties.OPEN_WEBSITE_POSITION:
|
||||
websitePositionProperty = property.value as number | undefined;
|
||||
break;
|
||||
@ -135,17 +138,13 @@ export class GameMapPropertiesListener {
|
||||
layoutManagerActionStore.removeAction(actionId);
|
||||
};
|
||||
|
||||
const openCoWebsiteFunction = (
|
||||
url: string | undefined,
|
||||
allowApi: boolean | undefined,
|
||||
policy: string | undefined,
|
||||
position: number | undefined
|
||||
) => {
|
||||
const openCoWebsiteFunction = () => {
|
||||
const coWebsite = coWebsiteManager.addCoWebsite(
|
||||
url ?? "",
|
||||
openWebsiteProperty ?? "",
|
||||
this.scene.MapUrlFile,
|
||||
allowApiProperty,
|
||||
websitePolicyProperty,
|
||||
websiteWidthProperty,
|
||||
websitePositionProperty,
|
||||
false
|
||||
);
|
||||
@ -167,13 +166,7 @@ export class GameMapPropertiesListener {
|
||||
uuid: actionId,
|
||||
type: "message",
|
||||
message: websiteTriggerMessageProperty,
|
||||
callback: () =>
|
||||
openCoWebsiteFunction(
|
||||
openWebsiteProperty,
|
||||
allowApiProperty,
|
||||
websitePolicyProperty,
|
||||
websitePositionProperty
|
||||
),
|
||||
callback: () => openCoWebsiteFunction(),
|
||||
userInputManager: this.scene.userInputManager,
|
||||
});
|
||||
} else if (!websiteTriggerProperty || websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) {
|
||||
@ -182,6 +175,7 @@ export class GameMapPropertiesListener {
|
||||
this.scene.MapUrlFile,
|
||||
allowApiProperty,
|
||||
websitePolicyProperty,
|
||||
websiteWidthProperty,
|
||||
websitePositionProperty,
|
||||
false
|
||||
);
|
||||
@ -194,12 +188,7 @@ export class GameMapPropertiesListener {
|
||||
}
|
||||
|
||||
if (!websiteTriggerProperty) {
|
||||
openCoWebsiteFunction(
|
||||
openWebsiteProperty,
|
||||
allowApiProperty,
|
||||
websitePolicyProperty,
|
||||
websitePositionProperty
|
||||
);
|
||||
openCoWebsiteFunction();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
@ -1265,6 +1265,7 @@ ${escapedMessage}
|
||||
iframeListener.getBaseUrlFromSource(source),
|
||||
openCoWebsite.allowApi,
|
||||
openCoWebsite.allowPolicy,
|
||||
openCoWebsite.widthPercent,
|
||||
openCoWebsite.position,
|
||||
openCoWebsite.closable ?? true
|
||||
);
|
||||
|
@ -43,6 +43,7 @@ export type CoWebsite = {
|
||||
closable: boolean;
|
||||
allowPolicy: string | undefined;
|
||||
allowApi: boolean | undefined;
|
||||
widthPercent?: number | undefined;
|
||||
jitsi?: boolean;
|
||||
altMessage?: string;
|
||||
};
|
||||
@ -82,8 +83,13 @@ class CoWebsiteManager {
|
||||
this.cowebsiteDom.style.width = width + "px";
|
||||
}
|
||||
|
||||
set widthPercent(width: number) {
|
||||
this.cowebsiteDom.style.width = width + "%";
|
||||
get maxWidth(): number {
|
||||
let maxWidth = 75 * window.innerWidth;
|
||||
if (maxWidth !== 0) {
|
||||
maxWidth = Math.round(maxWidth / 100);
|
||||
}
|
||||
|
||||
return maxWidth;
|
||||
}
|
||||
|
||||
get height(): number {
|
||||
@ -94,6 +100,15 @@ class CoWebsiteManager {
|
||||
this.cowebsiteDom.style.height = height + "px";
|
||||
}
|
||||
|
||||
get maxHeight(): number {
|
||||
let maxHeight = 60 * window.innerHeight;
|
||||
if (maxHeight !== 0) {
|
||||
maxHeight = Math.round(maxHeight / 100);
|
||||
}
|
||||
|
||||
return maxHeight;
|
||||
}
|
||||
|
||||
get verticalMode(): boolean {
|
||||
return window.innerWidth < window.innerHeight;
|
||||
}
|
||||
@ -191,29 +206,21 @@ class CoWebsiteManager {
|
||||
|
||||
if (this.verticalMode) {
|
||||
const tempValue = this.height + y;
|
||||
let maxHeight = 60 * window.innerHeight;
|
||||
if (maxHeight !== 0) {
|
||||
maxHeight = Math.round(maxHeight / 100);
|
||||
}
|
||||
|
||||
if (tempValue < this.cowebsiteAsideHolderDom.offsetHeight) {
|
||||
this.height = this.cowebsiteAsideHolderDom.offsetHeight;
|
||||
} else if (tempValue > maxHeight) {
|
||||
this.height = maxHeight;
|
||||
} else if (tempValue > this.maxHeight) {
|
||||
this.height = this.maxHeight;
|
||||
} else {
|
||||
this.height = tempValue;
|
||||
}
|
||||
} else {
|
||||
const tempValue = this.width - x;
|
||||
let maxWidth = 75 * window.innerWidth;
|
||||
if (maxWidth !== 0) {
|
||||
maxWidth = Math.round(maxWidth / 100);
|
||||
}
|
||||
|
||||
if (tempValue < this.cowebsiteAsideHolderDom.offsetWidth) {
|
||||
this.width = this.cowebsiteAsideHolderDom.offsetWidth;
|
||||
} else if (tempValue > maxWidth) {
|
||||
this.width = maxWidth;
|
||||
} else if (tempValue > this.maxWidth) {
|
||||
this.width = this.maxWidth;
|
||||
} else {
|
||||
this.width = tempValue;
|
||||
}
|
||||
@ -308,7 +315,7 @@ class CoWebsiteManager {
|
||||
this.fire();
|
||||
}
|
||||
|
||||
private loadMain(): void {
|
||||
private loadMain(openingWidth?: number): void {
|
||||
this.loaderAnimationInterval.interval = setInterval(() => {
|
||||
if (!this.loaderAnimationInterval.trails) {
|
||||
this.loaderAnimationInterval.trails = [0, 1, 2];
|
||||
@ -337,6 +344,25 @@ class CoWebsiteManager {
|
||||
trail === 3 ? 0 : trail + 1
|
||||
);
|
||||
}, 200);
|
||||
|
||||
if (!this.verticalMode && openingWidth) {
|
||||
let newWidth = 50;
|
||||
|
||||
if (openingWidth > 100) {
|
||||
newWidth = 100;
|
||||
} else if (openingWidth > 1) {
|
||||
newWidth = openingWidth;
|
||||
}
|
||||
|
||||
newWidth = Math.round((newWidth * this.maxWidth) / 100);
|
||||
|
||||
if (newWidth < this.cowebsiteAsideHolderDom.offsetWidth) {
|
||||
newWidth = this.cowebsiteAsideHolderDom.offsetWidth;
|
||||
}
|
||||
|
||||
this.width = newWidth;
|
||||
}
|
||||
|
||||
this.cowebsiteDom.classList.add("opened");
|
||||
this.openedMain = iframeStates.loading;
|
||||
}
|
||||
@ -346,7 +372,6 @@ class CoWebsiteManager {
|
||||
this.resizeAllIframes();
|
||||
});
|
||||
this.openedMain = iframeStates.opened;
|
||||
this.resetStyleMain();
|
||||
}
|
||||
|
||||
public resetStyleMain() {
|
||||
@ -533,6 +558,7 @@ class CoWebsiteManager {
|
||||
base: string,
|
||||
allowApi?: boolean,
|
||||
allowPolicy?: string,
|
||||
widthPercent?: number,
|
||||
position?: number,
|
||||
closable?: boolean,
|
||||
altMessage?: string
|
||||
@ -549,6 +575,7 @@ class CoWebsiteManager {
|
||||
closable: closable ?? false,
|
||||
allowPolicy,
|
||||
allowApi,
|
||||
widthPercent,
|
||||
altMessage,
|
||||
};
|
||||
|
||||
@ -561,14 +588,11 @@ class CoWebsiteManager {
|
||||
iframe: HTMLIFrameElement,
|
||||
allowApi?: boolean,
|
||||
allowPolicy?: string,
|
||||
widthPercent?: number,
|
||||
position?: number,
|
||||
closable?: boolean,
|
||||
jitsi?: boolean
|
||||
): CoWebsite {
|
||||
if (get(coWebsitesNotAsleep).length < 1) {
|
||||
this.loadMain();
|
||||
}
|
||||
|
||||
iframe.id = this.generateUniqueId();
|
||||
|
||||
const newCoWebsite: CoWebsite = {
|
||||
@ -578,9 +602,16 @@ class CoWebsiteManager {
|
||||
closable: closable ?? false,
|
||||
allowPolicy,
|
||||
allowApi,
|
||||
widthPercent,
|
||||
jitsi,
|
||||
};
|
||||
|
||||
if (get(coWebsitesNotAsleep).length < 1) {
|
||||
coWebsites.remove(newCoWebsite);
|
||||
coWebsites.add(newCoWebsite, 0);
|
||||
this.loadMain(widthPercent);
|
||||
}
|
||||
|
||||
if (position === 0) {
|
||||
this.openMain();
|
||||
setTimeout(() => {
|
||||
@ -597,7 +628,7 @@ class CoWebsiteManager {
|
||||
if (get(coWebsitesNotAsleep).length < 1) {
|
||||
coWebsites.remove(coWebsite);
|
||||
coWebsites.add(coWebsite, 0);
|
||||
this.loadMain();
|
||||
this.loadMain(coWebsite.widthPercent);
|
||||
}
|
||||
|
||||
coWebsite.state.set("loading");
|
||||
|
@ -179,7 +179,15 @@ class JitsiFactory {
|
||||
const doResolve = (): void => {
|
||||
const iframe = coWebsiteManager.getCoWebsiteBuffer().querySelector<HTMLIFrameElement>('[id*="jitsi" i]');
|
||||
if (iframe && this.jitsiApi) {
|
||||
const coWebsite = coWebsiteManager.addCoWebsiteFromIframe(iframe, false, undefined, 0, false, true);
|
||||
const coWebsite = coWebsiteManager.addCoWebsiteFromIframe(
|
||||
iframe,
|
||||
false,
|
||||
undefined,
|
||||
undefined,
|
||||
0,
|
||||
false,
|
||||
true
|
||||
);
|
||||
|
||||
this.jitsiApi.addListener("videoConferenceLeft", () => {
|
||||
this.closeOrUnload(coWebsite);
|
||||
|
@ -47,6 +47,11 @@
|
||||
"name":"openWebsiteTrigger",
|
||||
"type":"string",
|
||||
"value":"onaction"
|
||||
},
|
||||
{
|
||||
"name":"openWebsiteWidth",
|
||||
"type":"int",
|
||||
"value":100
|
||||
}],
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
|
Loading…
Reference in New Issue
Block a user