From d05153411aef386445e981c3387941de07351c8d Mon Sep 17 00:00:00 2001
From: Fabio Fenoglio <fabio.fenoglio@eng.it>
Date: Tue, 7 Dec 2021 09:11:45 +0100
Subject: [PATCH] allow customization of number of items to show in "taken
 courses" when before collapsing

---
 layouts/partials/sections/education-alt.html |  7 ++++---
 layouts/partials/sections/education.html     |  7 ++++---
 static/js/main.js                            | 11 ++++++-----
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html
index 2994fc5..13037a8 100644
--- a/layouts/partials/sections/education-alt.html
+++ b/layouts/partials/sections/education-alt.html
@@ -53,6 +53,7 @@
                                 </div>
                             {{ end }}
                             {{ if .takenCourses }}
+                            {{ $showFirst  := .takenCourses.showFirst | default 2 }}
                             <div class="taken-courses">
                                 <h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
                                 {{ if .takenCourses.showGrades }}
@@ -65,7 +66,7 @@
                                     </thead>
                                     <tbody>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                        <tr class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">
                                             <td>{{ $course.name }}</td>
                                             {{ if not $hideScale  }}<td>{{ $course.outOf }}</td>{{ end }}
                                             <td>{{ $course.achieved }}</td>
@@ -76,11 +77,11 @@
                                 {{ else }}
                                     <ul>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        <li class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">{{ $course.name }}</li>
                                         {{ end }}
                                     </ul>
                                 {{ end }}
-                                {{ if gt (len .takenCourses.courses) 2 }}
+                                {{ if gt (len .takenCourses.courses) $showFirst }}
                                     <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
                                     onclick="toggleCourseVisibility(this);" id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
                                     <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html
index f9ba8fc..f4a8903 100644
--- a/layouts/partials/sections/education.html
+++ b/layouts/partials/sections/education.html
@@ -54,6 +54,7 @@
                                 </div>
                             {{ end }}
                             {{ if .takenCourses }}
+                            {{ $showFirst  := .takenCourses.showFirst | default 2 }}
                             <div class="taken-courses">
                                 <h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
                                 {{ if .takenCourses.showGrades }}
@@ -66,7 +67,7 @@
                                     </thead>
                                     <tbody>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                        <tr class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">
                                             <td>{{ $course.name }}</td>
                                             {{ if not $hideScale  }}<td>{{ $course.outOf }}</td>{{ end }}
                                             <td>{{ $course.achieved }}</td>
@@ -77,11 +78,11 @@
                                 {{ else }}
                                     <ul>
                                         {{ range $index,$course := .takenCourses.courses }}
-                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        <li class="course {{ if ge $index $showFirst }}hidden-course{{ end}}">{{ $course.name }}</li>
                                         {{ end }}
                                     </ul>
                                 {{ end }}
-                                {{ if gt (len .takenCourses.courses ) 2 }}
+                                {{ if gt (len .takenCourses.courses ) $showFirst }}
                                     <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
                                     onclick="toggleCourseVisibility(this);" id="show-more-btn">{{ i18n "show_more"}}</button>
                                     <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
diff --git a/static/js/main.js b/static/js/main.js
index 0abca1a..ff688dd 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -158,15 +158,16 @@ function toggleCourseVisibility(elem) {
   }
 
   // toggle hidden-course class from the third elements
-  for (var i = 0; i < courses.length; i++) {
-    if (i > 1 && courses[i].classList !== null) {
-      courses[i].classList.toggle("hidden-course");
+  for (const course of courses) {
+    if (course.classList.contains("hidden-course") || course.classList.contains("toggled-hidden-course")) {
+      course.classList.toggle("hidden-course");
+      course.classList.add("toggled-hidden-course");
     }
   }
 
   // toggle the buttons visibility
   let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
-  for (var i = 0; i < buttonsToToggle.length; i++) {
-    buttonsToToggle[i].classList.toggle("hidden");
+  for (const buttonToToggle of buttonsToToggle) {
+    buttonToToggle.classList.toggle("hidden");
   }
 }