Repository navigation
Expand file tree
/
Copy pathsearch.js
More file actions
173 lines (146 loc) · 6.71 KB
/
Copy pathsearch.js
File metadata and controls
173 lines (146 loc) · 6.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
// Search module for phpDocumentor
//
// This module is a wrapper around fuse.js that will use a given index and attach itself to a
// search form and to a search results pane identified by the following data attributes:
//
// 1. data-search-form
// 2. data-search-results
//
// The data-search-form is expected to have a single input element of type 'search' that will trigger searching for
// a series of results, were the data-search-results pane is expected to have a direct UL child that will be populated
// with rendered results.
//
// The search has various stages, upon loading this stage the data-search-form receives the CSS class
// 'phpdocumentor-search--enabled'; this indicates that JS is allowed and indices are being loaded. It is recommended
// to hide the form by default and show it when it receives this class to achieve progressive enhancement for this
// feature.
//
// After loading this module, it is expected to load a search index asynchronously, for example:
//
// <script defer src="js/searchIndex.js"></script>
//
// In this script the generated index should attach itself to the search module using the `appendIndex` function. By
// doing it like this the page will continue loading, unhindered by the loading of the search.
//
// After the page has fully loaded, and all these deferred indexes loaded, the initialization of the search module will
// be called and the form will receive the class 'phpdocumentor-search--active', indicating search is ready. At this
// point, the input field will also have it's 'disabled' attribute removed.
var Search = (function () {
var fuse;
var index = [];
var options = {
shouldSort: true,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
"fqsen",
"name",
"summary",
"url"
]
};
// Credit David Walsh (https://davidwalsh.name/javascript-debounce-function)
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function executedFunction() {
var context = this;
var args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
function close() {
// Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
// End scroll prevention
var form = document.querySelector('[data-search-form]');
var searchResults = document.querySelector('[data-search-results]');
form.classList.toggle('phpdocumentor-search--has-results', false);
searchResults.classList.add('phpdocumentor-search-results--hidden');
var searchField = document.querySelector('[data-search-form] input[type="search"]');
searchField.blur();
}
function search(event) {
// Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;
// End scroll prevention
// prevent enter's from autosubmitting
event.stopPropagation();
var form = document.querySelector('[data-search-form]');
var searchResults = document.querySelector('[data-search-results]');
var searchResultEntries = document.querySelector('[data-search-results] .phpdocumentor-search-results__entries');
searchResultEntries.innerHTML = '';
if (!event.target.value) {
close();
return;
}
form.classList.toggle('phpdocumentor-search--has-results', true);
searchResults.classList.remove('phpdocumentor-search-results--hidden');
var results = fuse.search(event.target.value, {limit: 25});
results.forEach(function (result) {
var entry = document.createElement("li");
entry.classList.add("phpdocumentor-search-results__entry");
entry.innerHTML += '<h3><a href="' + document.baseURI + result.url + '">' + result.name + "</a></h3>\n";
entry.innerHTML += '<small>' + result.fqsen + "</small>\n";
entry.innerHTML += '<div class="phpdocumentor-summary">' + result.summary + '</div>';
searchResultEntries.appendChild(entry)
});
}
function appendIndex(added) {
index = index.concat(added);
// re-initialize search engine when appending an index after initialisation
if (typeof fuse !== 'undefined') {
fuse = new Fuse(index, options);
}
}
function init() {
fuse = new Fuse(index, options);
var form = document.querySelector('[data-search-form]');
var searchField = document.querySelector('[data-search-form] input[type="search"]');
var closeButton = document.querySelector('.phpdocumentor-search-results__close');
closeButton.addEventListener('click', function() { close() }.bind(this));
var searchResults = document.querySelector('[data-search-results]');
searchResults.addEventListener('click', function() { close() }.bind(this));
form.classList.add('phpdocumentor-search--active');
searchField.setAttribute('placeholder', 'Search (Press "/" to focus)');
searchField.removeAttribute('disabled');
searchField.addEventListener('keyup', debounce(search, 300));
window.addEventListener('keyup', function (event) {
if (event.key === '/') {
searchField.focus();
}
if (event.code === 'Escape') {
close();
}
}.bind(this));
}
return {
appendIndex,
init
}
})();
window.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('[data-search-form]');
// When JS is supported; show search box. Must be before including the search for it to take effect immediately
form.classList.add('phpdocumentor-search--enabled');
});
window.addEventListener('load', function () {
Search.init();
});