@searchstax-inc/searchstudio-ux-js 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +128 -49
- package/dist/@searchstax-inc/searchstudio-ux-js.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,61 +1,140 @@
|
|
|
1
|
-
#
|
|
1
|
+
# searchstudio-ux-js
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Library to build searchstudio search page
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- Typings bundle
|
|
10
|
-
- ESLint - scripts linter
|
|
11
|
-
- Stylelint - styles linter
|
|
12
|
-
- Prettier - formatter
|
|
13
|
-
- Vitest - test framework
|
|
14
|
-
- Husky + lint-staged - pre-commit git hook set up for formatting
|
|
15
|
-
|
|
16
|
-
## GitHub Template
|
|
7
|
+
`npm install --save @searchstax-inc/searchstudio-ux-js`
|
|
8
|
+
## Usage
|
|
17
9
|
|
|
18
|
-
|
|
10
|
+
After importing Searchstax class a new instance needs to be created:
|
|
19
11
|
|
|
20
|
-
|
|
12
|
+
```const searchstax = new Searchstax();```
|
|
21
13
|
|
|
22
|
-
|
|
14
|
+
## Initialization
|
|
23
15
|
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
```
|
|
17
|
+
searchstax.initialize({
|
|
18
|
+
language: "en",
|
|
19
|
+
searchURL: "",
|
|
20
|
+
suggesterURL: "",
|
|
21
|
+
authenticationValue: "",
|
|
22
|
+
trackApiKey: "",
|
|
23
|
+
searchApiKey: "",
|
|
24
|
+
authType: "basic",
|
|
25
|
+
});
|
|
28
26
|
```
|
|
29
27
|
|
|
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
|
-
|
|
28
|
+
## Input widget
|
|
29
|
+
example of input widget initialization with various options
|
|
30
|
+
```
|
|
31
|
+
searchstax.addSearchInputWidget("searchstax-input-container", {
|
|
32
|
+
suggestAfterMinChars: 3,
|
|
33
|
+
hideBranding: true,
|
|
34
|
+
hooks: {
|
|
35
|
+
beforeSearch: function (props: ISearchstaxSearchProps) {
|
|
36
|
+
// gets searchProps, if passed along further search will execute, if null then event gets canceled
|
|
37
|
+
// props can be modified and passed along
|
|
38
|
+
const propsCopy = { ...props };
|
|
39
|
+
// propsCopy.term = propsCopy.term;
|
|
40
|
+
return propsCopy;
|
|
41
|
+
},
|
|
42
|
+
afterSearch: function (results: ISearchstaxParsedResult[]) {
|
|
43
|
+
const copy = [...results];
|
|
44
|
+
// copy.splice(0, 1);
|
|
45
|
+
return copy;
|
|
46
|
+
},
|
|
47
|
+
afterAutosuggest: function (result: ISearchstaxSuggestResponse) {
|
|
48
|
+
const copy = { ...result };
|
|
49
|
+
console.log("copy", copy);
|
|
50
|
+
return copy;
|
|
51
|
+
},
|
|
52
|
+
beforeAutosuggest: function (props: ISearchstaxSuggestProps) {
|
|
53
|
+
// gets suggestProps, if passed along further autosuggest will execute, if null then event gets canceled
|
|
54
|
+
// props can be modified and passed along
|
|
55
|
+
const propsCopy = { ...props };
|
|
56
|
+
// propsCopy.term = propsCopy.term + '222';
|
|
57
|
+
return propsCopy;
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
templates: {
|
|
61
|
+
mainTemplate: `<div class="searchstax-search-input-container">
|
|
62
|
+
<div class="searchstax-search-input-wrapper">
|
|
63
|
+
<input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." />
|
|
64
|
+
<button class="searchstax-spinner-icon" id="searchstax-search-input-action-button"></button>
|
|
65
|
+
</div>
|
|
66
|
+
</div>`,
|
|
67
|
+
searchInputId: "searchstax-input-container",
|
|
68
|
+
autosuggestItemTemplate: `<div class="searchstax-autosuggest-item-term-container">{{{term}}}</div>`,
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
```
|
|
72
|
+
## Result widget
|
|
56
73
|
|
|
57
|
-
## Acknowledgment
|
|
58
74
|
|
|
59
|
-
|
|
75
|
+
example of result widget initialization with various options
|
|
76
|
+
```
|
|
77
|
+
searchstax.addSearchResultsWidget("searchstax-results-container", {
|
|
78
|
+
hideUniqueKey: true,
|
|
79
|
+
// searchResultUniqueIdAttribute: ' data-searchstax-unique-result-id', if custom result template is used
|
|
80
|
+
// points to an attribute that will be used to identify a result
|
|
81
|
+
searchResultsContainerId: "searchstax-result-container", // if main template is over ridden this points to an
|
|
82
|
+
// id in the main element where results need to be rendered
|
|
83
|
+
templates: {
|
|
84
|
+
mainTemplate: `
|
|
85
|
+
<div class="searchstax-search-results-container">
|
|
86
|
+
<div id="searchstax-result-container"></div>
|
|
87
|
+
</div>
|
|
88
|
+
`,
|
|
89
|
+
searchResultTemplate: `<div class="searchstax-search-result">
|
|
90
|
+
{{#url}}
|
|
91
|
+
<a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link"></a>
|
|
92
|
+
{{/url}}
|
|
93
|
+
{{#ribbon}}
|
|
94
|
+
<div class="searchstax-search-result-ribbon">
|
|
95
|
+
{{ribbon}}
|
|
96
|
+
</div>
|
|
97
|
+
{{/ribbon}}
|
|
98
|
+
{{#thumbnail}}
|
|
99
|
+
<img :src="thumbnail" class="searchstax-thumbnail">
|
|
100
|
+
{{/thumbnail}}
|
|
101
|
+
<div class="searchstax-search-result-title-container">
|
|
102
|
+
<span class="searchstax-search-result-title">{{title}}</span>
|
|
103
|
+
</div>
|
|
104
|
+
{{#paths}}
|
|
105
|
+
<p class="searchstax-search-result-common">
|
|
106
|
+
{{paths}}
|
|
107
|
+
</p>
|
|
108
|
+
{{/paths}}
|
|
109
|
+
{{#description}}
|
|
110
|
+
<p class="searchstax-search-result-description searchstax-search-result-common">
|
|
111
|
+
{{description}}
|
|
112
|
+
</p>
|
|
113
|
+
{{/description}}
|
|
114
|
+
{{#unmappedFields}}
|
|
115
|
+
{{#isImage}}
|
|
116
|
+
<div class="searchstax-search-result-image-container">
|
|
117
|
+
<img :src="result[value]" class="searchstax-result-image">
|
|
118
|
+
</div>
|
|
119
|
+
{{/isImage}}
|
|
120
|
+
{{^isImage}}
|
|
121
|
+
<p class="searchstax-search-result-common">
|
|
122
|
+
{{value}}
|
|
123
|
+
</p>
|
|
124
|
+
{{/isImage}}
|
|
125
|
+
{{/unmappedFields}}
|
|
126
|
+
</div>`,
|
|
127
|
+
},
|
|
128
|
+
hooks: {
|
|
129
|
+
afterLinkClick: function (result: ISearchstaxParsedResult) {
|
|
130
|
+
// gets result that was clicked, if passed along further functions will execute, if null then event gets canceled
|
|
131
|
+
const propsCopy = { ...result };
|
|
132
|
+
|
|
133
|
+
return propsCopy;
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
});
|
|
137
|
+
```
|
|
60
138
|
|
|
61
|
-
|
|
139
|
+
## Template overrides
|
|
140
|
+
Templates use mustache templating. For more info see https://github.com/janl/mustache.js
|