refactored notes.js, search.js, single.js into application.js
This commit is contained in:
Aaron Qian
Aaron Qian
parent
dd344a0262
commit
97d60b44d9
40 changed files with 275 additions and 270 deletions
|
|
@ -1,8 +1,9 @@
|
|||
import 'jquery';
|
||||
import 'popper.js';
|
||||
import 'bootstrap';
|
||||
import '@fortawesome/fontawesome-free';
|
||||
import '@fortawesome/fontawesome-free/js/all';
|
||||
|
||||
import './core';
|
||||
import './features';
|
||||
import './sections';
|
||||
import './pages';
|
||||
|
|
|
|||
3
assets/scripts/pages/index.js
Normal file
3
assets/scripts/pages/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import './note';
|
||||
import './search';
|
||||
import './single';
|
||||
32
assets/scripts/pages/note.js
Normal file
32
assets/scripts/pages/note.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import $ from 'jquery';
|
||||
import imagesLoaded from 'imagesloaded';
|
||||
|
||||
$(document).ready(function () {
|
||||
function resizeGridItem(item) {
|
||||
var grid = document.getElementsByClassName("note-card-holder")[0];
|
||||
var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
|
||||
var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
|
||||
var rowSpan = Math.ceil((item.querySelector('.item').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
|
||||
item.style.gridRowEnd = "span " + rowSpan;
|
||||
}
|
||||
|
||||
function resizeAllGridItems() {
|
||||
var allItems = document.getElementsByClassName("note-card");
|
||||
for (var x = 0; x < allItems.length; x++) {
|
||||
resizeGridItem(allItems[x]);
|
||||
}
|
||||
}
|
||||
|
||||
function resizeInstance(instance) {
|
||||
var item = instance.elements[0];
|
||||
resizeGridItem(item);
|
||||
}
|
||||
|
||||
// window.onload = resizeAllGridItems();
|
||||
window.addEventListener("resize", resizeAllGridItems);
|
||||
|
||||
var allItems = document.getElementsByClassName("note-card");
|
||||
for (var x = 0; x < allItems.length; x++) {
|
||||
imagesLoaded(allItems[x], resizeInstance);
|
||||
}
|
||||
});
|
||||
132
assets/scripts/pages/search.js
Normal file
132
assets/scripts/pages/search.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import $ from 'jquery';
|
||||
import Fuse from 'fuse.js';
|
||||
import Mark from 'mark.js';
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
var summaryInclude=60;
|
||||
|
||||
var fuseOptions = {
|
||||
shouldSort: true,
|
||||
includeMatches: true,
|
||||
threshold: 0.0,
|
||||
tokenize:true,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
{name:"title",weight:0.8},
|
||||
{name:"hero",weight:0.7},
|
||||
{name:"summary",weight:0.6},
|
||||
{name:"date",weight:0.5},
|
||||
{name:"contents",weight:0.5},
|
||||
{name:"tags",weight:0.3},
|
||||
{name:"categories",weight:0.3}
|
||||
]
|
||||
};
|
||||
|
||||
var searchQuery = param("keyword");
|
||||
if(searchQuery){
|
||||
$("#search-query").val(searchQuery);
|
||||
executeSearch(searchQuery);
|
||||
}else {
|
||||
$('#search-results').append("<p>Please enter a word or phrase above</p>");
|
||||
}
|
||||
|
||||
|
||||
|
||||
function executeSearch(searchQuery){
|
||||
$.getJSON( window.location.href.split("/search/")[0] + "/index.json", function( data ) {
|
||||
console.log(data);
|
||||
|
||||
var pages = data;
|
||||
var fuse = new Fuse(pages, fuseOptions);
|
||||
var result = fuse.search(searchQuery);
|
||||
// console.log({"matches":result});
|
||||
document.getElementById("search-box").value = searchQuery
|
||||
if(result.length > 0){
|
||||
populateResults(result);
|
||||
}else{
|
||||
$('#search-results').append("<p>No matches found</p>");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function populateResults(result){
|
||||
$.each(result,function(key,value){
|
||||
var contents= value.item.contents;
|
||||
var snippet = "";
|
||||
var snippetHighlights=[];
|
||||
var tags =[];
|
||||
if( fuseOptions.tokenize ){
|
||||
snippetHighlights.push(searchQuery);
|
||||
}else{
|
||||
$.each(value.matches,function(matchKey,mvalue){
|
||||
if(mvalue.key == "tags" || mvalue.key == "categories" ){
|
||||
snippetHighlights.push(mvalue.value);
|
||||
}else if(mvalue.key == "contents"){
|
||||
start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0;
|
||||
end = mvalue.indices[0][1]+summaryInclude<contents.length?mvalue.indices[0][1]+summaryInclude:contents.length;
|
||||
snippet += contents.substring(start,end);
|
||||
snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0],mvalue.indices[0][1]-mvalue.indices[0][0]+1));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(snippet.length<1){
|
||||
snippet += contents.substring(0,summaryInclude*2);
|
||||
}
|
||||
//pull template from hugo templarte definition
|
||||
var templateDefinition = $('#search-result-template').html();
|
||||
//replace values
|
||||
var output = render(templateDefinition, {
|
||||
key:key,
|
||||
title:value.item.title,
|
||||
hero:value.item.hero,
|
||||
date:value.item.date,
|
||||
summary:value.item.summary,
|
||||
link:value.item.permalink,
|
||||
tags:value.item.tags,
|
||||
categories:value.item.categories,
|
||||
snippet:snippet
|
||||
});
|
||||
$('#search-results').append(output);
|
||||
|
||||
$.each(snippetHighlights,function(snipkey,snipvalue) {
|
||||
const context = document.getElementById("#summary-"+key);
|
||||
var instance = new Mark(context);
|
||||
instance.mark(snipvalue);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function param(name) {
|
||||
return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
|
||||
}
|
||||
|
||||
function render(templateString, data) {
|
||||
var conditionalMatches,conditionalPattern,copy;
|
||||
conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
|
||||
//since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
|
||||
copy = templateString;
|
||||
while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
|
||||
if(data[conditionalMatches[1]]){
|
||||
//valid key, remove conditionals, leave contents.
|
||||
copy = copy.replace(conditionalMatches[0],conditionalMatches[2]);
|
||||
}else{
|
||||
//not valid, remove entire section
|
||||
copy = copy.replace(conditionalMatches[0],'');
|
||||
}
|
||||
}
|
||||
templateString = copy;
|
||||
//now any conditionals removed we can do simple substitution
|
||||
var key, find, re;
|
||||
for (key in data) {
|
||||
find = '\\$\\{\\s*' + key + '\\s*\\}';
|
||||
re = new RegExp(find, 'g');
|
||||
templateString = templateString.replace(re, data[key]);
|
||||
}
|
||||
return templateString;
|
||||
}
|
||||
});
|
||||
58
assets/scripts/pages/single.js
Normal file
58
assets/scripts/pages/single.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
// =========== Add anchor to the headers ================
|
||||
function addAnchor(element) {
|
||||
element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link fa-sm"></i></sup></a>`;
|
||||
}
|
||||
|
||||
var postContent = document.getElementById("post-content");
|
||||
if (postContent != null) {
|
||||
var headerTypes = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
||||
for (var i = 0; i < headerTypes.length; i++) {
|
||||
var headers = postContent.querySelectorAll(headerTypes[i]);
|
||||
if (headers) {
|
||||
headers.forEach(addAnchor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
|
||||
// add "navbar" class to the "nav" element
|
||||
let toc = document.getElementById("TableOfContents");
|
||||
if (toc) {
|
||||
toc.classList.add("navbar");
|
||||
// add "nav-pills" class to the "ul" elements
|
||||
let elems = toc.getElementsByTagName("ul");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-pills");
|
||||
}
|
||||
// add "nav-item" class to the "li" elements
|
||||
elems = toc.getElementsByTagName("li");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-item");
|
||||
}
|
||||
// add "nav-link" class to the "a" elements
|
||||
elems = toc.getElementsByTagName("a");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-link");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// add scroll to top button
|
||||
var btn = $('#scroll-to-top');
|
||||
|
||||
$(window).scroll(function () {
|
||||
if ($(window).scrollTop() > 300) {
|
||||
btn.addClass('show');
|
||||
} else {
|
||||
btn.removeClass('show');
|
||||
}
|
||||
});
|
||||
|
||||
btn.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('html, body').animate({ scrollTop: 0 }, '300');
|
||||
});
|
||||
});
|
||||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ Esto expone los valores en /index.json: por ejemplo, para agregar `categories`
|
|||
\```
|
||||
|
||||
### Editar las opciones de fuse.js para buscar
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ Esto expone los valores en /index.json: por ejemplo, para agregar `categories`
|
|||
\```
|
||||
|
||||
### Editar las opciones de fuse.js para buscar
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ i.e. add `category`
|
|||
\```
|
||||
|
||||
### Edit fuse.js options to Search
|
||||
`static/js/search.js`
|
||||
`assets/scripts/pages/search.js`
|
||||
\```
|
||||
keys: [
|
||||
"title",
|
||||
|
|
|
|||
|
|
@ -66,9 +66,3 @@
|
|||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "scripts" }}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
|
||||
<script src="{{ "/js/search.js" | absURL }}"></script>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -193,7 +193,6 @@
|
|||
|
||||
{{ define "scripts" }}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
|
||||
<script src="{{ "/js/single.js" | relURL }}"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -58,8 +58,6 @@
|
|||
|
||||
{{ define "scripts" }}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
|
||||
<script src="{{ "/js/imagesloaded.pkgd.min.js" | relURL }}"></script>
|
||||
<script src="{{ "/js/note.js" | relURL }}"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,6 @@
|
|||
|
||||
{{ define "scripts" }}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
|
||||
<script src="{{ "/js/imagesloaded.pkgd.min.js" | relURL }}"></script>
|
||||
<script src="{{ "/js/note.js" | relURL }}"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,16 +13,29 @@ Green: #2DCA73
|
|||
Yellow: #FFC212
|
||||
*/
|
||||
|
||||
/*
|
||||
Removed smooth scrolling implementation in main.js in favor of
|
||||
simpler css approach.
|
||||
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||
*/
|
||||
*, html {
|
||||
scroll-behavior: smooth !important;
|
||||
}
|
||||
|
||||
/*
|
||||
Fixes anchor overlapping with header.
|
||||
See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
|
||||
*/
|
||||
:target::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 2em; /* fixed header height*/
|
||||
margin: -2em 0 0; /* negative fixed header height */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f9fafc;
|
||||
font-family: "Muli";
|
||||
|
||||
/*
|
||||
Removed smooth scrolling implementation in main.js in favor of
|
||||
simpler css approach.
|
||||
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||
*/
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -283,13 +296,13 @@ a.header-anchor {
|
|||
color: #1c2d41;
|
||||
}
|
||||
|
||||
a.header-anchor i {
|
||||
a.header-anchor i, a.header-anchor svg {
|
||||
font-size: 10pt;
|
||||
color: #3c4858;
|
||||
display: none;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
a.header-anchor:hover i {
|
||||
a.header-anchor:hover i, a.header-anchor:hover svg {
|
||||
display: inline-block;
|
||||
}
|
||||
a.header-anchor code {
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
"use strict";
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
function resizeGridItem(item) {
|
||||
var grid = document.getElementsByClassName("note-card-holder")[0];
|
||||
var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
|
||||
var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
|
||||
var rowSpan = Math.ceil((item.querySelector('.item').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
|
||||
item.style.gridRowEnd = "span " + rowSpan;
|
||||
}
|
||||
|
||||
function resizeAllGridItems() {
|
||||
var allItems = document.getElementsByClassName("note-card");
|
||||
for (var x = 0; x < allItems.length; x++) {
|
||||
resizeGridItem(allItems[x]);
|
||||
}
|
||||
}
|
||||
|
||||
function resizeInstance(instance) {
|
||||
var item = instance.elements[0];
|
||||
resizeGridItem(item);
|
||||
}
|
||||
|
||||
// window.onload = resizeAllGridItems();
|
||||
window.addEventListener("resize", resizeAllGridItems);
|
||||
|
||||
var allItems = document.getElementsByClassName("note-card");
|
||||
for (var x = 0; x < allItems.length; x++) {
|
||||
imagesLoaded(allItems[x], resizeInstance);
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,112 +0,0 @@
|
|||
summaryInclude=60;
|
||||
var fuseOptions = {
|
||||
shouldSort: true,
|
||||
includeMatches: true,
|
||||
threshold: 0.0,
|
||||
tokenize:true,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
{name:"title",weight:0.8},
|
||||
{name:"hero",weight:0.7},
|
||||
{name:"summary",weight:0.6},
|
||||
{name:"date",weight:0.5},
|
||||
{name:"contents",weight:0.5},
|
||||
{name:"tags",weight:0.3},
|
||||
{name:"categories",weight:0.3}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
var searchQuery = param("keyword");
|
||||
if(searchQuery){
|
||||
$("#search-query").val(searchQuery);
|
||||
executeSearch(searchQuery);
|
||||
}else {
|
||||
$('#search-results').append("<p>Please enter a word or phrase above</p>");
|
||||
}
|
||||
|
||||
|
||||
|
||||
function executeSearch(searchQuery){
|
||||
$.getJSON( window.location.href.split("/search/")[0] + "/index.json", function( data ) {
|
||||
var pages = data;
|
||||
var fuse = new Fuse(pages, fuseOptions);
|
||||
var result = fuse.search(searchQuery);
|
||||
// console.log({"matches":result});
|
||||
document.getElementById("search-box").value = searchQuery
|
||||
if(result.length > 0){
|
||||
populateResults(result);
|
||||
}else{
|
||||
$('#search-results').append("<p>No matches found</p>");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function populateResults(result){
|
||||
$.each(result,function(key,value){
|
||||
var contents= value.item.contents;
|
||||
var snippet = "";
|
||||
var snippetHighlights=[];
|
||||
var tags =[];
|
||||
if( fuseOptions.tokenize ){
|
||||
snippetHighlights.push(searchQuery);
|
||||
}else{
|
||||
$.each(value.matches,function(matchKey,mvalue){
|
||||
if(mvalue.key == "tags" || mvalue.key == "categories" ){
|
||||
snippetHighlights.push(mvalue.value);
|
||||
}else if(mvalue.key == "contents"){
|
||||
start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0;
|
||||
end = mvalue.indices[0][1]+summaryInclude<contents.length?mvalue.indices[0][1]+summaryInclude:contents.length;
|
||||
snippet += contents.substring(start,end);
|
||||
snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0],mvalue.indices[0][1]-mvalue.indices[0][0]+1));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(snippet.length<1){
|
||||
snippet += contents.substring(0,summaryInclude*2);
|
||||
}
|
||||
//pull template from hugo templarte definition
|
||||
var templateDefinition = $('#search-result-template').html();
|
||||
//replace values
|
||||
var output = render(templateDefinition,{key:key,title:value.item.title,hero:value.item.hero,date:value.item.date,summary:value.item.summary,link:value.item.permalink,tags:value.item.tags,categories:value.item.categories,snippet:snippet});
|
||||
$('#search-results').append(output);
|
||||
|
||||
$.each(snippetHighlights,function(snipkey,snipvalue){
|
||||
$("#summary-"+key).mark(snipvalue);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function param(name) {
|
||||
return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
|
||||
}
|
||||
|
||||
function render(templateString, data) {
|
||||
var conditionalMatches,conditionalPattern,copy;
|
||||
conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
|
||||
//since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
|
||||
copy = templateString;
|
||||
while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
|
||||
if(data[conditionalMatches[1]]){
|
||||
//valid key, remove conditionals, leave contents.
|
||||
copy = copy.replace(conditionalMatches[0],conditionalMatches[2]);
|
||||
}else{
|
||||
//not valid, remove entire section
|
||||
copy = copy.replace(conditionalMatches[0],'');
|
||||
}
|
||||
}
|
||||
templateString = copy;
|
||||
//now any conditionals removed we can do simple substitution
|
||||
var key, find, re;
|
||||
for (key in data) {
|
||||
find = '\\$\\{\\s*' + key + '\\s*\\}';
|
||||
re = new RegExp(find, 'g');
|
||||
templateString = templateString.replace(re, data[key]);
|
||||
}
|
||||
return templateString;
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
function detectDevice() {
|
||||
if (window.innerWidth <= 425) {
|
||||
isMobile = true;
|
||||
isTablet = false;
|
||||
isLaptop = false;
|
||||
} else if (window.innerWidth <= 768) {
|
||||
isMobile = false;
|
||||
isTablet = true;
|
||||
isLaptop = false;
|
||||
} else {
|
||||
isMobile = false;
|
||||
isTablet = false;
|
||||
isLaptop = true;
|
||||
}
|
||||
}
|
||||
detectDevice();
|
||||
|
||||
// =========== Add anchor to the headers ================
|
||||
function addAnchor(element) {
|
||||
element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link"></i></sup></a>`;
|
||||
}
|
||||
|
||||
var postContent = document.getElementById("post-content");
|
||||
if (postContent != null) {
|
||||
var headerTypes = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
||||
for (var i = 0; i < headerTypes.length; i++) {
|
||||
var headers = postContent.querySelectorAll(headerTypes[i]);
|
||||
if (headers) {
|
||||
headers.forEach(addAnchor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
|
||||
// add "navbar" class to the "nav" element
|
||||
let toc = document.getElementById("TableOfContents");
|
||||
toc.classList.add("navbar");
|
||||
// add "nav-pills" class to the "ul" elements
|
||||
let elems = toc.getElementsByTagName("ul");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-pills");
|
||||
}
|
||||
// add "nav-item" class to the "li" elements
|
||||
elems = toc.getElementsByTagName("li");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-item");
|
||||
}
|
||||
// add "nav-link" class to the "a" elements
|
||||
elems = toc.getElementsByTagName("a");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-link");
|
||||
}
|
||||
|
||||
// add scroll to top button
|
||||
function scrollToTop() {
|
||||
var btn = $('#scroll-to-top');
|
||||
$(window).scroll(function () {
|
||||
if ($(window).scrollTop() > 300) {
|
||||
btn.addClass('show');
|
||||
} else {
|
||||
btn.removeClass('show');
|
||||
}
|
||||
});
|
||||
|
||||
btn.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('html, body').animate({ scrollTop: 0 }, '300');
|
||||
});
|
||||
}
|
||||
scrollToTop();
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Add table
Add a link
Reference in a new issue