Widget:TreasureCardFilter

<script>

   window.addEventListener("load", function () { 
      var FILTER_INITIALIZED = false;
      var FILTERS = [];
      var $GEMS = $("[data-filter-binding]");
      var GEM_DATA = JSON.parse($("[data-gem-data")[0].getAttribute("data-gem-data"));
      var $FILTERABLE = $("[data-card]");
      function getCardData (element) { 
         return JSON.parse(element.getAttribute("data-card"));
      }
      function removeFromArray (array, element) {
           var index = array.indexOf(element);
           var newArr = array;
          if (index != -1) {
              newArr = array.splice(index, 1);
          }
      }
      function updateFilters () { 
       console.log(FILTERS);
            // TODO: Refactor
            var enabledElements = [];
           // First apply filters
           $FILTERABLE.each(function (i) {
             var elem = this;
             var gems = getCardData(elem);
             var shouldBeIncluded = true;
             for (var i = 0; i < FILTERS.length; i++) {
               if (!gems.hasOwnProperty(FILTERS[i])) {
                   shouldBeIncluded = false;
                   elem.setAttribute("data-hidden", "true");
                   $(elem).slideUp();
                   break;
               } 
             }
             if (shouldBeIncluded) {
               if (elem.getAttribute("data-hidden") == "true") {
                 elem.setAttribute("data-hidden", "false");
                 $(elem).slideDown();

               }
             }
           });
           // THEN SORT
           for (var i = 0; i < FILTERS.length; i++) {
             var filter = FILTERS[i];
             var gemType = GEM_DATA[filter];
             console.log(gemType);
               if (gemType.type == "number") {
                 $FILTERABLE.sort(function (a, b) { 
                      var cardDataA = getCardData(a);
                      var cardDataB = getCardData(b);
                      var valA = typeof cardDataA[filter] !== "undefined" ? parseInt(cardDataA[filter]) : 0);
                      var valB = typeof cardDataB[filter] !== "undefined" ? parseInt(cardDataB[filter]) : 0);
                      console.log(valA, valB);
                      return (valA > valB ? 1 : (valA < valB ? -1 : 0));
                 });
              }  
              else {
                  console.log(gemType);
              }
            }
            $FILTERABLE.detach().appendTo($("#card_holder"));
      }
      $GEMS.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");
           var selected = !$this.hasClass("gem-deselected");
           if (!selected) {
                removeFromArray(FILTERS, this.getAttribute("data-filter-binding"));
           }
           else {
               FILTERS.push(this.getAttribute("data-filter-binding"));
           }
           if (FILTERS.length == 0) {
                FILTER_INITIALIZED = false;
             $GEMS.each(function () { 
                    $(this).removeClass("gem-deselected");
                });
           }
           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