From d53fc18c2b28603e3e1fa86011d795e598d9d6bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sat, 4 Sep 2021 12:05:15 +0200
Subject: [PATCH] search: open expand if it contains search term #80

---
 layouts/shortcodes/expand.html | 22 +++++++++++++++-------
 static/css/theme.css           | 34 +++++++++++++++++++++++++++++++---
 static/js/relearn.js           |  5 +++++
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/layouts/shortcodes/expand.html b/layouts/shortcodes/expand.html
index 4ec3ac0f02..cb792c4a22 100644
--- a/layouts/shortcodes/expand.html
+++ b/layouts/shortcodes/expand.html
@@ -1,11 +1,19 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-<div class="expand">
-    <a class="expand-label" onclick="$h = $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return $h.next('div').is(':visible') ? 'fas fa-chevron-down' : 'fas fa-chevron-right';});});">
-        <i class="fas fa-chevron-{{ if eq (.Get 1) "true" }}down{{else}}right{{end}}"></i>
-        {{$expandMessage := T "Expand-title"}}
-    	{{.Get 0 | default $expandMessage}}
+{{ $title := .Get 0 | default (T "Expand-title") }}
+{{ $content := .Inner | safeHTML }}
+{{ $expanded := eq (.Get 1) "true" }}
+<div class="expand
+    {{- if $expanded }} expand-expanded{{ end -}}
+">
+    {{/* things are getting complicated when search tries to open the expand box while jquery sets the display CSS on the element */}}
+    <a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
+        <i class="fas fa-chevron-down"></i>
+        <i class="fas fa-chevron-right"></i>
+        {{ $title }}
     </a>
-    <div class="expand-content" style="display: {{ if eq (.Get 1) "true" }}block{{else}}none{{end}};">
-        {{.Inner | safeHTML}}
+    <div class="expand-content" style="display:
+        {{- if $expanded }} block{{ else }} none{{ end -}}
+    ;">
+        {{ $content }}
     </div>
 </div>
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 39c175fdd7..0329ef850d 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1134,9 +1134,37 @@ option {
     cursor: pointer;
 }
 
-.expand-label i{
-    font-size: x-small;
-    width: 8px;
+.expand-label > .fas {
+    font-size: .8rem;
+    width: .6rem;
+}
+
+/* expander collapsed, default */
+.expand > .expand-label > .fa-chevron-down {
+    display: none;
+}
+.expand > .expand-label > .fa-chevron-right {
+    display: inline-block;
+}
+
+/* expander expanded, controlled by expand.html */
+.expand.expand-expanded > .expand-label > .fa-chevron-down {
+    display: inline-block;
+}
+.expand.expand-expanded > .expand-label > .fa-chevron-right {
+    display: none;
+}
+
+/* expander expand collapsed marked, must override logic of expand.html, controlled by relearn.js */
+.expand:not(.expand-expanded).expand-marked > .expand-label > .fa-chevron-down {
+    display: inline-block;
+}
+.expand:not(.expand-expanded).expand-marked > .expand-label > .fa-chevron-right {
+    display: none;
+}
+.expand:not(.expand-expanded).expand-marked > .expand-content {
+    /* this will disable jquery's animation */
+    display: block !important;
 }
 
 @media print {
diff --git a/static/js/relearn.js b/static/js/relearn.js
index f2afdf1217..78645bc4c5 100644
--- a/static/js/relearn.js
+++ b/static/js/relearn.js
@@ -276,18 +276,22 @@ jQuery(function() {
             $('ul.topics').removeClass('searched');
             items.css('display', 'block');
             sessionStorage.removeItem('search-value');
+            $("mark").parents(".expand-marked").removeClass("expand-marked");
             $(".highlightable").unhighlight({ element: 'mark' })
             return;
         }
 
         sessionStorage.setItem('search-value', value);
+        $("mark").parents(".expand-marked").removeClass("expand-marked");
         $(".highlightable").unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' });
+        $("mark").parents(".expand").addClass("expand-marked");
 
         if (ajax && ajax.abort) ajax.abort();
 
         jQuery('[data-search-clear]').on('click', function() {
             jQuery('[data-search-input]').val('').trigger('input');
             sessionStorage.removeItem('search-input');
+            $("mark").parents(".expand-marked").removeClass("expand-marked");
             $(".highlightable").unhighlight({ element: 'mark' })
         });
     });
@@ -314,6 +318,7 @@ jQuery(function() {
     }
 
     $(".highlightable").highlight(sessionStorage.getItem('search-value'), { element: 'mark' });
+    $("mark").parents(".expand").addClass("expand-marked");
 
     // clipboard
     var clipInit = false;