diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 93cd76de..72a4fe96 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -345,44 +345,6 @@ export function OpenWhatsNewPopup() { }) } -export function OpenStorePage() { - const remove = renderStore() - /* export function renderStore() { - const container = document.querySelector('#container'); - if (!container) { - throw new Error('Container not found'); - } - - const child = document.createElement('div'); - child.id = 'store'; - container!.appendChild(child); - - const shadow = child.attachShadow({ mode: 'open' }); - const app = renderSvelte(Store, shadow); - - return () => unmount(app) -} - */ - - // add a close button to the page - const closeButton = document.createElement('button') - closeButton.id = 'storeclosebutton' - closeButton.classList.add('closeButton') - closeButton.innerHTML = 'Close' - document.body.appendChild(closeButton) - - closeButton.addEventListener('click', () => { - closeButton.classList.add('hide') - document.getElementById('store')!.classList.add('hide') - - setTimeout(() => { - remove() - document.body.removeChild(closeButton) - document.getElementById('store')!.remove() - }, 500) - }) -} - export function OpenAboutPage() { const background = document.createElement('div') background.id = 'whatsnewbk' diff --git a/src/css/injected.scss b/src/css/injected.scss index 1b9bc801..82f31f74 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -77,24 +77,6 @@ html { animation: fadeOut 500ms forwards; } } -#storeclosebutton { - position: absolute; - top: 10px; - right: 10px; - z-index: 9999; - animation: fadeIn 500ms forwards; - animation-delay: 200ms; - opacity: 0; - - &.hide { - animation: fadeOut 500ms forwards; - pointer-events: none; - } -} - -.dark #storeclosebutton { - color: white; -} @keyframes fadeIn { from { diff --git a/src/seqta/ui/renderStore.ts b/src/seqta/ui/renderStore.ts index 7842ac50..078f1d43 100644 --- a/src/seqta/ui/renderStore.ts +++ b/src/seqta/ui/renderStore.ts @@ -3,6 +3,12 @@ import Store from '@/svelte-interface/pages/store.svelte' import { unmount } from 'svelte' +let remove: () => void + +export function OpenStorePage() { + remove = renderStore() +} + export function renderStore() { const container = document.querySelector('#container'); if (!container) { @@ -18,3 +24,12 @@ export function renderStore() { return () => unmount(app) } + +export function closeStore() { + document.getElementById('store')!.classList.add('hide') + + setTimeout(() => { + remove() + document.getElementById('store')!.remove() + }, 500) +} diff --git a/src/svelte-interface/components/store/Header.svelte b/src/svelte-interface/components/store/Header.svelte index 84bfbf43..66455026 100644 --- a/src/svelte-interface/components/store/Header.svelte +++ b/src/svelte-interface/components/store/Header.svelte @@ -1,6 +1,7 @@