Touch Target Navigation JavaScript Prototype
This is an experiment with making a touch selector
that you can scrub across to change content.
It's just a proof of concept, but I like the
direction
[] Check out https
:
//m3.material.io for how they are preventing
the safari bottom nav from hiding so you get a constent experience
All Systems Red
Martha Wells
CSS
#exampleWrapper {
display: grid;
place-items: center;
}
#outputArea {
display: grid;
background-color: blue;
width: 250px;
height: 100px;
margin-bottom: 2rem;
grid-template-columns: 90px 1fr;
}
#outputArea img {
max-height: 100px;
}
#inputArea {
display: grid;
width: 250px;
grid-template-columns: 50px 50px 50px 50px 50px;
margin-bottom: 3rem;
}
#inputArea img {
width: 50px;
height: 50px;
}
JavaScript
const s = [0, 0]
const books = [
[
{
title: "All Systems Red",
author: "Martha Wells",
img: "all-systems-red-cover-1" },
{
title: "Fool",
author: "Christopher Moore",
img: "fool-cover-1"
},
],
[
{
title: "The Design Of Everyday Things",
author: "Don Norman",
img: "design-of-every-day-things-cover-1"
},
{
title: "Hawkeye",
author: "Matt Fraction",
img: "hawkeye-cover-1"
},
],
[
{
title: "The Diamond Age",
author: "Neal Stephenson",
img: "diamond-age-cover-1"
},
{
title: "Neoromancer",
author: "William Gibson",
img: "neuromancer-cover-1"
},
],
[
{
title: "The Trial",
author: "Franz Kafka",
img: "the-trial-cover-1"
},
{
title: "A Scanner Darkly",
author: "Philip K. Dick",
img: "scanner-darkly-cover-1"
},
],
[
{
title: "Dune",
author: "Frank Herbert",
img: "dune-cover-1"
},
{
title: "The Gunslinger",
author: "Stephen King",
img: "the-gunslinger-cover-1"
},
]
]
const changeBook = (event) => {
event.preventDefault()
const x = Math.floor(parseInt(
event.changedTouches[0].clientX -
inputArea.getBoundingClientRect().left,
10) / 50)
const y = Math.floor(parseInt(
event.changedTouches[0].clientY -
inputArea.getBoundingClientRect().top,
10) / 50)
if (s[0] != x || s[1] != y) {
s[0] = x
s[1] = y
bookImage.src = `/images/js-touch-prototype/${books[x][y].img}.jpg`
bookTitle.innerHTML = books[x][y].title
bookAuthor.innerHTML = books[x][y].author
console.log(x)
console.log(y)
}
}
const handleMove = (event) => {
changeBook(event)
}
const handleStart = (event) => {
changeBook(event)
}
const init = () => {
console.log("init")
inputArea.addEventListener("touchstart", handleStart)
inputArea.addEventListener("touchmove", handleMove)
}
document.addEventListener("DOMContentLoaded", init)