Widget:TreasureCardFilter

<script>

   window.addEventListener("load", function () { 
      var FILTER_INITIALIZED = false;
      var FILTERS = [];
      var $GEMS = $("[data-filter-binding]");
      var $FILTERABLE = $("[data-filter-each]");
      function getGemOrFalse (element, gemType) {
          var gemStr = element.getAttribute("data-gem-types");
           if (gemStr) {
              var gemTypes = gemStr.split(",");
              var gems = {};
              for (var i = 0; i < gemStr.length; i++) {
                var currGem = gemStr[i];
                var gemParams = currGem.split(":");
                if (gemParams.length == 2) {
                   gems[gemParams[0]] = gemParams[1];
                }
              }
          }
          return false;
      }
      function updateFilters () { 
            // TODO: Refactor
            FILTERS.forEach(function (filter) { 
            $FILTERABLE.sort(function (a, b) { 
                var aGemTypes = a.getAttribute("data-gem-types");
                var bGemTypes = b.getAttribute("data-gem-types");
               
            });
            });
      }
      $GEMS.bind("click", function (ev) {
           if (FILTER_INITIALIZED == false) {
                FILTER_INITIALIZED = true;
                $GEMS.each(function () { 
                    $(this).addClass("gem-deselected");
                });
           }
          
           ev.preventDefault();
           var $this= $(this);
           $this.toggleClass("gem-deselected");
           if ($this.hasClass("gem-deselected")) {
              var index = FILTERS.indexOf(this.getAttribute("data-filter-binding"));
              if (index != -1) {
                  FILTERS = FILTERS.splice(index, 1);
              }
           }
           else {
               FILTERS.push(this.getAttribute("data-filter-binding");
           }
           updateFilters();
       });
   });

</script> <style> .gem-deselected { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale"); } </style>

Filters

Cost: Coin