fgm
/
front__coursera-responsive-design


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!-- 
  An example of displaying the same data in two different
  ways with two templates
-->

<head>
  <!-- include our libraries and css files -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/handlebars-v3.0.3.js"></script>

  <script src="js/bootstrap.min.js"></script>

  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/gallery.css" rel="stylesheet">
</head>

<body role="document">
  <div class="container">
    <div class="page-header">
      <h1>My photo albums </h1>
    </div>

    <!-- this is a simple nav bar for selecting between display methods -->
    <ul class="nav nav-pills">
      <li role="" id="detailsbtn"><a href="#">Details</a></li>
      <li role="" id="modalbtn"><a href="#">Modal</a></li>
    </ul>
    <br /><br />

    <!-- the content of the web page starts off empty
     because we will fill it later from the template -->
    <div id="content" class="container-fluid" role="main">
    </div>
  </div>

  <!-- this template displays the image with a title
       and author, just like the previous examples -->
  <script id="detail-template" type="text/x-handlebars-template">
    <br />
    <div class="row-fluid">
      <div class="col-sm-5">
        <img style="width:100%" src="{{src}}" />
      </div>

      <div class="col-sm-7">
        <h1>{{title}}</h1>
        <h3 class="author">
          {{author}}
        </h3>
      </div>
    </div>
  </script>

  <!-- This template displays a modal pop-up of the image.
       It has quite a bit of boilder plate HTML code but in essence it just
       displays an image tag within a set of divs that define the modal
  -->
  <script id="modal-template" type="text/x-handlebars-template">
    <div id="imageModal" class="modal fade" role="dialog">
      <div class="modal-dialog" style="width:800px">
        <div class="modal-content">
          <div class="modal-body">
            <img style="width:100%" src="{{src}}" />
          </div>
        </div>

      </div>
    </div>
  </script>

  <!-- javascript code to fill the template -->
  <script type="text/javascript">
    // This time we have two templates
    // we compile both of them and store the
    // results in separate variables
    var detailsSource = $("#detail-template").html();
    var detail_template = Handlebars.compile(detailsSource);

    var modalSource = $("#modal-template").html();
    var modal_template = Handlebars.compile(modalSource);

    // this is the data object we will be using
    var data = {
      src: "images/The_Earth_seen_from_Apollo_17.jpg",
      title: "The Earth seen from Apollo 17",
      author: "Ed g2s"
    };

    // Print out the variables
    console.log(data.author + " " + data.title + " " + data.src);

    var $content = $('#content');
    var $detailsbtn = $("#detailsbtn");
    var $imageModal;

    // this instantiates the detail template
    $detailsbtn.click(function () {
      // hide the modal if it is showing
      if ($imageModal) {
        $imageModal.modal('hide');
      }

      //use the detail template to generate html
      // and put it in the DOM
      var html = detail_template(data);
      $content.html(html);
    });

    // this instantiates the modal template
    $("#modalbtn").click(function () {
      // Use the modal template to generate html
      // and put it in the DOM
      var html = modal_template(data);
      $content.html(html);

      /* We can only show the modal once the template has been instantiated
       because it does not exist before */
      $imageModal = $("#imageModal").modal('show');

      // create a call back for when the model is
      // hidden so we can re-display the detail template
      $imageModal.on('hidden.bs.modal', function () {
        $detailsbtn.click();
      });
    });
  </script>
</body>