-
Notifications
You must be signed in to change notification settings - Fork 5
/
SidebarSearch.html
110 lines (95 loc) · 3.08 KB
/
SidebarSearch.html
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
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="search-fields"></div>
<input type="button" value="Search" id="search-submit">
<hr>
<input type="submit" value="Clear" id="clear-button"/>
<input type="button" value="Close" id="close-button"/>
</body>
<script>
(function() {
const SEARCH_FIELDS = [ "title", "author", "description", "everything"]
const SEARCH_FIELD_CLASS = ".search-field"
const DOM = {};
DOM.searchFieldsDiv = document.querySelector("#search-fields");
DOM.searchSubmit = document.querySelector("#search-submit");
DOM.clearButton = document.querySelector("#clear-button");
DOM.closeButton = document.querySelector("#close-button");
function submitSearch(e){
e.preventDefault();
const searchFields = document.querySelectorAll(SEARCH_FIELD_CLASS)
searchPairs = []
searchFields.forEach(searchField => {
const searchTerm = searchField.value.trim();
if(searchTerm.length){
searchPairs.push([
searchField.dataset.columnName,
searchTerm,
])
}
})
if(searchPairs.length){
google.script.run.sidebarSearch(searchPairs)
}
else{
clearSearch();
}
}
function clearSearch(){
google.script.run.clearSearchFilter();
const searchFields = document.querySelectorAll(SEARCH_FIELD_CLASS)
searchFields.forEach(searchField => {
searchField.value = "";
})
}
function closeSidebar () {
clearSearch();
google.script.host.close();
}
// From: https://stackoverflow.com/a/1026087
// Steve Harrison: https://stackoverflow.com/users/48492/steve-harrison
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function addSearchField(fieldName){
// Search Field DIV:
// <div>
// Title: <input type="text" id="title-input"
// data-column-name="title" class="search-field"
// autocomplete="off">
// </div>
const fieldInput = document.createElement("input");
const inputAttributes = [
["type", "text"],
["class", "search-field"],
["data-column-name", fieldName],
["autocomplete", "off"],
]
inputAttributes.forEach(attribute => {
fieldInput.setAttribute(...attribute);
})
fieldInput.addEventListener("keyup", e => {
if (e.keyCode === 13) {
submitSearch(e);
}
});
const newFieldDiv = document.createElement("div");
const fieldLabel = document.createTextNode(`${capitalize(fieldName)}: `);
newFieldDiv.appendChild(fieldLabel);
newFieldDiv.appendChild(fieldInput);
DOM.searchFieldsDiv.appendChild(newFieldDiv)
}
function initialize(){
SEARCH_FIELDS.map(addSearchField);
DOM.searchSubmit.addEventListener("click", submitSearch);
DOM.clearButton.addEventListener("click", clearSearch);
DOM.closeButton.addEventListener("click", closeSidebar);
}
initialize();
})();
</script>
</html>