pixelfed/resources/assets/js/landing.js

294 lines
6.5 KiB
JavaScript

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'),
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
});