2023-07-27 05:31:52 +00:00
|
|
|
<!--
|
2024-02-13 15:59:27 +00:00
|
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
2023-07-27 05:31:52 +00:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2020-11-25 12:31:34 +00:00
|
|
|
<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>
|
2022-06-17 04:20:33 +00:00
|
|
|
<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>
|
2020-11-25 12:31:34 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-06-30 03:48:42 +00:00
|
|
|
<script lang="ts" setup>
|
2023-04-22 23:13:12 +00:00
|
|
|
import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch, shallowRef } from 'vue';
|
2023-09-19 07:37:43 +00:00
|
|
|
import * as os from '@/os.js';
|
2020-11-25 12:31:34 +00:00
|
|
|
|
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,
|
2020-11-25 12:31:34 +00:00
|
|
|
});
|
2022-06-30 03:48:42 +00:00
|
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
|
(ev: 'update:modelValue', value: number): void;
|
2024-01-09 04:25:33 +00:00
|
|
|
(ev: 'dragEnded', value: number): void;
|
2022-06-30 03:48:42 +00:00
|
|
|
}>();
|
|
|
|
|
2023-04-22 23:13:12 +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();
|
|
|
|
});
|
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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2024-07-04 04:14:49 +00:00
|
|
|
function onMousedown(ev: MouseEvent | TouchEvent) {
|
2022-06-30 03:48:42 +00:00
|
|
|
ev.preventDefault();
|
|
|
|
|
|
|
|
const tooltipShowing = ref(true);
|
2024-07-04 04:14:49 +00:00
|
|
|
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,
|
2024-07-04 04:14:49 +00:00
|
|
|
}, {
|
|
|
|
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();
|
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);
|
2024-01-09 04:25:33 +00:00
|
|
|
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 });
|
2024-07-04 04:14:49 +00:00
|
|
|
}
|
2020-11-25 12:31:34 +00:00
|
|
|
</script>
|
|
|
|
|
2022-12-27 09:29:39 +00:00
|
|
|
<style lang="scss" scoped>
|
2021-11-28 11:07:37 +00:00
|
|
|
@use "sass:math";
|
|
|
|
|
2021-09-29 15:50:45 +00:00
|
|
|
.timctyfi {
|
2020-11-25 12:31:34 +00:00
|
|
|
position: relative;
|
|
|
|
|
2021-11-28 11:07:37 +00:00
|
|
|
> .label {
|
|
|
|
font-size: 0.85em;
|
|
|
|
padding: 0 0 8px 0;
|
|
|
|
user-select: none;
|
2020-11-25 12:31:34 +00:00
|
|
|
|
2021-11-28 11:07:37 +00:00
|
|
|
&:empty {
|
|
|
|
display: none;
|
|
|
|
}
|
2021-09-29 15:50:45 +00:00
|
|
|
}
|
2020-11-25 12:31:34 +00:00
|
|
|
|
2021-11-28 11:07:37 +00:00
|
|
|
> .caption {
|
|
|
|
font-size: 0.85em;
|
|
|
|
padding: 8px 0 0 0;
|
|
|
|
color: var(--fgTransparentWeak);
|
2020-11-25 12:31:34 +00:00
|
|
|
|
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;
|
2022-06-17 04:20:33 +00:00
|
|
|
background: var(--panel);
|
|
|
|
border: solid 1px var(--panel);
|
2023-10-31 18:44:34 +00:00
|
|
|
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);
|
2023-10-31 18:44:34 +00:00
|
|
|
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);
|
2023-10-31 18:44:34 +00:00
|
|
|
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);
|
2023-10-31 18:44:34 +00:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
2020-11-25 12:31:34 +00:00
|
|
|
}
|
|
|
|
}
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-11-25 12:31:34 +00:00
|
|
|
}
|
|
|
|
</style>
|