From 267e2061ee48fab6c5858a5a995be6d136fedff3 Mon Sep 17 00:00:00 2001
From: jesus2099 <jesus2099@users.noreply.github.com>
Date: Thu, 25 Jul 2024 22:27:34 +0200
Subject: [PATCH] fix(inline recs): Use a sorting function

Instead of HTML comment sorting hack
Improves #764 with this @kellnerd advice
---
 mb_qol_inline_recording_tracks.user.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/mb_qol_inline_recording_tracks.user.js b/mb_qol_inline_recording_tracks.user.js
index 1464f704..baa1d5ad 100644
--- a/mb_qol_inline_recording_tracks.user.js
+++ b/mb_qol_inline_recording_tracks.user.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name         MB: QoL: Inline all recording's tracks on releases
-// @version      2024.5.8
+// @version      2024.5.25
 // @description  Display all tracks and releases on which a recording appears from the release page.
 // @author       ROpdebee
 // @license      MIT; https://opensource.org/licenses/MIT
@@ -73,7 +73,7 @@ function getTrackIndices(media) {
 
 function getReleaseName(release) {
     let releaseComment = release.disambiguation || '';
-    return `<!-- order by: [${release.date || ''}] ${release.title} ${releaseComment} ${release.media[0].position}.${release.media[0].track[0].number} --><a href="/release/${release.id}" ` + (release.date ? `title="released on ${release.date}"` : '') + `>${release.title}</a>` + (releaseComment ? ` <span class="comment">(${releaseComment})</span>` : '');
+    return `<a href="/release/${release.id}" title="` + (release.date ? `released on ${release.date}` : 'unknown release date') + `">${release.title}</a>` + (releaseComment ? ` <span class="comment">(${releaseComment})</span>` : '');
 }
 
 function formatRow(release) {
@@ -82,8 +82,8 @@ function formatRow(release) {
 
 function insertRows(recordingTd, recordingInfo) {
     let rowElements = recordingInfo.releases
+        .sort(compareReleases)
         .map(formatRow)
-        .sort()
         .map(row => '<dl class="ars"><dt>appears on:</dt><dd>' + row + '</dd></dl>')
         .join('\n');
     rowElements = '<div class="ars ROpdebee_inline_tracks">' + rowElements + '</div>';
@@ -95,6 +95,18 @@ function insertRows(recordingTd, recordingInfo) {
     }
 }
 
+function compareReleases(a, b) {
+    if (releaseOrderingString(a) < releaseOrderingString(b)) {
+        return -1;
+    } else {
+        return 1;
+    }
+}
+
+function releaseOrderingString(release) {
+    return `[${release.date || ''}] ${release.title} ${release.disambiguation || ''} ${release.media[0].position.toString().padStart(4, '0')}.${release.media[0].track[0].number.toString().padStart(10, '0')}`;
+}
+
 function loadAndInsert() {
     let recAnchors = document.querySelectorAll('table.medium td > a[href^="/recording/"]:first-child, table.medium td > span:first-child > a[href^="/recording/"]:first-child, table.medium td > span:first-child > span:first-child > a[href^="/recording/"]:first-child');
     let todo = [...recAnchors]