From 59daa5404ec36ff4bb2b1c83ca8f0ccd5ff25183 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Wed, 5 Jul 2017 15:00:58 +0200
Subject: [PATCH] Improved anime list rendering

---
 pages/animelist/animelist.pixy               |  4 ++--
 scripts/AnimeNotifier.ts                     |  4 +++-
 utils/{allowembed.go => AllowEmbed.go}       |  0
 utils/{container.go => GetContainerClass.go} |  0
 utils/{user.go => GetUser.go}                |  0
 utils/{icons.go => Icon.go}                  |  0
 utils/ItemCSSClass.go                        | 14 ++++++++++++++
 7 files changed, 19 insertions(+), 3 deletions(-)
 rename utils/{allowembed.go => AllowEmbed.go} (100%)
 rename utils/{container.go => GetContainerClass.go} (100%)
 rename utils/{user.go => GetUser.go} (100%)
 rename utils/{icons.go => Icon.go} (100%)
 create mode 100644 utils/ItemCSSClass.go

diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy
index e3bfcf61..23b04269 100644
--- a/pages/animelist/animelist.pixy
+++ b/pages/animelist/animelist.pixy
@@ -49,8 +49,8 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
 				if user != nil
 					th.anime-list-item-actions Actions
 		tbody
-			each item in animeList.Items
-				tr.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
+			for i, item := range animeList.Items
+				tr(class=utils.ItemCSSClass(animeList, i), title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
 					td.anime-list-item-name
 						a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.Canonical
 					td.anime-list-item-airing-date
diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index 141fd677..03e29c10 100644
--- a/scripts/AnimeNotifier.ts
+++ b/scripts/AnimeNotifier.ts
@@ -223,8 +223,10 @@ export class AnimeNotifier {
 		const maxDelay = 1000
 		
 		let time = 0
+		let collection = document.getElementsByClassName(className)
 
-		for(let element of findAll(className)) {
+		for(let i = 0; i < collection.length; i++) {
+			let element = collection.item(i) as HTMLElement
 			let type = element.dataset.mountableType || "general"
 
 			if(type in mountableTypes) {
diff --git a/utils/allowembed.go b/utils/AllowEmbed.go
similarity index 100%
rename from utils/allowembed.go
rename to utils/AllowEmbed.go
diff --git a/utils/container.go b/utils/GetContainerClass.go
similarity index 100%
rename from utils/container.go
rename to utils/GetContainerClass.go
diff --git a/utils/user.go b/utils/GetUser.go
similarity index 100%
rename from utils/user.go
rename to utils/GetUser.go
diff --git a/utils/icons.go b/utils/Icon.go
similarity index 100%
rename from utils/icons.go
rename to utils/Icon.go
diff --git a/utils/ItemCSSClass.go b/utils/ItemCSSClass.go
new file mode 100644
index 00000000..0f175ea5
--- /dev/null
+++ b/utils/ItemCSSClass.go
@@ -0,0 +1,14 @@
+package utils
+
+import (
+	"github.com/animenotifier/arn"
+)
+
+// ItemCSSClass removes mountable class if the list has too many items.
+func ItemCSSClass(list *arn.AnimeList, index int) string {
+	if index > 20 || len(list.Items) > 50 {
+		return "anime-list-item"
+	}
+
+	return "anime-list-item mountable"
+}