nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-30 03:03:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

search: open expand if it contains search term #80

Browse source
This commit is contained in:
Sören Weber 2021-09-04 12:05:15 +02:00
parent 1c6d9538a3
commit d53fc18c2b
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 51 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
layouts/shortcodes/expand.html
View file

@ -1,11 +1,19 @@
{{ $_hugo_config := `{ "version": 1 }` }} {{ $_hugo_config := `{ "version": 1 }` }}
<div class="expand"> {{ $title := .Get 0 | default (T "Expand-title") }}
<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';});});"> {{ $content := .Inner | safeHTML }}
<i class="fas fa-chevron-{{ if eq (.Get 1) "true" }}down{{else}}right{{end}}"></i> {{ $expanded := eq (.Get 1) "true" }}
{{$expandMessage := T "Expand-title"}} <div class="expand
{{.Get 0 | default $expandMessage}} {{- 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> </a>
<div class="expand-content" style="display: {{ if eq (.Get 1) "true" }}block{{else}}none{{end}};"> <div class="expand-content" style="display:
{{.Inner | safeHTML}} {{- if $expanded }} block{{ else }} none{{ end -}}
;">
{{ $content }}
</div> </div>
</div> </div>

34
static/css/theme.css
View file

@ -1134,9 +1134,37 @@ option {
cursor: pointer; cursor: pointer;
} }
.expand-label i{ .expand-label > .fas {
font-size: x-small; font-size: .8rem;
width: 8px; 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 { @media print {

5
static/js/relearn.js
View file

@ -276,18 +276,22 @@ jQuery(function() {
$('ul.topics').removeClass('searched'); $('ul.topics').removeClass('searched');
items.css('display', 'block'); items.css('display', 'block');
sessionStorage.removeItem('search-value'); sessionStorage.removeItem('search-value');
$("mark").parents(".expand-marked").removeClass("expand-marked");
$(".highlightable").unhighlight({ element: 'mark' }) $(".highlightable").unhighlight({ element: 'mark' })
return; return;
} }
sessionStorage.setItem('search-value', value); sessionStorage.setItem('search-value', value);
$("mark").parents(".expand-marked").removeClass("expand-marked");
$(".highlightable").unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' }); $(".highlightable").unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' });
$("mark").parents(".expand").addClass("expand-marked");
if (ajax && ajax.abort) ajax.abort(); if (ajax && ajax.abort) ajax.abort();
jQuery('[data-search-clear]').on('click', function() { jQuery('[data-search-clear]').on('click', function() {
jQuery('[data-search-input]').val('').trigger('input'); jQuery('[data-search-input]').val('').trigger('input');
sessionStorage.removeItem('search-input'); sessionStorage.removeItem('search-input');
$("mark").parents(".expand-marked").removeClass("expand-marked");
$(".highlightable").unhighlight({ element: 'mark' }) $(".highlightable").unhighlight({ element: 'mark' })
}); });
}); });
@ -314,6 +318,7 @@ jQuery(function() {
} }
$(".highlightable").highlight(sessionStorage.getItem('search-value'), { element: 'mark' }); $(".highlightable").highlight(sessionStorage.getItem('search-value'), { element: 'mark' });
$("mark").parents(".expand").addClass("expand-marked");
// clipboard // clipboard
var clipInit = false; var clipInit = false;