feat: Search highlight (#29)

* add: gitginore db folder and .vscode settings

* feat: search phrase highlighting

* refactor: highlight function moved to sekizai tag

* fix: keyerror for '/browse' with empty parameters

* refactor: delete unecessary js block

clipping_manager/templates/clipping_manager/browse.html

@@ -1,5 +1,6 @@
 {% extends "sidebar.html" %}
 {% load cms_tags i18n crispy_forms_tags %}
+{% load staticfiles sekizai_tags %}
 
 {% block sidebar %}
     <div class="card">
@@ -53,4 +54,9 @@ <h1>{% trans "Your Clippings" %}</h1>
 
     {% include "partials/pagination.html" %}
 
-{% endblock %}
+    {% addtoblock "js" %}
+        <script src="{% static 'js/helper-functions.js' %}" onload="highlightClippings('{{contains}}')"></script>
+    {% endaddtoblock %}
+{% endblock %}
+
+{% render_block "js" %}

clipping_manager/templates/clipping_manager/partials/clipping_list_item.html

@@ -1,4 +1,4 @@
 <div class="mb-5">
-    <p><em>{{ clipping.content }}</em></p>
+    <p class="clipping-content"><em>{{ clipping.content }}</em></p>
     <span class="text-secondary">&mdash; {{ clipping.book.title }}</span>
 </div>

clipping_manager/views.py

@@ -45,6 +45,7 @@ def get_context_data(self, **kwargs):
         ctx = super(ClippingsBrowseView, self).get_context_data(**kwargs)
         ctx['clippings_count'] = Clipping.objects.for_user(self.request.user).count()
         ctx['books_count'] = Book.objects.for_user(self.request.user).count()
+        ctx['contains'] = self.request.GET.get('content', '')
         ctx['filter'] = self.filter
         return ctx
 

static/js/helper-functions.js

@@ -0,0 +1,18 @@
+// Highlights the searched phrase ('Content contains') in clippings 
+function highlightClippings(wordToHighlight) {
+    // If empty -> stop the function
+    if (!wordToHighlight) return;
+
+    // Get all clippings' text
+    const clippings = document.querySelectorAll('.clipping-content > em');
+
+    // Highlighs searched-for phrase in each clipping (case-insensitive)
+    clippings.forEach((clipping) => {
+        const regex = new RegExp(wordToHighlight, 'gi');
+        const highlightedClipping = clipping.innerHTML.replace(regex, (foundWord) => {
+            return `<span class="highlight">${foundWord}</span>`;
+        });
+
+        clipping.innerHTML = highlightedClipping;
+    });
+}

static/scss/_basics.scss

@@ -5,4 +5,8 @@ a {
     &:hover {
         color: $color-secondary;
     }
+}
+
+.highlight {
+    background: #ffc600;
 }