Tinysort #125

by abubelinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<ul class="memberlist" p1="0">
   <li p1="1">
     <a class="function" href="#raise_on_error" p1="2">raise_on_error</a>
   </li>
   <li p1="3">
     <a class="class" href="#ResultWrapper" p1="4">ResultWrapper</a>
      <ul class="memberlist" p1="5">
      <li p1="6">
        <a class="function" href="#ResultWrapper.__init__" p1="7">ResultWrapper</a>
      </li>
      <li p1="8">
        <a class="variable" href="#ResultWrapper.total" p1="9">total</a>
      </li>
      <li p1="10">
        <a class="variable" href="#ResultWrapper.pages" p1="11">pages</a>
      </li>
      <li p1="12">
        <a class="variable" href="#ResultWrapper.hits" p1="13">hits</a>
      </li>
    </ul>
   </li>
   <li p1="14">
     <a class="class" href="#Client" p1="15">Client</a>
      <ul class="memberlist" p1="16">
      <li p1="17">
        <a class="function" href="#Client.__init__" p1="18">Client</a>
      </li>
      <li p1="19">
        <a class="function" href="#Client.record" p1="20">record</a>
      </li>
      <li p1="21">
        <a class="function" href="#Client.csl_styles" p1="22">csl_styles</a>
      </li>
    </ul>

   </li>
 </ul>
<button id="AZ">sort AZ</button>
<button id="original">original order</button>

JavaScript

var listElements = document.querySelectorAll('li, .class, .memberlist, .variable, .function');
console.log(listElements);
for (var i = 0, l = listElements.length; i < l; i++) {
  listElements[i].setAttribute('p1', i);
}
document.getElementById('AZ').addEventListener('click', function() {
  tinysort(listElements, 
  {selector:'ul.memberlist'},{selector:'.class'},{selector:'.function'},{selector:'.variable'});
});
document.getElementById('original').addEventListener('click', function() {
  tinysort(listElements, {attr: 'p1'});
});