mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-13 07:04:39 +00:00
feat: make svelte interface work in popup
This commit is contained in:
sethburkart123
@@ -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>
|
||||||
@@ -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(
|
||||||
|
Component: ComponentType | any,
|
||||||
|
mountPoint: ShadowRoot | HTMLElement,
|
||||||
|
props: Record<string, any> = {},
|
||||||
|
) {
|
||||||
|
const app = mount(Component, {
|
||||||
|
target: mountPoint,
|
||||||
|
props: {
|
||||||
|
standalone: true,
|
||||||
|
...props,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
initializeSettingsState();
|
return app
|
||||||
|
}
|
||||||
|
|
||||||
const app = mount(Settings, {
|
const mountPoint = document.getElementById('app')
|
||||||
target: document.body,
|
if (!mountPoint) {
|
||||||
props: {
|
console.error('Mount point #app not found')
|
||||||
standalone: true
|
throw new Error('Mount point #app not found')
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
console.log(app);
|
renderSvelte(Settings, mountPoint)
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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,89 +77,95 @@
|
|||||||
{/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">
|
||||||
<div>
|
{#if isLoaded}
|
||||||
<MotionDiv
|
<div>
|
||||||
initial={{ opacity: 0, height: 0 }}
|
<MotionDiv
|
||||||
animate={isFormVisible ? { opacity: 1, height: "auto" } : { opacity: 0, height: 0 }}
|
initial={{ opacity: 0, height: 0 }}
|
||||||
exit={{ opacity: 0, height: 0 }}
|
animate={isFormVisible ? { opacity: 1, height: "auto" } : { opacity: 0, height: 0 }}
|
||||||
transition={springTransition}
|
exit={{ opacity: 0, height: 0 }}
|
||||||
>
|
transition={springTransition}
|
||||||
{#if isFormVisible}
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<MotionDiv
|
|
||||||
initial={{ opacity: 0, y: -10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1, duration: 0.4 }}
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
class="w-full p-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
|
|
||||||
type="text"
|
|
||||||
placeholder="Shortcut Name"
|
|
||||||
bind:value={newTitle}
|
|
||||||
/>
|
|
||||||
</MotionDiv>
|
|
||||||
<MotionDiv
|
|
||||||
initial={{ opacity: 0, y: -10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.2, duration: 0.4 }}
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
class="w-full p-2 my-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
|
|
||||||
type="text"
|
|
||||||
placeholder="URL eg. https://google.com"
|
|
||||||
bind:value={newURL}
|
|
||||||
/>
|
|
||||||
</MotionDiv>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</MotionDiv>
|
|
||||||
|
|
||||||
<MotionDiv
|
|
||||||
animate={isFormVisible ? { y: 0 } : { y: 0 }}
|
|
||||||
transition={springTransition}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
|
|
||||||
onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
|
|
||||||
>
|
>
|
||||||
{#if isFormVisible}
|
{#if isFormVisible}
|
||||||
<MotionDiv
|
<div class="flex flex-col items-center">
|
||||||
initial={{ opacity: 0 }}
|
<MotionDiv
|
||||||
animate={{ opacity: 1 }}
|
initial={{ opacity: 0, y: -10 }}
|
||||||
exit={{ opacity: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.7 }}
|
transition={{ delay: 0.1, duration: 0.4 }}
|
||||||
>
|
class="w-full"
|
||||||
Add
|
>
|
||||||
</MotionDiv>
|
<input
|
||||||
{:else}
|
class="w-full p-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
|
||||||
<MotionDiv
|
type="text"
|
||||||
initial={{ opacity: 0 }}
|
placeholder="Shortcut Name"
|
||||||
animate={{ opacity: 1 }}
|
bind:value={newTitle}
|
||||||
exit={{ opacity: 0 }}
|
/>
|
||||||
transition={{ duration: 0.3 }}
|
</MotionDiv>
|
||||||
>
|
<MotionDiv
|
||||||
Add Custom Shortcut
|
initial={{ opacity: 0, y: -10 }}
|
||||||
</MotionDiv>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2, duration: 0.4 }}
|
||||||
|
class="w-full"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="w-full p-2 my-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
|
||||||
|
type="text"
|
||||||
|
placeholder="URL eg. https://google.com"
|
||||||
|
bind:value={newURL}
|
||||||
|
/>
|
||||||
|
</MotionDiv>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</MotionDiv>
|
||||||
</MotionDiv>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#each Object.entries($settingsState.shortcuts) as shortcut}
|
<MotionDiv
|
||||||
{@render Shortcuts(shortcut)}
|
animate={isFormVisible ? { y: 0 } : { y: 0 }}
|
||||||
{/each}
|
transition={springTransition}
|
||||||
|
>
|
||||||
<!-- Custom Shortcuts Section -->
|
<button
|
||||||
{#each $settingsState.customshortcuts as shortcut, index}
|
class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
|
||||||
<div class="flex items-center justify-between px-4 py-3">
|
onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
|
||||||
{shortcut.name}
|
>
|
||||||
<button onclick={() => deleteCustomShortcut(index)}>
|
{#if isFormVisible}
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
|
<MotionDiv
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
initial={{ opacity: 0 }}
|
||||||
</svg>
|
animate={{ opacity: 1 }}
|
||||||
</button>
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.7 }}
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</MotionDiv>
|
||||||
|
{:else}
|
||||||
|
<MotionDiv
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
Add Custom Shortcut
|
||||||
|
</MotionDiv>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</MotionDiv>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
|
||||||
|
{#each Object.entries($settingsState.shortcuts) as shortcut}
|
||||||
|
{@render Shortcuts(shortcut)}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<!-- Custom Shortcuts Section -->
|
||||||
|
{#each $settingsState.customshortcuts as shortcut, index}
|
||||||
|
<div class="flex items-center justify-between px-4 py-3">
|
||||||
|
{shortcut.name}
|
||||||
|
<button onclick={() => deleteCustomShortcut(index)}>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
<div class="p-4 text-center">
|
||||||
|
Loading shortcuts...
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user