View source for Widget:indexSorterGrouper

<includeonly><script>
RLQ.push(['jquery', function () {
  $(document).ready(function() {
    // initially remove the paragraph
    var parents = $(".mw-headline").closest("h2");
    parents.each(function() {
      var parent = $(this);
      var paragraph = parent.next('p');
      paragraph.replaceWith(paragraph.children());
    });
    
    // For now, we have to make sure the data is there (Change the template, dammit!)
	$(".gfl-doll-card").each(function() {
	  var element = $(this);
	  var name = element.find('.name').first().text();
	  var index = parseInt(element.find('.index').last().text());
	  var srcStr = element.find("img.rarity-class").attr("src");
	  var myRegexp = /^.*Icon_(.*)_(.*)star.*$/g;
	  var match = myRegexp.exec(srcStr);
	  var classification = match[1];
	  var rarity = match[2];
          
          var serverDataSpans = $("span.serverdata[data-server-doll='" + name + "']");
          serverDataSpans.each(function() {
            var serverDataSpan = $(this);
            var serverShort = serverDataSpan.attr('data-server-released');
            var serverDollName = serverDataSpan.attr('data-server-releasename');
            element.attr("data-server-" + serverShort, serverDollName);
          });
          serverDataSpans.remove();

	  element.attr('data-server-WIKI', name);
	  element.data('name', name);
	  element.data('index', index);
	  element.data('classification', classification);
	  element.data('rarity', rarity);
	});
    
    // Once everything is ready, default-sort it
    $('[data-initialsort]').click();
    
    // Activate ui for user 
    $(".gf-button").prop('disabled', false);
    $('.removeAfterInitIsg').remove();
  });
}]);

function orderByName(currentButton) {
  var sortOrder = tdollSorterActiveButton(currentButton);
  
  var comparer = function (a, b) {
    var nameA=$(a).data('name').toLowerCase();
    var nameB=$(b).data('name').toLowerCase();
    if (nameA < nameB) return -1 * sortOrder;
    if (nameA > nameB) return 1 * sortOrder;
    return 0;
  };
  
  var grouper = function (parent, elements) {
    var currentLetter = getFirstLetterGroup($(elements).first().data('name'));
    var groupHeader = $("<h3 />").text(currentLetter.toUpperCase() + "...").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 groupHeaderText = nextElementLetter.toUpperCase() + "...";
        if (groupHeaderText.trim() != "...") {
          var groupHeader = $("<h3 />").text(groupHeaderText).addClass("addedbysorter");
          groupHeader.insertAfter(element);
        }
      }
      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) {
  var sortOrder = tdollSorterActiveButton(currentButton);
  
  var comparer = function (a, b) {
      var contentA = getSortKeyForRarityClassName($(a));
      var contentB = getSortKeyForRarityClassName($(b));
      var comp = (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
      return comp * sortOrder;
    };
  
  var grouper = getClassAndRarityGrouper();
  
  tdollSorter(comparer, grouper);
}

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

function getClassAndRarityGrouper() {
  var grouper = function (parent, elements) {
    createClassRarityGroup(parent, elements.first());
    
    $.grep(elements, function(element, i) {
      if (elements.length <= i+1) {
        return true;
      }
      var nextElement = elements[i+1];
      
      createClassRarityGroup($(element), nextElement);
      
      return true;
    });
  };
  return grouper;
}

function createClassRarityGroup(element1, nextElement) {
  var currentKey = getSortKeyForClassRarityName(element1, true);
  var nextElementKey = getSortKeyForClassRarityName(nextElement, true);
  
  if (currentKey !== nextElementKey) {
    var groupHeaderText = $(nextElement).data('classification') + " " + getNumberForRarity(nextElement) + "-Star";
    var groupHeader = $("<h3 />").text(groupHeaderText).addClass("addedbysorter");
    groupHeader.insertAfter(element1);
  }
}

function getSortKeyForClassRarityName(element, withoutName) {
  var classification = getNumberForClassification(element);
  var rarity = getNumberForRarity(element);
  var name = $(element).data('name');
  return classification + "_" + rarity + (withoutName ? "" : ("_" + 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) {
    return 9;
  }
  
  if (("" + rawRarity).toLowerCase() === "extra") {
    return "Extra";
  }
  
  if (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) {
  var sortOrder = tdollSorterActiveButton(currentButton);
  
  var comparer = function (a, b) {
      var contentA = parseInt($(a).data('index'));
      var contentB = parseInt($(b).data('index'));
      var comp = (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
      return comp * sortOrder;
    };
  
  var grouper = function (parent, elements) {
    var firstIndex = elements.first().data('index');
    var firstTen = Math.ceil(parseInt(firstIndex) / 10) * 10;
    if (sortOrder == -1) { firstTen -= 9; }
    var groupHeader = $("<h3 />").text(getNumberText(firstIndex) + "..." + getNumberText(firstTen)).addClass("addedbysorter");
    groupHeader.insertBefore(elements.first());
    
    $.grep(elements, function(element, i) {
      if (elements <= i+1) {
        return true;
      }
      var nextElement = $(elements[i+1]);
      
      createIndexGroup(element, nextElement, sortOrder);
      
      return true;
    });
  }
  
  tdollSorter(comparer, grouper);
}

function getNumberText(val) {
  if (!val || isNaN(val)) {
    return "";
  }
  return "" + val;
}

function createIndexGroup(element, nextElement, sortOrder) {
  var currentTen = Math.ceil(parseInt($(element).data('index')) / 10) * 10;
  var nextElementTen = Math.ceil(parseInt(nextElement.data('index')) / 10) * 10;
  if (currentTen !== nextElementTen) {
    if (!isNaN(nextElementTen)) {
      if (sortOrder == -1) { 
        currentTen -= 10;
        nextElementTen -= 9;
      }
      
      var currentIdxShow = currentTen;
      if (sortOrder != -1 && currentIdxShow > 1) currentIdxShow += 1;
      var groupHeaderText = getNumberText(currentIdxShow) + "..." + getNumberText(nextElementTen);
      
      var groupHeader = $("<h3 />").text(groupHeaderText).addClass("addedbysorter");
      groupHeader.insertAfter(element);
    }
  }
}

function tdollSorterActiveButton(butt) {
  var isAscending = $(butt).is('.ascending')
  $('[data-tdollsortbutton="true"]').removeClass("enabled").removeClass("ascending");
  $(butt).addClass("enabled");
  
  if (isAscending) {
    return -1;
  } else {
    $(butt).addClass('ascending');
    return 1;
  }
}

function switchServer(butt) {
  var activeServer = $(butt).attr('data-tdollserver');
  
  $('[data-tdollserverbutton="true"]').removeClass("enabled");
  
  $('.card-bg-small.unreleased').removeClass('unreleased');
  $('.card-bg-small').each(function() {
    var element = $(this);
    var nameToSet = "";
    if (element.is("[data-server-" + activeServer + "]")) {
      nameToSet = element.attr('data-server-' + activeServer);
    } else {
      element.addClass('unreleased');
      nameToSet = element.attr('data-server-wiki');
    }
    element.find('.name').first().text(nameToSet);
  });
  
  $(butt).addClass("enabled");
}

function tdollSorter(comparer, grouper) {
  $('.addedbysorter').remove();
  
  var parents = $(".mw-headline").closest("h2");
  parents.each(function() {
    var parent = $(this);
    // All elements inside the paragraph after the h2 which have special class
    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" disabled data-initialsort="true" onclick="orderByClassRarityName(this);">By Class&gt;Rarity&gt;Name</button>
<button class="gf-button" data-tdollsortbutton="true" disabled onclick="orderByRarityClassName(this);">By Rarity&gt;Class&gt;Name</button>
<button class="gf-button" data-tdollsortbutton="true" disabled onclick="orderByName(this);">By Name</button>
<button class="gf-button" data-tdollsortbutton="true" disabled onclick="orderByIndex(this);">By Index</button>
<div style="width:20px; height:20px; display:inline-block;" class="loading2 removeAfterInitIsg">&nbsp;</div></div>

<p>
Released on this server:<br/>
<button class="gf-button" data-tdollserverbutton="true" data-tdollserver="WIKI" disabled data-initialsort="true" onclick="switchServer(this);">All</button>
<button class="gf-button" data-tdollserverbutton="true" data-tdollserver="CN" disabled onclick="switchServer(this);">CN</button>
<button class="gf-button" data-tdollserverbutton="true" data-tdollserver="TW" disabled onclick="switchServer(this);">TW</button>
<button class="gf-button" data-tdollserverbutton="true" data-tdollserver="KR" disabled onclick="switchServer(this);">KR</button>
<button class="gf-button" data-tdollserverbutton="true" data-tdollserver="EN" disabled onclick="switchServer(this);">EN</button>
<button class="gf-button" data-tdollserverbutton="true" data-tdollserver="JP" disabled onclick="switchServer(this);">JP</button>
</p>
</includeonly>

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

</noinclude>