publication overview page, search completed
This commit is contained in:
zzossig
parent
8de05d62e5
commit
556770af2e
File diff suppressed because one or more lines are too long
|
|
@ -2,7 +2,7 @@
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 3px 9px;
|
||||
margin: 0.5rem;
|
||||
margin: 0.25rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none !important;
|
||||
border-radius: 0.25rem;
|
||||
|
|
@ -16,6 +16,18 @@
|
|||
@include translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&__micro {
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
&__mini {
|
||||
height: 24px;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
&__small {
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
|
|
@ -24,6 +36,7 @@
|
|||
&__medium {
|
||||
height: 32px;
|
||||
font-size: 17px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
&__large {
|
||||
|
|
@ -51,5 +64,20 @@
|
|||
border: 1px solid themed('link-hover');
|
||||
}
|
||||
}
|
||||
|
||||
&[data-variant="contained"] {
|
||||
&[data-color="primary"], &[data-color="default"] {
|
||||
color: #111;
|
||||
background: themed('button-primary-color');
|
||||
@include box-shadow(1px, 1px, 3px, 0, themed('share-shadow-color'));
|
||||
border: none;
|
||||
|
||||
@include on-event {
|
||||
color: #111;
|
||||
background: darken(themed('button-primary-color'), 4%);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -73,7 +73,6 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 4px 0;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('body-background-color');
|
||||
|
|
@ -124,6 +123,29 @@
|
|||
margin: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
&[data-dir="ltr"] {
|
||||
right: 0.5rem;
|
||||
top: -1.5rem;
|
||||
}
|
||||
|
||||
&[data-dir="rtl"] {
|
||||
left: 0.5rem;
|
||||
top: -1.5rem;
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('social-icon-color');
|
||||
|
||||
@include on-event {
|
||||
color: themed('social-icon-hover-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,19 +35,158 @@
|
|||
@media only screen and (max-width: 600px) {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@include themify($themes) {
|
||||
color: themed('title-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
margin: 0 0.25rem;
|
||||
display: inline-block;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('meta-color');
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&__links {
|
||||
&__btn {
|
||||
padding: 0 0.25rem;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('body-color') !important;
|
||||
background-color: themed('donation-background-color');
|
||||
@include on-event {
|
||||
background-color: darken(themed('donation-background-color'), 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.2rem;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
|
||||
@include flexbox();
|
||||
@include flex-grow(1);
|
||||
@include flex-direction(column);
|
||||
@include justify-content(flex-start);
|
||||
@include themify($themes) {
|
||||
border: 1px solid themed('content-box-border-color');
|
||||
background-color: themed('body-background-color');
|
||||
}
|
||||
|
||||
@include on-event {
|
||||
@include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
|
||||
background-color: rgba(125, 125, 125, 0.1);
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: 1rem;
|
||||
font-family: $title-font;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('title-color');
|
||||
}
|
||||
}
|
||||
|
||||
&--desc {
|
||||
font-size: 0.9rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
&--links {
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
|
||||
@include flexbox();
|
||||
@include flex-wrap(wrap);
|
||||
|
||||
a {
|
||||
margin: 0.125rem;
|
||||
z-index: z('card-outter');
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('meta-color');
|
||||
text-decoration: none;
|
||||
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-dir="ltr"] {
|
||||
a {
|
||||
&:first-child {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-dir="rtl"] {
|
||||
a {
|
||||
&:first-child {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pgrid {
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.half {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* clear fix */
|
||||
.pgrid:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ---- .grid-item ---- */
|
||||
|
||||
.pgrid-sizer {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.pgrid-sizer,
|
||||
.pgrid-item {
|
||||
width: 49.5%;
|
||||
}
|
||||
|
||||
.pgrid-item {
|
||||
float: left;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.51rem;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pgrid-item img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@ $hacker: (
|
|||
navbar-dropdown-item-hover-color: #E08C48,
|
||||
sidebar-title-color: #E3CD26,
|
||||
sidebar-li-color: #A1AD64,
|
||||
taxo-title-color: #996287,
|
||||
taxo-title-color: #9c9299,
|
||||
taxo-num-color: #E3CD26,
|
||||
taxo-num-background-color: #252526,
|
||||
taxo-tags-background-color: lighten(#151715, 10%),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# restart hugo after set the values
|
||||
dark_primary_color = "#82aaff"
|
||||
light_primary_color = "#728fcb"
|
||||
hacker_primary_color = "#cddc39"
|
||||
solarized_primary_color = "#689f38"
|
||||
kimbie_primary_color = "#8ab1b0"
|
||||
light_primary_color = "#ccc"
|
||||
hacker_primary_color = "#cdf5cc"
|
||||
solarized_primary_color = "#c5e0df"
|
||||
kimbie_primary_color = "#d1c4e9"
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,7 +7,7 @@
|
|||
{{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "shorttitle" $element.Params.shorttitle "booktitle" $element.Params.booktitle "uri" $element.Permalink "tags" $element.Params.tags "authors" $element.Params.authors "abstract" $element.Params.abstract "ENTRYTYPE" $element.Params.ENTRYTYPE "publication" $element.Params.publication "publishDate" $element.Params.publishDate) -}}
|
||||
{{- end -}}
|
||||
{{ else }}
|
||||
{{ $paginator := .Paginate (where .Pages "Type" .Type) }}
|
||||
{{ $paginator := .Paginate (where .Pages "Type" .Type) ($.Param "pubPaginate") }}
|
||||
{{- range $index, $element := $paginator.Pages -}}
|
||||
{{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "shorttitle" $element.Params.shorttitle "booktitle" $element.Params.booktitle "uri" $element.Permalink "tags" $element.Params.tags "authors" $element.Params.authors "abstract" $element.Params.abstract "ENTRYTYPE" $element.Params.ENTRYTYPE "publication" $element.Params.publication "publishDate" $element.Params.publishDate) -}}
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -498,17 +498,19 @@
|
|||
var enableSearchHighlight = JSON.parse({{ $enableSearchHighlight | jsonify }});
|
||||
{{ $searchResultPosition := ($.Param "searchResultPosition") }}
|
||||
var searchResultPosition = JSON.parse({{ $searchResultPosition | jsonify }});
|
||||
{{ $sectionType := .Type }}
|
||||
var sectionType = JSON.parse({{ $sectionType | jsonify }});
|
||||
|
||||
var fuse = null;
|
||||
|
||||
function initFuse() {
|
||||
(function initFuse() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', permalink + "index.json");
|
||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
|
||||
xhr.onload = function () {
|
||||
if (xhr.status === 200) {
|
||||
fuse = new Fuse(JSON.parse(xhr.response.toString('utf-8')), {
|
||||
keys: ['title', 'description', 'content'],
|
||||
keys: sectionType.includes('publication') ? ['title', 'description', 'content'] : ['title', 'abstract'],
|
||||
includeMatches: enableSearchHighlight,
|
||||
shouldSort: true,
|
||||
threshold: 0.4,
|
||||
|
|
@ -517,13 +519,14 @@
|
|||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
});
|
||||
window.fuse = fuse;
|
||||
}
|
||||
else {
|
||||
console.error('[' + xhr.status + ']Error:', xhr.statusText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
})();
|
||||
|
||||
function makeLi(ulElem, obj) {
|
||||
var li = document.createElement('li');
|
||||
|
|
@ -839,24 +842,18 @@
|
|||
return content;
|
||||
};
|
||||
|
||||
initFuse();
|
||||
|
||||
var searchElem = document.getElementById('search');
|
||||
var searchMobile = document.getElementById('search-mobile');
|
||||
|
||||
searchElem ?
|
||||
searchElem ?
|
||||
searchElem.addEventListener('input', function(e) {
|
||||
if (!e.target.value) {
|
||||
if (!e.target.value | window.innerWidth < 770) {
|
||||
document.getElementById('search-results').setAttribute('class', 'dropdown');
|
||||
searchResult ? searchResult.setAttribute('data-display', 'none') : null;
|
||||
summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
|
||||
return null;
|
||||
}
|
||||
|
||||
if (window.innerWidth < 770) {
|
||||
return null;
|
||||
}
|
||||
|
||||
searchText = e.target.value;
|
||||
var results = fuse.search(e.target.value);
|
||||
|
||||
|
|
@ -912,16 +909,6 @@
|
|||
}
|
||||
}
|
||||
}) : null;
|
||||
|
||||
function indexInParent(node) {
|
||||
var children = node.parentNode.childNodes;
|
||||
var num = 0;
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
if (children[i] == node) return num;
|
||||
if (children[i].nodeType == 1) num++;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
var searchMenuElem = document.getElementById("search-menu");
|
||||
var activeItem = document.querySelector('#search-menu .dropdown-item.is-active');
|
||||
|
|
@ -1094,16 +1081,16 @@
|
|||
var ul = document.createElement('ul');
|
||||
|
||||
if (!searchText) {
|
||||
searchResult.setAttribute('data-display', 'none');
|
||||
summaryContainer.setAttribute('data-display', 'block');
|
||||
searchResult ? searchResult.setAttribute('data-display', 'none') : null;
|
||||
summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
|
||||
} else if (results) {
|
||||
if (results && results.length) {
|
||||
results.forEach(function (result) {
|
||||
makeLi(ul, result);
|
||||
});
|
||||
|
||||
searchResult.setAttribute('data-display', 'block');
|
||||
summaryContainer.setAttribute('data-display', 'none');
|
||||
searchResult ? searchResult.setAttribute('data-display', 'block') : null;
|
||||
summaryContainer ? summaryContainer.setAttribute('data-display', 'none') : null;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1116,16 +1103,16 @@
|
|||
var ul = document.createElement('ul');
|
||||
|
||||
if (!searchText) {
|
||||
searchResult.setAttribute('data-display', 'none');
|
||||
summaryContainer.setAttribute('data-display', 'block');
|
||||
searchResult ? searchResult.setAttribute('data-display', 'none') : null;
|
||||
summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
|
||||
} else if (results) {
|
||||
if (results && results.length) {
|
||||
results.forEach(function (result) {
|
||||
makeHighlightLi(ul, result);
|
||||
});
|
||||
|
||||
searchResult.setAttribute('data-display', 'block');
|
||||
summaryContainer.setAttribute('data-display', 'none');
|
||||
searchResult ? searchResult.setAttribute('data-display', 'block') : null;
|
||||
summaryContainer ? summaryContainer.setAttribute('data-display', 'none') : null;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div class="pub__links">
|
||||
{{ with .Params.link }}
|
||||
<a href="{{ . }}" title="{{ . }}" target="_blank" rel="noreferrer" class="button button__medium" data-color="default">
|
||||
url
|
||||
</a>
|
||||
{{ end }}
|
||||
<button title="Cite Button" aria-label="Cite Button" id="citeBtn" class="button button__medium" data-color="default">
|
||||
<div>
|
||||
<button title="Cite Button" aria-label="Cite Button" id="citeBtn" class="button button__micro" data-color="default" data-variant="contained">
|
||||
cite
|
||||
</button>
|
||||
{{ with .Params.links }}
|
||||
{{ range . }}
|
||||
<a href="{{ .link }}" title="{{ .name }}" class="button button__micro" data-color="default" data-variant="contained" target="_blank" rel="noreferrer">{{ .name }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="modal micromodal-slide" id="modal" aria-hidden="true">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="pub__list">
|
||||
{{ $paginator := .Paginate (where .Pages "Type" .Type) ($.Param "pubPaginate") }}
|
||||
<ul>
|
||||
<ul class="pub__ul" data-display="block">
|
||||
{{ range $paginator.Pages }}
|
||||
<li class="pub__item">
|
||||
<a href="{{ .Permalink }}">
|
||||
|
|
@ -31,4 +31,5 @@
|
|||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ partial "publication/pub-search-result" . }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{{ $paginator := .Paginate (where .Pages "Type" .Type) }}
|
||||
{{ $ctx := . }}
|
||||
<div class="pub__list">
|
||||
<ul class="pub__ul">
|
||||
<div class="pgrid">
|
||||
<div class="pgrid-sizer"></div>
|
||||
{{ range $index, $element := $paginator.Pages }}
|
||||
{{ range $idx, $elem := .Pages }}
|
||||
{{ if .Params.pinned }}
|
||||
<div class="pgrid-item">
|
||||
<div class="pub__box">
|
||||
<a href="{{ .Permalink }}" class="showcase__box--link" aria-label="{{ .Title }}"></a>
|
||||
<div class="pub__box--title">
|
||||
{{ .Title }}
|
||||
</div>
|
||||
<div class="pub__box--desc">
|
||||
{{ .Params.abstract }}
|
||||
</div>
|
||||
<div class="pub__box--links" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
|
||||
<a href="{{ .FirstSection.Permalink }}/{{ .Params.ENTRYTYPE }}">
|
||||
🎯 {{ .Params.ENTRYTYPE }}
|
||||
</a>
|
||||
{{ with .Params.links }}
|
||||
{{ range . }}
|
||||
<a href="{{ .link }}" class="pub__btn" target="_blank" rel="noreferrer">
|
||||
{{ .name }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<ul class="pub__result" data-display="none">
|
||||
</ul>
|
||||
|
|
@ -1,37 +1,22 @@
|
|||
{{ $shave := resources.Get "js/shave.min.js" | resources.Fingerprint }}
|
||||
<script defer src="{{ $shave.RelPermalink }}"></script>
|
||||
{{ $fuzzysort := resources.Get "js/fuzzysort.min.js" | resources.Fingerprint }}
|
||||
<script defer src="{{ $fuzzysort.RelPermalink }}"></script>
|
||||
{{ $fuse := resources.Get "js/fuse.min.js" | resources.Fingerprint }}
|
||||
<script defer src="{{ $fuse.RelPermalink }}"></script>
|
||||
|
||||
<script>
|
||||
{{ $permalink := .Permalink }}
|
||||
var permalink = JSON.parse({{ $permalink | jsonify }});
|
||||
var data = null;
|
||||
const options = {
|
||||
limit: 100, // don't return more results than you need!
|
||||
allowTypo: false, // if you don't care about allowing typos
|
||||
threshold: -10000, // don't return bad results
|
||||
keys: ['title', 'abstract'],
|
||||
}
|
||||
{{ $enableSearchHighlight := ($.Param "enableSearchHighlight") }}
|
||||
var enableSearchHighlight = JSON.parse({{ $enableSearchHighlight | jsonify }});
|
||||
{{ $isFirstSection := eq .Permalink .FirstSection.Permalink }}
|
||||
var isFirstSection = JSON.parse({{ $isFirstSection | jsonify }});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// search
|
||||
(function loadData() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', permalink + "index.json");
|
||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
|
||||
xhr.onload = function () {
|
||||
if (xhr.status === 200) {
|
||||
data = JSON.parse(xhr.response.toString('utf-8'));
|
||||
} else {
|
||||
console.error('[' + xhr.status + ']Error:', xhr.statusText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
})();
|
||||
var originHtmlText = JSON.stringify(document.querySelector('.pub__ul').innerHTML);
|
||||
|
||||
// search
|
||||
var pubSearch = document.getElementById('pubSearch');
|
||||
var pubList = document.querySelector('.pub__list');
|
||||
var pubUl = document.querySelector('.pub__ul');
|
||||
var pubResult = document.querySelector('.pub__result');
|
||||
|
||||
var makeLi = function(ulElem, obj) {
|
||||
var li = document.createElement('li');
|
||||
|
|
@ -93,34 +78,181 @@
|
|||
ulElem.appendChild(li);
|
||||
}
|
||||
|
||||
pubSearch ?
|
||||
pubSearch.addEventListener('input', function(e) {
|
||||
var originUl = pubList.querySelector('ul');
|
||||
var ul = document.createElement('ul');
|
||||
var makeHighlightLi = function (ulElem, obj) {
|
||||
var li = document.createElement('li');
|
||||
li.className = 'pub__item';
|
||||
|
||||
if (!e.target.value) {
|
||||
data.forEach(function (elem) {
|
||||
makeLi(ul, elem);
|
||||
});
|
||||
originUl.parentNode.replaceChild(ul, originUl);
|
||||
} else if (data) {
|
||||
var results = fuzzysort.go(e.target.value, data, options);
|
||||
if (results && results.length) {
|
||||
var sortedResult = results.sort(function (a, b) {
|
||||
var aDate = new Date(a.obj.publishDate);
|
||||
var bDate = new Date(b.obj.publishDate);
|
||||
return bDate.getTime() - aDate.getTime();
|
||||
});
|
||||
var a = document.createElement('a');
|
||||
a.innerHTML = obj.item.title;
|
||||
a.setAttribute('href', obj.item.uri);
|
||||
|
||||
sortedResult.forEach(function (elem) {
|
||||
makeLi(ul, elem.obj);
|
||||
});
|
||||
var descDiv = null;
|
||||
if (obj.item.abstract) {
|
||||
descDiv = document.createElement('div');
|
||||
descDiv.innerHTML = obj.item.abstract;
|
||||
descDiv.className = 'pub__summary';
|
||||
}
|
||||
|
||||
originUl.parentNode.replaceChild(ul, originUl);
|
||||
var metaDiv = null;
|
||||
|
||||
if (obj.matches && obj.matches.length) {
|
||||
for (var i = 0; i < obj.matches.length; i++) {
|
||||
a.innerHTML = obj.item.title;
|
||||
|
||||
if (obj.matches[i].key === 'title') {
|
||||
a.innerHTML = generateHighlightedText(obj.item.title, obj.matches[i].indices);
|
||||
}
|
||||
|
||||
if (obj.item.booktitle) {
|
||||
var span = document.createElement('span');
|
||||
span.className = 'p2';
|
||||
span.innerHTML = ' - ' + obj.item.booktitle;
|
||||
a.appendChild(span);
|
||||
} else if (obj.item.shorttitle) {
|
||||
var span = document.createElement('span');
|
||||
span.className = 'p2';
|
||||
span.innerHTML = ' - ' + obj.item.shorttitle;
|
||||
a.appendChild(span);
|
||||
}
|
||||
|
||||
metaDiv = document.createElement('div');
|
||||
if (obj.item.publishDate) {
|
||||
var dateSpan = document.createElement('span');
|
||||
dateSpan.className = 'caption pub__meta';
|
||||
dateSpan.innerText = '📅 ' + obj.item.publishDate.slice(0, 10);
|
||||
metaDiv.appendChild(dateSpan);
|
||||
}
|
||||
|
||||
if (obj.item.authors) {
|
||||
var authorsSpan = document.createElement('span');
|
||||
authorsSpan.className = 'caption pub__meta';
|
||||
authorsSpan.innerText = '✍️ ' + obj.item.authors.toString();
|
||||
metaDiv.appendChild(authorsSpan);
|
||||
}
|
||||
|
||||
if (obj.item.publication) {
|
||||
var pubSpan = document.createElement('span');
|
||||
pubSpan.className = 'caption pub__meta';
|
||||
pubSpan.innerText = '📚 ' + obj.item.publication;
|
||||
metaDiv.appendChild(pubSpan);
|
||||
}
|
||||
|
||||
if (obj.item.ENTRYTYPE) {
|
||||
var typeSpan = document.createElement('span');
|
||||
typeSpan.className = 'caption pub__meta';
|
||||
typeSpan.innerText = '🎯 ' + obj.item.ENTRYTYPE;
|
||||
metaDiv.appendChild(typeSpan);
|
||||
}
|
||||
|
||||
if (obj.matches[i].key === 'abstract') {
|
||||
descDiv.innerHTML = generateHighlightedText(obj.matches[i].value, obj.matches[i].indices);
|
||||
}
|
||||
}
|
||||
|
||||
li.appendChild(a);
|
||||
if (metaDiv) {
|
||||
li.appendChild(metaDiv);
|
||||
}
|
||||
if (descDiv) {
|
||||
li.appendChild(descDiv);
|
||||
}
|
||||
ulElem.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
function generateHighlightedText(text, regions) {
|
||||
if (!regions) {
|
||||
return text;
|
||||
}
|
||||
|
||||
var content = '', nextUnhighlightedRegionStartingIndex = 0;
|
||||
|
||||
regions.forEach(function (region) {
|
||||
if (region[0] === region[1]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
content += '' +
|
||||
text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
|
||||
'<span class="search__highlight">' +
|
||||
text.substring(region[0], region[1] + 1) +
|
||||
'</span>' +
|
||||
'';
|
||||
nextUnhighlightedRegionStartingIndex = region[1] + 1;
|
||||
});
|
||||
|
||||
content += text.substring(nextUnhighlightedRegionStartingIndex);
|
||||
|
||||
return content;
|
||||
};
|
||||
|
||||
pubSearch ?
|
||||
pubSearch.addEventListener('input', function(e) {
|
||||
var results = fuse.search(e.target.value);
|
||||
|
||||
if (enableSearchHighlight) {
|
||||
renderSearchHighlightResults(e.target.value, results);
|
||||
} else {
|
||||
renderSearchResults(e.target.value, results);
|
||||
}
|
||||
}) : null;
|
||||
|
||||
function renderSearchResults(searchText, results) {
|
||||
var originUl = document.querySelector('.pub__ul');
|
||||
var newUl = document.createElement('ul');
|
||||
newUl.setAttribute('class', 'pub__ul');
|
||||
|
||||
if (!searchText) {
|
||||
fuse ? fuse.list.forEach(function(item) {
|
||||
makeLi(newUl, item);
|
||||
}) : null;
|
||||
pubResult ? pubResult.setAttribute('data-display', 'none') : null;
|
||||
originUl ? originUl.setAttribute('data-display', 'block') : null;
|
||||
} else if (results) {
|
||||
if (results && results.length) {
|
||||
results.forEach(function (result) {
|
||||
makeLi(newUl, result);
|
||||
});
|
||||
|
||||
pubResult ? pubResult.setAttribute('data-display', 'block') : null;
|
||||
originUl ? originUl.setAttribute('data-display', 'none') : null;
|
||||
}
|
||||
}
|
||||
|
||||
originUl.parentNode.replaceChild(newUl, originUl);
|
||||
}
|
||||
|
||||
function renderSearchHighlightResults(searchText, results) {
|
||||
var originUl = document.querySelector('.pub__ul');
|
||||
var newUl = document.createElement('ul');
|
||||
newUl.setAttribute('class', 'pub__ul');
|
||||
|
||||
if (!searchText) {
|
||||
if (isFirstSection) {
|
||||
originUl.innerHTML = JSON.parse(originHtmlText);
|
||||
return null;
|
||||
} else {
|
||||
fuse ? fuse.list.forEach(function (item) {
|
||||
makeLi(newUl, item);
|
||||
}) : null;
|
||||
}
|
||||
|
||||
pubResult ? pubResult.setAttribute('data-display', 'none') : null;
|
||||
originUl ? originUl.setAttribute('data-display', 'block') : null;
|
||||
} else if (results) {
|
||||
if (results && results.length) {
|
||||
results.forEach(function (result) {
|
||||
makeHighlightLi(newUl, result);
|
||||
});
|
||||
|
||||
pubResult ? pubResult.setAttribute('data-display', 'block') : null;
|
||||
originUl ? originUl.setAttribute('data-display', 'none') : null;
|
||||
}
|
||||
}
|
||||
|
||||
originUl.parentNode.replaceChild(newUl, originUl);
|
||||
}
|
||||
|
||||
// shave
|
||||
shave('.pub__summary', 150);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
|
||||
<script defer src="{{ $masonry.RelPermalink }}"></script>
|
||||
{{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
|
||||
<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
// ========================= masonry =========================
|
||||
var grid = document.querySelector('.pgrid');
|
||||
var msnry = new Masonry(grid, {
|
||||
itemSelector: '.pgrid-item',
|
||||
columnWidth: '.pgrid-sizer',
|
||||
percentPosition: true,
|
||||
});
|
||||
imagesLoaded(grid).on('progress', function () {
|
||||
msnry.layout();
|
||||
});
|
||||
|
||||
enquire.register("screen and (max-width:769px)", {
|
||||
match: function () {
|
||||
document.querySelectorAll('.pgrid-item').forEach(function (elem) {
|
||||
elem.classList.add('full');
|
||||
elem.classList.remove('half');
|
||||
});
|
||||
document.querySelectorAll('.pgrid-sizer').forEach(function (elem) {
|
||||
elem.classList.add('full');
|
||||
elem.classList.remove('half');
|
||||
});
|
||||
},
|
||||
unmatch: function () {
|
||||
document.querySelectorAll('.pgrid-item').forEach(function (elem) {
|
||||
elem.classList.add('half');
|
||||
elem.classList.remove('full');
|
||||
});
|
||||
document.querySelectorAll('.pgrid-sizer').forEach(function (elem) {
|
||||
elem.classList.add('half');
|
||||
elem.classList.remove('full');
|
||||
});
|
||||
},
|
||||
});
|
||||
// ===========================================================
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
<div class="search-result" data-display="none">
|
||||
<div class="search-result__header">
|
||||
<div class="search-result__close" data-dir="{{ if or (ne ($.Param "languagedir") "rtl") (eq ($.Param "sidebarPosition") "left") }}ltr{{ else }}rtl{{ end }}">
|
||||
{{ partial "svgs/etc/cancel.svg" (dict "width" 28 "height" 28) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-result__body">
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</label>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="toc {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}">
|
||||
<div class="toc {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{{ range $index, $element := .Site.Taxonomies.categories }}
|
||||
{{ if $index }}
|
||||
<span class="tag">
|
||||
<a href="{{ $element.Page.RelPermalink }}" class="is-categories taxo__link" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}">
|
||||
<a href="{{ $element.Page.RelPermalink }}" class="is-categories taxo__link" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
|
||||
<span class="taxo__text">
|
||||
{{ $element.Page.Title }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{{ range $index, $element := .Site.Taxonomies.series }}
|
||||
{{ if $index }}
|
||||
<span class="tag">
|
||||
<a href="{{ $element.Page.RelPermalink }}" class="is-series taxo__link" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}">
|
||||
<a href="{{ $element.Page.RelPermalink }}" class="is-series taxo__link" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
|
||||
<span class="taxo__text">
|
||||
{{ $element.Page.Title }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{{ range $index, $element := .Site.Taxonomies.tags }}
|
||||
{{ if $index }}
|
||||
<span class="tag">
|
||||
<a href="{{ $element.Page.RelPermalink }}" class="is-tags taxo__link" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}">
|
||||
<a href="{{ $element.Page.RelPermalink }}" class="is-tags taxo__link" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
|
||||
<span class="taxo__text">
|
||||
{{ $element.Page.Title }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
{{ define "main" }}
|
||||
<main class="main pub inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
|
||||
<section class="pub__section lmr">
|
||||
{{ partial "publication/pub-toolbar" . }}
|
||||
{{ partial "publication/pub-list" . }}
|
||||
<div class="grow"></div>
|
||||
{{ partial "pagination/pagination" . }}
|
||||
</section>
|
||||
|
||||
{{ if eq .Permalink .FirstSection.Permalink }}
|
||||
<section class="pub__section lmr">
|
||||
{{ partial "publication/pub-toolbar" . }}
|
||||
{{ partial "publication/pub-overview" . }}
|
||||
{{ partial "script/pub-overview-script" . }}
|
||||
</section>
|
||||
{{ else }}
|
||||
<section class="pub__section lmr">
|
||||
{{ partial "publication/pub-toolbar" . }}
|
||||
{{ partial "publication/pub-list" . }}
|
||||
<div class="grow"></div>
|
||||
{{ partial "pagination/pagination" . }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "script/pub-list-script" . }}
|
||||
<div class="hide">
|
||||
{{ partial "search/site-search" . }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue