@searchstax-inc/searchstudio-ux-js 0.6.65 → 1.0.4

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +10 -13
  2. package/README.md +37 -34
  3. package/README.mustache +0 -1
  4. package/dist/@searchstax-inc/searchstudio-ux-js.cjs +9 -9
  5. package/dist/@searchstax-inc/searchstudio-ux-js.d.mts +4 -0
  6. package/dist/@searchstax-inc/searchstudio-ux-js.d.ts +4 -0
  7. package/dist/@searchstax-inc/searchstudio-ux-js.iife.js +9 -9
  8. package/dist/@searchstax-inc/searchstudio-ux-js.mjs +189 -168
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,15 +1,12 @@
1
1
  # Change Log
2
2
 
3
- All notable changes to the "vite-vanilla-ts-lib-starter" project will be documented in this file.
4
-
5
- ## [0.0.1] - 2023-01-18
6
-
7
- - Update all packages to the latest versions (update to vite 4.x)
8
-
9
- ## [0.0.1] - 2022-09-08
10
-
11
- - Update all packages to the latest versions (update to vite 3.x)
12
-
13
- ## [0.0.0] - 2022-03-28
14
-
15
- - Initial release
3
+ All notable changes to the "searchstudio-ux-js" project will be documented in this file.
4
+
5
+ ## [1.0.3] - 2024-10-08
6
+ ### ⚠️ BREAKING CHANGES
7
+ - Result template needs to be updated to print variables as HTML because they now will contain html <em> tags if highlighting is enabled
8
+ ### Features
9
+ - Added support for highlighting controlled via studio UI
10
+ - Results per page are now configured through studio UI
11
+ ### Bug Fixes
12
+ - Tracking calls now use unmodified title of the result
package/README.md CHANGED
@@ -2,6 +2,9 @@
2
2
 
3
3
  Library to build Site Search page
4
4
 
5
+ ## changelog
6
+ changelog is documented at CHANGELOG.md
7
+
5
8
  ## Installation
6
9
  npm install following package
7
10
  `npm install --save @searchstax-inc/searchstudio-ux-js`
@@ -225,7 +228,7 @@ example of result widget initialization with various options
225
228
  mainTemplate: {
226
229
  template: `
227
230
  <div class="searchstax-search-results-container">
228
- <div class="searchstax-search-results" id="searchstax-search-results" aria-live="polite"></div>
231
+ <div class="searchstax-search-results" id="searchstax-search-results"></div>
229
232
  </div>
230
233
  `,
231
234
  searchResultsContainerId: "searchstax-search-results",
@@ -240,15 +243,15 @@ example of result widget initialization with various options
240
243
 
241
244
  {{#ribbon}}
242
245
  <div class="searchstax-search-result-ribbon">
243
- {{ribbon}}
246
+ {{{ribbon}}}
244
247
  </div>
245
248
  {{/ribbon}}
246
249
 
247
250
  {{#thumbnail}}
248
- <img src="{{thumbnail}}" class="searchstax-thumbnail">
251
+ <img src="{{thumbnail}}" alt="" class="searchstax-thumbnail">
249
252
  {{/thumbnail}}
250
253
  <div class="searchstax-search-result-title-container">
251
- <span class="searchstax-search-result-title">{{title}}</span>
254
+ <h5 class="searchstax-search-result-title">{{{title}}}</h5>
252
255
  </div>
253
256
 
254
257
  {{#paths}}
@@ -259,19 +262,19 @@ example of result widget initialization with various options
259
262
 
260
263
  {{#description}}
261
264
  <p class="searchstax-search-result-description searchstax-search-result-common">
262
- {{description}}
265
+ {{{description}}}
263
266
  </p>
264
267
  {{/description}}
265
268
 
266
269
  {{#unmappedFields}}
267
270
  {{#isImage}}
268
271
  <div class="searchstax-search-result-image-container">
269
- <img src="{{value}}" class="searchstax-result-image">
272
+ <img src="{{value}}" alt="" class="searchstax-result-image">
270
273
  </div>
271
274
  {{/isImage}}
272
275
  {{^isImage}}
273
276
  <p class="searchstax-search-result-common">
274
- {{value}}
277
+ {{{value}}}
275
278
  </p>
276
279
  {{/isImage}}
277
280
  {{/unmappedFields}}
@@ -283,14 +286,14 @@ example of result widget initialization with various options
283
286
  noSearchResultTemplate: {
284
287
  template: `
285
288
  {{#searchExecuted}}
286
- <div class="searchstax-no-results">
289
+ <div class="searchstax-no-results" aria-live="polite">
287
290
  Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
288
291
  <br>
289
292
  {{#spellingSuggestion}}
290
- <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')">{{ spellingSuggestion }}</a>?</span>
293
+ <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')" aria-label="suggested term: {{ spellingSuggestion }}">{{ spellingSuggestion }}</a>?</span>
291
294
  {{/spellingSuggestion}}
292
295
  </div>
293
- <ul class="searchstax-no-results-list">
296
+ <ul class="searchstax-no-results-list" aria-live="polite">
294
297
  <li>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</li>
295
298
  <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
296
299
  </ul>
@@ -316,7 +319,7 @@ example of result widget initialization with infinite scroll enabled. This will
316
319
  mainTemplate: {
317
320
  template: `
318
321
  <div class="searchstax-search-results-container">
319
- <div class="searchstax-search-results" id="searchstax-search-results" aria-live="polite"></div>
322
+ <div class="searchstax-search-results" id="searchstax-search-results"></div>
320
323
  </div>
321
324
  `,
322
325
  searchResultsContainerId: "searchstax-search-results",
@@ -331,15 +334,15 @@ example of result widget initialization with infinite scroll enabled. This will
331
334
 
332
335
  {{#ribbon}}
333
336
  <div class="searchstax-search-result-ribbon">
334
- {{ribbon}}
337
+ {{{ribbon}}}
335
338
  </div>
336
339
  {{/ribbon}}
337
340
 
338
341
  {{#thumbnail}}
339
- <img src="{{thumbnail}}" class="searchstax-thumbnail">
342
+ <img src="{{thumbnail}}" alt="" class="searchstax-thumbnail">
340
343
  {{/thumbnail}}
341
344
  <div class="searchstax-search-result-title-container">
342
- <span class="searchstax-search-result-title">{{title}}</span>
345
+ <h5 class="searchstax-search-result-title">{{{title}}}</h5>
343
346
  </div>
344
347
 
345
348
  {{#paths}}
@@ -350,19 +353,19 @@ example of result widget initialization with infinite scroll enabled. This will
350
353
 
351
354
  {{#description}}
352
355
  <p class="searchstax-search-result-description searchstax-search-result-common">
353
- {{description}}
356
+ {{{description}}}
354
357
  </p>
355
358
  {{/description}}
356
359
 
357
360
  {{#unmappedFields}}
358
361
  {{#isImage}}
359
362
  <div class="searchstax-search-result-image-container">
360
- <img src="{{value}}" class="searchstax-result-image">
363
+ <img src="{{value}}" alt="" class="searchstax-result-image">
361
364
  </div>
362
365
  {{/isImage}}
363
366
  {{^isImage}}
364
367
  <p class="searchstax-search-result-common">
365
- {{value}}
368
+ {{{value}}}
366
369
  </p>
367
370
  {{/isImage}}
368
371
  {{/unmappedFields}}
@@ -374,14 +377,14 @@ example of result widget initialization with infinite scroll enabled. This will
374
377
  noSearchResultTemplate: {
375
378
  template: `
376
379
  {{#searchExecuted}}
377
- <div class="searchstax-no-results">
380
+ <div class="searchstax-no-results" aria-live="polite">
378
381
  Showing <strong>no results</strong> for <strong>"{{ searchTerm }}"</strong>
379
382
  <br>
380
383
  {{#spellingSuggestion}}
381
- <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')">{{ spellingSuggestion }}</a>?</span>
384
+ <span>&nbsp;Did you mean <a href="#" class="searchstax-suggestion-term" onclick="searchCallback('{{ spellingSuggestion }}')" aria-label="suggested term: {{ spellingSuggestion }}">{{ spellingSuggestion }}</a>?</span>
382
385
  {{/spellingSuggestion}}
383
386
  </div>
384
- <ul class="searchstax-no-results-list">
387
+ <ul class="searchstax-no-results-list" aria-live="polite">
385
388
  <li>Try searching for search related terms or topics. We offer a wide variety of content to help you get the information you need.</li>
386
389
  <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
387
390
  </ul>
@@ -390,7 +393,6 @@ example of result widget initialization with infinite scroll enabled. This will
390
393
  }
391
394
  },
392
395
  renderMethod: 'infiniteScroll',
393
- resultsPerPage: 10,
394
396
  hooks: {
395
397
  afterLinkClick: function (result: ISearchstaxParsedResult) {
396
398
  // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled
@@ -423,11 +425,11 @@ example of pagination widget initialization with various options
423
425
  {{#results.length}}
424
426
  <div class="searchstax-pagination-container">
425
427
  <div class="searchstax-pagination-content">
426
- <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0">< Previous</a>
428
+ <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0" aria-label="Previous Page">< Previous</a>
427
429
  <div class="searchstax-pagination-details">
428
430
  {{startResultIndex}} - {{endResultIndex}} of {{totalResults}}
429
431
  </div>
430
- <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0">Next ></a>
432
+ <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0" aria-label="Next Page">Next ></a>
431
433
  </div>
432
434
  </div>
433
435
  {{/results.length}}
@@ -440,11 +442,11 @@ example of pagination widget initialization with various options
440
442
  {{#results.length}}
441
443
  <div class="searchstax-pagination-container">
442
444
  <div class="searchstax-pagination-content">
443
- <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0">< Previous</a>
445
+ <a class="searchstax-pagination-previous {{#isFirstPage}}disabled{{/isFirstPage}}" id="searchstax-pagination-previous" tabindex="0" aria-label="Previous Page">< Previous</a>
444
446
  <div class="searchstax-pagination-details">
445
447
  {{startResultIndex}} - {{endResultIndex}} of {{totalResults}}
446
448
  </div>
447
- <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0">Next ></a>
449
+ <a class="searchstax-pagination-next {{#isLastPage}}disabled{{/isLastPage}}" id="searchstax-pagination-next" tabindex="0" aria-label="Next Page">Next ></a>
448
450
  </div>
449
451
  </div>
450
452
  {{/results.length}}
@@ -497,7 +499,7 @@ example of facets widget initialization with various options
497
499
  <div class="searchstax-facets-mobile-overlay {{#overlayOpened}} searchstax-show{{/overlayOpened}}" >
498
500
  <div class="searchstax-facets-mobile-overlay-header">
499
501
  <div class="searchstax-facets-mobile-overlay-header-title">Filter By</div>
500
- <div class="searchstax-search-close"></div>
502
+ <div class="searchstax-search-close" tabindex="0" aria-label="close overlay" role="button"></div>
501
503
  </div>
502
504
  <div class="searchstax-facets-container-mobile"></div>
503
505
  <button class="searchstax-facets-mobile-overlay-done">Done</button>
@@ -525,12 +527,12 @@ example of facets widget initialization with various options
525
527
  template: `
526
528
  <div>
527
529
  <div class="searchstax-facet-title-container">
528
- <div class="searchstax-facet-title">
530
+ <div class="searchstax-facet-title" aria-label="Facet group: {{label}}" tabindex="0">
529
531
  {{label}}
530
532
  </div>
531
533
  <div class="searchstax-facet-title-arrow active"></div>
532
534
  </div>
533
- <div class="searchstax-facet-values-container" aria-live="polite"></div>
535
+ <div class="searchstax-facet-values-container"></div>
534
536
  </div>
535
537
  `,
536
538
  facetListTitleContainerClass: `searchstax-facet-title-container`,
@@ -539,7 +541,7 @@ example of facets widget initialization with various options
539
541
  clearFacetsTemplate: {
540
542
  template: `
541
543
  {{#shouldShow}}}
542
- <div class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all">
544
+ <div class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all" tabindex="0" role="button">
543
545
  <div class="searchstax-facets-pill-label">Clear Filters</div>
544
546
  </div>
545
547
  {{/shouldShow}}
@@ -559,7 +561,7 @@ example of facets widget initialization with various options
559
561
  },
560
562
  filterByTemplate: {
561
563
  template: `
562
- <div class="searchstax-facets-pill searchstax-facets-pill-filter-by">
564
+ <div class="searchstax-facets-pill searchstax-facets-pill-filter-by" tabindex="0" role="button" >
563
565
  <div class="searchstax-facets-pill-label">Filter By</div>
564
566
  </div>
565
567
  `,
@@ -567,7 +569,7 @@ example of facets widget initialization with various options
567
569
  },
568
570
  selectedFacetsTemplate: {
569
571
  template: `
570
- <div class="searchstax-facets-pill searchstax-facets-pill-facets">
572
+ <div class="searchstax-facets-pill searchstax-facets-pill-facets" tabindex="0" role="button">
571
573
  <div class="searchstax-facets-pill-label">{{value}} ({{count}})</div>
572
574
  <div class="searchstax-facets-pill-icon-close"></div>
573
575
  </div>
@@ -600,12 +602,13 @@ searchstax.addSearchFeedbackWidget("search-feedback-container", {
600
602
  main: {
601
603
  template: `
602
604
  {{#searchExecuted}}
605
+ <a href="#searchstax-search-results" class="searchstax-skip">Skip to results section</a>
603
606
  <h4 class="searchstax-feedback-container">
604
607
  {{#hasResults}}
605
- Showing <b>{{startResultIndex}} - {{endResultIndex}}</b> of <b>{{totalResults}}</b> results {{#searchTerm}} for "<b>{{searchTerm}}</b>" {{/searchTerm}}
608
+ <span> Showing <b>{{startResultIndex}} - {{endResultIndex}}</b> </span> of <b>{{totalResults}}</b> results {{#searchTerm}} for "<b>{{searchTerm}}</b>" {{/searchTerm}}
606
609
  <div class="searchstax-feedback-container-suggested">
607
610
  {{#autoCorrectedQuery}}
608
- Search instead for <a href="#" class="searchstax-feedback-original-query">{{originalQuery}}</a>
611
+ Search instead for <a href="#" aria-label="Search instead for: {{originalQuery}}" class="searchstax-feedback-original-query">{{originalQuery}}</a>
609
612
  {{/autoCorrectedQuery}}
610
613
  </div>
611
614
  {{/hasResults}}
@@ -658,7 +661,7 @@ searchstax.addRelatedSearchesWidget("searchstax-related-searches-container", {
658
661
  },
659
662
  relatedSearch: {
660
663
  template: `
661
- <span class="searchstax-related-search searchstax-related-search-item" tabindex="0">
664
+ <span class="searchstax-related-search searchstax-related-search-item" aria-label="Related search: {{related_search}}" tabindex="0">
662
665
  {{ related_search }}{{^last}}<span>,</span>{{/last}}
663
666
  </span>
664
667
  `,
package/README.mustache CHANGED
@@ -244,7 +244,6 @@ example of result widget initialization with infinite scroll enabled. This will
244
244
  }
245
245
  },
246
246
  renderMethod: 'infiniteScroll',
247
- resultsPerPage: 10,
248
247
  hooks: {
249
248
  afterLinkClick: function (result: ISearchstaxParsedResult) {
250
249
  // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled