Sharkey/src/client/app/desktop/script.ts

270 lines
12 KiB
TypeScript
Raw Normal View History

2016-12-29 00:49:51 +02:00
/**
* Desktop Client
*/
import Vue from 'vue';
2018-03-27 08:13:12 +03:00
import VueRouter from 'vue-router';
2017-02-19 05:31:23 +02:00
// Style
2017-02-19 08:36:53 +02:00
import './style.styl';
2017-02-19 05:31:23 +02:00
2017-05-17 23:06:55 +03:00
import init from '../init';
2018-02-20 19:53:34 +02:00
import fuckAdBlock from '../common/scripts/fuck-ad-block';
2017-11-20 22:09:45 +02:00
import composeNotification from '../common/scripts/compose-notification';
2016-12-29 00:49:51 +02:00
import MkHome from './views/home/home.vue';
2018-02-20 16:37:35 +02:00
import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue';
2018-02-22 14:15:24 +02:00
import MkMessagingRoom from './views/pages/messaging-room.vue';
2018-08-03 16:34:58 +03:00
import MkReversi from './views/pages/games/reversi.vue';
2019-03-12 06:02:16 +02:00
import MkShare from '../common/views/pages/share.vue';
import MkFollow from '../common/views/pages/follow.vue';
2018-12-27 13:22:54 +02:00
import MkNotFound from '../common/views/pages/not-found.vue';
import MkSettings from './views/pages/settings.vue';
2019-05-18 14:36:33 +03:00
import DeckColumn from '../common/views/deck/deck.column-template.vue';
import Ctx from './views/components/context-menu.vue';
import RenoteFormWindow from './views/components/renote-form-window.vue';
import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue';
import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue';
import MkHomeTimeline from './views/home/timeline.vue';
import Notification from './views/components/ui-notification.vue';
import { url } from '../config';
import MiOS from '../mios';
2018-02-10 03:27:05 +02:00
2016-12-29 00:49:51 +02:00
/**
2017-05-17 23:06:55 +03:00
* init
2016-12-29 00:49:51 +02:00
*/
init(async (launch, os) => {
Vue.mixin({
methods: {
$contextmenu(e, menu, opts?) {
const o = opts || {};
const vm = this.$root.new(Ctx, {
menu,
x: e.pageX - window.pageXOffset,
y: e.pageY - window.pageYOffset,
});
vm.$once('closed', () => {
if (o.closed) o.closed();
});
},
$post(opts) {
const o = opts || {};
if (o.renote) {
const vm = this.$root.new(RenoteFormWindow, {
note: o.renote,
animation: o.animation == null ? true : o.animation
});
if (o.cb) vm.$once('closed', o.cb);
} else {
2019-05-20 22:26:14 +03:00
this.$root.newAsync(() => import('./views/components/post-form-window.vue').then(m => m.default), {
reply: o.reply,
2018-12-27 16:14:30 +02:00
mention: o.mention,
animation: o.animation == null ? true : o.animation
2019-05-20 22:21:43 +03:00
}).then(vm => {
if (o.cb) vm.$once('closed', o.cb);
});
}
},
$chooseDriveFile(opts) {
return new Promise((res, rej) => {
const o = opts || {};
if (document.body.clientWidth > 800) {
const w = this.$root.new(MkChooseFileFromDriveWindow, {
title: o.title,
multiple: o.multiple,
initFolder: o.currentFolder
});
w.$once('selected', file => {
res(file);
});
} else {
window['cb'] = file => {
res(file);
};
window.open(url + `/selectdrive?multiple=${o.multiple}`,
'choose_drive_window',
'height=500, width=800');
}
});
},
$chooseDriveFolder(opts) {
return new Promise((res, rej) => {
const o = opts || {};
const w = this.$root.new(MkChooseFolderFromDriveWindow, {
title: o.title,
initFolder: o.currentFolder
});
w.$once('selected', folder => {
res(folder);
});
});
},
$notify(message) {
this.$root.new(Notification, {
message
});
}
}
});
2018-02-16 19:24:10 +02:00
// Register directives
require('./views/directives');
2018-02-11 05:08:43 +02:00
// Register components
require('./views/components');
2018-02-24 17:18:09 +02:00
require('./views/widgets');
2018-02-11 05:08:43 +02:00
2018-03-27 08:13:12 +03:00
// Init router
const router = new VueRouter({
mode: 'history',
routes: [
os.store.state.device.inDeckMode
2019-05-20 22:21:43 +03:00
? { path: '/', name: 'index', component: () => import('../common/views/deck/deck.vue').then(m => m.default), children: [
{ path: '/@:user', component: () => import('../common/views/deck/deck.user-column.vue').then(m => m.default), children: [
{ path: '', name: 'user', component: () => import('../common/views/deck/deck.user-column.home.vue').then(m => m.default) },
2019-02-16 03:58:44 +02:00
{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
{ path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) },
]},
{ path: '/notes/:note', name: 'note', component: () => import('../common/views/deck/deck.note-column.vue').then(m => m.default) },
{ path: '/search', component: () => import('../common/views/deck/deck.search-column.vue').then(m => m.default) },
{ path: '/tags/:tag', name: 'tag', component: () => import('../common/views/deck/deck.hashtag-column.vue').then(m => m.default) },
2019-05-20 21:07:11 +03:00
{ path: '/featured', name: 'featured', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/featured.vue').then(m => m.default), platform: 'deck' }) },
2019-05-18 14:36:33 +03:00
{ path: '/explore', name: 'explore', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default) }) },
{ path: '/explore/tags/:tag', name: 'explore-tag', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default), tag: route.params.tag }) },
2019-05-20 21:07:11 +03:00
{ path: '/i/favorites', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/favorites.vue').then(m => m.default), platform: 'deck' }) },
2019-05-18 14:36:33 +03:00
{ path: '/i/pages', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/pages.vue').then(m => m.default) }) },
{ path: '/i/lists', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) }) },
{ path: '/i/lists/:listId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default), listId: route.params.listId }) },
{ path: '/i/groups', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) },
{ path: '/i/groups/:groupId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.groupId }) },
{ path: '/i/follow-requests', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }) },
]}
: { path: '/', component: MkHome, children: [
{ path: '', name: 'index', component: MkHomeTimeline },
2019-02-16 03:58:44 +02:00
{ path: '/@:user', component: () => import('./views/home/user/index.vue').then(m => m.default), children: [
{ path: '', name: 'user', component: () => import('./views/home/user/user.home.vue').then(m => m.default) },
{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
{ path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) },
]},
{ path: '/notes/:note', name: 'note', component: () => import('./views/home/note.vue').then(m => m.default) },
{ path: '/search', component: () => import('./views/home/search.vue').then(m => m.default) },
{ path: '/tags/:tag', name: 'tag', component: () => import('./views/home/tag.vue').then(m => m.default) },
2019-05-20 21:07:11 +03:00
{ path: '/featured', name: 'featured', component: () => import('../common/views/pages/featured.vue').then(m => m.default), props: { platform: 'desktop' } },
2019-02-16 10:41:54 +02:00
{ path: '/explore', name: 'explore', component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
2019-02-18 04:20:20 +02:00
{ path: '/explore/tags/:tag', name: 'explore-tag', props: true, component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
2019-05-20 21:07:11 +03:00
{ path: '/i/favorites', component: () => import('../common/views/pages/favorites.vue').then(m => m.default), props: { platform: 'desktop' } },
{ path: '/i/pages', component: () => import('../common/views/pages/pages.vue').then(m => m.default) },
2019-05-18 14:36:33 +03:00
{ path: '/i/lists', component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) },
{ path: '/i/lists/:listId', props: true, component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default) },
{ path: '/i/groups', component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) },
{ path: '/i/groups/:groupId', props: true, component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default) },
{ path: '/i/follow-requests', component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) },
2019-05-24 13:19:43 +03:00
{ path: '/i/pages/new', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default) },
{ path: '/i/pages/edit/:pageId', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initPageId: route.params.pageId }) },
{ path: '/@:user/pages/:page', component: () => import('../common/views/pages/page/page.vue').then(m => m.default), props: route => ({ pageName: route.params.page, username: route.params.user }) },
{ path: '/@:user/pages/:pageName/view-source', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
]},
2019-05-24 13:33:58 +03:00
{ path: '/i/pages/new', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default) },
{ path: '/i/pages/edit/:pageId', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initPageId: route.params.pageId }) },
{ path: '/@:user/pages/:page', component: () => import('../common/views/pages/page/page.vue').then(m => m.default), props: route => ({ pageName: route.params.page, username: route.params.user }) },
{ path: '/@:user/pages/:pageName/view-source', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
2019-05-18 14:36:33 +03:00
{ path: '/i/messaging/group/:group', component: MkMessagingRoom },
2018-03-27 10:51:12 +03:00
{ path: '/i/messaging/:user', component: MkMessagingRoom },
2018-03-27 08:13:12 +03:00
{ path: '/i/drive', component: MkDrive },
{ path: '/i/drive/folder/:folder', component: MkDrive },
{ path: '/i/settings', component: MkSettings },
2018-03-27 08:13:12 +03:00
{ path: '/selectdrive', component: MkSelectDrive },
2018-06-16 12:42:49 +03:00
{ path: '/share', component: MkShare },
2019-01-20 12:10:19 +02:00
{ path: '/games/reversi/:game?', component: MkReversi },
{ path: '/authorize-follow', component: MkFollow },
2019-02-15 01:32:18 +02:00
{ path: '/deck', redirect: '/' },
{ path: '*', component: MkNotFound }
2019-02-15 08:35:52 +02:00
],
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 };
}
2018-03-27 08:13:12 +03:00
});
2018-02-21 19:00:30 +02:00
// Launch the app
const [app, _] = launch(router);
2018-02-20 19:53:34 +02:00
if (os.store.getters.isSignedIn) {
/**
* Fuck AD Block
*/
fuckAdBlock(app);
}
2018-02-11 05:08:43 +02:00
2016-12-29 00:49:51 +02:00
/**
* Init Notification
*/
2018-08-25 02:39:12 +03:00
if ('Notification' in window && os.store.getters.isSignedIn) {
2016-12-29 00:49:51 +02:00
// 許可を得ていなかったらリクエスト
2017-11-13 11:05:35 +02:00
if ((Notification as any).permission == 'default') {
2017-06-06 18:04:28 +03:00
await Notification.requestPermission();
}
2017-11-13 11:05:35 +02:00
if ((Notification as any).permission == 'granted') {
registerNotifications(os);
2016-12-29 00:49:51 +02:00
}
}
2017-11-21 03:01:00 +02:00
}, true);
2017-06-06 18:04:28 +03:00
function registerNotifications(os: MiOS) {
const stream = os.stream;
2017-06-07 09:19:28 +03:00
if (stream == null) return;
const connection = stream.useSharedConnection('main');
2017-11-16 18:24:44 +02:00
connection.on('notification', notification => {
const _n = composeNotification('notification', notification);
const n = new Notification(_n.title, {
body: _n.body,
icon: _n.icon
2017-06-06 18:04:28 +03:00
});
setTimeout(n.close.bind(n), 6000);
});
connection.on('driveFileCreated', file => {
const _n = composeNotification('driveFileCreated', file);
const n = new Notification(_n.title, {
body: _n.body,
icon: _n.icon
});
setTimeout(n.close.bind(n), 5000);
});
2017-11-16 18:24:44 +02:00
connection.on('unreadMessagingMessage', message => {
const _n = composeNotification('unreadMessagingMessage', message);
const n = new Notification(_n.title, {
body: _n.body,
icon: _n.icon
2017-11-16 18:24:44 +02:00
});
n.onclick = () => {
n.close();
/*(riot as any).mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
user: message.user
});*/
};
setTimeout(n.close.bind(n), 7000);
});
2018-03-17 10:53:35 +02:00
connection.on('reversiInvited', matching => {
const _n = composeNotification('reversiInvited', matching);
const n = new Notification(_n.title, {
body: _n.body,
icon: _n.icon
2018-03-17 10:53:35 +02:00
});
});
2017-06-06 18:04:28 +03:00
}