How can I sort an unordered list alphabetically by class with JavaScript or PHP?

Question

In a custom J4 site I am using the Shack Locations (previously Focalpoint) core extension that displays a dynamically generated legend of location types on the front end, but it is listing the nine types randomly. I carefully created the location types in the order in which I wanted them to appear. I also used Joomla's ordering facility to no avail. So, I created an override which brings in the location type IDs as a class for each li item (by default there is no 'li' class), so on the front-end the html now shows this (although each also has an 'a' link, but that's not relevant here):

<li class="28">No meeting</li>
<li class="22">Tuesday afternoon</li>
<li class="23">Tuesday evening</li>
<li class="25">Wednesday evening</li>
<li class="27">Thursday evening</li>
<li class="20">Monday afternoon</li>
<li class="24">Wednesday afternoon</li>
<li class="26">Thursday afternoon</li>
<li class="21">Monday evening</li>

For what I hope are obvious reasons, I want the list to display like this:

<li class="20">Monday afternoon</li>
<li class="21">Monday evening</li>
<li class="22">Tuesday afternoon</li>
<li class="23">Tuesday evening</li>
<li class="24">Wednesday afternoon</li>
<li class="25">Wednesday evening</li>
<li class="26">Thursday afternoon</li>
<li class="27">Thursday evening</li>
<li class="28">No meeting</li>

The PHP for this element is

<?php
defined('_JEXEC') or die();

$markers = $this->chunkLegends($this->item->markerdata);

$html       = [];
$subtitle   = '';
$lastLegend = null;
foreach ($markers as $legend) {
    if ($lastLegend && $lastLegend != $legend->alias) {
        $html[] = '</ul>';
        $html[] = '</div>';
    }

    $subtitle = $legend->subtitle ? sprintf('<small>%s</small>', $legend->subtitle) : '';

    $html[] = sprintf(
        '<div class="%s"><h4>%s%s</h4>',
        $legend->alias,
        $legend->title,
        $subtitle
    );

    $html[] = '<ul class="sidebar">';
    foreach ($legend->markers as $marker) {
        $html[] = sprintf(
            '<li class="%s"><a data-marker-type="%s" class="active markertoggles markers-%s" href="#">%s</a></li>',
            $marker->locationtype_id, 
            $marker->locationtype_id,          
            $marker->locationtypealias,
            $marker->locationtype
        );
    }
    $html[] = '</ul>';
    $html[] = '</div>';
}

$html[] = $this->loadTemplate('legend_buttons');

echo join("\n", $html);

Can I sort the li items by their class, either by adding something to the PHP file, or writing vanilla JavaScript? No jQuery, please. TIA.

Answer 1

I solved it with some vanilla JavaScript. I'd still like to know how it could be done in PHP as the JavaScript runs after page load and on a slow page load the resort might be visible to the naked eye.

Here is the script (using the li Ids - not shown above - rather than class):

window.onload = function() {
    if (document.getElementById("meetings")) {
    let
        list = document.querySelector('.sidebar'),
        results = document.querySelectorAll('.sort');
    let sliced = Array.prototype.slice.call(results, 0);
        sliced.sort(sortByElementText('a.markertoggles'));
        list.innerHTML = '';
        sliced.reduce(function(list, item) {
            list.appendChild(item);
            return list;
        },
        list);
        function sortByElementText(selector) {
            return function(a, b) {
            b.id;
            a.id;    
            return a.id > b.id;
            }
        }
    }
}

And hands up, I got the original idea from an answer (entitled 'A native js way.') on this post on Stackoverflow by @synthe1c

UPDATE: I have since discovered that although this works perfectly in Firefox, it doesn't in Chrome, Edge, Android.

Answer 2

Use usort() to sort $legend->markers array:

usort(
    $legend->markers,
    static fn ($a, $b) => $a->locationtype_id <=> $b->locationtype_id
);