Suggestion: filter by unique

[migig]

The table is useful for comparing similar icons.

But what would be more useful, is a checkbox in the header, which if clicked, will only show those icons which are unique.

So for example, I want to see those icons from fontawesome, which I cannot get from the other two libraries.

[tagliala]

hmmm this is hard to do with the actual implementation.

I need to change the build process but it will require time. I don't know if I can do it, sorry 😢

[migig]

@tagliala OK. So if you can't modify your server code, then do it on the client side using jQuery.

Use this script on the page, and it will work.

// add stuff to the table's header
$("#pictograms-table thead")
  .append(
    "<tr>" +
    "<th>Unique?</th>" +
    "<th><input type='checkbox' id='uniqueFA' /></th>" +
    "<th><input type='checkbox' id='uniqueGL' /></th>" +
    "<th><input type='checkbox' id='uniqueELS' /></th>" +
    "</tr>"
  );


// declare variables once
var rows = $("#pictograms-table tbody tr");
var checkboxes = $("#pictograms-table thead input:checkbox");


// only one checkbox can be checked at a time
var checkUnique = function(chk) {
  checkboxes.not($(chk)).prop("checked", false);
};


// process each row, and hide those which are not unique
var hideRows = function(i) {
  var rows = $("#pictograms-table tbody tr");
  rows.each(function() {
    var icons = $(this).find("td i"); 
    var FA = icons.eq(0);
    var GL = icons.eq(1);
    var ELS = icons.eq(2);
    if (i === 1 && (FA.width()  === 0 || icons.filter(function(){return $(this).width() !== 0}).length > 1)) $(this).hide();
    if (i === 2 && (GL.width()  === 0 || icons.filter(function(){return $(this).width() !== 0}).length > 1)) $(this).hide();
    if (i === 3 && (ELS.width() === 0 || icons.filter(function(){return $(this).width() !== 0}).length > 1)) $(this).hide();
  });
};

// click events, everything starts here
$("#uniqueFA").on("click", function() {
  checkUnique(this);
  if (checkboxes.filter(":checked").length === 0) { rows.show(); return; }
  hideRows(1);
});
$("#uniqueGL").on("click", function() {
  checkUnique(this);
  if (checkboxes.filter(":checked").length === 0) { rows.show(); return; }
  hideRows(2);
});
$("#uniqueELS").on("click", function() {
  checkUnique(this);
  if (checkboxes.filter(":checked").length === 0) { rows.show(); return; }
  hideRows(3);
});

I tested it by running it in my browser's javascript console.

Please add it in. Spent lots of time on it! :-) Is very very useful.