egirlskey/src/client/app/desktop/views/pages/deck/deck.vue

402 lines
9.5 KiB
Vue
Raw Normal View History

2018-06-05 12:36:21 +00:00
<template>
<mk-ui :class="$style.root">
2018-10-19 22:21:22 +00:00
<div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="{ center: $store.state.device.deckColumnAlign == 'center' }" v-hotkey.global="keymap">
<template v-for="ids in layout">
<div v-if="ids.length > 1" class="folder">
<template v-for="id, i in ids">
<x-column-core :ref="id" :key="id" :column="columns.find(c => c.id == id)" :is-stacked="true" @parentFocus="moveFocus(id, $event)"/>
</template>
</div>
<x-column-core v-else :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id == ids[0])" @parentFocus="moveFocus(ids[0], $event)"/>
2018-06-05 18:12:06 +00:00
</template>
<template v-if="temporaryColumn">
<x-user-column v-if="temporaryColumn.type == 'user'" :acct="temporaryColumn.acct" :key="temporaryColumn.acct"/>
<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
<x-hashtag-column v-else-if="temporaryColumn.type == 'tag'" :tag="temporaryColumn.tag" :key="temporaryColumn.tag"/>
</template>
<button ref="add" @click="add" :title="$t('@deck.add-column')"><fa icon="plus"/></button>
2018-06-05 12:36:21 +00:00
</div>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import XColumnCore from './deck.column-core.vue';
2018-06-05 20:18:08 +00:00
import Menu from '../../../../common/views/components/menu.vue';
import MkUserListsWindow from '../../components/user-lists-window.vue';
2018-06-05 18:12:06 +00:00
import * as uuid from 'uuid';
2018-06-05 12:36:21 +00:00
export default Vue.extend({
i18n: i18n('deck'),
2018-06-05 12:36:21 +00:00
components: {
XColumnCore,
XUserColumn: () => import('./deck.user-column.vue').then(m => m.default),
XNoteColumn: () => import('./deck.note-column.vue').then(m => m.default),
XHashtagColumn: () => import('./deck.hashtag-column.vue').then(m => m.default)
2018-06-05 18:12:06 +00:00
},
2018-06-06 16:00:38 +00:00
2018-06-05 18:12:06 +00:00
computed: {
columns(): any[] {
2018-06-05 18:12:06 +00:00
if (this.$store.state.settings.deck == null) return [];
return this.$store.state.settings.deck.columns;
},
layout(): any[] {
if (this.$store.state.settings.deck == null) return [];
if (this.$store.state.settings.deck.layout == null) return this.$store.state.settings.deck.columns.map(c => [c.id]);
return this.$store.state.settings.deck.layout;
2018-09-22 11:11:13 +00:00
},
2018-09-22 11:11:13 +00:00
style(): any {
return {
height: `calc(100vh - ${this.$store.state.uiHeaderHeight}px)`
};
},
temporaryColumn(): any {
return this.$store.state.device.deckTemporaryColumn;
},
keymap(): any {
return {
't': this.focus
};
2018-06-05 18:12:06 +00:00
}
},
2018-06-06 16:00:38 +00:00
2018-10-19 22:21:22 +00:00
watch: {
temporaryColumn() {
if (this.temporaryColumn != null) {
this.$nextTick(() => {
this.$refs.body.scrollTo({
2018-10-19 22:28:01 +00:00
left: this.$refs.body.scrollWidth - this.$refs.body.clientWidth,
2018-10-19 22:21:22 +00:00
behavior: 'smooth'
});
});
}
}
},
provide() {
return {
getColumnVm: this.getColumnVm
};
},
2018-06-05 18:12:06 +00:00
created() {
this.$store.commit('navHook', this.onNav);
2018-06-05 18:12:06 +00:00
if (this.$store.state.settings.deck == null) {
const deck = {
columns: [/*{
type: 'widgets',
widgets: []
}, */{
id: uuid(),
type: 'home'
}, {
id: uuid(),
type: 'notifications'
}, {
id: uuid(),
type: 'local'
}, {
id: uuid(),
type: 'global'
}]
};
deck.layout = deck.columns.map(c => [c.id]);
2018-06-05 18:12:06 +00:00
this.$store.dispatch('settings/set', {
key: 'deck',
value: deck
});
}
// 互換性のため
if (this.$store.state.settings.deck != null && this.$store.state.settings.deck.layout == null) {
this.$store.dispatch('settings/set', {
key: 'deck',
value: Object.assign({}, this.$store.state.settings.deck, {
layout: this.$store.state.settings.deck.columns.map(c => [c.id])
})
});
}
2018-06-05 20:18:08 +00:00
},
2018-06-06 16:00:38 +00:00
mounted() {
2018-11-08 23:26:32 +00:00
document.title = this.$root.instanceName;
2018-06-06 16:00:38 +00:00
document.documentElement.style.overflow = 'hidden';
},
beforeDestroy() {
this.$store.commit('navHook', null);
2018-06-06 16:00:38 +00:00
document.documentElement.style.overflow = 'auto';
},
2018-06-05 20:18:08 +00:00
methods: {
getColumnVm(id) {
return this.$refs[id][0];
},
onNav(to) {
if (!this.$store.state.settings.deckNav) return false;
if (to.name == 'user') {
this.$store.commit('device/set', {
key: 'deckTemporaryColumn',
value: {
type: 'user',
acct: to.params.user
}
});
return true;
} else if (to.name == 'note') {
this.$store.commit('device/set', {
key: 'deckTemporaryColumn',
value: {
type: 'note',
noteId: to.params.note
}
});
return true;
} else if (to.name == 'tag') {
this.$store.commit('device/set', {
key: 'deckTemporaryColumn',
value: {
type: 'tag',
tag: to.params.tag
}
});
return true;
}
},
2018-06-05 20:18:08 +00:00
add() {
2018-11-08 23:13:34 +00:00
this.$root.new(Menu, {
2018-06-05 20:18:08 +00:00
source: this.$refs.add,
compact: true,
items: [{
icon: 'home',
text: this.$t('@deck.home'),
2018-06-08 02:46:45 +00:00
action: () => {
2018-06-05 20:18:08 +00:00
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'home'
});
}
}, {
icon: ['far', 'comments'],
text: this.$t('@deck.local'),
2018-06-08 02:46:45 +00:00
action: () => {
2018-06-05 20:18:08 +00:00
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'local'
});
}
2018-07-11 04:43:09 +00:00
}, {
icon: 'share-alt',
text: this.$t('@deck.hybrid'),
2018-07-11 04:43:09 +00:00
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'hybrid'
});
}
2018-06-05 20:18:08 +00:00
}, {
icon: 'globe',
text: this.$t('@deck.global'),
2018-06-08 02:46:45 +00:00
action: () => {
2018-06-05 20:18:08 +00:00
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'global'
});
}
2018-09-16 14:15:02 +00:00
}, {
icon: 'at',
text: this.$t('@deck.mentions'),
2018-09-16 14:15:02 +00:00
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'mentions'
});
}
}, {
icon: ['far', 'envelope'],
text: this.$t('@deck.direct'),
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'direct'
});
}
2018-06-05 20:18:08 +00:00
}, {
icon: 'list',
text: this.$t('@deck.list'),
2018-06-08 02:46:45 +00:00
action: () => {
2018-11-08 23:13:34 +00:00
const w = this.$root.new(MkUserListsWindow);
2018-06-05 20:18:08 +00:00
w.$once('choosen', list => {
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'list',
list: list
});
w.close();
});
}
}, {
icon: 'hashtag',
text: this.$t('@deck.hashtag'),
action: () => {
2018-12-02 11:10:53 +00:00
this.$root.dialog({
title: this.$t('enter-hashtag-tl-title'),
input: true
}).then(({ canceled, result: title }) => {
if (canceled) return;
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'hashtag',
tagTlId: this.$store.state.settings.tagTimelines.find(x => x.title == title).id
});
});
}
2018-06-05 20:18:08 +00:00
}, {
icon: ['far', 'bell'],
text: this.$t('@deck.notifications'),
2018-06-08 02:46:45 +00:00
action: () => {
2018-06-05 20:18:08 +00:00
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'notifications'
});
}
}, {
icon: 'calculator',
text: this.$t('@deck.widgets'),
2018-06-08 02:46:45 +00:00
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
id: uuid(),
type: 'widgets',
widgets: []
});
}
2018-06-05 20:18:08 +00:00
}]
});
},
focus() {
// Flatten array of arrays
const ids = [].concat.apply([], this.layout);
const firstTl = ids.find(id => this.isTlColumn(id));
if (firstTl) {
this.$refs[firstTl][0].focus();
}
},
moveFocus(id, direction) {
let targetColumn;
if (direction == 'right') {
const currentColumnIndex = this.layout.findIndex(ids => ids.includes(id));
this.layout.some((ids, i) => {
if (i <= currentColumnIndex) return false;
const tl = ids.find(id => this.isTlColumn(id));
if (tl) {
targetColumn = tl;
return true;
}
});
} else if (direction == 'left') {
const currentColumnIndex = [...this.layout].reverse().findIndex(ids => ids.includes(id));
[...this.layout].reverse().some((ids, i) => {
if (i <= currentColumnIndex) return false;
const tl = ids.find(id => this.isTlColumn(id));
if (tl) {
targetColumn = tl;
return true;
}
});
} else if (direction == 'down') {
const currentColumn = this.layout.find(ids => ids.includes(id));
const currentIndex = currentColumn.indexOf(id);
currentColumn.some((_id, i) => {
if (i <= currentIndex) return false;
if (this.isTlColumn(_id)) {
targetColumn = _id;
return true;
}
});
} else if (direction == 'up') {
const currentColumn = [...this.layout.find(ids => ids.includes(id))].reverse();
const currentIndex = currentColumn.indexOf(id);
currentColumn.some((_id, i) => {
if (i <= currentIndex) return false;
if (this.isTlColumn(_id)) {
targetColumn = _id;
return true;
}
});
}
if (targetColumn) {
this.$refs[targetColumn][0].focus();
}
},
isTlColumn(id) {
const column = this.columns.find(c => c.id === id);
return ['home', 'local', 'hybrid', 'global', 'list', 'hashtag', 'mentions', 'direct'].includes(column.type);
2018-06-05 20:18:08 +00:00
}
2018-06-05 12:36:21 +00:00
}
});
</script>
<style lang="stylus" module>
.root
height 100vh
</style>
<style lang="stylus" scoped>
2018-09-28 06:34:34 +00:00
.qlvquzbjribqcaozciifydkngcwtyzje
2018-06-05 12:36:21 +00:00
display flex
flex 1
2018-06-05 12:44:02 +00:00
padding 16px 0 16px 16px
overflow auto
2018-06-05 12:36:21 +00:00
2018-06-05 19:00:48 +00:00
> div
2018-06-06 16:17:29 +00:00
margin-right 8px
2018-06-05 19:00:48 +00:00
&:last-of-type
margin-right 0
&.folder
display flex
flex-direction column
> *:not(:last-child)
margin-bottom 8px
&.center
> *
&:first-child
margin-left auto
2018-06-06 20:14:37 +00:00
&:last-child
margin-right auto
2018-06-06 20:14:37 +00:00
2018-06-05 19:00:48 +00:00
> button
padding 0 16px
2018-09-28 06:34:34 +00:00
color var(--faceTextButton)
2018-06-05 19:00:48 +00:00
&:hover
2018-09-28 06:34:34 +00:00
color var(--faceTextButtonHover)
2018-06-05 19:00:48 +00:00
&:active
2018-09-28 06:34:34 +00:00
color var(--faceTextButtonActive)
2018-06-05 12:36:21 +00:00
</style>