eric/bridget
1
0
Fork 0
mirror of https://github.com/Sped0n/bridget.git synced 2026-04-14 10:09:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

eslint update

Browse Source
This commit is contained in:
Spedon
2023-03-09 21:24:22 +08:00
parent 2618bbbcf2
commit 4208b6ed56
2 changed files with 67 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/js/theme.js
View File

@@ -1,35 +1,63 @@
const images = document.getElementsByClassName("image");
const images = document.getElementsByClassName('image')
let globalIndex = 0,
last = {x: 0, y: 0};
const featuredPicNum = document.body.getAttribute('featuredPicNum')
let globalIndex = 0
let last = { x: 0, y: 0 }
function duper (num) {
return ('0000' + num).slice(-4)
}
const footerIndex = document.getElementsByClassName('ftid')
const numSpan = (numOne, numTwo) => {
const numOneString = duper(numOne)
const numTwoString = duper(numTwo)
footerIndex.item(0).innerText = numOneString[0]
footerIndex.item(1).innerText = numOneString[1]
footerIndex.item(2).innerText = numOneString[2]
footerIndex.item(3).innerText = numOneString[3]
footerIndex.item(4).innerText = numTwoString[0]
footerIndex.item(5).innerText = numTwoString[1]
footerIndex.item(6).innerText = numTwoString[2]
footerIndex.item(7).innerText = numTwoString[3]
}
numSpan(0, featuredPicNum)
const activate = (image, x, y) => {
image.style.left = `${x}px`;
image.style.top = `${y}px`;
image.style.zIndex = globalIndex;
image.style.left = `${x}px`
image.style.top = `${y}px`
image.style.zIndex = '' + globalIndex
image.dataset.status = "active";
image.dataset.status = 'active'
last = {x, y};
last = { x, y }
}
const distanceFromLast = (x, y) => {
return Math.hypot(x - last.x, y - last.y);
return Math.hypot(x - last.x, y - last.y)
}
const handleOnMove = e => {
if (distanceFromLast(e.clientX, e.clientY) > (window.innerWidth / 20)) {
const lead = images[globalIndex % images.length],
tail = images[(globalIndex - 5) % images.length];
const imageIndex = globalIndex % images.length
activate(lead, e.clientX, e.clientY);
const lead = images[imageIndex]
const tail = images[(globalIndex - 5) % images.length]
if (tail) tail.dataset.status = "inactive";
activate(lead, e.clientX, e.clientY)
globalIndex++;
numSpan((imageIndex + 1), featuredPicNum)
console.log(imageIndex + ' /' + featuredPicNum)
if (tail) tail.dataset.status = 'inactive'
globalIndex++
}
}
window.onmousemove = e => handleOnMove(e);
window.onmousemove = e => handleOnMove(e)
window.ontouchmove = e => handleOnMove(e.touches[0]);
window.ontouchmove = e => handleOnMove(e.touches[0])

22
layouts/index.html
View File

@@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
{{- partial "head.html" . -}}
<title>{{ .Title }}</title>
</head>
@@ -12,12 +13,19 @@
<div id="main">
{{ $sourcePath := "images" }}
{{ $gallery := site.GetPage $sourcePath }}
{{ with $gallery.Resources.ByType "image" }}
{{ range . }}
<img class="image" src="{{ .RelPermalink }}" alt="x"/>
{{ end }}
{{ $images := $gallery.Resources.ByType "image" }}
{{ $index := len $images }}
<script type="text/javascript">
document.body.setAttribute('featuredPicNum', {{$index}})
</script>
{{ range $images }}
{{ $index = sub $index 1}}
<img class="image" data-index="{{ $index }}" data-status="inactive" src="{{ .RelPermalink }}"/>
{{ end }}
</div>
{{- partial "footer.html" . -}}
<footer>
{{ partial "footer.html" . }}
</footer>
</body>
</html>