100 lines
3.2 KiB
Text
100 lines
3.2 KiB
Text
---
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
function placeholders() {
|
|
const word = "placeholder";
|
|
let str: string;
|
|
const arr: string[] = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
str = `${word}-${i}`;
|
|
arr.push(str);
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
const ph = placeholders();
|
|
---
|
|
<div class="marquee-buttons">
|
|
<button id="button-widget" class="marquee-button marquee-button-widget">widgets</button>
|
|
<button id="button-panel" class="marquee-button marquee-button-panel">panels</button>
|
|
<button id="button-overlay" class="marquee-button marquee-button-overlay">overlays</button>
|
|
</div>
|
|
<div class="marquee">
|
|
<div class="marquee-scroll">
|
|
<div id="marquee-scroll-left" class="marquee-scroll-arrow">
|
|
<div><Icon name="caret-left"/></div>
|
|
</div>
|
|
<div class="marquee-item-spacing"/>
|
|
<div id="marquee-scroll-right" class="marquee-scroll-arrow">
|
|
<div><Icon name="caret-right"/></div>
|
|
</div>
|
|
</div>
|
|
<div id="marquee-content" class="marquee-content" data-scroll="0">
|
|
{ph.map(_ => <div class="marquee-item">
|
|
<video class="marquee-item-spacing marquee-item-content" controls>
|
|
<source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
|
|
</video>
|
|
</div>)}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// marquee
|
|
// const dataNum = 10 // number of elements
|
|
const marquee = document.getElementById("marquee-content")!;
|
|
marquee.style.setProperty("--scroll", "0")
|
|
|
|
// left-right buttons
|
|
const scrollLeft = document.getElementById("marquee-scroll-left")!;
|
|
const scrollRight = document.getElementById("marquee-scroll-right")!;
|
|
|
|
scrollLeft.addEventListener("mousedown", () => {
|
|
const dataScroll = marquee.getAttribute("data-scroll")!;
|
|
const hashMap = {
|
|
"0": () => {
|
|
const scrollToLast = "-900%" // dataNum
|
|
marquee.setAttribute("data-scroll", scrollToLast);
|
|
},
|
|
"lt0": () => {
|
|
const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
|
|
const oldNumScroll = Number(oldDataScroll)
|
|
const newScroll = oldNumScroll - 100;
|
|
newScroll <= 900 && newScroll > 0 ?
|
|
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
|
|
: marquee.setAttribute("data-scroll", "0")
|
|
}
|
|
}
|
|
|
|
hashMap[dataScroll === "0" ?
|
|
"0"
|
|
: "lt0"
|
|
]()
|
|
const updatedScroll = marquee.getAttribute("data-scroll")!;
|
|
marquee.style.setProperty("--scroll", updatedScroll)
|
|
})
|
|
|
|
scrollRight.addEventListener("mousedown", () => {
|
|
const dataScroll = marquee.getAttribute("data-scroll")!;
|
|
const hashMap = {
|
|
"900": () => { // dataNum
|
|
const scrollToFirst = "0";
|
|
marquee.setAttribute("data-scroll", scrollToFirst);
|
|
},
|
|
"mt0": () => {
|
|
const oldDataScroll = marquee.getAttribute("data-scroll")!.slice(1, -1);
|
|
const oldNumScroll = Number(oldDataScroll)
|
|
const newScroll = oldNumScroll + 100;
|
|
newScroll <= 900 && newScroll < 1000 ?
|
|
marquee.setAttribute("data-scroll",`-${newScroll.toString()}%`)
|
|
: marquee.setAttribute("data-scroll", "0")
|
|
}
|
|
}
|
|
|
|
hashMap[dataScroll === "900" ?
|
|
"900"
|
|
: "mt0"
|
|
]()
|
|
const updatedScroll = marquee.getAttribute("data-scroll")!;
|
|
marquee.style.setProperty("--scroll", updatedScroll)
|
|
})
|
|
</script>
|