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

mixins/AnimeList.pixy

@@ -8,7 +8,7 @@ component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser
 
 component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User)
 	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
 				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))

mixins/Tab.pixy

@@ -1,4 +1,4 @@
 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)
 		span.tab-text= label

scripts/AnimeNotifier.ts

@@ -330,9 +330,110 @@ export default class AnimeNotifier {
 	}
 
 	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")) {
 				// Skip elements that have their event listeners attached already
-			if(element["listeners-attached"]) {
+				if(element["drag-listeners-attached"]) {
 					continue
 				}
 
@@ -411,7 +512,8 @@ export default class AnimeNotifier {
 				}, false)
 
 				// Prevent re-attaching the same listeners
-			element["listeners-attached"] = true
+				element["drag-listeners-attached"] = true
+			}
 		}
 	}