Widget:TreasureCardFilter: Difference between revisions
From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Plornt Added card name key as the ID. |
imported>Plornt Changed IDs to use card ID and fixed filter sort |
||
| Line 46: | Line 46: | ||
var cardDataA = getCardData(a); | var cardDataA = getCardData(a); | ||
var cardDataB = getCardData(b); | var cardDataB = getCardData(b); | ||
return cardDataA[filter] < cardDataB[filter]; | return (cardDataA[filter] < cardDataB[filter] ? -1 : 1); | ||
}); | }); | ||
} | } | ||
| Line 99: | Line 99: | ||
<div id="card_holder"> | <div id="card_holder"> | ||
<!--{foreach from=$cards key=cardName item=card}--> | <!--{foreach from=$cards key=cardName item=card}--> | ||
<div class="pure-g content-box " id="<!--{$ | <div class="pure-g content-box " id="<!--{$card.name|escape:'html'}-->" data-card="<!--{json_encode($card)|escape:'html'}-->" data-cost="<!--{$card.cost|escape:'int'}-->" > | ||
<div class="pure-u-24-24 content-box-heading" style="text-align: center;margin-bottom:-1em;"><!--{$card.name}--></div> | <div class="pure-u-24-24 content-box-heading" style="text-align: center;margin-bottom:-1em;"><!--{$card.name}--></div> | ||
<div class="pure-u-8-24"> | <div class="pure-u-8-24"> | ||
Revision as of 19:52, 6 June 2015
<script>
window.addEventListener("load", function () {
var FILTER_INITIALIZED = false;
var FILTERS = [];
var $GEMS = $("[data-filter-binding]");
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];
$FILTERABLE.sort(function (a, b) {
var cardDataA = getCardData(a);
var cardDataB = getCardData(b);
return (cardDataA[filter] < cardDataB[filter] ? -1 : 1);
});
}
$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
