Tinysort #125

by abubelinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<ul class="memberlist">
   <li><a class="function">HHH</a></li>
   <li><a class="class">XXX</a>
      <ul class="memberlist">
         <li><a class="function">1X (should be kept inside parent XXX)</a></li>
         <li><a class="function">8X (should be kept inside parent XXX)</a></li>
         <li><a class="variable">2X (should be kept inside parent XXX)</a></li>
      </ul>
   </li>
   <li><a class="function">ZZZ</a></li>
   <li><a class="class">AAA</a>
      <ul class="memberlist">
      <li><a class="variable">1A (should be kept inside parent AAA)</a></li>
      <li><a class="function">3A (should be kept inside parent AAA)</a></li>
      <li><a class="function">2A (should be kept inside parent AAA)</a></li>
      </ul>
   </li>
</ul>
<hr>
<button id="n_AZ">sort A-Z</button>
<button id="n_ZA">sort Z-A</button>
<br>
<button id="n_original">original order</button> (this one fails)

JavaScript

//var listElements = document.querySelectorAll('li, .class, .memberlist, .variable, .function');
var elements = document.querySelectorAll('li');
var elements = document.querySelectorAll('*');
console.log(elements);
for (var i = 0, l = elements.length; i < l; i++) {
  elements[i].setAttribute('position1', i);
}

function sortNested(sortby={}) {
  console.log("sortby",sortby);
  var lists = document.querySelectorAll('ul.memberlist');
  lists.forEach((li) => {
    tinysort(li.childNodes, sortby);
  });
}

document.getElementById('n_AZ').addEventListener('click', function() {
  sortNested();
});
document.getElementById('n_ZA').addEventListener('click', function() {
  sortNested({order:'desc'});
});
document.getElementById('n_original').addEventListener('click', function() {
  sortNested({attr:'position1'});
});