barkey/packages/frontend/src/components/MkRange.vue

276 lines
6.5 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
2022-09-10 07:28:59 +00:00
<div class="timctyfi" :class="{ disabled, easing }">
2021-11-28 11:07:37 +00:00
<div class="label"><slot name="label"></slot></div>
<div v-adaptive-border class="body">
2021-11-28 11:07:37 +00:00
<div ref="containerEl" class="container">
<div class="track">
2022-06-30 01:53:40 +00:00
<div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
2021-11-28 11:07:37 +00:00
</div>
2022-07-02 13:07:04 +00:00
<div v-if="steps && showTicks" class="ticks">
2021-11-28 11:07:37 +00:00
<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
</div>
<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
</div>
</div>
2022-06-30 01:53:40 +00:00
<div class="caption"><slot name="caption"></slot></div>
</div>
</template>
2022-06-30 03:48:42 +00:00
<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch, shallowRef } from 'vue';
2023-09-19 07:37:43 +00:00
import * as os from '@/os.js';
2022-06-30 03:48:42 +00:00
const props = withDefaults(defineProps<{
modelValue: number;
disabled?: boolean;
min: number;
max: number;
step?: number;
textConverter?: (value: number) => string,
2022-07-02 13:07:04 +00:00
showTicks?: boolean;
2022-09-10 07:28:59 +00:00
easing?: boolean;
2023-10-22 04:02:24 +00:00
continuousUpdate?: boolean;
2022-06-30 03:48:42 +00:00
}>(), {
step: 1,
textConverter: (v) => v.toString(),
2022-09-10 07:28:59 +00:00
easing: false,
});
2022-06-30 03:48:42 +00:00
const emit = defineEmits<{
(ev: 'update:modelValue', value: number): void;
(ev: 'dragEnded', value: number): void;
2022-06-30 03:48:42 +00:00
}>();
const containerEl = shallowRef<HTMLElement>();
const thumbEl = shallowRef<HTMLElement>();
2022-06-30 03:48:42 +00:00
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
const steppedRawValue = computed(() => {
if (props.step) {
const step = props.step / (props.max - props.min);
return (step * Math.round(rawValue.value / step));
} else {
return rawValue.value;
}
});
const finalValue = computed(() => {
if (Number.isInteger(props.step)) {
return Math.round((steppedRawValue.value * (props.max - props.min)) + props.min);
} else {
return (steppedRawValue.value * (props.max - props.min)) + props.min;
}
});
2022-12-30 06:40:29 +00:00
const getThumbWidth = () => {
2022-06-30 03:48:42 +00:00
if (thumbEl.value == null) return 0;
return thumbEl.value!.offsetWidth;
2022-12-30 06:40:29 +00:00
};
2022-06-30 03:48:42 +00:00
const thumbPosition = ref(0);
const calcThumbPosition = () => {
if (containerEl.value == null) {
thumbPosition.value = 0;
} else {
2022-12-30 06:40:29 +00:00
thumbPosition.value = (containerEl.value.offsetWidth - getThumbWidth()) * steppedRawValue.value;
2022-06-30 03:48:42 +00:00
}
};
watch([steppedRawValue, containerEl], calcThumbPosition);
let ro: ResizeObserver | undefined;
onMounted(() => {
ro = new ResizeObserver((entries, observer) => {
calcThumbPosition();
});
refactor: frontendのcomponentsの型エラーを改善 (#12926) * add: safeFloatParserを追加 * fix: 欠けていた型を追加 * refactor: pageBlockTypesをjson-schemaに移植 * refactor: components/global内の型エラーが出ている箇所を修正 * lint: fix null check style * refactor: fix type error * refactor: fix some type errors * fix: 翻訳が抜けていた箇所を修正 * refactor: getJsonSchemaで正しいスキーマが返されるように修正 * fix: MkChartの型エラーとbytesオプションが機能していない問題を修正 * fix(misskey-js): `drive`->`folderUpdated`のpayloadの型が間違っていたのを修正 * refactor: fix some type errors * change: Captcha読み込み中の文言をLoadingに変更 * refactor(backend/misskey-js): MainEventの型を改善 * refactor: chartjs-plugin-gradientが二重でpluginに登録されていたのを修正 * update: misskey-js.api.md * refactor: fix some type errors * fix: backendのtypecheckが落ちていたのを修正 * update: misskey-js.api.md * add: json-schemaのnoteにpollの型定義を追加 * refactor: noteのjson-schemaの型を改善 * refactor: MkPoll * refactor: fix some type errors * change: UserLiteにisLockedを持たせるように * fix: notificationスキーマにroleが含まれていないのを修正 * Revert "change: UserLiteにisLockedを持たせるように" This reverts commit 1bb0c8e7a9b19a4e9f21bf7381712b98f27672a5. * fix: フォロー通知から鍵垢へのフォローを行うと処理中のまま止まってしまう問題を修正 * refactor: noteスキーマのvisibilityにenumを追加 * change: deepCloneのCloneableTypeにundefinedを追加 * refactor: fix some type errors * refactor: `allowEmpty: false`を使用していた箇所を`minLength: 1`に置き換え * enhance: API 'retension' のresponseの型を追加 * fix: Chart関連のtooltipが正しい位置に表示されない問題を修正 * refactor: fix some type errors * fix: 型情報が不足していたのを修正 * enhance: announcementスキーマにenumを追加 * enhance: ロールポリシーの型定義をRoleServiceからjson-schemaに移植 * refactor: policiesを`ref: RolePolicies`に統一 * fix: API `meta` のレスポンスの型にpoliciesが含まれていないのを修正 * refactor: fix some type errors * fix: backendのlintが落ちているのを修正 * fix: MkFoldableSectionの開閉時のanimationが適用されていない問題を修正 * fix: backendのtypecheckが落ちているのを修正 * update: run build-misskey-js-with-types * fix: MkDialogのmount時に文字数制限の判定が行われない問題を修正 * update: CHANGELOG.md * refactor: MkUserSelectDialogの型を改善 * fix: deepCloneでundefinedはcloneしないように (#9207) * change: frontendのcloneをbackend側にも反映 * update: CHANGELOG.md * fix: RoleServiceからPackを通して型RolePoliciesに依存させないように * Update packages/frontend/src/scripts/get-note-summary.ts * revert RoleService.ts changes * change: optional chaining -> non-null assertion * remove: unused import * fix: propsで渡されたuserがUserLiteの場合に意図しない動作になってしまうのを修正 * change: fix null check style * refactor: fix type error * change: fix null check style * Update packages/frontend/src/components/MkDrive.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * refactor: css moduleでglobalを使わないように * refactor: roleのiconUrlは必ず存在するものとして扱うように * enhance: MenuButtonのactiveにcomputedを受け付けられるように * Update packages/frontend/src/components/MkNotePreview.vue * Update MkWindow.vue * refactor: notification.noteは必ず存在するものとして扱うように * Update packages/frontend/src/components/MkNotification.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * fix: MkSignupDialogでdoneのemit時にresを含んでいなかったのを修正 * Update packages/frontend/src/scripts/clone.ts Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * refactor: 不要な返り値の型を削除 * refactor: 不要なnullチェックを削除 * update: misskey-js-autogen * update: clone.ts * refactor * Update MkNotification.vue * Update MkNotification.vue * :v: * Update MkNotification.vue * Update MkNotification.vue * Update MkNotification.vue * Update MkNotifications.vue * Update MkUserSetupDialog.Profile.vue * Update MkUserCardMini.vue * :v: * Update MkMenu.vue --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2024-01-30 10:53:53 +00:00
if (containerEl.value) ro.observe(containerEl.value);
2022-06-30 03:48:42 +00:00
});
onUnmounted(() => {
if (ro) ro.disconnect();
});
const steps = computed(() => {
if (props.step) {
return (props.max - props.min) / props.step;
} else {
return 0;
}
});
function onMousedown(ev: MouseEvent | TouchEvent) {
2022-06-30 03:48:42 +00:00
ev.preventDefault();
const tooltipShowing = ref(true);
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
2022-06-30 03:48:42 +00:00
showing: tooltipShowing,
text: computed(() => {
return props.textConverter(finalValue.value);
}),
targetElement: thumbEl,
}, {
closed: () => dispose(),
});
2022-06-30 03:48:42 +00:00
const style = document.createElement('style');
style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
document.head.appendChild(style);
2022-12-30 06:40:29 +00:00
const thumbWidth = getThumbWidth();
2022-06-30 03:48:42 +00:00
const onDrag = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault();
const containerRect = containerEl.value!.getBoundingClientRect();
refactor: frontendのcomponentsの型エラーを改善 (#12926) * add: safeFloatParserを追加 * fix: 欠けていた型を追加 * refactor: pageBlockTypesをjson-schemaに移植 * refactor: components/global内の型エラーが出ている箇所を修正 * lint: fix null check style * refactor: fix type error * refactor: fix some type errors * fix: 翻訳が抜けていた箇所を修正 * refactor: getJsonSchemaで正しいスキーマが返されるように修正 * fix: MkChartの型エラーとbytesオプションが機能していない問題を修正 * fix(misskey-js): `drive`->`folderUpdated`のpayloadの型が間違っていたのを修正 * refactor: fix some type errors * change: Captcha読み込み中の文言をLoadingに変更 * refactor(backend/misskey-js): MainEventの型を改善 * refactor: chartjs-plugin-gradientが二重でpluginに登録されていたのを修正 * update: misskey-js.api.md * refactor: fix some type errors * fix: backendのtypecheckが落ちていたのを修正 * update: misskey-js.api.md * add: json-schemaのnoteにpollの型定義を追加 * refactor: noteのjson-schemaの型を改善 * refactor: MkPoll * refactor: fix some type errors * change: UserLiteにisLockedを持たせるように * fix: notificationスキーマにroleが含まれていないのを修正 * Revert "change: UserLiteにisLockedを持たせるように" This reverts commit 1bb0c8e7a9b19a4e9f21bf7381712b98f27672a5. * fix: フォロー通知から鍵垢へのフォローを行うと処理中のまま止まってしまう問題を修正 * refactor: noteスキーマのvisibilityにenumを追加 * change: deepCloneのCloneableTypeにundefinedを追加 * refactor: fix some type errors * refactor: `allowEmpty: false`を使用していた箇所を`minLength: 1`に置き換え * enhance: API 'retension' のresponseの型を追加 * fix: Chart関連のtooltipが正しい位置に表示されない問題を修正 * refactor: fix some type errors * fix: 型情報が不足していたのを修正 * enhance: announcementスキーマにenumを追加 * enhance: ロールポリシーの型定義をRoleServiceからjson-schemaに移植 * refactor: policiesを`ref: RolePolicies`に統一 * fix: API `meta` のレスポンスの型にpoliciesが含まれていないのを修正 * refactor: fix some type errors * fix: backendのlintが落ちているのを修正 * fix: MkFoldableSectionの開閉時のanimationが適用されていない問題を修正 * fix: backendのtypecheckが落ちているのを修正 * update: run build-misskey-js-with-types * fix: MkDialogのmount時に文字数制限の判定が行われない問題を修正 * update: CHANGELOG.md * refactor: MkUserSelectDialogの型を改善 * fix: deepCloneでundefinedはcloneしないように (#9207) * change: frontendのcloneをbackend側にも反映 * update: CHANGELOG.md * fix: RoleServiceからPackを通して型RolePoliciesに依存させないように * Update packages/frontend/src/scripts/get-note-summary.ts * revert RoleService.ts changes * change: optional chaining -> non-null assertion * remove: unused import * fix: propsで渡されたuserがUserLiteの場合に意図しない動作になってしまうのを修正 * change: fix null check style * refactor: fix type error * change: fix null check style * Update packages/frontend/src/components/MkDrive.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * refactor: css moduleでglobalを使わないように * refactor: roleのiconUrlは必ず存在するものとして扱うように * enhance: MenuButtonのactiveにcomputedを受け付けられるように * Update packages/frontend/src/components/MkNotePreview.vue * Update MkWindow.vue * refactor: notification.noteは必ず存在するものとして扱うように * Update packages/frontend/src/components/MkNotification.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * fix: MkSignupDialogでdoneのemit時にresを含んでいなかったのを修正 * Update packages/frontend/src/scripts/clone.ts Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * refactor: 不要な返り値の型を削除 * refactor: 不要なnullチェックを削除 * update: misskey-js-autogen * update: clone.ts * refactor * Update MkNotification.vue * Update MkNotification.vue * :v: * Update MkNotification.vue * Update MkNotification.vue * Update MkNotification.vue * Update MkNotifications.vue * Update MkUserSetupDialog.Profile.vue * Update MkUserCardMini.vue * :v: * Update MkMenu.vue --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2024-01-30 10:53:53 +00:00
const pointerX = 'touches' in ev && ev.touches.length > 0 ? ev.touches[0].clientX : 'clientX' in ev ? ev.clientX : 0;
2022-12-30 06:40:29 +00:00
const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth / 2));
rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth)));
2023-10-22 04:02:24 +00:00
if (props.continuousUpdate) {
emit('update:modelValue', finalValue.value);
}
2022-06-30 03:48:42 +00:00
};
let beforeValue = finalValue.value;
const onMouseup = () => {
document.head.removeChild(style);
tooltipShowing.value = false;
window.removeEventListener('mousemove', onDrag);
window.removeEventListener('touchmove', onDrag);
window.removeEventListener('mouseup', onMouseup);
window.removeEventListener('touchend', onMouseup);
// 値が変わってたら通知
if (beforeValue !== finalValue.value) {
emit('update:modelValue', finalValue.value);
emit('dragEnded', finalValue.value);
2022-06-30 03:48:42 +00:00
}
};
window.addEventListener('mousemove', onDrag);
window.addEventListener('touchmove', onDrag);
window.addEventListener('mouseup', onMouseup, { once: true });
window.addEventListener('touchend', onMouseup, { once: true });
}
</script>
<style lang="scss" scoped>
2021-11-28 11:07:37 +00:00
@use "sass:math";
2021-09-29 15:50:45 +00:00
.timctyfi {
position: relative;
2021-11-28 11:07:37 +00:00
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
2021-11-28 11:07:37 +00:00
&:empty {
display: none;
}
2021-09-29 15:50:45 +00:00
}
2021-11-28 11:07:37 +00:00
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
2021-11-28 11:07:37 +00:00
&:empty {
display: none;
2021-09-29 15:50:45 +00:00
}
2021-11-28 11:07:37 +00:00
}
$thumbHeight: 20px;
$thumbWidth: 20px;
> .body {
2023-01-15 05:18:45 +00:00
padding: 7px 12px;
background: var(--panel);
border: solid 1px var(--panel);
border-radius: var(--radius-sm);
2021-11-28 11:07:37 +00:00
> .container {
position: relative;
height: $thumbHeight;
> .track {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: calc(100% - #{$thumbWidth});
height: 3px;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--radius-ellipse);
2022-07-13 12:41:06 +00:00
overflow: clip;
2021-11-28 11:07:37 +00:00
> .highlight {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--accent);
opacity: 0.5;
}
}
> .ticks {
$tickWidth: 3px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: calc(100% - #{$thumbWidth});
> .tick {
position: absolute;
bottom: 0;
width: $tickWidth;
height: 3px;
margin-left: - math.div($tickWidth, 2);
background: var(--divider);
border-radius: var(--radius-ellipse);
2021-11-28 11:07:37 +00:00
}
}
> .thumb {
position: absolute;
width: $thumbWidth;
height: $thumbHeight;
cursor: grab;
background: var(--accent);
border-radius: var(--radius-ellipse);
2021-09-29 15:50:45 +00:00
2021-11-28 11:07:37 +00:00
&:hover {
background: var(--accentLighten);
}
}
}
}
2022-09-10 07:28:59 +00:00
&.easing {
> .body {
> .container {
> .track {
> .highlight {
transition: width 0.2s cubic-bezier(0,0,0,1);
}
}
> .thumb {
transition: left 0.2s cubic-bezier(0,0,0,1);
}
}
}
}
}
</style>