BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 11:44:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make svelte interface work in popup

Browse Source
This commit is contained in:
sethburkart123
2024-11-01 11:35:24 +11:00
parent 3d276e3b22
commit 54e7b58794
5 changed files with 132 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/svelte-interface/index.html
+2 -1
View File
@@ -6,7 +6,8 @@
<title>BetterSEQTA+ Settings</title> <title>BetterSEQTA+ Settings</title>
</head> </head>
<body> <body>
<script type="module" src="./index.ts"></script> <div id="app"></div>
asdasds - I (Crazypersonalph) agree with this statement. asdasds - I (Crazypersonalph) agree with this statement.
<script type="module" src="./index.ts"></script>
</body> </body>
</html> </html>
src/svelte-interface/index.ts
+25 -13
View File
@@ -1,16 +1,28 @@
import { mount } from 'svelte'; import "./index.css"
import Settings from './pages/settings.svelte'; import { mount } from "svelte"
import { initializeSettingsState } from '@/seqta/utils/listeners/SettingsState'; import type { ComponentType } from "svelte"
import './index.css'; import Settings from "./pages/settings.svelte"
export default function renderSvelte(
initializeSettingsState(); Component: ComponentType | any,
mountPoint: ShadowRoot | HTMLElement,
const app = mount(Settings, { props: Record<string, any> = {},
target: document.body, ) {
const app = mount(Component, {
target: mountPoint,
props: { props: {
standalone: true standalone: true,
} ...props,
}); },
})
console.log(app); return app
}
const mountPoint = document.getElementById('app')
if (!mountPoint) {
console.error('Mount point #app not found')
throw new Error('Mount point #app not found')
}
renderSvelte(Settings, mountPoint)
src/svelte-interface/pages/settings.svelte
+2 -1
View File
@@ -7,7 +7,7 @@
import { createStandalone } from '../utils/standalone.svelte'; import { createStandalone } from '../utils/standalone.svelte';
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { settingsState } from '@/seqta/utils/listeners/SettingsState' import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA" import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
import ColourPicker from '../components/ColourPicker.svelte' import ColourPicker from '../components/ColourPicker.svelte'
@@ -55,6 +55,7 @@
}); });
if (!standalone) return; if (!standalone) return;
initializeSettingsState();
// @ts-ignore // @ts-ignore
let globalStandalone = createStandalone(); let globalStandalone = createStandalone();
globalStandalone = standalone; globalStandalone = standalone;
src/svelte-interface/pages/settings/shortcuts.svelte
+24
View File
@@ -2,6 +2,24 @@
import MotionDiv from '@/svelte-interface/components/MotionDiv.svelte'; import MotionDiv from '@/svelte-interface/components/MotionDiv.svelte';
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts" import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
import Switch from "@/svelte-interface/components/Switch.svelte" import Switch from "@/svelte-interface/components/Switch.svelte"
import { onMount } from 'svelte';
let isLoaded = $state(false);
onMount(async () => {
// Wait for settingsState to be initialized
await new Promise<void>((resolve) => {
const checkState = () => {
if ($settingsState?.shortcuts) {
isLoaded = true;
resolve();
} else {
setTimeout(checkState, 100);
}
};
checkState();
});
});
const switchChange = (index: number) => { const switchChange = (index: number) => {
const updatedShortcuts = [...settingsState.shortcuts]; const updatedShortcuts = [...settingsState.shortcuts];
@@ -59,6 +77,7 @@
{/snippet} {/snippet}
<div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700"> <div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
{#if isLoaded}
<div> <div>
<MotionDiv <MotionDiv
initial={{ opacity: 0, height: 0 }} initial={{ opacity: 0, height: 0 }}
@@ -144,4 +163,9 @@
</button> </button>
</div> </div>
{/each} {/each}
{:else}
<div class="p-4 text-center">
Loading shortcuts...
</div>
{/if}
</div> </div>
test.sh
View File