Widget:CampaignCards: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
← Older editNewer edit →
imported>Pillowkeeper
imported>Pillowkeeper
No edit summary
imported>Pillowkeeper
No edit summary
Line 11: Line 11:
   obj["image"] = "<!--{$data.image|unescape:'entity'}-->";
   obj["image"] = "<!--{$data.image|unescape:'entity'}-->";
   obj["season"] = "<!--{$data.season|escape:'javascript'}-->";
   obj["season"] = "<!--{$data.season|escape:'javascript'}-->";
   obj["content"] = '<!--{$data.content|unescape:'html'}-->';
   obj["description"] = '<!--{$data.description|unescape:'html'}-->';
   obj["key"] = "<!--{$data.key|escape:'javascript'}-->";
   obj["key"] = "<!--{$data.key|escape:'javascript'}-->";
   obj["height"] = "<!--{$data.height|escape:'javascript'}-->";
   obj["characters"] = "<!--{$data.characters|escape:'javascript'}-->";
  obj["playlist"] = "<!--{$data.playlist|escape:'javascript'}-->";


   series1.push(obj);
   series1.push(obj);
Line 19: Line 20:


for(var i = 0; i < series1.length; i++){
for(var i = 0; i < series1.length; i++){
console.log(series1[0].image);
$(".campaign-holder").append('<div id="' + series1[i].key + '" class="campaignbox"> <div class="campaignbox-card" onClick="openCard(this)"> <img class="campaignbox-image" src="' + series1[i].image + '"> <div class="campaignbox-text"> <h4 style="margin:7px"> <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> <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" style="color:red">' + series1[i].name + '</span> </td> <td> <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="' + 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>');
$(".campaign-holder").append('<div onClick="openCard(this)" data-height="' + series1[i].height + '" style="text-align:initial;" class="campaignbox" id="' + series1[i].key + '"><div class="campaignbox-card"><img class="campaignbox-image" src="' + series1[i].image + '"><div class="campaignbox-text"><h4 style="margin:7px"><b>'+ series1[i].season +'</b></h4><p style="margin-top:4px">' + series1[i].name + '</p></div></div><div class="campaignbox-content">' + series1[i].content + '</div></div>');
}
}


$(document).on("click",".campaignbox-back", function(e){
  e.preventDefault();
  card = $(e.currentTarget).parent().parent().parent().parent(); 
  var id = card.id
var height = $(card).attr("data-height");
$("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow');
$(".campaignbox:not('div#" + id + "')").hide();
$("div#" + id).animate({width:'200px', height: '184px'}, function(){
$("div#" + id + " .campaignbox-content").hide();
$(".campaignbox:not('div#" + id + "')").show();
$(".campaignbox:not('div#" + id + "')").fadeIn();
});
$("div#" + id + " div:not('.campaignbox-content')").show('slow');
$("div#" + id).toggleClass("opened");


});


function openCard(card){
var id = card.id
var height = $(card).attr("data-height");
if(!$("div#" + id).hasClass("opened")){
$("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow');
$(".campaignbox:not('div#" + id + "')").hide();
$("div#" + id).animate({width:'650px', height: height}, function(){
$(".campaignbox:not('div#" + id + "')").fadeOut();
});
$("div#" + id + " div:not('.campaignbox-content')").hide('slow');
$("div#" + id + " .campaignbox-content").show('slow');
$("div#" + id).toggleClass("opened");
}
}
</script>
</script>


Revision as of 19:24, 30 August 2017

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

<script> var series1 = [];

var obj = {}; 

 obj["name"] = "";
 obj["image"] = "";
 obj["season"] = "";
 obj["description"] = ;
 obj["key"] = "";
 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="' + series1[i].playlist + '"> Playlist</a>

');

}


</script>

<style> .character-portrait { 

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

} .campaignbox.opened { 

 width: 650px;
 height: 184px;
 border: 3px solid white;
 border-radius: 10px;
 overflow: hidden;
 display: inline-block;
 background: rgb(33, 33, 33);
 margin: 8px;

} .campaignbox { 

 width: 200px;
 height: 184px;
 border: 3px solid white;
 border-radius: 10px;
 overflow: hidden;
 display: inline-block;
 background: rgb(33, 33, 33);
 margin: 8px;

} .campaignbox-back { 

   cursor: pointer;

} .campaignbox-card { 

   cursor: pointer;

} .campaignbox-image { 

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

} .campaignbox-text { 

 padding: 0.01em 5px;
 color: white;
 text-align: center;

} .campaignbox-content { 

 display: none;
 color:white;
 padding: 16px;
 }

</style>

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