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 }` }}
<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>

34
static/css/theme.css
View file

@ -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 {

5
static/js/relearn.js
View file

@ -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;