Sharkey/src/client/app/init.ts

486 lines
9.5 KiB
TypeScript
Raw Normal View History

2017-05-17 23:06:55 +03:00
/**
* App initializer
*/
2018-02-09 06:32:41 +02:00
import Vue from 'vue';
2018-04-29 12:16:02 +03:00
import Vuex from 'vuex';
2018-02-09 06:32:41 +02:00
import VueRouter from 'vue-router';
2018-03-10 06:22:20 +02:00
import VAnimateCss from 'v-animate-css';
2018-09-01 14:47:49 +03:00
import VModal from 'vue-js-modal';
import VueI18n from 'vue-i18n';
2018-03-03 07:25:36 +02:00
2018-09-26 13:14:11 +03:00
import VueHotkey from './common/hotkey';
2018-03-03 07:25:36 +02:00
import App from './app.vue';
import checkForUpdate from './common/scripts/check-for-update';
import MiOS from './mios';
import { clientVersion as version, codename, lang } from './config';
2018-10-02 10:04:31 +03:00
import { builtinThemes, lightTheme, applyTheme } from './theme';
2018-11-14 09:30:58 +02:00
import Alert from './common/views/components/alert.vue';
2018-09-26 13:14:11 +03:00
if (localStorage.getItem('theme') == null) {
2018-09-28 18:01:11 +03:00
applyTheme(lightTheme);
2018-09-26 13:14:11 +03:00
}
2018-03-03 07:25:36 +02: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 15:45:28 +02:00
faSpinner,
2018-11-14 07:57:59 +02:00
faBroadcastTower,
faChartLine,
2018-11-14 11:03:38 +02:00
faEllipsisV,
2018-11-14 11:07:38 +02:00
faStickyNote,
faUserClock,
2018-11-14 18:43:26 +02:00
faUserPlus,
2018-11-14 20:14:52 +02:00
faExternalLinkSquareAlt,
2018-11-14 20:17:48 +02:00
faSync,
faArrowLeft,
faMapMarker,
faRobot,
} 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-15 22:38:16 +02:00
faMoon as farMoon,
} from '@fortawesome/free-regular-svg-icons';
2018-11-13 18:45:15 +02:00
import {
faTwitter as fabTwitter,
faGithub as fabGithub,
faDiscord as fabDiscord
2018-11-13 18:45:15 +02:00
} from '@fortawesome/free-brands-svg-icons';
2018-11-13 20:05:13 +02:00
import i18n from './i18n';
2018-11-13 18:45:15 +02: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 15:45:28 +02:00
faSpinner,
2018-11-13 19:04:24 +02:00
faBroadcastTower,
2018-11-14 07:57:59 +02:00
faChartLine,
2018-11-14 11:03:38 +02:00
faEllipsisV,
2018-11-14 11:07:38 +02:00
faStickyNote,
faUserClock,
2018-11-14 18:43:26 +02:00
faUserPlus,
2018-11-14 20:14:52 +02:00
faExternalLinkSquareAlt,
2018-11-14 20:17:48 +02:00
faSync,
faArrowLeft,
faMapMarker,
faRobot,
farBell,
farEnvelope,
farComments,
farTrashAlt,
farWindowRestore,
farFolder,
farLaugh,
farSmile,
farEyeSlash,
farFolderOpen,
farSave,
farImages,
farChartBar,
farCommentAlt,
farClock,
farCalendarAlt,
farHdd,
2018-11-15 22:38:16 +02:00
farMoon,
2018-11-13 18:45:15 +02:00
fabTwitter,
fabGithub,
fabDiscord
);
//#endregion
Vue.use(Vuex);
2018-02-09 06:32:41 +02:00
Vue.use(VueRouter);
2018-03-10 06:22:20 +02:00
Vue.use(VAnimateCss);
2018-09-01 14:47:49 +03:00
Vue.use(VModal);
Vue.use(VueHotkey);
Vue.use(VueI18n);
2018-02-09 06:32:41 +02:00
Vue.component('fa', FontAwesomeIcon);
2018-02-11 17:17:51 +02:00
// Register global directives
require('./common/views/directives');
// Register global components
require('./common/views/components');
2018-02-24 17:18:09 +02:00
require('./common/views/widgets');
2018-02-11 17:17:51 +02:00
2018-02-20 00:56:39 +02:00
// Register global filters
2018-02-26 19:36:19 +02:00
require('./common/views/filters');
2018-02-20 00:56:39 +02:00
2018-02-16 20:53:21 +02:00
Vue.mixin({
2018-09-15 15:53:04 +03:00
methods: {
destroyDom() {
this.$destroy();
if (this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
2018-02-17 11:14:23 +02:00
}
2018-02-16 20:53:21 +02:00
}
});
2017-05-17 23:06:55 +03:00
/**
* APP ENTRY POINT!
*/
2018-03-29 08:48:47 +03:00
console.info(`Misskey v${version} (${codename})`);
2018-02-24 03:34:36 +02:00
console.info(
'%c%i18n:common.do-not-copy-paste%',
2018-03-06 07:32:15 +02:00
'color: red; background: yellow; font-size: 16px; font-weight: bold;');
2017-05-17 23:06:55 +03:00
2017-11-28 08:05:55 +02:00
// BootTimer解除
window.clearTimeout((window as any).mkBootTimer);
delete (window as any).mkBootTimer;
2018-02-09 11:28:06 +02:00
//#region Set lang attr
const html = document.documentElement;
2018-02-24 17:18:09 +02:00
html.setAttribute('lang', lang);
2018-02-09 11:28:06 +02:00
//#endregion
2017-05-17 23:06:55 +03: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-15 20:06:52 +02:00
// MiOSを初期化してコールバックする
export default (callback: (launch: (router: VueRouter) => [Vue, MiOS]) => void, sw = false) => {
2018-02-18 05:35:18 +02:00
const os = new MiOS(sw);
2017-06-06 18:04:28 +03:00
2018-02-18 05:35:18 +02:00
os.init(() => {
2017-05-17 23:06:55 +03:00
// アプリ基底要素マウント
2018-02-10 03:52:26 +02:00
document.body.innerHTML = '<div id="app"></div>';
2018-02-09 11:57:42 +02:00
const launch = (router: VueRouter) => {
2018-09-28 18:01:11 +03:00
//#region theme
os.store.watch(s => {
return s.device.darkmode;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
2018-10-02 10:04:31 +03: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-28 18:01:11 +03: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 10:04:31 +03:00
const theme = themes.find(t => t.id == v);
2018-09-28 18:01:11 +03: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 10:04:31 +03:00
const theme = themes.find(t => t.id == v);
2018-09-28 18:01:11 +03:00
if (os.store.state.device.darkmode) {
applyTheme(theme);
}
});
//#endregion
2018-09-22 14:39:12 +03:00
//#region shadow
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
2018-10-14 23:18:39 +03:00
const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)';
2018-10-14 23:28:35 +03:00
const shadowLeft = '-4px 0 4px rgba(0, 0, 0, 0.1)';
2018-09-22 14:39:12 +03:00
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
2018-10-14 23:18:39 +03:00
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadowRight', shadowRight);
2018-10-14 23:28:35 +03:00
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadowLeft', shadowLeft);
2018-09-22 14:39:12 +03:00
os.store.watch(s => {
return s.settings.useShadow;
}, v => {
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
2018-10-14 23:18:39 +03:00
document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
2018-10-14 23:28:35 +03:00
document.documentElement.style.setProperty('--shadowLeft', v ? shadowLeft : 'none');
2018-09-22 14:39:12 +03:00
});
//#endregion
//#region rounded corners
const round = '6px';
if (os.store.state.settings.roundedCorners) document.documentElement.style.setProperty('--round', round);
os.store.watch(s => {
return s.settings.roundedCorners;
}, v => {
document.documentElement.style.setProperty('--round', v ? round : '0');
});
//#endregion
// Navigation hook
router.beforeEach((to, from, next) => {
if (os.store.state.navHook) {
if (os.store.state.navHook(to)) {
next(false);
} else {
next();
}
} else {
next();
}
});
2018-10-19 08:34:51 +03:00
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
os.store.commit('clearBehindNotes');
}
}, false);
2018-10-22 12:23:20 +03:00
window.addEventListener('scroll', () => {
if (window.scrollY <= 8) {
os.store.commit('clearBehindNotes');
}
}, { passive: true });
2018-02-23 00:50:42 +02:00
const app = new Vue({
2018-11-13 20:05:13 +02:00
i18n: i18n(),
2018-04-29 11:17:15 +03:00
store: os.store,
2018-11-09 01:13:34 +02:00
data() {
return {
os: {
windows: os.windows
},
stream: os.stream,
2018-11-09 01:26:32 +02:00
instanceName: os.instanceName
2018-11-09 01:13:34 +02:00
};
},
methods: {
api: os.api,
getMeta: os.getMeta,
getMetaSync: os.getMetaSync,
2018-11-09 11:25:21 +02:00
signout: os.signout,
new(vm, props) {
const x = new vm({
parent: this,
propsData: props
}).$mount();
document.body.appendChild(x.$el);
return x;
},
2018-11-14 09:30:58 +02:00
alert(opts) {
return new Promise((res) => {
const vm = this.new(Alert, opts);
vm.$once('ok', () => res(true));
vm.$once('cancel', () => res(false));
});
}
2018-11-09 01:13:34 +02:00
},
2018-03-27 08:13:12 +03:00
router,
2018-02-23 00:50:42 +02:00
render: createEl => createEl(App)
});
os.app = app;
2018-02-22 16:53:07 +02:00
// マウント
app.$mount('#app');
2018-02-20 19:53:34 +02:00
//#region 更新チェック
const preventUpdate = os.store.state.device.preventUpdate;
if (!preventUpdate) {
setTimeout(() => {
checkForUpdate(app);
}, 3000);
}
//#endregion
2018-02-20 19:53:34 +02:00
return [app, os] as [Vue, MiOS];
2018-02-10 07:56:33 +02:00
};
2017-05-17 23:06:55 +03:00
2018-11-09 01:13:34 +02:00
callback(launch);
2017-05-17 23:06:55 +03:00
});
2017-11-15 20:06:52 +02:00
};