|
@@ -21,7 +21,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- this is a simple nav bar for selecting between display methods -->
|
|
|
- <ul class="nav nav-tabs">
|
|
|
+ <ul class="nav nav-pills">
|
|
|
<li role="" id="detailsbtn"><a href="#">Details</a></li>
|
|
|
<li role="" id="modalbtn"><a href="#">Modal</a></li>
|
|
|
</ul>
|
|
@@ -57,14 +57,11 @@
|
|
|
-->
|
|
|
<script id="modal-template" type="text/x-handlebars-template">
|
|
|
<div id="imageModal" class="modal fade" role="dialog">
|
|
|
- <div class="modal-dialog" style="width:800">
|
|
|
-
|
|
|
+ <div class="modal-dialog" style="width:800px">
|
|
|
<div class="modal-content">
|
|
|
-
|
|
|
<div class="modal-body">
|
|
|
<img style="width:100%" src="{{src}}" />
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@@ -76,13 +73,11 @@
|
|
|
// This time we have two templates
|
|
|
// we compile both of them and store the
|
|
|
// results in separate variables
|
|
|
- var source = $("#detail-template").html();
|
|
|
-
|
|
|
- var detail_template = Handlebars.compile(source);
|
|
|
+ var detailsSource = $("#detail-template").html();
|
|
|
+ var detail_template = Handlebars.compile(detailsSource);
|
|
|
|
|
|
- source = $("#modal-template").html();
|
|
|
-
|
|
|
- var modal_template = Handlebars.compile(source);
|
|
|
+ var modalSource = $("#modal-template").html();
|
|
|
+ var modal_template = Handlebars.compile(modalSource);
|
|
|
|
|
|
// this is the data object we will be using
|
|
|
var data = {
|
|
@@ -91,40 +86,41 @@
|
|
|
author: "Ed g2s"
|
|
|
};
|
|
|
|
|
|
- var image1Data = {
|
|
|
- title: "image1",
|
|
|
- author: "Tuxtso",
|
|
|
- src: "https://upload.wikimedia.org/wikipedia/commons/archive/9/97/20101017074210%21The_Earth_seen_from_Apollo_17.jpg",
|
|
|
- };
|
|
|
- //print out the variables
|
|
|
- console.log(image1Data.author + " " + image1Data.title + " " + image1Data.src);
|
|
|
+ // 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 () {
|
|
|
+ $detailsbtn.click(function () {
|
|
|
// hide the modal if it is showing
|
|
|
- $("#imageModal").modal('hide');
|
|
|
+ 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);
|
|
|
+ $content.html(html);
|
|
|
});
|
|
|
|
|
|
+ // this instantiates the modal template
|
|
|
$("#modalbtn").click(function () {
|
|
|
- //use the modal template to generate html
|
|
|
+ // Use the modal template to generate html
|
|
|
// and put it in the DOM
|
|
|
var html = modal_template(data);
|
|
|
- $('#content').html(html);
|
|
|
+ $content.html(html);
|
|
|
|
|
|
- /* we can only show the modal once the
|
|
|
- template has been instantiated
|
|
|
+ /* We can only show the modal once the template has been instantiated
|
|
|
because it does not exist before */
|
|
|
- $("#imageModal").modal('show');
|
|
|
+ $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();
|
|
|
+ $imageModal.on('hidden.bs.modal', function () {
|
|
|
+ $detailsbtn.click();
|
|
|
});
|
|
|
});
|
|
|
</script>
|