From b5068aae059c50ef837d2a5a20ae6c85d8ee7f98 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 22 Feb 2018 23:53:07 +0900 Subject: [PATCH] wip --- src/web/app/common/mios.ts | 10 ++++++ .../app/desktop/views/components/drive.vue | 8 ++--- .../desktop/views/components/images-image.vue | 8 ++--- .../views/components/messaging-window.vue | 8 ++--- .../desktop/views/components/post-detail.vue | 36 ++++++++----------- .../desktop/views/components/posts.post.vue | 36 ++++++++----------- .../views/components/ui.header.account.vue | 4 +-- .../views/components/ui.header.nav.vue | 2 +- .../views/components/widgets/messaging.vue | 8 ++--- .../desktop/views/pages/user/user.profile.vue | 18 ++++------ src/web/app/init.ts | 34 ++++++++++-------- .../mobile/views/components/post-detail.vue | 24 ++++++------- .../mobile/views/components/posts.post.vue | 24 ++++++------- src/web/app/mobile/views/components/ui.vue | 8 ++--- 14 files changed, 102 insertions(+), 126 deletions(-) diff --git a/src/web/app/common/mios.ts b/src/web/app/common/mios.ts index e3a66f5b11..e20f4bfe4e 100644 --- a/src/web/app/common/mios.ts +++ b/src/web/app/common/mios.ts @@ -67,6 +67,16 @@ export default class MiOS extends EventEmitter { private isMetaFetching = false; + public app: Vue; + + public new(vm, props) { + const w = new vm({ + parent: this.app, + propsData: props + }).$mount(); + document.body.appendChild(w.$el); + } + /** * A signing user */ diff --git a/src/web/app/desktop/views/components/drive.vue b/src/web/app/desktop/views/components/drive.vue index e256bc6af2..0dcf077017 100644 --- a/src/web/app/desktop/views/components/drive.vue +++ b/src/web/app/desktop/views/components/drive.vue @@ -376,11 +376,9 @@ export default Vue.extend({ }, newWindow(folder) { - document.body.appendChild(new MkDriveWindow({ - propsData: { - folder: folder - } - }).$mount().$el); + (this as any).os.new(MkDriveWindow, { + folder: folder + }); }, move(target) { diff --git a/src/web/app/desktop/views/components/images-image.vue b/src/web/app/desktop/views/components/images-image.vue index cb6c529f79..5b7dc41739 100644 --- a/src/web/app/desktop/views/components/images-image.vue +++ b/src/web/app/desktop/views/components/images-image.vue @@ -39,11 +39,9 @@ export default Vue.extend({ }, onClick() { - document.body.appendChild(new MkImagesImageDialog({ - propsData: { - image: this.image - } - }).$mount().$el); + (this as any).os.new(MkImagesImageDialog, { + image: this.image + }); } } }); diff --git a/src/web/app/desktop/views/components/messaging-window.vue b/src/web/app/desktop/views/components/messaging-window.vue index eeeb97e345..ac27465987 100644 --- a/src/web/app/desktop/views/components/messaging-window.vue +++ b/src/web/app/desktop/views/components/messaging-window.vue @@ -12,11 +12,9 @@ import MkMessagingRoomWindow from './messaging-room-window.vue'; export default Vue.extend({ methods: { navigate(user) { - document.body.appendChild(new MkMessagingRoomWindow({ - propsData: { - user: user - } - }).$mount().$el); + (this as any).os.new(MkMessagingRoomWindow, { + user: user + }); } } }); diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue index cac4671c54..c453867dfb 100644 --- a/src/web/app/desktop/views/components/post-detail.vue +++ b/src/web/app/desktop/views/components/post-detail.vue @@ -148,34 +148,26 @@ export default Vue.extend({ }); }, reply() { - document.body.appendChild(new MkPostFormWindow({ - propsData: { - reply: this.p - } - }).$mount().$el); + (this as any).os.new(MkPostFormWindow, { + reply: this.p + }); }, repost() { - document.body.appendChild(new MkRepostFormWindow({ - propsData: { - post: this.p - } - }).$mount().$el); + (this as any).os.new(MkRepostFormWindow, { + post: this.p + }); }, react() { - document.body.appendChild(new MkReactionPicker({ - propsData: { - source: this.$refs.reactButton, - post: this.p - } - }).$mount().$el); + (this as any).os.new(MkReactionPicker, { + source: this.$refs.reactButton, + post: this.p + }); }, menu() { - document.body.appendChild(new MkPostMenu({ - propsData: { - source: this.$refs.menuButton, - post: this.p - } - }).$mount().$el); + (this as any).os.new(MkPostMenu, { + source: this.$refs.menuButton, + post: this.p + }); } } }); diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue index 24f7b5e123..6fe097909b 100644 --- a/src/web/app/desktop/views/components/posts.post.vue +++ b/src/web/app/desktop/views/components/posts.post.vue @@ -186,34 +186,26 @@ export default Vue.extend({ } }, reply() { - document.body.appendChild(new MkPostFormWindow({ - propsData: { - reply: this.p - } - }).$mount().$el); + (this as any).os.new(MkPostFormWindow, { + reply: this.p + }); }, repost() { - document.body.appendChild(new MkRepostFormWindow({ - propsData: { - post: this.p - } - }).$mount().$el); + (this as any).os.new(MkRepostFormWindow, { + post: this.p + }); }, react() { - document.body.appendChild(new MkReactionPicker({ - propsData: { - source: this.$refs.reactButton, - post: this.p - } - }).$mount().$el); + (this as any).os.new(MkReactionPicker, { + source: this.$refs.reactButton, + post: this.p + }); }, menu() { - document.body.appendChild(new MkPostMenu({ - propsData: { - source: this.$refs.menuButton, - post: this.p - } - }).$mount().$el); + (this as any).os.new(MkPostMenu, { + source: this.$refs.menuButton, + post: this.p + }); }, onKeydown(e) { let shouldBeCancel = true; diff --git a/src/web/app/desktop/views/components/ui.header.account.vue b/src/web/app/desktop/views/components/ui.header.account.vue index 3728f94be8..af58e81a04 100644 --- a/src/web/app/desktop/views/components/ui.header.account.vue +++ b/src/web/app/desktop/views/components/ui.header.account.vue @@ -70,11 +70,11 @@ export default Vue.extend({ }, drive() { this.close(); - document.body.appendChild(new MkDriveWindow().$mount().$el); + (this as any).os.new(MkDriveWindow); }, settings() { this.close(); - document.body.appendChild(new MkSettingsWindow().$mount().$el); + (this as any).os.new(MkSettingsWindow); } } }); diff --git a/src/web/app/desktop/views/components/ui.header.nav.vue b/src/web/app/desktop/views/components/ui.header.nav.vue index 70c616d9c7..c102d5b3f5 100644 --- a/src/web/app/desktop/views/components/ui.header.nav.vue +++ b/src/web/app/desktop/views/components/ui.header.nav.vue @@ -79,7 +79,7 @@ export default Vue.extend({ }, messaging() { - document.body.appendChild(new MkMessagingWindow().$mount().$el); + (this as any).os.new(MkMessagingWindow); } } }); diff --git a/src/web/app/desktop/views/components/widgets/messaging.vue b/src/web/app/desktop/views/components/widgets/messaging.vue index e510a07dc4..ae7d6934af 100644 --- a/src/web/app/desktop/views/components/widgets/messaging.vue +++ b/src/web/app/desktop/views/components/widgets/messaging.vue @@ -17,11 +17,9 @@ export default define({ }).extend({ methods: { navigate(user) { - document.body.appendChild(new MkMessagingRoomWindow({ - propsData: { - user: user - } - }).$mount().$el); + (this as any).os.new(MkMessagingRoomWindow, { + user: user + }); }, func() { if (this.props.design == 1) { diff --git a/src/web/app/desktop/views/pages/user/user.profile.vue b/src/web/app/desktop/views/pages/user/user.profile.vue index b55787c95c..ceca829ace 100644 --- a/src/web/app/desktop/views/pages/user/user.profile.vue +++ b/src/web/app/desktop/views/pages/user/user.profile.vue @@ -36,21 +36,15 @@ export default Vue.extend({ }, methods: { showFollowing() { - document.body.appendChild(new MkFollowingWindow({ - parent: this, - propsData: { - user: this.user - } - }).$mount().$el); + (this as any).os.new(MkFollowingWindow, { + user: this.user + }); }, showFollowers() { - document.body.appendChild(new MkFollowersWindow({ - parent: this, - propsData: { - user: this.user - } - }).$mount().$el); + (this as any).os.new(MkFollowersWindow, { + user: this.user + }); }, mute() { diff --git a/src/web/app/init.ts b/src/web/app/init.ts index e4cb8f8bc0..ac567c5023 100644 --- a/src/web/app/init.ts +++ b/src/web/app/init.ts @@ -87,8 +87,26 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v // アプリ基底要素マウント document.body.innerHTML = '
'; + const app = new Vue({ + router: new VueRouter({ + mode: 'history' + }), + created() { + this.$watch('os.i', i => { + // キャッシュ更新 + localStorage.setItem('me', JSON.stringify(i)); + }, { + deep: true + }); + }, + render: createEl => createEl(App) + }); + + os.app = app; + const launch = (api: (os: MiOS) => API) => { os.apis = api(os); + Vue.mixin({ data() { return { @@ -99,20 +117,8 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v } }); - const app = new Vue({ - router: new VueRouter({ - mode: 'history' - }), - created() { - this.$watch('os.i', i => { - // キャッシュ更新 - localStorage.setItem('me', JSON.stringify(i)); - }, { - deep: true - }); - }, - render: createEl => createEl(App) - }).$mount('#app'); + // マウント + app.$mount('#app'); return [app, os] as [Vue, MiOS]; }; diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue index 76057525f0..e7c08df7e9 100644 --- a/src/web/app/mobile/views/components/post-detail.vue +++ b/src/web/app/mobile/views/components/post-detail.vue @@ -154,22 +154,18 @@ export default Vue.extend({ }); }, react() { - document.body.appendChild(new MkReactionPicker({ - propsData: { - source: this.$refs.reactButton, - post: this.p, - compact: true - } - }).$mount().$el); + (this as any).os.new(MkReactionPicker, { + source: this.$refs.reactButton, + post: this.p, + compact: true + }); }, menu() { - document.body.appendChild(new MkPostMenu({ - propsData: { - source: this.$refs.menuButton, - post: this.p, - compact: true - } - }).$mount().$el); + (this as any).os.new(MkPostMenu, { + source: this.$refs.menuButton, + post: this.p, + compact: true + }); } } }); diff --git a/src/web/app/mobile/views/components/posts.post.vue b/src/web/app/mobile/views/components/posts.post.vue index 9a7d633d44..43d8d4a89b 100644 --- a/src/web/app/mobile/views/components/posts.post.vue +++ b/src/web/app/mobile/views/components/posts.post.vue @@ -169,22 +169,18 @@ export default Vue.extend({ }); }, react() { - document.body.appendChild(new MkReactionPicker({ - propsData: { - source: this.$refs.reactButton, - post: this.p, - compact: true - } - }).$mount().$el); + (this as any).os.new(MkReactionPicker, { + source: this.$refs.reactButton, + post: this.p, + compact: true + }); }, menu() { - document.body.appendChild(new MkPostMenu({ - propsData: { - source: this.$refs.menuButton, - post: this.p, - compact: true - } - }).$mount().$el); + (this as any).os.new(MkPostMenu, { + source: this.$refs.menuButton, + post: this.p, + compact: true + }); } } }); diff --git a/src/web/app/mobile/views/components/ui.vue b/src/web/app/mobile/views/components/ui.vue index 1e34c84e62..54b8a2d0d3 100644 --- a/src/web/app/mobile/views/components/ui.vue +++ b/src/web/app/mobile/views/components/ui.vue @@ -53,11 +53,9 @@ export default Vue.extend({ id: notification.id }); - document.body.appendChild(new MkNotify({ - propsData: { - notification - } - }).$mount().$el); + (this as any).os.new(MkNotify, { + notification + }); } } });