1
{{- $.Scratch.Add "index" slice -}}
2
{{- range .Site.RegularPages -}}
3
    {{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink "date" .Date "section" .Section) -}}
4
{{- end -}}
5
{{- $.Scratch.Get "index" | jsonify -}}

1
var fuse; // holds our search engine
2
var fuseIndex;
3
var searchVisible = false;
4
var firstRun = true; // allow us to delay loading json data unless search activated
5
var list = document.getElementById('searchResults'); // targets the <ul>
6
var first = list.firstChild; // first child of search list
7
var last = list.lastChild; // last child of search list
8
var maininput = document.getElementById('searchInput'); // input box for search
9
var resultsAvailable = false; // Did we get any search results?
10

11
// ==========================================
12
// The main keyboard event listener running the show
13
//
14
document.addEventListener('keydown', function(event) {
15

16
  // CMD-/ to show / hide Search
17
  if (event.altKey && event.which === 191) {
18
      // Load json search index if first time invoking search
19
      // Means we don't load json unless searches are going to happen; keep user payload small unless needed
20
      doSearch(event)
21
  }
22

23
  // Allow ESC (27) to close search box
24
  if (event.keyCode == 27) {
25
    if (searchVisible) {
26
      document.getElementById("fastSearch").style.visibility = "hidden";
27
      document.activeElement.blur();
28
      searchVisible = false;
29
    }
30
  }
31

32
  // DOWN (40) arrow
33
  if (event.keyCode == 40) {
34
    if (searchVisible && resultsAvailable) {
35
      console.log("down");
36
      event.preventDefault(); // stop window from scrolling
37
      if ( document.activeElement == maininput) { first.focus(); } // if the currently focused element is the main input --> focus the first <li>
38
      else if ( document.activeElement == last ) { last.focus(); } // if we're at the bottom, stay there
39
      else { document.activeElement.parentElement.nextSibling.firstElementChild.focus(); } // otherwise select the next search result
40
    }
41
  }
42

43
  // UP (38) arrow
44
  if (event.keyCode == 38) {
45
    if (searchVisible && resultsAvailable) {
46
      event.preventDefault(); // stop window from scrolling
47
      if ( document.activeElement == maininput) { maininput.focus(); } // If we're in the input box, do nothing
48
      else if ( document.activeElement == first) { maininput.focus(); } // If we're at the first item, go to input box
49
      else { document.activeElement.parentElement.previousSibling.firstElementChild.focus(); } // Otherwise, select the search result above the current active one
50
    }
51
  }
52
});
53

54

55
// ==========================================
56
// execute search as each character is typed
57
//
58
document.getElementById("searchInput").onkeyup = function(e) {
59
  executeSearch(this.value);
60
}
61

62
document.querySelector("body").onclick = function(e) {
63
    if (e.target.tagName === 'BODY' || e.target.tagName === 'DIV') {
64
        hideSearch()
65
    }
66
}
67

68
document.querySelector("#search-btn").onclick = function(e) {
69
    doSearch(e)
70
}
71

72
function doSearch(e) {
73
    e.stopPropagation();
74
    if (firstRun) {
75
        loadSearch() // loads our json data and builds fuse.js search index
76
        firstRun = false // let's never do this again
77
    }
78
    // Toggle visibility of search box
79
    if (!searchVisible) {
80
        showSearch() // search visible
81
    }
82
    else {
83
        hideSearch()
84
    }
85
}
86

87
function hideSearch() {
88
    document.getElementById("fastSearch").style.visibility = "hidden" // hide search box
89
    document.activeElement.blur() // remove focus from search box
90
    searchVisible = false
91
}
92

93
function showSearch() {
94
    document.getElementById("fastSearch").style.visibility = "visible" // show search box
95
    document.getElementById("searchInput").focus() // put focus in input box so you can just start typing
96
    searchVisible = true
97
}
98

99
// ==========================================
100
// fetch some json without jquery
101
//
102
function fetchJSONFile(path, callback) {
103
  var httpRequest = new XMLHttpRequest();
104
  httpRequest.onreadystatechange = function() {
105
    if (httpRequest.readyState === 4) {
106
      if (httpRequest.status === 200) {
107
        var data = JSON.parse(httpRequest.responseText);
108
          if (callback) callback(data);
109
      }
110
    }
111
  };
112
  httpRequest.open('GET', path);
113
  httpRequest.send();
114
}
115

116

117
// ==========================================
118
// load our search index, only executed once
119
// on first call of search box (CMD-/)
120
//
121
function loadSearch() {
122
  console.log('loadSearch()')
123
  fetchJSONFile('/index.json', function(data){
124

125
    var options = { // fuse.js options; check fuse.js website for details
126
      shouldSort: true,
127
      location: 0,
128
      distance: 100,
129
      threshold: 0.4,
130
      minMatchCharLength: 2,
131
      keys: [
132
        'permalink',
133
        'title',
134
        'tags',
135
        'contents'
136
        ]
137
    };
138
    // Create the Fuse index
139
    fuseIndex = Fuse.createIndex(options.keys, data)
140
    fuse = new Fuse(data, options, fuseIndex); // build the index from the json file
141
  });
142
}
143

144

145
// ==========================================
146
// using the index we loaded on CMD-/, run
147
// a search query (for "term") every time a letter is typed
148
// in the search box
149
//
150
function executeSearch(term) {
151
  let results = fuse.search(term); // the actual query being run using fuse.js
152
  let searchitems = ''; // our results bucket
153

154
  if (results.length === 0) { // no results based on what was typed into the input box
155
    resultsAvailable = false;
156
    searchitems = '';
157
  } else { // build our html
158
    // console.log(results)
159
    permalinks = [];
160
    numLimit = 5;
161
    for (let item in results) { // only show first 5 results
162
        if (item > numLimit) {
163
            break;
164
        }
165
        if (permalinks.includes(results[item].item.permalink)) {
166
            continue;
167
        }
168
    //   console.log('item: %d, title: %s', item, results[item].item.title)
169
      searchitems = searchitems + '<li><a href="' + results[item].item.permalink + '" tabindex="0">' + '<span class="title">' + results[item].item.title + '</span></a></li>';
170
      permalinks.push(results[item].item.permalink);
171
    }
172
    resultsAvailable = true;
173
  }
174

175
  document.getElementById("searchResults").innerHTML = searchitems;
176
  if (results.length > 0) {
177
    first = list.firstChild.firstElementChild; // first result container — used for checking against keyboard up/down location
178
    last = list.lastChild.firstElementChild; // last result container — used for checking against keyboard up/down location
179
  }
180
}