require('./polyfill'); import Vue from 'vue'; window.Vue = Vue; import VueRouter from "vue-router"; import Vuex from "vuex"; import { sync } from "vuex-router-sync"; import BootstrapVue from 'bootstrap-vue' import InfiniteLoading from 'vue-infinite-loading'; import Loading from 'vue-loading-overlay'; import VueTimeago from 'vue-timeago'; import VueCarousel from 'vue-carousel'; import VueBlurHash from 'vue-blurhash'; import VueI18n from 'vue-i18n'; window.pftxt = require('twitter-text'); import 'vue-blurhash/dist/vue-blurhash.css' window.filesize = require('filesize'); import swal from 'sweetalert'; window._ = require('lodash'); window.Popper = require('popper.js').default; window.pixelfed = window.pixelfed || {}; window.$ = window.jQuery = require('jquery'); require('bootstrap'); window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; require('readmore-js'); window.blurhash = require("blurhash"); $('[data-toggle="tooltip"]').tooltip() let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } else { console.error('CSRF token not found.'); } Vue.use(VueRouter); Vue.use(Vuex); Vue.use(VueBlurHash); Vue.use(VueCarousel); Vue.use(BootstrapVue); Vue.use(InfiniteLoading); Vue.use(Loading); Vue.use(VueI18n); Vue.use(VueTimeago, { name: 'Timeago', locale: 'en' }); Vue.component( 'photo-presenter', require('./../components/presenter/PhotoPresenter.vue').default ); Vue.component( 'video-presenter', require('./../components/presenter/VideoPresenter.vue').default ); Vue.component( 'photo-album-presenter', require('./../components/presenter/PhotoAlbumPresenter.vue').default ); Vue.component( 'video-album-presenter', require('./../components/presenter/VideoAlbumPresenter.vue').default ); Vue.component( 'mixed-album-presenter', require('./../components/presenter/MixedAlbumPresenter.vue').default ); Vue.component( 'navbar', require('./../components/landing/sections/nav.vue').default ); Vue.component( 'footer-component', require('./../components/landing/sections/footer.vue').default ); import IndexComponent from "./../components/landing/Index.vue"; import DirectoryComponent from "./../components/landing/Directory.vue"; import ExploreComponent from "./../components/landing/Explore.vue"; import NotFoundComponent from "./../components/landing/NotFound.vue"; const router = new VueRouter({ mode: "history", linkActiveClass: "", linkExactActiveClass: "active", routes: [ { path: "/", component: IndexComponent }, { path: "/web/directory", component: DirectoryComponent }, { path: "/web/explore", component: ExploreComponent }, { path: "/*", component: NotFoundComponent, props: true }, ], scrollBehavior(to, from, savedPosition) { if (to.hash) { return { selector: `[id='${to.hash.slice(1)}']` }; } else { return { x: 0, y: 0 }; } } }); function lss(name, def) { let key = 'pf_m2s.' + name; let ls = window.localStorage; if(ls.getItem(key)) { let val = ls.getItem(key); if(['pl', 'color-scheme'].includes(name)) { return val; } return ['true', true].includes(val); } return def; } const store = new Vuex.Store({ state: { version: 1, hideCounts: true, autoloadComments: false, newReactions: false, fixedHeight: false, profileLayout: 'grid', showDMPrivacyWarning: true, relationships: {}, emoji: [], colorScheme: lss('color-scheme', 'system'), }, getters: { getVersion: state => { return state.version; }, getHideCounts: state => { return state.hideCounts; }, getAutoloadComments: state => { return state.autoloadComments; }, getNewReactions: state => { return state.newReactions; }, getFixedHeight: state => { return state.fixedHeight; }, getProfileLayout: state => { return state.profileLayout; }, getRelationship: (state) => (id) => { return state.relationships[id]; }, getCustomEmoji: state => { return state.emoji; }, getColorScheme: state => { return state.colorScheme; }, getShowDMPrivacyWarning: state => { return state.showDMPrivacyWarning; } }, mutations: { setVersion(state, value) { state.version = value; }, setHideCounts(state, value) { localStorage.setItem('pf_m2s.hc', value); state.hideCounts = value; }, setAutoloadComments(state, value) { localStorage.setItem('pf_m2s.ac', value); state.autoloadComments = value; }, setNewReactions(state, value) { localStorage.setItem('pf_m2s.nr', value); state.newReactions = value; }, setFixedHeight(state, value) { localStorage.setItem('pf_m2s.fh', value); state.fixedHeight = value; }, setProfileLayout(state, value) { localStorage.setItem('pf_m2s.pl', value); state.profileLayout = value; }, updateRelationship(state, relationships) { relationships.forEach((relationship) => { Vue.set(state.relationships, relationship.id, relationship) }) }, updateCustomEmoji(state, emojis) { state.emoji = emojis; }, setColorScheme(state, value) { if(state.colorScheme == value) { return; } localStorage.setItem('pf_m2s.color-scheme', value); state.colorScheme = value; const name = value == 'system' ? '' : (value == 'light' ? 'force-light-mode' : 'force-dark-mode'); document.querySelector("body").className = name; if(name != 'system') { const payload = name == 'force-dark-mode' ? { dark_mode: 'on' } : {}; axios.post('/settings/labs', payload); } }, setShowDMPrivacyWarning(state, value) { localStorage.setItem('pf_m2s.dmpwarn', value); state.showDMPrivacyWarning = value; } }, }); let i18nMessages = { en: require('./i18n/en.json'), ar: require('./i18n/ar.json'), ca: require('./i18n/ca.json'), de: require('./i18n/de.json'), el: require('./i18n/el.json'), es: require('./i18n/es.json'), eu: require('./i18n/eu.json'), fr: require('./i18n/fr.json'), 'fr_CA': require('./i18n/fr_CA.json'), he: require('./i18n/he.json'), gd: require('./i18n/gd.json'), gl: require('./i18n/gl.json'), id: require('./i18n/id.json'), it: require('./i18n/it.json'), ja: require('./i18n/ja.json'), nl: require('./i18n/nl.json'), pl: require('./i18n/pl.json'), pt: require('./i18n/pt.json'), ru: require('./i18n/ru.json'), uk: require('./i18n/uk.json'), vi: require('./i18n/vi.json'), }; let locale = document.querySelector('html').getAttribute('lang'); const i18n = new VueI18n({ locale: locale, // set locale fallbackLocale: 'en', messages: i18nMessages }); sync(store, router); const App = new Vue({ el: '#content', i18n, router, store });