Widget:TestTabs: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 525: | Line 525: | ||
function filter(search) { | function filter(search) { | ||
$("#filter").val(search); | $("#filter").val(search); | ||
charFilter(); | charFilter(); | ||
} | } | ||
function charFilter() { | function charFilter() { | ||
console.log("type"); | |||
var filter = $("#filter").val().trim().toLowerCase(); | var filter = $("#filter").val().trim().toLowerCase(); | ||
$(".charbox").each(function() { | $(".charbox").each(function() { | ||
Revision as of 08:05, 3 August 2017
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> <style>
- charPanel button {
background-color: #b36e14;
border: 1px solid #64320d;
outline: none;
cursor: pointer;
padding: 0px 10px;
transition: 0.3s;
display: inline;
color: white;
height: 25px;
}
- breaker {
display: block;
text-align: left;
font-size: 20px;
font-weight: bold;
padding: 5px;
}
div.charFilter select{ border: 1px solid #000;
color: #fff; background: #444; position: relative; width: 150px; float: left; height: 25px; margin-right: 5px;
} div.charFilter{ display: inline-block;
padding-left: 15px;
padding-right: 15px;
width: 100%;
} div.filterLeft{ float: left; } div.filterRight{ float: right; } div.charBox {
display: inline-block; padding: 3px; position: relative; width: calc((100% / 6) - 3px); border: 2px solid rgba(0,0,0,0.0); filter: opacity(70%); transition: filter .6s;
border-radius:7px; overflow: hidden;
margin-bottom:-6px;
} .charBox:hover .charName, .charBox.hovered .charName {
display: block;
} div#charPanel {
text-align: center; background: rgba(68,68,68,0.2); border-radius: 15px; border: 2px solid #8b4513; padding: 10px;
}
div.charBox a{ display: block;
height: 100%; color: #F9E4CA;
} .charBox.hovered {
filter: opacity(100%);
}
.charBox:hover { border-color:#F9E4CA;
filter: opacity(100%);
}
div.charName{
position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-weight: bold; display: none; background: rgba(15,15,15,0.7); padding: 3px;
font-family: "Cinzel Decorative";
}
div.charBox img { width:150px; }
@media only screen and (max-device-width: 768px) { div.charBox img { width:85px; } div.charBox { width: calc((85% / 6) - 3px); } div.charName { font-size: 10px; } } </style>
<img id="loading" height="500" src="/images/4/42/Loading.gif">
<script>
$("#charHolder").hide();
var series1 = [];
var obj = {};
obj["name"] = ""; obj["image"] = ""; obj["link"] = ""; obj["campaigns"] = ; obj["keywords"] = ; series1.push(obj);
for(var i = 0; i < series1.length; i++){ var campaigns = ""; for(var j = 0; j < series1[i].campaigns.length; j++){ campaigns = campaigns + " " + series1[i].campaigns[j]; } var keywords = ""; for(var j = 0; j < series1[i].keywords.length; j++){ keywords = keywords + " " + series1[i].keywords[j]; } campaigns = campaigns.substring(1); keywords = keywords.substring(1); if(campaigns.indexOf("s1c") > -1){
$("div#charHolder").append("
");
} } $("div#charPanel").prepend('<input type="text" id="filter" onkeyup="charFilter()" placeholder="Search...">'); /* Default */
if($("#nametoggle").css("background-color") == "rgb(137, 84, 15)"){ $("#nametoggle").click(); }
$("#seasonFilter-s1").change(function() {
$("div.charBox").hide();
$("span#breaker").remove();
if ($(this).val() == "Season 1 Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);
}
$("div.charBox[data-campaigns*='s1'").show();}
if ($(this).val() == "Band of Thieves") {
$("div.charBox[data-campaigns*='s1c1-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c1-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c1-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c1-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Porc Hunters") {
$("div.charBox[data-campaigns*='s1c2-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c2-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c2-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c2-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "The Jewel of the Dingo Isles") {
$("div.charBox[data-campaigns*='s1c3-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c3-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c3-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c3-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "The Sunswords") {
$("div.charBox[data-campaigns*='s1c5-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c5-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c5-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c5-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "The Unseen Rogues") {
$("div.charBox[data-campaigns*='s1c6-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c6-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c6-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c6-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Kobold Headhunters") {
$("div.charBox[data-campaigns*='s1c7-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c7-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c7-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c7-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Zarlin Catacombs") {
$("div.charBox[data-campaigns*='s1c8-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c8-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c8-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c8-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "The New Crew") {
$("div.charBox[data-campaigns*='s1c9-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c9-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c9-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c9-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Silvermine Mountains") {
$("div.charBox[data-campaigns*='s1c10-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c10-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c10-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c10-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Guild of Explorers") {
$("div.charBox[data-campaigns*='s1c11-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c11-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c11-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c11-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Battle of the Bards") {
$("div.charBox[data-campaigns*='s1c12-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c12-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c12-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c12-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "The Blood Snake Queen") {
$("div.charBox[data-campaigns*='s1c13-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c13-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c13-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c13-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "The Death of Virgo") {
$("div.charBox[data-campaigns*='s1c14-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c14-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c14-n']:parent:visible").first().before("NPC Characters");
$("div#charHolder").find("[data-campaigns*='s1c14-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Player Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c" + i + "-p']").show();}
}
if ($(this).val() == "NPC Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c" + i + "-n']").show();}
}
if ($(this).val() == "Minor Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c']").show();}
$("div.charBox a:not([href*='Minor_Characters'])").parent().hide();
}
});
$("#seasonFilter-s2").change(function() { $("div.charBox").hide(); $("span#breaker").remove();
if ($(this).val() == "Season 2 Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]); } $("div.charBox[data-campaigns*='s2'").show();} if ($(this).val() == "Woodcarvers") { $("div.charBox[data-campaigns*='s2c1-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c1-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c1-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c1-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Okagnoma Guild Hall") { $("div.charBox[data-campaigns*='s2c2-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c2-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c2-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c2-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Murder Bros") { $("div.charBox[data-campaigns*='s2c3-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c3-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c3-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c3-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Cobblers") { $("div.charBox[data-campaigns*='s2c4-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c4-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c4-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c4-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Tower of Ultimate Wizardry: Chapter One") { $("div.charBox[data-campaigns*='s2c5-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c5-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c5-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c5-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Unexpected Discovery") { $("div.charBox[data-campaigns*='s2c6-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c6-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c6-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c6-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Buckeroos") { $("div.charBox[data-campaigns*='s2c7-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c7-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c7-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c7-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Fall of Dundinborough") { $("div.charBox[data-campaigns*='s2c8-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c8-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c8-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c8-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Den of Devils") { $("div.charBox[data-campaigns*='s2c9-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c9-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c9-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c9-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Skeleton King") { $("div.charBox[data-campaigns*='s2c10-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c10-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c10-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c10-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Player Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s2c" + i + "-p']").show();} } if ($(this).val() == "NPC Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s2c" + i + "-n']").show();} } if ($(this).val() == "Minor Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s2c']").show();} $("div.charBox a:not([href*='Minor_Characters'])").parent().hide(); }
});
$("#seasonFilter-s3").change(function() { $("div.charBox").hide(); $("span#breaker").remove(); if ($(this).val() == "Season 3 Characters") { $("#charHolder").empty(); for(var i = 0; i < allS3.length; i++){ $("#charHolder").append(allS3[i]); } $("div.charBox[data-campaigns*='s3'").show();} if ($(this).val() == "The Grand Paladin Order") { $("div.charBox[data-campaigns*='s3c1-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s3c1-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s3c1-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s3c1-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Senate of Deadlantis") { $("div.charBox[data-campaigns*='s3c2-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s3c2-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s3c2-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s3c2-p']:parent:visible").first().before("Player Characters");}
if ($(this).val() == "Player Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS3.length; i++){
$("#charHolder").append(allS3[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s3c" + i + "-p']").show();}
}
if ($(this).val() == "NPC Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS3.length; i++){
$("#charHolder").append(allS3[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s3c" + i + "-n']").show();}
}
if ($(this).val() == "Minor Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS3.length; i++){
$("#charHolder").append(allS3[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s3c']").show();}
$("div.charBox a:not([href*='Minor_Characters'])").parent().hide();
}
});
$(window).on("load", function() { $("#loading").remove(); $("#charHolder").show(); $(".charFilter").show(); $("#nametoggle").click(); });
function filter(search) { $("#filter").val(search); charFilter(); } function charFilter() { console.log("type"); var filter = $("#filter").val().trim().toLowerCase(); $(".charbox").each(function() { if (filter == ) $(this).show(); else if ($(this).attr('data-keywords').toLowerCase().indexOf(filter) >= 0) $(this).show(); else $(this).hide(); }); }
function loadOther(){ for(var i = 0; i < series1.length; i++){ var campaigns = ""; for(var j = 0; j < series1[i].campaigns.length; j++){ campaigns = campaigns + " " + series1[i].campaigns[j]; } campaigns = campaigns.substring(1); if(campaigns.indexOf("s1c") == -1){
$("div#charHolder").append("
");
} } }
</script>
