|
|
| Line 1: |
Line 1: |
| <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
| |
| <style>
| |
| #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>
| |
| <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>
| |
| </ul>
| |
| </div>
| |
| <br>
| |
| <div id="charPanel">
| |
| <img id="loading" height="500" src="/images/4/42/Loading.gif">
| |
| <div id="charHolder"></div>
| |
| </div>
| |
|
| |
| <script> | | <script> |
| | | tippy('.tltp') |
| $("#charHolder").hide();
| |
| | |
| var series1 = [];
| |
| | |
| <!--{foreach from=$character key=key item=data}-->
| |
| var obj = {};
| |
| obj["name"] = "<!--{$data.name|escape:'javascript'}-->";
| |
| 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>");
| |
| }
| |
| 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();
| |
| /* Default */
| |
| | |
| $(window).on("load", function() {
| |
| $("#loading").remove();
| |
| $("#charHolder").show();
| |
| $("#filter").show();
| |
| $("#nametoggle").show();
| |
| | |
| });
| |
| | |
| function filter(search) {
| |
| $("#filter").val(search);
| |
| charFilter();
| |
| }
| |
| function charFilter() {
| |
| var filter = $("#filter").val().trim().toLowerCase();
| |
| $(".charBox").each(function() {
| |
| if (filter == '')
| |
| $(this).show();
| |
| else if ($(this).attr('data-keywords').toLowerCase().indexOf(" " + filter) >= 0){
| |
| console.log(filter + "|" + $(this).attr('data-keywords').toLowerCase())
| |
| $(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> | | </script> |
<script>
tippy('.tltp')
</script>
