Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor to only have one function registerMenuCommand

Browse source 
When selected custom menu is removed, go to settings menu
Allow iframe in custom menu to use Scripting API
Return menu object when it is registered, can call remove function on it
This commit is contained in:
GRL 2021-08-27 10:34:03 +02:00
parent 5cd3ab4b4c
commit cf7bfe79ca
14 changed files with 203 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

21
front/src/Components/Menu/CustomSubMenu.svelte
View file

@ -1,10 +1,27 @@
<script lang="ts">
export let iframe: string;
import {onDestroy, onMount} from "svelte";
import {iframeListener} from "../../Api/IframeListener";
export let url: string;
export let allowApi: boolean;
let HTMLIframe: HTMLIFrameElement;
onMount( () => {
if (allowApi) {
iframeListener.registerIframe(HTMLIframe);
}
})
onDestroy( () => {
if (allowApi) {
iframeListener.unregisterIframe(HTMLIframe);
}
})
</script>
<iframe title="customSubMenu" src="{iframe}"></iframe>
<iframe title="customSubMenu" src="{url}" bind:this={HTMLIframe}></iframe>
<style lang="scss">
iframe {

23
front/src/Components/Menu/Menu.svelte
View file

@ -9,14 +9,15 @@
import CustomSubMenu from "./CustomSubMenu.svelte"
import {customMenuIframe, menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
import {userIsAdminStore} from "../../Stores/GameStore";
import {onMount} from "svelte";
import {get} from "svelte/store";
import {onDestroy, onMount} from "svelte";
import {get, Unsubscriber} from "svelte/store";
import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
import {CONTACT_URL} from "../../Enum/EnvironmentVariable";
let activeSubMenu: string = SubMenusInterface.settings;
let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu= SettingsSubMenu;
let props: {iframe: string};
let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
let props: { url: string, allowApi: boolean };
let unsubscriberSubMenuStore: Unsubscriber;
onMount(() => {
if(!get(userIsAdminStore)) {
@ -27,9 +28,21 @@
subMenusStore.removeMenu(SubMenusInterface.contact);
}
unsubscriberSubMenuStore = subMenusStore.subscribe(() => {
if(!get(subMenusStore).includes(activeSubMenu)) {
switchMenu(SubMenusInterface.settings);
}
})
switchMenu(SubMenusInterface.settings);
})
onDestroy(() => {
if(unsubscriberSubMenuStore) {
unsubscriberSubMenuStore();
}
})
function switchMenu(menu: string) {
if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
activeSubMenu = menu;
@ -55,7 +68,7 @@
default:
const customMenu = customMenuIframe.get(menu);
if (customMenu !== undefined) {
props = {iframe: customMenu};
props = { url: customMenu.url, allowApi: customMenu.allowApi };
activeComponent = CustomSubMenu;
} else {
sendMenuClickedEvent(menu);