summaryrefslogtreecommitdiff
path: root/src/client/components/date-separated-list.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/date-separated-list.vue')
-rw-r--r--src/client/components/date-separated-list.vue188
1 files changed, 0 insertions, 188 deletions
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
deleted file mode 100644
index fa0b6d669c..0000000000
--- a/src/client/components/date-separated-list.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
-import MkAd from '@client/components/global/ad.vue';
-
-export default defineComponent({
- props: {
- items: {
- type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
- required: true,
- },
- direction: {
- type: String,
- required: false,
- default: 'down'
- },
- reversed: {
- type: Boolean,
- required: false,
- default: false
- },
- noGap: {
- type: Boolean,
- required: false,
- default: false
- },
- ad: {
- type: Boolean,
- required: false,
- default: false
- },
- },
-
- methods: {
- focus() {
- this.$slots.default[0].elm.focus();
- },
-
- getDateText(time: string) {
- const date = new Date(time).getDate();
- const month = new Date(time).getMonth() + 1;
- return this.$t('monthAndDay', {
- month: month.toString(),
- day: date.toString()
- });
- }
- },
-
- render() {
- if (this.items.length === 0) return;
-
- const renderChildren = () => this.items.map((item, i) => {
- const el = this.$slots.default({
- item: item
- })[0];
- if (el.key == null && item.id) el.key = item.id;
-
- if (
- i != this.items.length - 1 &&
- new Date(item.createdAt).getDate() != new Date(this.items[i + 1].createdAt).getDate()
- ) {
- const separator = h('div', {
- class: 'separator',
- key: item.id + ':separator',
- }, h('p', {
- class: 'date'
- }, [
- h('span', [
- h('i', {
- class: 'fas fa-angle-up icon',
- }),
- this.getDateText(item.createdAt)
- ]),
- h('span', [
- this.getDateText(this.items[i + 1].createdAt),
- h('i', {
- class: 'fas fa-angle-down icon',
- })
- ])
- ]));
-
- return [el, separator];
- } else {
- if (this.ad && item._shouldInsertAd_) {
- return [h(MkAd, {
- class: 'a', // advertiseの意(ブロッカー対策)
- key: item.id + ':ad',
- prefer: ['horizontal', 'horizontal-big'],
- }), el];
- } else {
- return el;
- }
- }
- });
-
- return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
- class: 'sqadhkmv' + (this.noGap ? ' noGap' : ''),
- name: 'list',
- tag: 'div',
- 'data-direction': this.direction,
- 'data-reversed': this.reversed ? 'true' : 'false',
- } : {
- class: 'sqadhkmv' + (this.noGap ? ' noGap' : ''),
- }, {
- default: renderChildren
- });
- },
-});
-</script>
-
-<style lang="scss">
-.sqadhkmv {
- > *:empty {
- display: none;
- }
-
- > *:not(:last-child) {
- margin-bottom: var(--margin);
- }
-
- > .list-move {
- transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
- }
-
- > .list-enter-active {
- transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
- }
-
- &[data-direction="up"] {
- > .list-enter-from {
- opacity: 0;
- transform: translateY(64px);
- }
- }
-
- &[data-direction="down"] {
- > .list-enter-from {
- opacity: 0;
- transform: translateY(-64px);
- }
- }
-
- > .separator {
- text-align: center;
-
- > .date {
- display: inline-block;
- position: relative;
- margin: 0;
- padding: 0 16px;
- line-height: 32px;
- text-align: center;
- font-size: 12px;
- color: var(--dateLabelFg);
-
- > span {
- &:first-child {
- margin-right: 8px;
-
- > .icon {
- margin-right: 8px;
- }
- }
-
- &:last-child {
- margin-left: 8px;
-
- > .icon {
- margin-left: 8px;
- }
- }
- }
- }
- }
-
- &.noGap {
- > * {
- margin: 0 !important;
- border: none;
- border-radius: 0;
- box-shadow: none;
-
- &:not(:last-child) {
- border-bottom: solid 0.5px var(--divider);
- }
- }
- }
-}
-</style>