View source for Widget:indexSorterGrouper

<includeonly><script>
RLQ.push(function () {
  $(document).ready(function() {
    // For now, we have to make sure the data is there (Change the template, dammit!)
	$(".card-bg-small").each(function() {
	  var element = $(this);
	  var name = element.find('span').first().text();
	  var index = parseInt(element.find('span').last().text());
	  var srcStr = element.find("img").eq(2).attr("src");
	  var myRegexp = /^.*Icon_(.*)_(.*)star.*$/g;
	  var match = myRegexp.exec(srcStr);
	  var classification = match[1];
	  var rarity = match[2];
	  
	  element.data('name', name);
	  element.data('index', index);
	  element.data('classification', classification);
	  element.data('rarity', rarity);
	});
    
    // Once everything is ready, default-sort it
    orderByName();
  });
});

function orderByName(currentButton) {
  tdollSorterActiveButton(currentButton);
  
  var comparer = function (a, b) {
    var nameA=$(a).data('name').toLowerCase();
    var nameB=$(b).data('name').toLowerCase();
    if (nameA < nameB) return -1;
    if (nameA > nameB) return 1;
    return 0;
  };
  
  var grouper = function (parent, elements) {
    if (parent.find('#Unreleased_T-Dolls').length > 0 || parent.find('#Extra_T-Dolls').length > 0) {
      return;
    }
    
    var groupHeader = $("<h3 />").text("#...").addClass("addedbysorter");
    groupHeader.insertBefore(elements.first());
    
    $.grep(elements, function(element, i) {
      var currentLetter = getFirstLetterGroup($(element).data('name'));
      var nextElementLetter = getFirstLetterGroup($(elements[i+1]).data('name'));
      if (currentLetter !== nextElementLetter) {
        var linebreaker = $("<br />").addClass("addedbysorter");
        linebreaker.insertAfter(element);
        var groupHeaderText = nextElementLetter.toUpperCase() + "...";
        if (groupHeaderText.trim() != "...") {
          var groupHeader = $("<h3 />").text(groupHeaderText).addClass("addedbysorter");
          groupHeader.insertAfter(linebreaker);
        }
      }
      return true;
    });
  };
  
  tdollSorter(comparer, grouper);
}

function getFirstLetterGroup(element) {
  if (!element || element == null) {
    return " ";
  }
  
  var letter = element.charAt(0);
  if (letter >= "0" && letter <= "9") {
    letter = "#"
  }
  return letter.toLowerCase();
}

function orderByRarityClassName(currentButton) {
  tdollSorterActiveButton(currentButton);
  
  var comparer = function (a, b) {
      var contentA = getSortKeyForRarityClassName($(a));
      var contentB = getSortKeyForRarityClassName($(b));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
    };
  
  tdollSorter(comparer);
}

function orderByClassRarityName(currentButton) {
  tdollSorterActiveButton(currentButton);
  
  var comparer = function (a, b) {
      var contentA = getSortKeyForClassRarityName($(a));
      var contentB = getSortKeyForClassRarityName($(b));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
    };
  
  tdollSorter(comparer);
}

function getSortKeyForClassRarityName(element) {
  var classification = getNumberForClassification(element);
  var rarity = getNumberForRarity(element);
  var name = $(element).data('name');
  return classification + "_" + rarity + "_" + name;
}

function getSortKeyForRarityClassName(element) {
  var classification = getNumberForClassification(element);
  var rarity = getNumberForRarity(element);
  var name = $(element).data('name');
  return rarity + "_" + classification + "_" + name;
}

function getNumberForRarity(element) {
  var rawRarity = $(element).data('rarity');
  if (!rawRarity || rawRarity == null || isNaN(rawRarity)) {
    return 9;
  }
  
  return parseInt(rawRarity);
}

function getNumberForClassification(element) {
  var rawClassification = $(element).data('classification');
  if (!rawClassification || rawClassification == null) {
    return 9;
  }
  
  rawClassification = rawClassification.toLowerCase();
  if (rawClassification === "hg") {
    return 1;
  } else if (rawClassification === "ar") {
    return 2;
  } else if (rawClassification === "smg") {
    return 3;
  } else if (rawClassification === "rf") {
    return 4;
  } else if (rawClassification === "mg") {
    return 5;
  } else if (rawClassification === "sg") {
    return 6;
  }
  
  return 9;
}

function orderByIndex(currentButton) {
  tdollSorterActiveButton(currentButton);
  
  var comparer = function (a, b) {
      var contentA = parseInt($(a).data('index'));
      var contentB = parseInt($(b).data('index'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
    };
  
  var grouper = function (parent, elements) {
    var firstTen = Math.ceil(parseInt(elements.first().data('index')) / 10) * 10;
    var groupHeader = $("<h3 />").text("..." + firstTen).addClass("addedbysorter");
    groupHeader.insertBefore(elements.first());
    
    $.grep(elements, function(element, i) {
      var currentTen = Math.ceil(parseInt($(element).data('index')) / 10) * 10;
      var nextElementTen = Math.ceil(parseInt($(elements[i+1]).data('index')) / 10) * 10;
      if (currentTen !== nextElementTen) {
        var linebreaker = $("<br />").addClass("addedbysorter");
        linebreaker.insertAfter(element);
        
        var groupHeaderText = currentTen + "..." + nextElementTen;
        if (!isNaN(nextElementTen)) {
          var groupHeader = $("<h3 />").text(groupHeaderText).addClass("addedbysorter");
          groupHeader.insertAfter(linebreaker);
        }
      }
      return true;
    });
  }
  
  tdollSorter(comparer, grouper);
}

function tdollSorterActiveButton(butt) {
  $('[data-tdollsortbutton="true"]').removeClass("enabled");
  $(butt).addClass("enabled");
}

function tdollSorter(comparer, grouper) {
  $('.addedbysorter').remove();
  
  var parents = $(".mw-headline").closest("h2");
  parents.each(function() {
    var parent = $(this);
    var elements = parent.nextUntil("h2", ".card-bg-small");
  
    elements.detach().sort(comparer);
  
    elements.insertAfter(parent);
    
    if (typeof grouper === "function") {
      grouper(parent, elements);
    }
  });
}
</script><div style="display:inline-block">
<button class="gf-button" data-tdollsortbutton="true" onclick="orderByName(this);">By Name</button>
<button class="gf-button" data-tdollsortbutton="true" onclick="orderByClassRarityName(this);">By Class&gt;Rarity&gt;Name</button>
<button class="gf-button" data-tdollsortbutton="true" onclick="orderByRarityClassName(this);">By Rarity&gt;Class&gt;Name</button>
<button class="gf-button" data-tdollsortbutton="true" onclick="orderByIndex(this);">By Index</button></div>
</includeonly>

<noinclude>
{{#widget:indexSorterGrouper|}}
== Some heading ==

</noinclude>