From 58d7e8732588e5240b420bbef17c3795fd7453e9 Mon Sep 17 00:00:00 2001
From: Robert Linde <robert@silvertip.se>
Date: Wed, 4 Oct 2017 11:39:53 +0200
Subject: [PATCH] Add styles for hover and visited for table of contents

* Add styles for hover and visited for table of contents

* Add cookie based handling of visited table of content links
---
 .../stylesheets/global/table-of-contents.css  | 18 +++++++++++++++++
 public/stylesheets/style.css                  | 20 +++++++++++++++++++
 routes/courses.js                             | 16 +++++++++++++--
 views/course.pug                              |  4 ++--
 4 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/assets/stylesheets/global/table-of-contents.css b/assets/stylesheets/global/table-of-contents.css
index 7ca8088..9857971 100644
--- a/assets/stylesheets/global/table-of-contents.css
+++ b/assets/stylesheets/global/table-of-contents.css
@@ -42,5 +42,23 @@
         left: calc(var(--toc-gap-left) * 2 * -1);
       }
     }
+
+    &:hover {
+      font-family: var(--font-medium);
+      color: var(--color-text-default);
+    }
+
+    &.visited {
+      position:relative;
+      &:before,
+      &:after {
+        position: absolute;
+        top: 0;
+      }
+      &:after {
+        content: '👁';
+        left: calc(var(--toc-gap-left) * 2 * -1);
+      }
+    }
   }
 }
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 8fbbee9..23a6844 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1218,6 +1218,26 @@ display: flex;
   left: -22px;
 }
 
+.table-of-contents__link:hover {
+  font-family: 'robotomedium', Helvetica, sans-serif;
+  color: #2a3039;
+}
+
+.table-of-contents__link.visited {
+  position:relative;
+}
+
+.table-of-contents__link.visited:before,
+      .table-of-contents__link.visited:after {
+  position: absolute;
+  top: 0;
+}
+
+.table-of-contents__link.visited:after {
+  content: '👁';
+  left: -22px;
+}
+
 .sidebar-menu {}
 
 .sidebar-menu__list {
diff --git a/routes/courses.js b/routes/courses.js
index d3a4463..afaa2cd 100644
--- a/routes/courses.js
+++ b/routes/courses.js
@@ -31,9 +31,15 @@ router.get('/:slug', catchErrors(async function (req, res, next) {
   const lessons = course.fields.lessons
   const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
   const lesson = lessons[lessonIndex]
-  res.render('course', {title: course.fields.title, course, lesson, lessons, lessonIndex})
+  const cookie = req.cookies.visitedLessons
+  let visitedLessons = cookie ||  []
+  visitedLessons.push(course.sys.id)
+  visitedLessons = [...new Set(visitedLessons)]
+  res.cookie('visitedLessons', visitedLessons, { maxAge: 900000, httpOnly: true })
+  res.render('course', {title: course.fields.title, course, lesson, lessons, lessonIndex, visitedLessons})
 }))
 
+
 /* GET course lesson detail. */
 router.get('/:cslug/lessons/:lslug', catchErrors(async function (req, res, next) {
   let course = await getCourse(req.params.cslug, req.query.locale, req.query.api)
@@ -41,12 +47,18 @@ router.get('/:cslug/lessons/:lslug', catchErrors(async function (req, res, next)
   const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
   const lesson = lessons[lessonIndex]
   const nextLesson = lessons[lessonIndex + 1] || null
+  const cookie = req.cookies.visitedLessons
+  let visitedLessons = cookie ||  []
+  visitedLessons.push(lesson.sys.id)
+  visitedLessons = [...new Set(visitedLessons)]
+  res.cookie('visitedLessons', visitedLessons, { maxAge: 900000, httpOnly: true })
   res.render('course', {
     title: `${course.fields.title} | ${lesson.fields.title}`,
     course,
     lesson,
     lessons,
-    nextLesson
+    nextLesson,
+    visitedLessons
   })
 }))
 
diff --git a/views/course.pug b/views/course.pug
index 7472de2..bc386dd 100644
--- a/views/course.pug
+++ b/views/course.pug
@@ -11,11 +11,11 @@ block content
         .table-of-contents
           .table-of-contents__list
             .table-of-contents__item
-              a.table-of-contents__link.active(href=`/courses/${course.fields.slug}`) Course overview
+              a.table-of-contents__link(href=`/courses/${course.fields.slug}` class=(currentPath.endsWith(course.fields.slug) ? 'active' : '') class=(visitedLessons.includes(course.sys.id) ? 'visited' : '')) Course overview
             each l in course.fields.lessons
               if l.fields
                 .table-of-contents__item
-                  a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
+                  a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}` class=(currentPath.endsWith(l.fields.slug) ? 'active' : '') class=(visitedLessons.includes(l.sys.id) ? 'visited' : '')) #{l.fields.title}
     section.layout-sidebar__content
       if lesson
         +lesson(lesson, course, nextLesson)