traxxx/assets/js/main.js

150 lines
2.9 KiB
JavaScript

import config from 'config';
import { createApp } from 'vue';
import dayjs from 'dayjs';
import mitt from 'mitt';
import tippy from 'tippy.js';
import router from './router';
import initStore from './store';
import initUiObservers from './ui/observers';
import initAuthObservers from './auth/observers';
import { formatDate, formatDuration } from './format';
import '../css/style.scss';
import 'tippy.js/dist/tippy.css';
import Container from '../components/container/container.vue';
import Icon from '../components/icon/icon.vue';
import Footer from '../components/footer/footer.vue';
import Tooltip from '../components/tooltip/tooltip.vue';
import Dialog from '../components/dialog/dialog.vue';
async function init() {
let uid = 0;
const store = initStore(router);
const app = createApp(Container);
const events = mitt();
function getBasePath(media, type, options) {
if (store.state.ui.sfw) {
return config.media.assetPath;
}
if (media.isS3) {
return config.media.s3Path;
}
if (options?.local) {
return config.media.assetPath;
}
return config.media.mediaPath;
}
function getFilename(media, type, options) {
if (store.state.ui.sfw && type && !options?.original) {
return media.sfw[type];
}
if (store.state.ui.sfw) {
return media.sfw.path;
}
if (type && !options?.original) {
return media[type];
}
return media.path;
}
function getPath(media, type, options) {
if (!media) {
return null;
}
const path = getBasePath(media, type, options);
const filename = getFilename(media, type, options);
return `${path}/${filename}`;
}
await initAuthObservers(store, router);
await initUiObservers(store, router);
if (window.env.sfw) {
store.dispatch('setSfw', true);
}
app.use(store);
app.use(router);
await router.isReady();
app.mixin({
components: {
Icon,
Footer,
Tooltip,
'v-popover': Tooltip,
Dialog,
},
data() {
return {
events,
config,
};
},
computed: {
theme() { return this.$store.state.ui.theme; },
},
watch: {
pageTitle(title) {
if (title) {
document.title = `traxxx - ${title}`;
return;
}
document.title = 'traxxx';
},
},
beforeCreate() {
this.uid = uid;
uid += 1;
},
methods: {
formatDate,
formatDuration,
isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
getPath,
getBgPath: (media, type) => `url(${getPath(media, type)})`,
},
});
app.directive('tooltip', {
beforeMount(el, binding) {
if (!binding.value) {
return;
}
// don't include HTML in native title attribute
const textEl = document.createElement('div');
textEl.innerHTML = binding.value;
el.title = textEl.textContent; // eslint-disable-line no-param-reassign
tippy(el, {
content: binding.value,
allowHTML: true,
duration: [0, 0],
});
},
});
app.mount('#container');
}
init();