Added drag & drop for anime list status tabs (closes #56)

This commit is contained in:
Eduard Urbach 2018-11-12 19:48:54 +09:00
parent 9e3ec7656d
commit a18aa0095a
3 changed files with 161 additions and 59 deletions

View File

@ -8,7 +8,7 @@ component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser
component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User) component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User)
each item in animeListItems each item in animeListItems
.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]") .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]", draggable="true")
.anime-list-item-image-container .anime-list-item-image-container
a.anime-list-item-image-link(href=item.Anime().Link()) a.anime-list-item-image-link(href=item.Anime().Link())
img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user)) img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user))

View File

@ -1,4 +1,4 @@
component Tab(label string, icon string, url string) component Tab(label string, icon string, url string)
a.tab.action(href=url, data-action="diff", data-trigger="click", aria-label=label) a.tab.action(href=url, data-action="diff", data-trigger="click", aria-label=label, dropzone="move")
Icon(icon) Icon(icon)
span.tab-text= label span.tab-text= label

View File

@ -330,9 +330,110 @@ export default class AnimeNotifier {
} }
dragAndDrop() { dragAndDrop() {
if(location.pathname.includes("/animelist/")) {
for(let element of findAll("anime-list-item")) {
// Skip elements that have their event listeners attached already
if(element["drag-listeners-attached"]) {
continue
}
element.addEventListener("dragstart", e => {
if(!element.draggable) {
return
}
let image = element.getElementsByClassName("anime-list-item-image")[0]
e.dataTransfer.setDragImage(image, 0, 0)
let name = element.getElementsByClassName("anime-list-item-name")[0]
e.dataTransfer.setData("text/plain", JSON.stringify({
api: element.dataset.api,
animeTitle: name.textContent
}))
e.dataTransfer.effectAllowed = "move"
}, false)
// Prevent re-attaching the same listeners
element["drag-listeners-attached"] = true
}
for(let element of findAll("tab")) {
// Skip elements that have their event listeners attached already
if(element["drop-listeners-attached"]) {
continue
}
element.addEventListener("drop", async e => {
let toElement = e.toElement as HTMLElement
// Find tab element
while(toElement && !toElement.classList.contains("tab")) {
toElement = toElement.parentElement
}
// Ignore a drop on the current status tab
if(!toElement || toElement.classList.contains("active")) {
return
}
let data = e.dataTransfer.getData("text/plain")
let json = null
try {
json = JSON.parse(data)
} catch {
return
}
if(!json || !json.api) {
return
}
e.stopPropagation()
e.preventDefault()
let tabText = toElement.textContent
let newStatus = tabText.toLowerCase()
if(newStatus === "on hold") {
newStatus = "hold"
}
try {
await this.post(json.api, {
Status: newStatus
})
await this.reloadContent()
this.statusMessage.showInfo(`Moved "${json.animeTitle}" to "${tabText}".`)
} catch(err) {
this.statusMessage.showError(err)
}
}, false)
element.addEventListener("dragenter", e => {
e.preventDefault()
}, false)
element.addEventListener("dragleave", e => {
e.preventDefault()
}, false)
element.addEventListener("dragover", e => {
e.preventDefault()
}, false)
// Prevent re-attaching the same listeners
element["drop-listeners-attached"] = true
}
}
if(location.pathname.startsWith("/inventory")) {
for(let element of findAll("inventory-slot")) { for(let element of findAll("inventory-slot")) {
// Skip elements that have their event listeners attached already // Skip elements that have their event listeners attached already
if(element["listeners-attached"]) { if(element["drag-listeners-attached"]) {
continue continue
} }
@ -411,7 +512,8 @@ export default class AnimeNotifier {
}, false) }, false)
// Prevent re-attaching the same listeners // Prevent re-attaching the same listeners
element["listeners-attached"] = true element["drag-listeners-attached"] = true
}
} }
} }