Initial attempt at modals

Author: parthsarin

index.html

@@ -377,8 +377,13 @@ <h4>Office Hours</h4>
 </ul>
 
 <!-- Scripts placed at the bottom of the page for faster loading -->
-<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
-<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+<script
+  src="https://code.jquery.com/jquery-3.4.1.min.js"
+  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+  crossorigin="anonymous"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
 <script type="text/javascript" src="/js/gtag_helper.js"></script>
 <script type="text/javascript" src="js/resources.js"></script>

js/resources.js

@@ -228,7 +228,7 @@ function create_showcase_card(project) {
     id="{ project.uid }-modal" 
     tabindex="-1" 
     role="dialog" 
-    aria-labelledby="{ project.uid }-title" 
+    aria-labelledby="{ project.uid }-modalTitle" 
     aria-hidden="true"
   >
     <div class="modal-dialog" role="document">
@@ -250,7 +250,7 @@ function create_showcase_card(project) {
   </div>
 
   */
-  var $card = $('<div>').attr('class', 'col mb-2')
+  var $card = $('<div>').attr({'class': 'col mb-2'})
   .append(
     $('<div>').attr({
       'class': 'card',
@@ -270,12 +270,68 @@ function create_showcase_card(project) {
           'class': 'mr-3',
           'data-toggle': 'modal',
           'data-target': `#${project.uid}-modal`,
-          'href': '#'
+          'href': `#${ project.uid }-modal`
         }).append('Video') : null)
       ).append(
         (project.ext ? '<br />' + project.ext : null)
       )
     )
+  ).append(
+    (project.rightColMedia ?
+    $('<div>').attr({
+      'class': 'modal',
+      'id': `${ project.uid }-modal`,
+      'tabindex': '-1',
+      'role': 'dialog',
+      'aria-labelledby': `${ project.uid }-modalTitle`,
+      'aria-hidden': 'true'
+    })
+    .append(
+      $('<div>').attr({'class': 'modal-dialog modal-dialog-centered', 'role': 'document'})
+      .append(
+        $('<div>').attr('class', 'modal-content')
+        .append(
+          /* BEGIN MODAL HEADER */
+          $('<div>').attr('class', 'modal-header')
+          .append(
+            $('<h5>').attr({'class': 'modal-title', 'id': `${ project.uid }-modalTitle`})
+            .append(`Video for "${project.title}"`)
+          )
+          .append(
+            $('<button>').attr({
+              'type': 'button',
+              'class': 'close',
+              'data-dismiss': 'modal',
+              'aria-label': "Close"
+            })
+            .append(
+              $('<span>').attr('aria-hidden', 'true')
+              .append('&times;')
+            )
+          )
+          /* END MODAL HEADER */
+        )
+        .append(
+          /* BEGIN MODAL BODY */
+          $('<div>').attr('class', 'modal-body')
+          .append(project.rightColMedia)
+          /* END MODAL BODY */
+        )
+        .append(
+          /* BEGIN MODAL FOOTER */
+          $('<div>').attr('class', 'modal-footer')
+          .append(
+            $('<button>').attr({
+              'type': 'button',
+              'class': 'btn btn-secondary',
+              'data-dismiss': 'modal'
+            }).append('Close')
+          )
+          /* END MODAL FOOTER */
+        )
+      )
+    )
+    : null)
   );
 
   // if (project.rightColMedia.length > 0) {

res/projects.json

@@ -19,7 +19,7 @@
     "ext": ""
   },
   {
-    "uid": "b8a41718-5458-43ae-aa77-d5523b0a0432",
+    "uid": "f4577760-e010-4725-a5d4-45ba45f14444",
     "title": "Reddit Wallscraper",
     "authors": "Elizabeth Fitzgerald, Chris Moffitt",
     "codeSource": "GitHub",