Merge f526fef into 3103591

project_tier/course_materials/templates/course_materials/course_materials_index_page.html

@@ -102,7 +102,7 @@ <h6>Software</h6>
       <div class="materials cards">
         {% for course in course_materials %}
           {% with course as course.specific %}
-            <div class="card" data-open="course-{{course.id}}-modal">
+            <div class="card" data-open="course-{{course.id}}-modal" id="{{ course.id }}">
               <div class="card-divider">
                 <h2>{{ course.title }}</h2>
                 {{course.university }}
@@ -165,4 +165,5 @@ <h3>{{course.university }}</h3>
 
 {% block extra_js %}
   <script src="{% static "js/filters.js" %}"></script>
+  <script src="{% static "js/modals.js" %}">></script>
 {% endblock %}

project_tier/static/js/modals.js

@@ -0,0 +1,25 @@
+// Displays the element ID in the URL, and automatically opens the related modal if you navigate directly to the ID of the card
+
+
+// Displays the ID ofthe card in the URL
+function changeURL(e){
+  var hash = e.currentTarget.id;
+  window.location.hash = "#modal" + hash;
+}
+
+function getHashFromCards(){
+  var cards = document.querySelectorAll('.card');
+  for (i = 0; i < cards.length; i++) {
+    cards[i].addEventListener("click", changeURL);
+  }
+}
+getHashFromCards();
+
+
+// Opens the modal on page load
+function openModal(){
+  var location = window.location.hash.substring(6);;
+  var modal = "course-" + location + "-modal"
+  $("#" + modal).foundation("open");
+}
+openModal();