Widget:CharacterList: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
← Older edit
imported>Mayonnaisinator
imported>Pillowkeeper
No edit summary
imported>Mayonnaisinator
mNo edit summary
 
(95 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<style>
<style>
    button {
#charPanel button {
        float:left;
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        color: #fff;
         background-color: #b36e14;
         background-color: #b36e14;
         border: 1px solid #64320d;
         border-color: #9c6011;
         outline: none;
         margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
         cursor: pointer;
         cursor: pointer;
         padding: 7px 16px;
         background-image: none;
         transition: 0.3s;
         border: 1px solid transparent;
         display: inline;
         white-space: nowrap;
        color: white;
        height: 31px;
     }
     }


    #buttons {
        text-align: center;
        position: relative;
        display: block;
        float: left;
    }


    #chars a img.thumbborder {
div.charBox {
         display: inline-grid;
         display: inline-block;
        border: none;
    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 {
  min-height: 100px;
  text-align: center;
  background: rgba(68,68,68,0.2);
  border-radius: 15px;
  border: 2px solid #8b4513;
  padding: 10px;
}


     #chars a:hover img.thumbborder {
input#filter {
        -webkit-filter: grayscale(50%) brightness(50%);
    float:right;
        filter: grayscale(70%) brightness(50%) blur(2px);
    width: 200px;
        -webkit-transition: -webkit-filter 250ms linear;
    height: 36px;
        transition: filter 250ms linear;
    padding: 6px 12px;
    }
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
     color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid white;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}


    #chars a:hover .tcont {
input#filter:focus {
        opacity: 1;
    border-color: #edad5a;
        transition: opacity 250ms linear;
    outline: 0;
     }
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(237, 173, 90, 0.6);
}


    #chars a:hover {
div.charBox a{
        text-decoration: none;
display: block;
     }
    height: 100%;
     color: #F9E4CA;
}
.charBox.hovered {
    filter:  opacity(100%);


    div#chars .tcont {
}
        position: relative;
        opacity: 0;
        color: white;
        font-family: Berkshire Swash;
        font-size: 18px;
        display: inline-block;
        width: 135px;
        top: -90px;
        left: 10px;
        text-align: center;
    }


    #chars a {
.charBox:hover {
        display: inline-grid;
border-color:#F9E4CA;
        max-width: 150px;
    filter: opacity(100%);
        max-height: 150px;
        margin-right: 20px;
}
        margin-left: 30px;
        margin-bottom: 30px;
    }


    div#filter {
div.charName{
        border: 3px solid #dddddd;
    position: absolute;
        border-radius: 20px;
    bottom: 0;
        overflow: hidden;
    left: 0;
        display: block;
    right: 0;
     }
    text-align: center;
    font-weight: bold;
    display: none;
    background: rgba(15,15,15,0.7);
     padding: 3px;
  font-family: "Cinzel Decorative";
 
}


    div#chars {
div.charBox img {
        text-align: center;
width:150px;
    }
}


    div#chars #breaker {
@media screen and (max-device-width: 768px) {
        text-align: left;
button#nametoggle {
        text-size: 18px;
display: none !important;  
        text-weight: bold;
}
    }
input#filter {
 
float:none;
    #breaker {
}
        display: block;
div.charBox img {
        text-align: left;
width:85px;
        font-size: 20px;
}
        font-weight: bold;
div.charBox {
        padding: 5px;
width: calc((85% / 6) - 3px);
    }
filter: opacity(100%);
 
}
    #charSelect-s1,
div.charName {
    #charSelect-s2 {
font-size: 10px;
        border: 1px solid #000;
display: block;
        font-size: 14px;
}
        color: #fff;
}
        background: #444;
        padding: 2px;
        position: relative;
        width: 220px;
        float: right;
        height: 31px;
    }
 
    #charTitle {
        display: block;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        padding-top: 40px;
    }
</style>
</style>
 
<div id="guide">
<h3><span class="mw-headline" id="Quick_Reference_Search">Quick Reference Search</span></h3>
<ul><li> Character Names (<a class="link" onclick="filter('Bumbley')">Bumbley</a>)</li>
<li> Player Names (<a class="link" onclick="filter('Justin')">Justin</a>, <a class="link" onclick="filter('DeadBones')">DeadBones</a>)</li>
<li> Races (<a class="link" onclick="filter('Elf')">Elf</a>, <a class="link" onclick="filter('Porc')">Porc</a>)</li>
<li> Classes (<a class="link" onclick="filter('Wizard')">Wizard</a>, <a class="link" onclick="filter('Paladin')">Paladin</a>)</li>
<li> Status/Attribute (<a class="link" onclick="filter('Ageless')">Ageless</a>, <a class="link" onclick="filter('Believer')">Believer</a>)</li>
<li> Type (<a class="link" onclick="filter('Minor')">Minor</a>, <a class="link" onclick="filter('Companion')">Companion</a>)</li>
<li> Campaign (<a class="link" onclick="filter('s1c1-')">Season 1 Campaign 1 - Band of Thieves</a>)
<ul><li> NPC Within Campaign (<a class="link" onclick="filter('s1c1-n')">Band of Thieves NPC</a>)</li>
<li> Players Within Campaign (<a class="link" onclick="filter('s1c1-p')">Band of Thieves Players</a>)</li></ul></li>
<li> Other (<a class="link" onclick="filter('Sin of the Unforgotten')">Sin of the Unforgotten</a>, <a class="link" onclick="filter('Tambok\'s Special Friend Show')">Tambok's Special Friend Show</a>)</li>
</ul>
</div>
<br>
<div id="charPanel">
<img id="loading" height="500" src="/images/4/42/Loading.gif">
<div id="charHolder"></div>
</div>


<script>
<script>
    window.addEventListener('load',
        function() {
            $("#chars img.thumbborder").wrap("<div id='filter'></div>");


            $("div#filter").each(function() {
$("#charHolder").hide();
                $(this).after("<span class='tcont'>" + $(this).parent("a").attr("title") + "</span>")
$("#guide").hide();
            });
var series1 = [];


            $("#chars img").each(function() {
<!--{foreach from=$character key=key item=data}-->
                var text = $(this).attr("class");
var obj = {};
                text = text.substring(0, text.indexOf(" "));
  obj["name"] = "<!--{$data.name|escape:'javascript'}-->";
                $(this).parent().parent().attr("class", text);
  obj["image"] = "<!--{$data.image}-->";
            });
  obj["link"] = "<!--{$data.link|escape:'javascript'}-->";
  obj["keywords"] = <!--{$data.keywords}-->;
  series1.push(obj);
<!--{/foreach}-->
var list = [];
for(var i = 0; i < series1.length; i++){
var keywords = " ";
for(var j = 0; j < series1[i].keywords.length; j++){
if(list.indexOf(series1[i].keywords[j]) < 0){
list.push(series1[i].keywords[j]);
}
keywords = keywords + " " + series1[i].keywords[j];
}
keywords = keywords.substring(1);
$("div#charHolder").append("<div class='charBox' data-keywords='" + keywords + "' data-name='" + series1[i].name + "'><a class='charLink' href='" + series1[i].link +"'> <img src='" + series1[i].image + "'> <div class='charName'>" + series1[i].name + "</div></a></div>");
}
/* List of All KEYWORDS console.log(list); */
$("div#charPanel").prepend('<input type="text" id="filter" onkeyup="charFilter()" placeholder="Search..."><br><br>');
$("#filter").before("<button id='nametoggle' onclick='toggleNames(this)'>Toggle Names</button>");
$("#filter").hide();
$("#nametoggle").hide();




            $("span.tcont").each(function() {
                if ($(this).height() >= 29 && $(this).height() < 57) {
                    $(this).parent().css("position", "relative");
                    $(this).css("top", "-100px");
                }
                if ($(this).height() >= 57) {
                    $(this).parent().css("position", "relative");
                    $(this).css("top", "-110px");
                }
            });


/* Default */


            var classList = [];
setTimeout(function() {
            $("div#chars a").each(function() {
$("#loading").remove();
                var val = $(this).attr("class");
$("#charHolder").show();
                val = val.substring(0, val.indexOf("-"));
$("#filter").show();
                if (classList.indexOf(val) < 0) {
$("#nametoggle").show();
                    classList.push(val);
$("#guide").show();
                }
for(var i = 0; i < list.length; i++){
            });
$("div#mw-customtoggle-terms").append('<a class="link" onclick="filter(\'' + list[i] + '\')">' + list[i] + '</a>, ');
}
if(location.href.indexOf("#") > -1) {
filter(location.href.substring(location.href.indexOf("#") + 1));
}
}, 5000);


            var charList = [];
            $("span.tcont").each(function() {
                if (charList.indexOf($(this).text()) < 0) {
                    charList.push($(this).text());
                }
            });


            var s1List = [];
function filter(search) {
            $("div#chars a").each(function() {
$("#filter").val(search);
                if ($(this).attr("class").startsWith("s1")) {
charFilter();
                    if (s1List.indexOf($(this).find("span.tcont").text()) < 0) {
}
                        s1List.push($(this).find("span.tcont").text());
function charFilter() {
                    }
var filter = $("#filter").val().trim().toLowerCase();
                }
if(filter != ""){
            });
window.history.replaceState( {} , '', location.pathname + "#" + filter);
} else {
window.history.replaceState( {} , '', location.pathname + filter);


            var s2List = [];
            $("div#chars a").each(function() {
                if ($(this).attr("class").startsWith("s2")) {
                    if (s2List.indexOf($(this).find("span.tcont").text()) < 0) {
                        s2List.push($(this).find("span.tcont").text());
                    }
                }
            });
            $("div#chars").before("<select id='charSelect-s1'> <option>Season 1 Characters</option><option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</option> <option>The Many Gobos of Pat</option> <option>The Sunswords</option> <option>The Unseen Rogues</option> <option>Kobold Headhunters</option> <option>Zarlin Catacombs</option> <option>The New Crew</option> <option>Silvermine Mountains</option><option>Guild of Explorers</option><option>Battle of the Bards</option><option>The Blood Snake Queen</option><option>The Death of Virgo</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option><option>All Characters</option></select>");
            $("#charSelect-s1").before("<select id='charSelect-s2'><option>Season 2 Characters</option> <option>Woodcarvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>The Tower of Ultimate Wizardry: Chapter One</option> <option>Unexpected Discovery</option> <option>Buckeroos</option> <option>Fall of Dundinborough</option> <option>Den of Devils</option> <option>The Skeleton King</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option><option>All Characters</option></select>");
            $("#charSelect-s2").before('<div id="buttons"><button id="b-s1" onclick="changeSeason(this)">Season One</button><button id="b-s2" onclick="changeSeason(this)">Season Two</button>');
            /*Default Select Behavior */
            $("#charSelect-s1").show();
            $("#charSelect-s2").hide();
            $("#b-s1").css('background-color', '#89540F');
            /*Default*/
            $("div#chars a").hide();
            $("span#breaker").remove();
            $("#charTitle").remove();
            for (var i = 0; i < s1List.length; i++) {
                $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
            }
            $("#charSelect-s1").after("<span id='charTitle'>Season 1 Characters</span>");
            $("select#charSelect-s1").change(function() {
                $("div#chars a").hide();
                $("span#breaker").remove();
                $("#charTitle").remove();
                $("#charSelect-s1").after("<span id='charTitle'>" + $(this).val() + "</span>");
                if ($(this).val() == "All Characters") {
                    for (var i = 0; i < charList.length; i++) {
                        $("span.tcont:contains('" + charList[i] + "'):first").parent().show();
                    }
                }
                if ($(this).val() == "Season 1 Characters") {
                    for (var i = 0; i < s1List.length; i++) {
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                    }
                }
                if ($(this).val() == "Band of Thieves") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c1-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Porc Hunters") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c2-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Jewel of the Dingo Isles") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c3-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Many Gobos of Pat") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c4-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Sunswords") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c5-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Unseen Rogues") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c6-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Kobold Headhunters") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c7-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Zarlin Catacombs") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c8-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The New Crew") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c9-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Silvermine Mountains") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c10-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Guild of Explorers") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c11-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Battle of the Bards") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c12-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Blood Snake Queen") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c13-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Death of Virgo") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c14-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Player Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s1List.length; i++) {
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                    }
                    $("div#chars a:not([class*='-m'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "NPC Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s1List.length; i++) {
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                    }
                    $("div#chars a:not([class*='-n'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "Minor Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s1List.length; i++) {
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                    }
                    $("div#chars a:not([href*='Minor_Characters'])").hide();
                    $("span#breaker").remove();
                }
            });
            $("select#charSelect-s2").change(function() {
                $("div#chars a").hide();
                $("span#breaker").remove();
                $("#charTitle").remove();
                $("#charSelect-s2").after("<span id='charTitle'>" + $(this).val() + "</span>");
                if ($(this).val() == "All Characters") {
                    for (var i = 0; i < charList.length; i++) {
                        $("span.tcont:contains('" + charList[i] + "'):first").parent().show();
                    }
                }
                if ($(this).val() == "Season 2 Characters") {
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                }
                if ($(this).val() == "Woodcarvers") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c1-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Okagnoma Guild Hall") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c2-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Murder Bros") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c3-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Cobblers") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c4-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Tower of Ultimate Wizardry: Chapter One") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c5-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Unexpected Discovery") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c6-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Buckeroos") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c7-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Fall of Dundinborough") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c8-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Den of Devils") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c9-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Skeleton King") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c10-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Player Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                    $("div#chars a:not([class*='-m'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "NPC Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                    $("div#chars a:not([class*='-n'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "Minor Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                    $("div#chars a:not([href*='Minor_Characters'])").hide();
                    $("span#breaker").remove();
                }
            });
            $("span.tcont").each(function() {
                if ($(this)[0].scrollWidth > 135) {
                    console.log("Fix Spacing > " + $(this).text());
                }
            });
            if ($(window).width() <= 992) {
$("span.tcont").each(function() {
if($(this).height() >= 56){
$(this).parent().css("position", "relative");
$(this).parent().css("top", "25px");
}
}
});
$(".charBox").each(function() {
                $("span.tcont").css("opacity", "1");
if (filter == '')
                $("#chars a img.thumbborder").css("filter", "brightness(50%)");
$(this).show();
            } else {
                else if (filter.charAt(0) == "!"){
            $("div#buttons").after("<button id='nametoggle' onclick='toggleNames(this)' style='float:right;'>Toggle Names</button>");
                        if (!($(this).attr('data-keywords').toLowerCase().indexOf(" " + filter.substring(1, filter.length)) >= 0)){
$(this).show();}else{$(this).hide();}}
                else if ($(this).attr('data-keywords').toLowerCase().indexOf(" " + filter) >= 0){
$(this).show();}
else
$(this).hide();
});
}
}


        }, false);
function toggleNames(val){
 
function toggleNames(val){
if(val.id = "nametoggle"){
if(val.id = "nametoggle"){
            console.log("works");
         if($(val).css("background-color") == "rgb(179, 110, 20)"){
         if($(val).css("background-color") == "rgb(179, 110, 20)"){
             $("span.tcont").css("opacity", "1");
             $(".charName").css("display", "block");
             $("#chars a img.thumbborder").css("filter", "brightness(50%)");
             $(".charBox").css('filter', 'opacity(100%)');
             $("#nametoggle").css('background-color', '#89540F');
             $("#nametoggle").css('background-color', '#89540F');
} else {
        } else {
             $("span.tcont").css("opacity", "0");
             $(".charName").css("display", "");
             $("#chars a img.thumbborder").css("filter", "brightness(100%)");
             $(".charBox").css("filter", "");
             $("#nametoggle").css('background-color', '#b36e14');
             $("#nametoggle").css('background-color', '#b36e14');
              }
}
}
}
}
}
    function changeSeason(val) {
        if (val.id == "b-s1") {
            $("#b-s1").css('background-color', '#89540F');
            $("#b-s2").css('background-color', '#b36e14');
            $('#charSelect-s2').prop('selectedIndex', 0);
            $("#charSelect-s1").show();
            $("#charSelect-s2").hide();
            $('#charSelect-s1').trigger('change');
        }
        if (val.id == "b-s2") {
            $("#b-s2").css('background-color', '#89540F');
            $("#b-s1").css('background-color', '#b36e14');
            $('#charSelect-s1').prop('selectedIndex', 0);
            $("#charSelect-s1").hide();
            $("#charSelect-s2").show();
            $('#charSelect-s2').trigger('change');
        }
 


    }
</script>
</script>

Latest revision as of 16:10, 28 September 2018

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> <style>

  1. charPanel button {
       float:left;
       padding: 5px 10px;
       font-size: 12px;
       line-height: 1.5;
       border-radius: 3px;
       color: #fff;
       background-color: #b36e14;
       border-color: #9c6011;
       margin-bottom: 0;
       font-weight: normal;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;
       background-image: none;
       border: 1px solid transparent;
       white-space: nowrap;
   }


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 { 

 min-height: 100px;
 text-align: center;
 background: rgba(68,68,68,0.2);
 border-radius: 15px;
 border: 2px solid #8b4513;
 padding: 10px;

}

input#filter { 

   float:right;
   width: 200px;
   height: 36px;
   padding: 6px 12px;
   margin-bottom: 8px;
   font-size: 14px;
   line-height: 1.6;
   color: #555555;
   background-color: #fff;
   background-image: none;
   border: 1px solid white;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

}

input#filter:focus { 

   border-color: #edad5a;
   outline: 0;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(237, 173, 90, 0.6);

}

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 screen and (max-device-width: 768px) { button#nametoggle { display: none !important; } input#filter { float:none; } div.charBox img { width:85px; } div.charBox { width: calc((85% / 6) - 3px); filter: opacity(100%); } div.charName { font-size: 10px; display: block; } } </style>

  • Character Names (<a class="link" onclick="filter('Bumbley')">Bumbley</a>)
  • Player Names (<a class="link" onclick="filter('Justin')">Justin</a>, <a class="link" onclick="filter('DeadBones')">DeadBones</a>)
  • Races (<a class="link" onclick="filter('Elf')">Elf</a>, <a class="link" onclick="filter('Porc')">Porc</a>)
  • Classes (<a class="link" onclick="filter('Wizard')">Wizard</a>, <a class="link" onclick="filter('Paladin')">Paladin</a>)
  • Status/Attribute (<a class="link" onclick="filter('Ageless')">Ageless</a>, <a class="link" onclick="filter('Believer')">Believer</a>)
  • Type (<a class="link" onclick="filter('Minor')">Minor</a>, <a class="link" onclick="filter('Companion')">Companion</a>)
  • Campaign (<a class="link" onclick="filter('s1c1-')">Season 1 Campaign 1 - Band of Thieves</a>)
    • NPC Within Campaign (<a class="link" onclick="filter('s1c1-n')">Band of Thieves NPC</a>)
    • Players Within Campaign (<a class="link" onclick="filter('s1c1-p')">Band of Thieves Players</a>)
  • Other (<a class="link" onclick="filter('Sin of the Unforgotten')">Sin of the Unforgotten</a>, <a class="link" onclick="filter('Tambok\'s Special Friend Show')">Tambok's Special Friend Show</a>)


<img id="loading" height="500" src="/images/4/42/Loading.gif">

<script>

$("#charHolder").hide(); $("#guide").hide(); var series1 = [];

var obj = {}; 

 obj["name"] = "";
 obj["image"] = "";
 obj["link"] = "";
 obj["keywords"] = ;
 series1.push(obj);

var list = []; for(var i = 0; i < series1.length; i++){ var keywords = " "; for(var j = 0; j < series1[i].keywords.length; j++){ if(list.indexOf(series1[i].keywords[j]) < 0){ list.push(series1[i].keywords[j]); } keywords = keywords + " " + series1[i].keywords[j]; } keywords = keywords.substring(1);

$("div#charHolder").append("

<a class='charLink' href='" + series1[i].link +"'> <img src='" + series1[i].image + "'>
" + series1[i].name + "
</a>

");

} /* List of All KEYWORDS console.log(list); */ $("div#charPanel").prepend('<input type="text" id="filter" onkeyup="charFilter()" placeholder="Search...">

'); $("#filter").before("<button id='nametoggle' onclick='toggleNames(this)'>Toggle Names</button>"); $("#filter").hide(); $("#nametoggle").hide();


/* Default */

setTimeout(function() { $("#loading").remove(); $("#charHolder").show(); $("#filter").show(); $("#nametoggle").show(); $("#guide").show(); for(var i = 0; i < list.length; i++){ $("div#mw-customtoggle-terms").append('<a class="link" onclick="filter(\ + list[i] + '\')">' + list[i] + '</a>, '); } if(location.href.indexOf("#") > -1) { filter(location.href.substring(location.href.indexOf("#") + 1)); } }, 5000);


function filter(search) { $("#filter").val(search); charFilter(); } function charFilter() { var filter = $("#filter").val().trim().toLowerCase(); if(filter != ""){ window.history.replaceState( {} , , location.pathname + "#" + filter); } else { window.history.replaceState( {} , , location.pathname + filter);

} $(".charBox").each(function() { if (filter == ) $(this).show(); 

               else if (filter.charAt(0) == "!"){
                       if (!($(this).attr('data-keywords').toLowerCase().indexOf(" " + filter.substring(1, filter.length)) >= 0)){

$(this).show();}else{$(this).hide();}} 

               else if ($(this).attr('data-keywords').toLowerCase().indexOf(" " + filter) >= 0){

$(this).show();} else $(this).hide(); }); }

function toggleNames(val){ if(val.id = "nametoggle"){ 

       if($(val).css("background-color") == "rgb(179, 110, 20)"){
           $(".charName").css("display", "block");
           $(".charBox").css('filter', 'opacity(100%)');
           $("#nametoggle").css('background-color', '#89540F');
       } else {
           $(".charName").css("display", "");
           $(".charBox").css("filter", "");
           $("#nametoggle").css('background-color', '#b36e14');
              }

} }

</script>

Retrieved from "https://URwiki.phijkchu.com/index.php?title=Widget:CharacterList&oldid=45515"