This commit is contained in:
syuilo 2023-10-23 19:58:08 +09:00
parent 60b8fc7763
commit 3f4234d908
1 changed files with 99 additions and 98 deletions

View File

@ -42,7 +42,7 @@ const emits = defineEmits<{
(ev: 'refresh'): void;
}>();
const getScrollableParentElement = (node) => {
function getScrollableParentElement(node) {
if (node == null) {
return null;
}
@ -52,24 +52,25 @@ const getScrollableParentElement = (node) => {
} else {
return getScrollableParentElement(node.parentNode);
}
};
}
const getScreenY = (event) => {
function getScreenY(event) {
if (supportPointerDesktop) {
return event.screenY;
}
return event.touches[0].screenY;
};
}
const moveStart = (event) => {
function moveStart(event) {
if (!isPullStart && !isRefreshing && !disabled) {
isPullStart = true;
startScreenY = getScreenY(event);
currentHeight = 0;
}
};
}
const moveBySystem = (to: number): Promise<void> => new Promise(r => {
function moveBySystem(to: number): Promise<void> {
return new Promise(r => {
const startHeight = currentHeight;
const overHeight = currentHeight - to;
if (overHeight < 1) {
@ -90,20 +91,21 @@ const moveBySystem = (to: number): Promise<void> => new Promise(r => {
currentHeight = nextHeight;
}, 1);
});
}
const fixOverContent = async () => {
async function fixOverContent() {
if (currentHeight > refreshFrameSize) {
await moveBySystem(refreshFrameSize);
}
};
}
const closeContent = async () => {
async function closeContent() {
if (currentHeight > 0) {
await moveBySystem(0);
}
};
}
const moveEnd = () => {
function moveEnd() {
if (isPullStart && !isRefreshing) {
startScreenY = null;
if (isPullEnd) {
@ -114,9 +116,9 @@ const moveEnd = () => {
closeContent().then(() => isPullStart = false);
}
}
};
}
const moving = (event) => {
function moving(event) {
if (!isPullStart || isRefreshing || disabled) return;
if (!scrollEl) {
@ -144,7 +146,23 @@ const moving = (event) => {
}
isPullEnd = currentHeight >= refreshFrameSize;
};
}
/**
* emit(refresh)が完了したことを知らせる関数
*
* タイムアウトがないのでこれを最終的に実行しないと出たままになる
*/
function refreshFinished() {
closeContent().then(() => {
isPullStart = false;
isRefreshing = false;
});
}
function setDisabled(value) {
disabled = value;
}
onMounted(() => {
supportPointerDesktop = !!window.PointerEvent && deviceKind === 'desktop';
@ -165,27 +183,10 @@ onUnmounted(() => {
if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
});
/**
* emit(refresh)が完了したことを知らせる関数
*
* タイムアウトがないのでこれを最終的に実行しないと出たままになる
*/
const refreshFinished = () => {
closeContent().then(() => {
isPullStart = false;
isRefreshing = false;
});
};
const setDisabled = (value) => {
disabled = value;
};
defineExpose({
refreshFinished,
setDisabled,
});
</script>
<style lang="scss" module>