pdf/christmas
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

include rank in wishlist, moving items up/down happens during animation instead of after

Browse source
This commit is contained in:
Wingy 2021-09-13 22:30:16 -04:00
parent 2a5240a1ee
commit 1226ff298f
2 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
static/js/wishlist.js
View file

@ -31,6 +31,11 @@ function listen (element, upOrDown) {
const tr = event.currentTarget.parentElement.parentElement
const otherTr = upOrDown === 'up' ? tr.previousSibling : tr.nextSibling
const res = fetch(`/api/wishlist/${document.querySelector('[type="data/user_id"]').textContent}/${tr.id}/move/${upOrDown}`, {
method: 'post',
credentials: 'include'
})
await Promise.all([
animateCSS(tr, 'zoomOut'),
animateCSS(otherTr, 'zoomOut')
@ -39,20 +44,31 @@ function listen (element, upOrDown) {
tr.style.visibility = 'hidden'
otherTr.style.visibility = 'hidden'
const data = await fetch(`/api/wishlist/${document.querySelector('[type="data/user_id"]').textContent}/${tr.id}/move/${upOrDown}`, {
method: 'post',
credentials: 'include'
})
.then(res => res.json())
const data = await (await res).json()
if (data.error) throw new Error(data.error)
upOrDown === 'up' ? moveUp(tr) : moveDown(tr)
const rankEl1 = tr.querySelector('.rank')
const rankNum1 = Number(rankEl1.textContent)
const rankEl2 = otherTr.querySelector('.rank')
const rankNum2 = Number(rankEl2.textContent)
if (upOrDown === 'up') {
moveUp(tr)
if (rankNum1 === 2) tr.querySelectorAll('.topForm button').disabled = true
else tr.querySelector('.topForm button').disabled = false
rankEl1.textContent = rankNum1 - 1
rankEl2.textContent = rankNum2 + 1
} else if (upOrDown === 'down') {
moveDown(tr)
rankEl1.textContent = rankNum1 + 1
rankEl2.textContent = rankNum2 - 1
}
for (const tr of document.querySelector('tbody').children) {
tr.querySelector('.upForm > div > div > button').disabled = !tr.previousElementSibling
tr.querySelector('.downForm > div > div > button').disabled = !tr.nextElementSibling
tr.querySelector('.topForm button').disabled = false
}
document.querySelector('.topForm button').disabled = true
tr.style.visibility = 'visible'
otherTr.style.visibility = 'visible'

2
views/wishlist.pug
View file

@ -17,6 +17,7 @@ block content
.box
table.table.has-mobile-cards
thead
th #
th(style='width: 15%;') Image
th(style='width: 25%;') Name
th(style='width: 50%;') Note
@ -34,6 +35,7 @@ block content
each item, index in wishlist
if req.user._id === item.addedBy || req.params.user !== req.user._id
tr(id=item.id)
td.rank= index + 1
td
figure(style='width: 100%; margin: 0;')
img(src=item.image, style='width: 100%; max-height: 20em; object-fit: contain;')