egirlskey/packages/client/src/components/form/range.vue

270 lines
6.1 KiB
Vue
Raw Normal View History

<template>
2021-11-28 11:07:37 +00:00
<div class="timctyfi" :class="{ disabled }">
<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">
<div class="highlight" :style="{ width: (steppedValue * 100) + '%' }"></div>
</div>
<div v-if="steps" class="ticks">
<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>
</div>
</template>
<script lang="ts">
refactor: use Vite to build instead of webpack (#8575) * update stream.ts * https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339 * fix lint * clean up? * add app * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * キャッシュ対策 * Truncate push notification message * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * URLをsw.jsに戻す * clean up * wip * wip * wip * wip * wip * wip * :v: * use import * fix * install rollup * use defineAsyncComponent. * fix emojilist * wip use defineAsyncComponent * popup(import -> popup(defineAsyncComponent(() => import * draggable? * fix init import * clean up * fix router * add comment * :v: * :v: * :v: * remove webpack * update vite * fix boot sequence * Revert "fix boot sequence" This reverts commit e893dbf37aed83bf9f12e427d98c78a7065b4a39. * revert boot import * never make two app div * ; * remove console.log * change clientEntry sequence * fix * Revert "fix" This reverts commit 12741b3d89950a31dbb1bb81477ddb27b0e9951a. * fix * add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 * add log * add comment Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2022-05-01 13:51:07 +00:00
import { computed, defineAsyncComponent, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
2021-11-28 11:07:37 +00:00
import * as os from '@/os';
export default defineComponent({
props: {
2021-11-28 11:07:37 +00:00
modelValue: {
type: Number,
required: false,
default: 0,
},
disabled: {
type: Boolean,
required: false,
default: false,
},
min: {
type: Number,
required: false,
default: 0,
},
max: {
type: Number,
required: false,
default: 100,
},
step: {
type: Number,
required: false,
default: 1,
},
2021-09-29 15:50:45 +00:00
autofocus: {
type: Boolean,
required: false,
2021-11-28 11:07:37 +00:00
},
textConverter: {
type: Function,
required: false,
default: (v) => v.toString(),
},
},
2021-11-28 11:07:37 +00:00
setup(props, context) {
const containerEl = ref<HTMLElement>();
const thumbEl = ref<HTMLElement>();
2021-11-28 11:07:37 +00:00
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
const steppedValue = 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(() => {
return (steppedValue.value * (props.max - props.min)) + props.min;
});
watch(finalValue, () => {
context.emit('update:modelValue', finalValue.value);
});
const thumbWidth = computed(() => {
if (thumbEl.value == null) return 0;
return thumbEl.value!.offsetWidth;
});
const thumbPosition = ref(0);
const calcThumbPosition = () => {
if (containerEl.value == null) {
thumbPosition.value = 0;
} else {
thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
}
};
watch([steppedValue, containerEl], calcThumbPosition);
let ro: ResizeObserver | undefined;
onMounted(() => {
ro = new ResizeObserver((entries, observer) => {
calcThumbPosition();
});
ro.observe(containerEl.value);
});
onUnmounted(() => {
if (ro) ro.disconnect();
2021-11-28 11:07:37 +00:00
});
2021-11-28 11:07:37 +00:00
const steps = computed(() => {
if (props.step) {
return (props.max - props.min) / props.step;
} else {
return 0;
}
});
const onMousedown = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault();
const tooltipShowing = ref(true);
refactor: use Vite to build instead of webpack (#8575) * update stream.ts * https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339 * fix lint * clean up? * add app * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * キャッシュ対策 * Truncate push notification message * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * URLをsw.jsに戻す * clean up * wip * wip * wip * wip * wip * wip * :v: * use import * fix * install rollup * use defineAsyncComponent. * fix emojilist * wip use defineAsyncComponent * popup(import -> popup(defineAsyncComponent(() => import * draggable? * fix init import * clean up * fix router * add comment * :v: * :v: * :v: * remove webpack * update vite * fix boot sequence * Revert "fix boot sequence" This reverts commit e893dbf37aed83bf9f12e427d98c78a7065b4a39. * revert boot import * never make two app div * ; * remove console.log * change clientEntry sequence * fix * Revert "fix" This reverts commit 12741b3d89950a31dbb1bb81477ddb27b0e9951a. * fix * add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 * add log * add comment Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2022-05-01 13:51:07 +00:00
os.popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
2021-11-28 11:07:37 +00:00
showing: tooltipShowing,
text: computed(() => {
return props.textConverter(finalValue.value);
}),
targetElement: thumbEl,
2021-11-28 11:07:37 +00:00
}, {}, 'closed');
const style = document.createElement('style');
style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
document.head.appendChild(style);
const onDrag = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault();
const containerRect = containerEl.value!.getBoundingClientRect();
const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.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);
};
window.addEventListener('mousemove', onDrag);
window.addEventListener('touchmove', onDrag);
window.addEventListener('mouseup', onMouseup, { once: true });
window.addEventListener('touchend', onMouseup, { once: true });
};
return {
2021-11-28 11:07:37 +00:00
rawValue,
finalValue,
steppedValue,
onMousedown,
containerEl,
thumbEl,
thumbPosition,
steps,
};
},
});
</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 {
2022-06-28 09:41:37 +00:00
padding: 10px 12px;
background: var(--panel);
border: solid 1px var(--panel);
2021-11-28 11:07:37 +00:00
border-radius: 6px;
> .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: 999px;
overflow: clip;
> .highlight {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--accent);
opacity: 0.5;
transition: width 0.2s cubic-bezier(0,0,0,1);
}
}
> .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: 999px;
}
}
> .thumb {
position: absolute;
width: $thumbWidth;
height: $thumbHeight;
cursor: grab;
background: var(--accent);
border-radius: 999px;
transition: left 0.2s cubic-bezier(0,0,0,1);
2021-09-29 15:50:45 +00:00
2021-11-28 11:07:37 +00:00
&:hover {
background: var(--accentLighten);
}
}
}
}
}
</style>