Widget:CampaignCards: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
← Older edit
imported>Mayonnaisinator
imported>Pillowkeeper
No edit summary
imported>Mayonnaisinator
m Added Season 4
 
(313 intermediate revisions by one other user not shown)
Line 1: Line 1:
<div onClick="openCard(this)" class="campaignbox" id="test">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>


<div onClick="openCard(this)" class="campaignbox" id="test1">
<div class="campaign-holder" style="text-align:center;"></div>
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>
<div onClick="openCard(this)" class="campaignbox" id="test2">
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>
<div onClick="openCard(this)" class="campaignbox" id="test3">
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>


<script>
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
var series1 = [];
<!--{foreach from=$campaign key=key item=data}-->
var obj = {};
  obj["name"] = "<!--{$data.name|escape:'javascript'}-->";
  obj["image"] = "<!--{$data.image|unescape:'entity'}-->";
  obj["season"] = "<!--{$data.season|escape:'javascript'}-->";
  obj["color"] = "<!--{$data.color|escape:'javascript'}-->";
  obj["description"] = '<!--{$data.description|unescape:'html'}-->';
  obj["key"] = "<!--{$data.key|escape:'javascript'}-->";
  obj["date"] = "<!--{$data.date|escape:'javascript'}-->";
  obj["height"] = "<!--{$data.height|escape:'javascript'}-->";
  obj["characters"] = "<!--{$data.characters|escape:'javascript'}-->";
  obj["playlist"] = "<!--{$data.playlist|unescape:'entity'}-->";


<script>
  series1.push(obj);
function openCard(card){
<!--{/foreach}-->
var id = card.id


$("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow');
for(var i = 0; i < series1.length; i++){
if(!$("div#" + id).hasClass("opened")){
$(".campaign-holder").append('<div id="' + series1[i].key + '" class="campaignbox" data-season="' + series1[i].season + '"> <div class="campaignbox-card" onClick="openCard(this)" data-height="' + series1[i].height +'"> <img class="campaignbox-image" src="' + series1[i].image + '"> <div class="campaignbox-text"> <h4 style="margin:0px"> <b>' + series1[i].season + '</b></h4> <p style="margin-top:4px">' + series1[i].name + '</p> </div> </div> <div class="campaignbox-content"> <table class="campaignbox-content-topbar"> <tr> <td style="vertical-align:top;"> <span class="campaignbox-content-topbar-back" onClick="closeCard(this)"><i style="float:left;" class="fa fa-arrow-left fa-2x"></i> </span> </td> <td> <span class="campaignbox-content-topbar-name darkCrystal" style="color:' + series1[i].color + ';">' + series1[i].name + '</span> </td> <td style="text-align:right;width:132px"> <span class="campaignbox-content-topbar-date">' + series1[i].date + '</span> </td> </tr> </table> <p class="campaignbox-content-description">' + series1[i].description + '</p> <p class="campaignbox-content-characters">'+ series1[i].characters +'</p> <table class="campaignbox-content-bottombar"> <tr> <td> <a href="http://youtube.com/' + series1[i].playlist + '"> <span class="campaignbox-content-bottombar-play"><i class="fa fa-youtube-play" aria-hidden="true"></i> Playlist</span></a> </td> </tr> </table> </div> </div>');
$("div#" + id).animate({width: '100%', height:'300px'});
$("div#" + id + " .campaignbox-content").show('slow');
$("div#" + id + " div:not('.campaignbox-content')").hide('slow');
} else {
$("div#" + id).animate({width: '200px', height: '184px'});
$("div#" + id + " .campaignbox-content").hide('slow');
$("div#" + id + " div:not('.campaignbox-content')").show('slow');
}
}
$("div#" + id).toggleClass("opened");
 
$(".campaignbox-content-characters a").each(function() {
var title = $(this).attr("title");
$(this).removeAttr("title");
$(this).wrap("<div onmouseout='reset(event)' onmousemove='move(event)' class='campaignbox-content-characters-characterbox'>");
$(this).after("<span class='campaignbox-content-characters-characterbox-tooltip'>" + title + "</span>");
$(this).children("img").attr("alt", title);
 
});
 
$(".campaignbox-text a").each(function() {
//var text = $(this).text();
//$(this).after("<span>" + text + "</span>");
//$(this).remove();
});
 
$(".campaignbox-content-topbar-name a").each(function() {
$(this).removeAttr("title");
});
 
$(".campaignbox[data-season='Season 1']").wrapAll("<div id='Season_One_Campaigns' class='season-wrap season-holder'></div>");
$(".campaignbox[data-season='Season 2']").wrapAll("<div id='Season_Two_Campaigns' class='season-wrap season-holder'></div>");
$(".campaignbox[data-season='Season 3']").wrapAll("<div id='Season_Three_Campaigns' class='season-wrap season-holder'></div>");
$(".campaignbox[data-season='Season 4']").wrapAll("<div id='Season_Four_Campaigns' class='season-wrap season-holder'></div>");
 
 
function openCard(card) {
$(".season-holder").removeClass("season-wrap");
$(card).parent().attr("data-scroll", $(window).scrollTop());
var id = $(card).parent().attr("id");
var ht = $(card).attr("data-height");
$(".campaignbox:not('div#" + id + "')").hide();
    $("div#" + id + " .campaignbox-card").fadeOut("slow");
    $("div#" + id + ".campaignbox").animate({width:"662px", height: ht}, function() {
    $("div#" + id + " .campaignbox-content").fadeIn(200);
    });
 
  }
 
  function closeCard(card) {
var id = $(card).closest(".campaignbox").attr("id");
 
    $("div#" + id + " .campaignbox-content").hide();
      $("div#" + id + ".campaignbox").animate({width:"185px", height:"200px"}, function() {
$(".campaignbox:not('div#" + id + "')").fadeIn();
    $("div#" + id + " .campaignbox-card").fadeIn("slow");
$(".season-holder").addClass("season-wrap");
$(window).scrollTop($("div#" + id + ".campaignbox").attr("data-scroll"));
    });
 
}
}
$(".campaignbox-text a").click(function(e) {
  e.stopPropagation();
})
</script>
</script>


<style>
<style>
.season-wrap {
    min-height: 100px;
    text-align: center;
    background: rgba(68,68,68,0.2);
    border-radius: 15px;
    border: 2px solid #8b4513;
    padding: 5px;
    margin-top: 10px;
}
.campaignbox-content-topbar-back {
    padding-right: 30px;
}
.campaignbox-text {
    padding: 10px;
    padding-bottom: 25px;
}
.campaignbox-text a{
    color: white;
}
.campaignbox-card {
    cursor: pointer;
}
.campaignbox-content-topbar-back:hover {
    cursor: pointer;
    color: #9c6011;
}
.campaignbox-content-topbar {
  width: 100%;
}
.campaignbox-content-topbar-name a {
  color: inherit;
  text-decoration: none;
}
.campaignbox {
.campaignbox {
   width: 200px;
   width: 185px;
   height: 184px;
   height: 200px;
   border: 3px solid white;
   border: 2px solid #F9E4CA;
   border-radius: 10px;
   border-radius: 10px;
   overflow: hidden;
   overflow: hidden;
   display: inline-block;
   display: inline-block;
   background: rgb(33, 33, 33);
   background: rgb(33, 33, 33);
  margin: 8px;
  vertical-align: top;
}
}
.campaignbox-card {
 
    cursor: pointer;
}
.campaignbox-image {
.campaignbox-image {
   width: 100%;
   width: 100%;
Line 98: Line 138:
   margin-bottom: -5px;
   margin-bottom: -5px;
}
}
.campaignbox-text {
.campaignbox-content {
   padding: 0.01em 5px;
   padding: 10px;
   color: white;
  text-align: initial;
   text-align: center;
  display:none;
}
.campaignbox-content-characters-characterbox-portrait {
  object-fit: cover;
  width: 60px;
   height: 125px;
   margin-bottom: 2px;
}
 
.campaignbox-content-characters-characterbox {
  display:inline-block;
}
}
.campaignbox-content {
 
.campaignbox-content-characters-characterbox-tooltip {
    overflow:auto;
    background: rgba(33,33,33,1);
    border-radius:5px;
    border: 2px solid #F9E4CA;
    padding: 5px 8px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    max-width: 400px;
    max-height: 400px;
    white-space:pre-line;
    z-index: 200;
  position: fixed;
   display: none;
   display: none;
  color:white;
}
  }
 


.campaignbox-content-topbar-date {
  text-align: right;
  width: 130px;
}
</style>
</style>

Latest revision as of 08:35, 27 July 2019

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

<script> $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');

var series1 = [];

var obj = {}; 

 obj["name"] = "";
 obj["image"] = "";
 obj["season"] = "";
 obj["color"] = "";
 obj["description"] = ;
 obj["key"] = "";
 obj["date"] = "";
 obj["height"] = "";
 obj["characters"] = "";
 obj["playlist"] = "";

 series1.push(obj);

for(var i = 0; i < series1.length; i++){

$(".campaign-holder").append('

<img class="campaignbox-image" src="' + series1[i].image + '">

' + series1[i].season + '

' + series1[i].name + '

' + series1[i].name + ' ' + series1[i].date + '

' + series1[i].description + '

'+ series1[i].characters +'

<a href="http://youtube.com/' + series1[i].playlist + '"> Playlist</a>

');

}

$(".campaignbox-content-characters a").each(function() { var title = $(this).attr("title"); $(this).removeAttr("title");

$(this).wrap("

");

$(this).after("" + title + ""); $(this).children("img").attr("alt", title);

});

$(".campaignbox-text a").each(function() { //var text = $(this).text(); //$(this).after("" + text + ""); //$(this).remove(); });

$(".campaignbox-content-topbar-name a").each(function() { $(this).removeAttr("title"); });

$(".campaignbox[data-season='Season 1']").wrapAll("
"); $(".campaignbox[data-season='Season 2']").wrapAll("
"); $(".campaignbox[data-season='Season 3']").wrapAll("
"); $(".campaignbox[data-season='Season 4']").wrapAll("
"); 


function openCard(card) {

$(".season-holder").removeClass("season-wrap"); $(card).parent().attr("data-scroll", $(window).scrollTop()); var id = $(card).parent().attr("id"); var ht = $(card).attr("data-height"); $(".campaignbox:not('div#" + id + "')").hide(); 

   $("div#" + id + " .campaignbox-card").fadeOut("slow");
    $("div#" + id + ".campaignbox").animate({width:"662px", height: ht}, function() {
   $("div#" + id + " .campaignbox-content").fadeIn(200);
   });

 }

 function closeCard(card) {

var id = $(card).closest(".campaignbox").attr("id"); 

   $("div#" + id + " .campaignbox-content").hide();
     $("div#" + id + ".campaignbox").animate({width:"185px", height:"200px"}, function() {

$(".campaignbox:not('div#" + id + "')").fadeIn(); 

   $("div#" + id + " .campaignbox-card").fadeIn("slow");

$(".season-holder").addClass("season-wrap"); $(window).scrollTop($("div#" + id + ".campaignbox").attr("data-scroll")); 

   });

}

$(".campaignbox-text a").click(function(e) { 

  e.stopPropagation();

})

</script>

<style> .season-wrap { 

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

} .campaignbox-content-topbar-back { 

   padding-right: 30px;

} .campaignbox-text { 

   padding: 10px;
   padding-bottom: 25px;

} .campaignbox-text a{ 

   color: white;

} .campaignbox-card { 

   cursor: pointer;

} .campaignbox-content-topbar-back:hover { 

   cursor: pointer;
   color: #9c6011;

}

.campaignbox-content-topbar { 

 width: 100%;

}

.campaignbox-content-topbar-name a { 

 color: inherit;
 text-decoration: none;

} .campaignbox { 

 width: 185px;
 height: 200px;
 border: 2px solid #F9E4CA;
 border-radius: 10px;
 overflow: hidden;
 display: inline-block;
 background: rgb(33, 33, 33);
 margin: 8px;
 vertical-align: top;

}

.campaignbox-image { 

 width: 100%;
 opacity:0.85;
 margin-bottom: -5px;

} .campaignbox-content { 

 padding: 10px;
 text-align: initial;
 display:none;

} .campaignbox-content-characters-characterbox-portrait { 

 object-fit: cover;
 width: 60px;
 height: 125px;
 margin-bottom: 2px;

}

.campaignbox-content-characters-characterbox { 

 display:inline-block;

}

.campaignbox-content-characters-characterbox-tooltip { 

   overflow:auto;
   background: rgba(33,33,33,1);
   border-radius:5px;
   border: 2px solid #F9E4CA;
   padding: 5px 8px;
   color: white;
   font-family: sans-serif;
   font-size: 14px;
   max-width: 400px;
   max-height: 400px;
   white-space:pre-line;
   z-index: 200;
 position: fixed;
 display: none;

}

.campaignbox-content-topbar-date { 

 text-align: right;
 width: 130px;

} </style>

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