JSFiddle - React, Tailwind, and code Playground

tinysort() WORKING examples

by abubelinha

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>

<!--script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.charorder.min.js"></script-->

<script type="text/javascript">
var myCharOrder = 'a[áàäâãå]bc[ç]de[éèëê]hi[íìïî]nño[óòöôõ]t[uúùüû]';
function showCharOrder() {
	document.getElementById("mychars").innerHTML = "charOrder: " + myCharOrder + "<br>INACTIVE IN THIS SCRIPT!!<br>If charOrder plugin loaded, sortFunction does not work." + " See <a href=https://github.com/Sjeiti/TinySort/issues/144#issuecomment-404930705 target=_blank>this issue</a> for details";
}
// PREPARE FOR UNSORTING
// as suggested in https://github.com/Sjeiti/TinySort/issues/125#issuecomment-244302431
//  code from https://jsfiddle.net/Sjeiti/66tgnwzg/
var listElements = document.querySelectorAll('div#mylist>ol>li');
for (var i = 0, l = listElements.length; i < l; i++) {
  listElements[i].setAttribute('value', i);
}
function sortCodes(a,b) {
  var sa=a.elm.textContent.toString();
  var sb=b.elm.textContent.toString();
  return sa===sb ? 0 : (sa>sb?1:-1);
}
function sortByCodeLength(a,b) {
  var lenA = a.elm.textContent.length;
  var lenB = b.elm.textContent.length;
  // the above values would use the whole li element length
  var subA =a.elm.getElementsByClassName("code"); 
  var subB =b.elm.getElementsByClassName("code"); 
  if(! (subA.length>0 && subB.length>0)) return 0;
  lenA=a.elm.getElementsByClassName("code")[0].textContent.length;
  lenB=b.elm.getElementsByClassName("code")[0].textContent.length;
  return lenA === lenB ? 0 : (lenA > lenB ? 1 : -1);
}  
function sortByLength(subselector) {
// https://stackoverflow.com/questions/8537602/any-way-to-extend-javascripts-array-sort-method-to-accept-another-parameter
  return function(a,b) {
    var subA =a.elm.getElementsByClassName(subselector); 
    var subB =b.elm.getElementsByClassName(subselector); 
    if(! (subA.length>0 &&...

CSS

.code {color:red; font-weight:bold;}
.char {color:brown; font-weight:bold;}
#messages {background-color:yellow; color:red; font-weight:bold;}