syuilo 2023-01-02 16:02:42 +09:00
parent 605582f5f7
commit fb364ce740
3 changed files with 38 additions and 26 deletions

View file

@ -23,8 +23,13 @@ export class Storage<T extends StateDef> {
// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487 // TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
public readonly state: { [K in keyof T]: T[K]['default'] }; public readonly state: { [K in keyof T]: T[K]['default'] };
public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> }; public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
public readonly ready: Promise<void>;
private markAsReady: () => void = () => {};
constructor(key: string, def: T) { constructor(key: string, def: T) {
this.ready = new Promise((res) => {
this.markAsReady = res;
});
this.key = key; this.key = key;
this.keyForLocalStorage = 'pizzax::' + key; this.keyForLocalStorage = 'pizzax::' + key;
this.def = def; this.def = def;
@ -72,6 +77,7 @@ export class Storage<T extends StateDef> {
} }
} }
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache)); localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
this.markAsReady();
}); });
}, 1); }, 1);
// streamingのuser storage updateイベントを監視して更新 // streamingのuser storage updateイベントを監視して更新
@ -87,6 +93,8 @@ export class Storage<T extends StateDef> {
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache)); localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
} }
}); });
} else {
this.markAsReady();
} }
} }

View file

@ -7,7 +7,7 @@
<XSidebar/> <XSidebar/>
</div> </div>
<div v-else ref="widgetsLeft" class="widgets left"> <div v-else ref="widgetsLeft" class="widgets left">
<XWidgets place="left" @mounted="attachSticky(widgetsLeft)" :classic="true"/> <XWidgets place="left" :classic="true" @mounted="attachSticky(widgetsLeft)"/>
</div> </div>
<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu"> <main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
@ -17,7 +17,7 @@
</main> </main>
<div v-if="isDesktop" ref="widgetsRight" class="widgets right"> <div v-if="isDesktop" ref="widgetsRight" class="widgets right">
<XWidgets :place="showMenuOnTop ? 'right' : null" @mounted="attachSticky(widgetsRight)" :classic="true"/> <XWidgets :place="showMenuOnTop ? 'right' : null" :classic="true" @mounted="attachSticky(widgetsRight)"/>
</div> </div>
</div> </div>
@ -129,18 +129,20 @@ if (window.innerWidth < 1024) {
document.documentElement.style.overflowY = 'scroll'; document.documentElement.style.overflowY = 'scroll';
if (defaultStore.state.widgets.length === 0) { defaultStore.ready.then(() => {
defaultStore.set('widgets', [{ if (defaultStore.state.widgets.length === 0) {
name: 'calendar', defaultStore.set('widgets', [{
id: 'a', place: null, data: {}, name: 'calendar',
}, { id: 'a', place: null, data: {},
name: 'notifications', }, {
id: 'b', place: null, data: {}, name: 'notifications',
}, { id: 'b', place: null, data: {},
name: 'trends', }, {
id: 'c', place: null, data: {}, name: 'trends',
}]); id: 'c', place: null, data: {},
} }]);
}
});
onMounted(() => { onMounted(() => {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {

View file

@ -113,18 +113,20 @@ mainRouter.on('change', () => {
document.documentElement.style.overflowY = 'scroll'; document.documentElement.style.overflowY = 'scroll';
if (defaultStore.state.widgets.length === 0) { defaultStore.ready.then(() => {
defaultStore.set('widgets', [{ if (defaultStore.state.widgets.length === 0) {
name: 'calendar', defaultStore.set('widgets', [{
id: 'a', place: 'right', data: {}, name: 'calendar',
}, { id: 'a', place: 'right', data: {},
name: 'notifications', }, {
id: 'b', place: 'right', data: {}, name: 'notifications',
}, { id: 'b', place: 'right', data: {},
name: 'trends', }, {
id: 'c', place: 'right', data: {}, name: 'trends',
}]); id: 'c', place: 'right', data: {},
} }]);
}
});
onMounted(() => { onMounted(() => {
if (!isDesktop.value) { if (!isDesktop.value) {