Skip to content
This repository has been archived by the owner on Feb 11, 2024. It is now read-only.

Commit

Permalink
[追加]【FE】ビンゴセルの投稿/投稿済み画面を縦横スワイプで隣のセルに切り替える (#75)
Browse files Browse the repository at this point in the history 
Co-authored-by: sayako21 <>
  • Loading branch information
@sayako21
sayako21 authored Nov 4, 2023
1 parent 7ec6bf8 commit 5e3fb02
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 13 deletions.
37 changes: 24 additions & 13 deletions components/BingoCardCarousel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<div
id="vue-carousel"
style="height: 31rem; width: 100vw; overflow: hidden"
@touchstart="onTouchStart"
@mousedown="onTouchStart"
@touchstart="onTouchStartCard"
@mousedown="onTouchStartCard"
>
<div class="carousel">
<button
Expand Down Expand Up @@ -87,8 +87,10 @@
@closeBingoCardDetailModal="closeBingoCardDetailModal"
@postBingoCellRequest="postBingoCellRequest"
@postCheckFollowingSubject="postCheckFollowingSubject"
@openNextBingoCardDetailModal="openNextBingoCardDetailModal"
:selectedBingoCell="selectedBingoCardCell"
:isFollowingSubject="isFollowingSubject"
:selectedBingoCardCellNo="selectedBingoCardCellNo"
/>
</div>
</template>
Expand Down Expand Up @@ -128,7 +130,7 @@ const state = reactive({
/**
* ビンゴカード一覧のスワイプ処理
*/
const onTouchMove = (event: any) => {
const onTouchMoveCard = (event: any) => {
if (state.startX == null) {
return;
}
Expand All @@ -142,7 +144,7 @@ const canMove = (index: any) => {
return props.bingoCards[index] != null;
};
const onTouchEnd = () => {
const onTouchEndCard = () => {
if (state.startX == null) {
return;
}
Expand All @@ -157,23 +159,23 @@ const onTouchEnd = () => {
};
onMounted(() => {
window.addEventListener("mousemove", onTouchMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("mouseup", onTouchEnd);
window.addEventListener("touchend", onTouchEnd);
window.addEventListener("mousemove", onTouchMoveCard);
window.addEventListener("touchmove", onTouchMoveCard);
window.addEventListener("mouseup", onTouchEndCard);
window.addEventListener("touchend", onTouchEndCard);
});
onBeforeUnmount(() => {
window.removeEventListener("mousemove", onTouchMove);
window.removeEventListener("touchmove", onTouchMove);
window.removeEventListener("mouseup", onTouchEnd);
window.removeEventListener("touchend", onTouchEnd);
window.removeEventListener("mousemove", onTouchMoveCard);
window.removeEventListener("touchmove", onTouchMoveCard);
window.removeEventListener("mouseup", onTouchEndCard);
window.removeEventListener("touchend", onTouchEndCard);
});
const activeIncrement = () => state.currentNum++;
const activeDecrement = () => state.currentNum--;
const onTouchStart = (event: any) => {
const onTouchStartCard = (event: any) => {
if (modalIsOpen.value) return false;
state.isSwiping = true;
state.startX = "touches" in event ? event.touches[0].clientX : event.clientX;
Expand All @@ -194,12 +196,21 @@ const selectedBingoCardCell = computed(() => {
(value) => value.id === bingoCellId.value
)[0];
});
// モーダルに表示するビンゴのセル
const selectedBingoCardCellNo = computed(() => {
return selectedBingoCard.value.bingoCells.findIndex(
(value) => value.id === bingoCellId.value
);
});
/**
* モーダルの処理
*/
// ビンゴカード詳細モーダルを開く
const modalIsOpen = ref(false);
const openNextBingoCardDetailModal = (index) => {
openBingoCardDetailModal(selectedBingoCard.value.bingoCells[index].id);
};
const openBingoCardDetailModal = async (bingoCellIdByChild: string) => {
bingoCellId.value = bingoCellIdByChild;
modalIsOpen.value = true;
Expand Down
142 changes: 142 additions & 0 deletions components/BingoCardDetailModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,68 @@
</button>
</div>
</div>

<button
class="nav right text-4xl"
v-if="canMove('right', selectedBingoCardCellNo)"
@click="move('right', selectedBingoCardCellNo)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 320 512"
>
<path
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
/>
</svg>
</button>
<button
class="nav up text-4xl"
v-if="canMove('up', selectedBingoCardCellNo)"
@click="move('up', selectedBingoCardCellNo)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 512 512"
>
<path
d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
/>
</svg>
</button>
<button
class="nav down text-4xl"
v-if="canMove('down', selectedBingoCardCellNo)"
@click="move('down', selectedBingoCardCellNo)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 448 512"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
/>
</svg>
</button>
<button
class="nav left text-4xl"
v-if="canMove('left', selectedBingoCardCellNo)"
@click="move('left', selectedBingoCardCellNo)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 320 512"
>
<path
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
/>
</svg>
</button>
</div>
</div>
</template>
Expand All @@ -162,12 +224,58 @@ const props = defineProps({
type: Object as PropType<IsFollowingSubjectResponse | null>,
required: true,
},
selectedBingoCardCellNo: {
type: Number,
required: true,
},
});
const currentPosition = ref(props.selectedBingoCardCellNo); // 現在の位置、初期値はセンターのセル
const canMove = (direction, index) => {
switch (direction) {
case "up":
return index - 3 >= 0;
case "down":
return index + 3 <= 8;
case "left":
return index % 3 !== 0;
case "right":
return index % 3 !== 2;
default:
return false;
}
};
const move = (direction, index) => {
let newIndex = index;
switch (direction) {
case "up":
newIndex -= 3;
break;
case "down":
newIndex += 3;
break;
case "left":
if (index % 3 !== 0) {
newIndex -= 1;
}
break;
case "right":
if (index % 3 !== 2) {
newIndex += 1;
}
break;
}
emits("openNextBingoCardDetailModal", newIndex);
};
const emits = defineEmits([
"closeBingoCardDetailModal",
"postBingoCellRequest",
"postCheckFollowingSubject",
"openNextBingoCardDetailModal",
]);
/**
Expand Down Expand Up @@ -235,3 +343,37 @@ const postBingoCellRequest = async () => {
await emits("postBingoCellRequest", form.value, selectedFile.value);
};
</script>

<style scoped>
.nav {
position: absolute;
padding: 0.5rem;
fill: gray;
}
.nav:hover {
background: lightgray;
border-radius: 6px;
fill: rgb(75 85 99 / 1);
}
.up {
top: -4%;
left: 42%;
}
.left {
top: 43%;
right: -4%;
}
.right {
top: 43%;
left: -4%;
}
.down {
bottom: -4%;
left: 42%;
}
</style>

0 comments on commit 5e3fb02

Please sign in to comment.