Dynamic Binding Test and With Templates and JSON Data

by Abid Shaik

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://joaopereirawd.github.io/animatedModal.js/js/animatedModal.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<!--Dynamic Binding Test and With Templates and JSON Data -->
<script id="kioskAdTemplate" type="text/x-jquery-tmpl">
  <a id="AdLink${ID}" href="#Ad${ID}Content" class="adLink">
    <div id='Ad${ID}' class='col-xs-4 ad' style='background-color:${Color}'>${Color}</div>
  </a>
</script>

<script id="template1" type="text/x-jquery-tmpl">
  <div id="Ad${ID}Content" class="row AdContent" style="background-color: #e6b47d; color:white">
    <div class="close-Ad${ID}Content">
      <img class="closebt" src="http://joaopereirawd.github.io/animatedModal.js/img/closebt.svg">
    </div>
    <div class="modal-content">
      TEST MODAL
    </div>
</script>

<script id="template2" type="text/x-jquery-tmpl">
  <div id="Ad${ID}Content" class="row AdContent" style="background-color: #3a3f88;color:white">
    <div class="close-Ad${ID}Content">
      <img class="closebt" src="http://joaopereirawd.github.io/animatedModal.js/img/closebt.svg">
    </div>

    <div class="modal-content">
      <h1>This is Template 2</h1>
      <div class="col-md-6">
        This is a 2 column Template
      </div>
      <div class="col-md-6">
        This is a 2 column Template
      </div>
    </div>

</script>

<div class="container">
  <div class="row">
    <input id="addAds" type="button" value="Add Ads" />
  </div>
  <div class="row adsRow">

  </div>
  <div id="AdContentContainer">
  </div>
</div>

CSS

.ad {
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 5px;
}

#AdContentContainer {
  width: 100%;
  height: 100%;
  display: none;
}

.AdContent {
  display: none;
}

JavaScript

var SampleData = {
  "Ads": [{
    "ID": 1,
    "Title": "Overview",
    "BackgroundImg": "http://imagehere",
    "Color": "#0088CE",
    "width": "2",
    "template": "template1"
  }, {
    "ID": 2,
    "Title": "Overview",
    "BackgroundImg": "http://imagehere",
    "Color": "#43fd3f",
    "width": "1",
    "template": "template2"
  }, {
    "ID": 3,
    "Title": "Overview",
    "BackgroundImg": "http://imagehere",
    "Color": "#66003b",
    "width": "1"
  }, {
    "ID": 4,
    "Title": "Overview",
    "BackgroundImg": "http://imagehere",
    "Color": "#e6b47d",
    "width": "2"
  }, {
    "ID": 5,
    "Title": "Overview",
    "BackgroundImg": "http://imagehere",
    "Color": "#756731",
    "width": "1"
  }, {
    "ID": 6,
    "Title": "Overview",
    "BackgroundImg": "http://imagehere",
    "Color": "#dbbaf6",
    "width": "1"
  }, {
    "ID": 7,
    "Title": "Overview",
    "BackgroundImg": "http://imagehere",
    "Color": "#788397",
    "width": "1"
  }]
};

$(document).ready(function() {
  var i = 1;

  //Append Ads using a simple Template and JSON Sample Data 
  $("#kioskAdTemplate").tmpl(SampleData.Ads).appendTo(".adsRow");


  $.each(SampleData.Ads, function(i, item) {


    if (item.template != undefined) {
      switch (item.template) {
        case "template1":
          $("#template1").tmpl(item).appendTo("#AdContentContainer");
          break;
        case "template2":
          $("#template2").tmpl(item).appendTo("#AdContentContainer");
          break;
      }
    }
    $("#AdLink" + item.ID).animatedModal({
      modalTarget: 'Ad' + item.ID + 'Content',
      coloe: item.Color
    });

  })

  $(".adsRow").on("click", '.ad', function(event) {

    console.log(event.target.id);
    $("#AdContentContainer").css("display", "block");
    $(".AdContent").css("display", "none");
    $("#" + event.target.id + "Content").css("display", "block");

    $(".ad").css("border", "");
    $("body").css("background-color", $(this).text());
   ...