0
0
switched/src/client/app/init.ts

495 lines
9.6 KiB
TypeScript
Raw Normal View History

2017-05-18 05:06:55 +09:00
/**
* App initializer
*/
2018-02-09 13:32:41 +09:00
import Vue from 'vue';
2018-04-29 18:16:02 +09:00
import Vuex from 'vuex';
2018-02-09 13:32:41 +09:00
import VueRouter from 'vue-router';
2018-03-10 13:22:20 +09:00
import VAnimateCss from 'v-animate-css';
2018-09-01 20:47:49 +09:00
import VModal from 'vue-js-modal';
import VueI18n from 'vue-i18n';
2018-12-16 11:32:20 +09:00
import SequentialEntrance from 'vue-sequential-entrance';
2018-03-03 14:25:36 +09:00
2018-09-26 19:14:11 +09:00
import VueHotkey from './common/hotkey';
2019-02-16 08:51:35 +09:00
import VueSize from './common/size';
2018-03-03 14:25:36 +09:00
import App from './app.vue';
import checkForUpdate from './common/scripts/check-for-update';
import MiOS from './mios';
2019-02-18 04:52:40 +09:00
import { version, codename, lang, locale } from './config';
2018-10-02 16:04:31 +09:00
import { builtinThemes, lightTheme, applyTheme } from './theme';
2018-12-02 15:28:52 +09:00
import Dialog from './common/views/components/dialog.vue';
2018-09-26 19:14:11 +09:00
if (localStorage.getItem('theme') == null) {
2018-09-29 00:01:11 +09:00
applyTheme(lightTheme);
2018-09-26 19:14:11 +09:00
}
2018-03-03 14:25:36 +09:00
//#region FontAwesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import {
faRetweet,
faPlus,
faUser,
faCog,
faCheck,
faStar,
faReply,
faEllipsisH,
faQuoteLeft,
faQuoteRight,
faAngleUp,
faAngleDown,
faAt,
faHashtag,
faHome,
faGlobe,
faCircle,
faList,
faHeart,
faUnlock,
faRssSquare,
faSort,
faChartPie,
faChartBar,
faPencilAlt,
faColumns,
faComments,
faGamepad,
faCloud,
faPowerOff,
faChevronCircleLeft,
faChevronCircleRight,
faShareAlt,
faTimes,
faThumbtack,
faSearch,
faAngleRight,
faWrench,
faTerminal,
faMoon,
faPalette,
faSlidersH,
faDesktop,
faVolumeUp,
faLanguage,
faInfoCircle,
faExclamationTriangle,
faKey,
faBan,
faCogs,
faUnlockAlt,
faPuzzlePiece,
faMobileAlt,
faSignInAlt,
faSyncAlt,
faPaperPlane,
faUpload,
faMapMarkerAlt,
faEnvelope,
faLock,
faFolderOpen,
faBirthdayCake,
faImage,
faEye,
faDownload,
faFileImport,
faLink,
faArrowRight,
faICursor,
faCaretRight,
faReplyAll,
faCamera,
faMinus,
faCaretDown,
faCalculator,
faUsers,
faBars,
faFileImage,
faPollH,
faFolder,
faMicrochip,
faMemory,
faServer,
faExclamationCircle,
2018-11-13 22:45:28 +09:00
faSpinner,
2018-11-14 14:57:59 +09:00
faBroadcastTower,
faChartLine,
2018-11-14 18:03:38 +09:00
faEllipsisV,
2018-11-14 18:07:38 +09:00
faStickyNote,
faUserClock,
2018-11-15 01:43:26 +09:00
faUserPlus,
2018-11-15 03:14:52 +09:00
faExternalLinkSquareAlt,
2018-11-15 03:17:48 +09:00
faSync,
faArrowLeft,
faMapMarker,
faRobot,
2018-12-21 02:30:49 +09:00
faHourglassHalf,
faGavel
} from '@fortawesome/free-solid-svg-icons';
import {
faBell as farBell,
faEnvelope as farEnvelope,
faComments as farComments,
faTrashAlt as farTrashAlt,
faWindowRestore as farWindowRestore,
faFolder as farFolder,
faLaugh as farLaugh,
faSmile as farSmile,
faEyeSlash as farEyeSlash,
faFolderOpen as farFolderOpen,
faSave as farSave,
faImages as farImages,
faChartBar as farChartBar,
faCommentAlt as farCommentAlt,
faClock as farClock,
faCalendarAlt as farCalendarAlt,
faHdd as farHdd,
2018-11-16 05:38:16 +09:00
faMoon as farMoon,
faPlayCircle as farPlayCircle,
2018-12-02 03:43:05 +09:00
faLightbulb as farLightbulb,
faStickyNote as farStickyNote,
} from '@fortawesome/free-regular-svg-icons';
2018-11-14 01:45:15 +09:00
import {
faTwitter as fabTwitter,
faGithub as fabGithub,
faDiscord as fabDiscord
2018-11-14 01:45:15 +09:00
} from '@fortawesome/free-brands-svg-icons';
2018-11-14 03:05:13 +09:00
import i18n from './i18n';
2018-11-14 01:45:15 +09:00
library.add(
faRetweet,
faPlus,
faUser,
faCog,
faCheck,
faStar,
faReply,
faEllipsisH,
faQuoteLeft,
faQuoteRight,
faAngleUp,
faAngleDown,
faAt,
faHashtag,
faHome,
faGlobe,
faCircle,
faList,
faHeart,
faUnlock,
faRssSquare,
faSort,
faChartPie,
faChartBar,
faPencilAlt,
faColumns,
faComments,
faGamepad,
faCloud,
faPowerOff,
faChevronCircleLeft,
faChevronCircleRight,
faShareAlt,
faTimes,
faThumbtack,
faSearch,
faAngleRight,
faWrench,
faTerminal,
faMoon,
faPalette,
faSlidersH,
faDesktop,
faVolumeUp,
faLanguage,
faInfoCircle,
faExclamationTriangle,
faKey,
faBan,
faCogs,
faUnlockAlt,
faPuzzlePiece,
faMobileAlt,
faSignInAlt,
faSyncAlt,
faPaperPlane,
faUpload,
faMapMarkerAlt,
faEnvelope,
faLock,
faFolderOpen,
faBirthdayCake,
faImage,
faEye,
faDownload,
faFileImport,
faLink,
faArrowRight,
faICursor,
faCaretRight,
faReplyAll,
faCamera,
faMinus,
faCaretDown,
faCalculator,
faUsers,
faBars,
faFileImage,
faPollH,
faFolder,
faMicrochip,
faMemory,
faServer,
faExclamationCircle,
2018-11-13 22:45:28 +09:00
faSpinner,
2018-11-14 02:04:24 +09:00
faBroadcastTower,
2018-11-14 14:57:59 +09:00
faChartLine,
2018-11-14 18:03:38 +09:00
faEllipsisV,
2018-11-14 18:07:38 +09:00
faStickyNote,
faUserClock,
2018-11-15 01:43:26 +09:00
faUserPlus,
2018-11-15 03:14:52 +09:00
faExternalLinkSquareAlt,
2018-11-15 03:17:48 +09:00
faSync,
faArrowLeft,
faMapMarker,
2018-12-02 03:43:05 +09:00
faRobot,
2018-12-21 02:30:49 +09:00
faHourglassHalf,
faGavel,
farBell,
farEnvelope,
farComments,
farTrashAlt,
farWindowRestore,
farFolder,
farLaugh,
farSmile,
farEyeSlash,
farFolderOpen,
farSave,
farImages,
farChartBar,
farCommentAlt,
farClock,
farCalendarAlt,
farHdd,
2018-11-16 05:38:16 +09:00
farMoon,
farPlayCircle,
2018-12-02 03:43:05 +09:00
farLightbulb,
farStickyNote,
2018-11-14 01:45:15 +09:00
fabTwitter,
fabGithub,
fabDiscord
);
//#endregion
Vue.use(Vuex);
2018-02-09 13:32:41 +09:00
Vue.use(VueRouter);
2018-03-10 13:22:20 +09:00
Vue.use(VAnimateCss);
2018-09-01 20:47:49 +09:00
Vue.use(VModal);
Vue.use(VueHotkey);
2019-02-16 08:51:35 +09:00
Vue.use(VueSize);
Vue.use(VueI18n);
2018-12-16 11:32:20 +09:00
Vue.use(SequentialEntrance);
2018-02-09 13:32:41 +09:00
Vue.component('fa', FontAwesomeIcon);
2018-02-12 00:17:51 +09:00
// Register global directives
require('./common/views/directives');
// Register global components
require('./common/views/components');
2018-02-25 00:18:09 +09:00
require('./common/views/widgets');
2018-02-12 00:17:51 +09:00
2018-02-20 07:56:39 +09:00
// Register global filters
2018-02-27 02:36:19 +09:00
require('./common/views/filters');
2018-02-20 07:56:39 +09:00
2018-02-17 03:53:21 +09:00
Vue.mixin({
2018-09-15 21:53:04 +09:00
methods: {
destroyDom() {
this.$destroy();
if (this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
2018-02-17 18:14:23 +09:00
}
2018-02-17 03:53:21 +09:00
}
});
2017-05-18 05:06:55 +09:00
/**
* APP ENTRY POINT!
*/
2018-03-29 14:48:47 +09:00
console.info(`Misskey v${version} (${codename})`);
2018-02-24 10:34:36 +09:00
console.info(
`%c${locale['common']['do-not-copy-paste']}`,
2018-03-06 14:32:15 +09:00
'color: red; background: yellow; font-size: 16px; font-weight: bold;');
2017-05-18 05:06:55 +09:00
2017-11-28 15:05:55 +09:00
// BootTimer解除
window.clearTimeout((window as any).mkBootTimer);
delete (window as any).mkBootTimer;
2018-02-09 18:28:06 +09:00
//#region Set lang attr
const html = document.documentElement;
2018-02-25 00:18:09 +09:00
html.setAttribute('lang', lang);
2018-02-09 18:28:06 +09:00
//#endregion
2017-05-18 05:06:55 +09:00
// iOSでプライベートモードだとlocalStorageが使えないので既存のメソッドを上書きする
try {
localStorage.setItem('kyoppie', 'yuppie');
} catch (e) {
Storage.prototype.setItem = () => { }; // noop
}
// クライアントを更新すべきならする
if (localStorage.getItem('should-refresh') == 'true') {
localStorage.removeItem('should-refresh');
location.reload(true);
}
2017-11-16 03:06:52 +09:00
// MiOSを初期化してコールバックする
export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS) => void, sw = false) => {
2018-02-18 12:35:18 +09:00
const os = new MiOS(sw);
2017-06-07 00:04:28 +09:00
2018-02-18 12:35:18 +09:00
os.init(() => {
2017-05-18 05:06:55 +09:00
// アプリ基底要素マウント
2018-02-10 10:52:26 +09:00
document.body.innerHTML = '<div id="app"></div>';
2018-02-09 18:57:42 +09:00
const launch = (router: VueRouter) => {
2018-09-29 00:01:11 +09:00
//#region theme
os.store.watch(s => {
return s.device.darkmode;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
2018-10-02 16:04:31 +09:00
const dark = themes.find(t => t.id == os.store.state.device.darkTheme);
const light = themes.find(t => t.id == os.store.state.device.lightTheme);
2018-09-29 00:01:11 +09:00
applyTheme(v ? dark : light);
});
os.store.watch(s => {
return s.device.lightTheme;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
2018-10-02 16:04:31 +09:00
const theme = themes.find(t => t.id == v);
2018-09-29 00:01:11 +09:00
if (!os.store.state.device.darkmode) {
applyTheme(theme);
}
});
os.store.watch(s => {
return s.device.darkTheme;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
2018-10-02 16:04:31 +09:00
const theme = themes.find(t => t.id == v);
2018-09-29 00:01:11 +09:00
if (os.store.state.device.darkmode) {
applyTheme(theme);
}
});
//#endregion
/*// Reapply current theme
try {
const themeName = os.store.state.device.darkmode ? os.store.state.device.darkTheme : os.store.state.device.lightTheme;
const themes = os.store.state.device.themes.concat(builtinThemes);
const theme = themes.find(t => t.id == themeName);
if (theme) {
applyTheme(theme);
}
} catch (e) {
console.log(`Cannot reapply theme. ${e}`);
}*/
2018-12-30 14:00:57 +09:00
//#region line width
document.documentElement.style.setProperty('--lineWidth', `${os.store.state.device.lineWidth}px`);
2018-12-30 14:00:57 +09:00
os.store.watch(s => {
return s.device.lineWidth;
2018-12-30 14:00:57 +09:00
}, v => {
document.documentElement.style.setProperty('--lineWidth', `${os.store.state.device.lineWidth}px`);
2018-12-30 14:00:57 +09:00
});
//#endregion
//#region fontSize
document.documentElement.style.setProperty('--fontSize', `${os.store.state.device.fontSize}px`);
os.store.watch(s => {
return s.device.fontSize;
}, v => {
document.documentElement.style.setProperty('--fontSize', `${os.store.state.device.fontSize}px`);
});
//#endregion
2018-10-19 14:34:51 +09:00
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
os.store.commit('clearBehindNotes');
}
}, false);
2018-10-22 18:23:20 +09:00
window.addEventListener('scroll', () => {
if (window.scrollY <= 8) {
os.store.commit('clearBehindNotes');
}
}, { passive: true });
2018-02-23 07:50:42 +09:00
const app = new Vue({
2018-11-14 03:05:13 +09:00
i18n: i18n(),
2018-04-29 17:17:15 +09:00
store: os.store,
2018-11-09 08:13:34 +09:00
data() {
return {
os: {
windows: os.windows
},
stream: os.stream,
2018-11-09 08:26:32 +09:00
instanceName: os.instanceName
2018-11-09 08:13:34 +09:00
};
},
methods: {
api: os.api,
getMeta: os.getMeta,
getMetaSync: os.getMetaSync,
2018-11-09 18:25:21 +09:00
signout: os.signout,
new(vm, props) {
const x = new vm({
parent: this,
propsData: props
}).$mount();
document.body.appendChild(x.$el);
return x;
},
2018-12-02 15:28:52 +09:00
dialog(opts) {
2018-12-03 20:26:46 +09:00
const vm = this.new(Dialog, opts);
2018-11-14 16:30:58 +09:00
return new Promise((res) => {
2018-12-02 20:10:53 +09:00
vm.$once('ok', result => res({ canceled: false, result }));
vm.$once('cancel', () => res({ canceled: true }));
2018-11-14 16:30:58 +09:00
});
}
2018-11-09 08:13:34 +09:00
},
2018-03-27 14:13:12 +09:00
router,
2018-02-23 07:50:42 +09:00
render: createEl => createEl(App)
});
os.app = app;
2018-02-22 23:53:07 +09:00
// マウント
app.$mount('#app');
2018-02-21 02:53:34 +09:00
//#region 更新チェック
setTimeout(() => {
checkForUpdate(app);
}, 3000);
//#endregion
2018-02-21 02:53:34 +09:00
return [app, os] as [Vue, MiOS];
2018-02-10 14:56:33 +09:00
};
2017-05-18 05:06:55 +09:00
// Deck mode
os.store.commit('device/set', {
key: 'inDeckMode',
value: os.store.getters.isSignedIn && os.store.state.device.deckMode
&& (document.location.pathname === '/' || window.performance.navigation.type === 1)
});
callback(launch, os);
2017-05-18 05:06:55 +09:00
});
2017-11-16 03:06:52 +09:00
};