Widget:CharacterList: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
← Older edit
imported>Mayonnaisinator
imported>Pillowkeeper
mNo edit summary
imported>Mayonnaisinator
mNo edit summary
 
(260 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>
#chars a img.thumbborder {
#charPanel button {
   border: none;
        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;
}
}
#chars a:hover img.thumbborder {
 
     -webkit-filter: grayscale(50%) brightness(50%);
input#filter:focus {
     filter: grayscale(70%) brightness(50%) blur(2px);
     border-color: #edad5a;
-webkit-transition : -webkit-filter 250ms linear;
    outline: 0;
transition: filter 250ms linear;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(237, 173, 90, 0.6);
}
}
#chars a:hover .tcont{
 
     opacity: 1;
div.charBox a{
transition: opacity 250ms linear;
display: block;
     height: 100%;
    color: #F9E4CA;
}
}
#chars a:hover
.charBox.hovered {
{
     filter: opacity(100%);
     text-decoration: none;
 
}
}
div#chars .tcont{
 
position: relative;
.charBox:hover {
opacity: 0;
border-color:#F9E4CA;
color:white;
    filter: opacity(100%);
font-family: Cinzel Decorative;
font-weight: bold;
font-size: 14px;
display: inline-block;
width: 144px;
top: -90px;
left: 6px;
text-align: center;
}
}
#chars a {
display: inline-grid;
max-width: 150px;
max-height: 150px;
margin-right: 20px;
margin-left:30px;
margin-bottom: 30px;


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#filter{
 
border: 3px solid #dddddd;
div.charBox img {
border-radius: 200px;
width:150px;
overflow: hidden;
display: block;
}
}


div#chars {
@media screen and (max-device-width: 768px) {
text-align: center;
button#nametoggle {
display: none !important;
}
input#filter {
float:none;
}
}
div#chars #breaker {
div.charBox img {
text-align: left;
width:85px;
text-size: 18px;
text-weight: bold;
}
}
#breaker {
div.charBox {
display: block;
width: calc((85% / 6) - 3px);
text-align:left;
filter: opacity(100%);
font-size: 20px;
font-weight: bold;
padding: 5px;
}
}
#charSelect {
div.charName {
border: 1px solid #000;
font-size: 10px;
    font-size: 14px;
display: block;
    color: #fff;
    background: #444;
    padding: 2px;
  position: relative;
  width: 220px;
}
}
#charTitle{
display: inline-block;
text-align:center;
font-size: 24px;
font-weight: bold;
width: 58%;
}
}
</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>
if($("div#filter").length == 0){
$("#chars .thumbborder").wrap("<div id='filter'></div>");
$("div#filter").each(function(){
$(this).after("<span class='tcont'>" + $(this).parent().attr("title") +"</span>")});


$("#chars img").each(function() {
$("#charHolder").hide();
var text = $(this).attr("class");
$("#guide").hide();
text = text.substring(0, text.indexOf(" "));
var series1 = [];
$(this).parent().parent().attr("class", text);
});


$("span.tcont").each(function() {
<!--{foreach from=$character key=key item=data}-->
if($(this).height() > 44 && $(this).height() < 67){
var obj = {};
$(this).parent().css("position", "relative");
  obj["name"] = "<!--{$data.name|escape:'javascript'}-->";
$(this).css("top", "-100px");
  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]);
}
}
if($(this).height() > 67){
keywords = keywords + " " + series1[i].keywords[j];
$(this).parent().css("position", "relative");
$(this).css("top", "-110px");
}
}
});
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();


var classList = [];
 
$("div#chars a").each(function() {
 
var text = $(this).attr("class");
/* Default */
text = text.substring(0, text.indexOf("-"));
 
if(classList.indexOf(text) < 0){
setTimeout(function() {
classList.push(text);
$("#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);


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


var s1List = [];
$("div#chars a").each(function() {
if($(this).attr("class").startsWith("s1")){
if(s1List.indexOf($(this).find("span.tcont").text()) < 0){
s1List.push($(this).find("span.tcont").text());
}
}
$(".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();
});
}
}
});


var s2List = [];
function toggleNames(val){
$("div#chars a").each(function() {
if(val.id = "nametoggle"){
if($(this).attr("class").startsWith("s2")){
        if($(val).css("background-color") == "rgb(179, 110, 20)"){
if(s2List.indexOf($(this).find("span.tcont").text()) < 0){
            $(".charName").css("display", "block");
s2List.push($(this).find("span.tcont").text());
            $(".charBox").css('filter', 'opacity(100%)');
            $("#nametoggle").css('background-color', '#89540F');
        } else {
            $(".charName").css("display", "");
            $(".charBox").css("filter", "");
            $("#nametoggle").css('background-color', '#b36e14');
              }
}
}
}
}
});
$("div#chars").before("<select id='charSelect'> <option>Season 1 Characters</option> <option>Season 2 Characters</option> <option>All 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>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> </select>");


</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"