SpeciesFileGroup/taxonworks

View on GitHub
app/assets/javascripts/views/hub/filter_bar.js.erb

Summary

Maintainability
Test Coverage
var TW = TW || {};
TW.workbench = TW.workbench || {};
TW.workbench.hub = TW.workbench.hub || {};
TW.workbench.hub.filter_hub = TW.workbench.hub.filter_hub || {};

Object.assign(TW.workbench.hub.filter_hub, {

  init: function () {
        if(!$("#filter").attr('icons-loaded')) { 
            $("#filter").attr('icons-loaded', 'true');
      $('[data-filter-category="nomenclature"]').prepend('<img src="<%= asset_path("new.svg") %>"/>');
      $('[data-filter-category="source"]').prepend('<img src="<%= asset_path("book.svg") %>"/>');
      $('[data-filter-category="collection_object"]').prepend('<img src="<%= asset_path("bug.svg") %>"/>');
      $('[data-filter-category="collecting_event"]').prepend('<img src="<%= asset_path("geo_location.svg") %>"/>');
      $('[data-filter-category="biology"]').prepend('<img src="<%= asset_path("biology.svg") %>"/>');
      $('[data-filter-category="matrix"]').prepend('<img src="<%= asset_path("matrix.svg") %>"/>');
      $('[data-filter-category="dna"]').prepend('<img src="<%= asset_path("helix.svg") %>"/>');
      $('[data-filter-category="image"]').prepend('<img src="<%= asset_path("image.svg") %>"/>');
    }

    function deactivateBackgroundColorLink(selector) {
      $(selector).removeClass("activated");
    }

    function activateBackgroundColorLink(selector) {
      $(selector).addClass("activated");
    }

    function changeBackgroundColorLink(selector) {
      if ($(selector).hasClass("activated")) {
        deactivateBackgroundColorLink(selector);
      }
      else {
        activateBackgroundColorLink(selector);
      }
    }

    $('#filter [data-filter-category]').on('click', function () {
      if(!$(this).parent().hasClass('navigation-controls-type')) {
        changeBackgroundColorLink('[data-filter-category="' + $(this).attr("data-filter-category") + '"]');
      }
    });

    $('#filter .filter-category [data-filter-category]').on('click', function () {
      var hasClass = $(this).hasClass("activated");
      deactivateBackgroundColorLink('.filter-category [data-filter-category]');
      if (hasClass) {
        $('.status-name').text($(this).data("filter-category"));
        $('.status-name').css("color", $(this).css("background-color"));
        activateBackgroundColorLink('[data-filter-category="' + $(this).attr("data-filter-category") + '"]');
      }
      else {
        restartFilterStatus();
      }
    });


    //Add classes for cards when the filter status is active
    $('#filter .switch input').on('click', function () {
      if ($(this).is(':checked')) {
        $('.filter-category').css('display', 'flex');
        $('.filter-category').hide();
        $('.filter-category').show("slide", {direction: "left"}, 250);
        $('.filter-category').fadeIn(250);
        $('.filter_data').each(function () {
          if ($(this).children().length > 0) {
            $(this).addClass("categories");
          }
        });
      }
      else {
        restartFilterStatus();
        deactivateBackgroundColorLink('.filter-category [data-filter-category]');
        $('.filter-category').hide("slide", {direction: "left"}, 500);

        $('.filter_data').each(function () {
          $(this).removeClass("categories");
          $(this).removeClass("status");
        });
      }
    });

    function restartFilterStatus() {
      $('.status-name').css("color", "#444");
      $('.status-name').text("Status");
    }

    $('#filter [data-filter-category="reset"]').on('click', function () {
      restartFilterStatus();
      deactivateBackgroundColorLink('[data-filter-category]');
    });

    $('.reset-all-filters').on('click', function () {
      restartFilterStatus();
      deactivateBackgroundColorLink('[data-filter-category]');
    });
  }
});

$(document).on('turbolinks:load', function () {
  if ($("#filter").length) {
    TW.workbench.hub.filter_hub.init();
  }
});