Widget:TreasureCardFilter: Difference between revisions
From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Plornt No edit summary |
imported>Plornt Nearly complete. |
||
| Line 4: | Line 4: | ||
var FILTERS = []; | var FILTERS = []; | ||
var $GEMS = $("[data-filter-binding]"); | var $GEMS = $("[data-filter-binding]"); | ||
var $FILTERABLE = $("[data- | var $FILTERABLE = $("[data-card]"); | ||
function | function getCardData (element) { | ||
return JSON.parse(element.getAttribute("data-card")); | |||
} | } | ||
function updateFilters () { | function updateFilters () { | ||
// TODO: Refactor | // TODO: Refactor | ||
FILTERS.forEach(function (filter) { | FILTERS.forEach(function (filter) { | ||
$FILTERABLE.sort(function (a, b) { | |||
var cardDataA = getCardData(a); | |||
var cardDataB = getCardData(b); | |||
if (!cardDataA.hasOwnProperty(filter)) { | |||
cardDataA.slideUp(); | |||
} | |||
if (!cardDataB.hasOwnProperty(filter)) { | |||
cardDataB.slideUp(); | |||
} | |||
return cardDataA[filter] < cardDataB[filter]; | |||
}); | |||
}); | }); | ||
} | } | ||
| Line 73: | Line 67: | ||
</div> | </div> | ||
<!--{foreach from=$cards item=card}--> | <!--{foreach from=$cards item=card}--> | ||
<div class="pure-g content-box | <div class="pure-g content-box " 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 15:44, 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 updateFilters () {
// TODO: Refactor
FILTERS.forEach(function (filter) {
$FILTERABLE.sort(function (a, b) {
var cardDataA = getCardData(a);
var cardDataB = getCardData(b);
if (!cardDataA.hasOwnProperty(filter)) {
cardDataA.slideUp();
}
if (!cardDataB.hasOwnProperty(filter)) {
cardDataB.slideUp();
}
return cardDataA[filter] < cardDataB[filter];
});
});
}
$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
