egirlskey/packages/frontend/src/components/MkWidgets.vue

186 lines
4.6 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
2021-02-16 13:17:13 +00:00
<template>
<div :class="$style.root">
2021-02-16 13:17:13 +00:00
<template v-if="edit">
<header :class="$style.editHeader">
2023-05-08 22:49:53 +00:00
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select>
2022-07-20 13:24:26 +00:00
<template #label>{{ i18n.ts.selectWidget }}</template>
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
2021-02-16 13:17:13 +00:00
</MkSelect>
2023-09-30 19:53:52 +00:00
<MkButton inline primary data-cy-widget-add @click="addWidget"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
2022-07-20 13:24:26 +00:00
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
2021-02-16 13:17:13 +00:00
</header>
<Sortable
2023-05-19 04:58:09 +00:00
:modelValue="props.widgets"
itemKey="id"
handle=".handle"
:animation="150"
:group="{ name: 'SortableMkWidgets' }"
:class="$style.editEditing"
2023-05-19 04:58:09 +00:00
@update:modelValue="v => emit('updateWidgets', v)"
2021-02-16 13:17:13 +00:00
>
<template #item="{element}">
<div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ph-gear ph-bold ph-lg"></i></button>
2023-09-30 19:53:52 +00:00
<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ph-x ph-bold ph-lg"></i></button>
2022-06-30 10:19:54 +00:00
<div class="handle">
<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
2022-06-30 10:19:54 +00:00
</div>
2021-02-16 13:17:13 +00:00
</div>
</template>
</Sortable>
2021-02-16 13:17:13 +00:00
</template>
2023-05-19 04:58:09 +00:00
<component :is="`widget-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
2021-02-16 13:17:13 +00:00
</div>
</template>
2023-05-10 08:45:13 +00:00
<script lang="ts">
export type Widget = {
name: string;
id: string;
data: Record<string, any>;
};
export type DefaultStoredWidget = {
place: string | null;
} & Widget;
</script>
2023-05-10 08:45:13 +00:00
<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue';
2021-02-16 13:17:13 +00:00
import { v4 as uuid } from 'uuid';
2023-01-07 06:09:46 +00:00
import MkSelect from '@/components/MkSelect.vue';
import MkButton from '@/components/MkButton.vue';
2021-11-11 17:02:25 +00:00
import { widgets as widgetDefs } from '@/widgets';
2023-09-19 07:37:43 +00:00
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{
widgets: Widget[];
edit: boolean;
}>();
const emit = defineEmits<{
(ev: 'updateWidgets', widgets: Widget[]): void;
(ev: 'addWidget', widget: Widget): void;
(ev: 'removeWidget', widget: Widget): void;
(ev: 'updateWidget', widget: Partial<Widget>): void;
(ev: 'exit'): void;
}>();
const widgetRefs = {};
const configWidget = (id: string) => {
widgetRefs[id].configure();
};
const widgetAdderSelected = ref(null);
const addWidget = () => {
if (widgetAdderSelected.value == null) return;
emit('addWidget', {
name: widgetAdderSelected.value,
id: uuid(),
data: {},
});
widgetAdderSelected.value = null;
};
const removeWidget = (widget) => {
emit('removeWidget', widget);
};
const updateWidget = (id, data) => {
emit('updateWidget', { id, data });
};
function onContextmenu(widget: Widget, ev: MouseEvent) {
const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true;
if (el.parentElement) {
return isLink(el.parentElement);
}
};
if (isLink(ev.target)) return;
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
if (window.getSelection()?.toString() !== '') return;
os.contextMenu([{
type: 'label',
text: i18n.t(`_widgets.${widget.name}`),
}, {
icon: 'ph-gear ph-bold ph-lg',
text: i18n.ts.settings,
action: () => {
configWidget(widget.id);
2021-02-16 13:17:13 +00:00
},
}], ev);
}
2021-02-16 13:17:13 +00:00
</script>
<style lang="scss" module>
.root {
container-type: inline-size;
}
.widget {
contain: content;
margin: var(--margin) 0;
&:first-of-type {
margin-top: 0;
}
}
.edit {
&Header {
2021-02-16 13:17:13 +00:00
margin: 16px 0;
> * {
width: 100%;
padding: 4px;
}
}
&Editing {
min-height: 100px;
}
}
2021-02-16 13:17:13 +00:00
.customizeContainer {
position: relative;
cursor: move;
&Config,
&Remove {
position: absolute;
z-index: 10000;
top: 8px;
width: 32px;
height: 32px;
color: #fff;
background: rgba(#000, 0.7);
border-radius: var(--radius-xs);
2021-02-16 13:17:13 +00:00
}
&Config {
right: 8px + 8px + 32px;
}
2021-02-16 13:17:13 +00:00
&Remove {
right: 8px;
}
2021-02-16 13:17:13 +00:00
&Handle {
2022-06-30 10:19:54 +00:00
&Widget {
pointer-events: none;
}
2021-02-16 13:17:13 +00:00
}
2021-02-16 13:17:13 +00:00
}
2021-02-16 13:17:13 +00:00
</style>