Skip to Content

Changes for page Solr Search

Last modified by Mark Kohlmann on 2025/01/19 06:48
From version 1.1
edited by Mark Kohlmann
on 2020/04/02 23:26
Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui-9.4]
To version 4.1
edited by Mark Kohlmann
on 2025/01/19 06:48
Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui/16.10.2]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.MarkKohlmann
1 +XWiki.mark\.kohlmann@chiefintegrations\.com
dark-grey-disclosure-arrow-down.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.MarkKohlmann
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
dark-grey-disclosure-arrow-left.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.MarkKohlmann
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
light-grey-disclosure-arrow-down.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.MarkKohlmann
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
light-grey-disclosure-arrow-left.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.MarkKohlmann
Size
... ... @@ -1,1 +1,0 @@
1 -94 bytes
Content
XWiki.JavaScriptExtension[0]
Code
... ... @@ -26,8 +26,8 @@
26 26   };
27 27  
28 28   var updateExpandCollapseAllFacetsState = function(facetsContainer) {
29 - var facetCount = facetsContainer.find('.search-facet').size();
30 - var expandedFacetCount = facetsContainer.find('.search-facet.expanded').size();
29 + var facetCount = facetsContainer.find('.search-facet').length;
30 + var expandedFacetCount = facetsContainer.find('.search-facet.expanded').length;
31 31   if (expandedFacetCount > facetCount / 2) {
32 32   facetsContainer.find('.search-facets-action-collapseAll').show()
33 33   .parent().children('.search-facets-action-expandAll').hide();
... ... @@ -37,14 +37,21 @@
37 37   }
38 38   };
39 39  
40 - var addFacetValueCheckbox = function() {
41 - var checkBox = $(document.createElement('input')).attr('type', 'checkbox');
40 + var addFacetValueCheckbox = function(index) {
41 + // Create an id unique to the facet value.
42 + let facetContainer = $(this).parents('.search-facet').first();
43 + $(this).attr('id', facetContainer.attr('data-name') + '-' + index.toString());
44 + // Initialize the checkbox.
45 + let checkBox = $(document.createElement('input')).attr('type', 'checkbox');
46 + checkBox.attr('aria-labelledby', $(this).attr('id'));
42 42   checkBox.prop('checked', $(this).hasClass('selected'));
43 43   // Add the 'checked' attribute so that it can be easily located with CSS.
44 44   checkBox.prop('checked') && checkBox.attr('checked', 'checked');
45 - checkBox.click($.proxy(this, 'click'));
46 - // Remove the 'selected' class because the selected state is marked using the check box.
47 - $(this).removeClass('selected').before(checkBox);
50 + checkBox.on('click', this.click.bind(this));
51 + // Remove the 'selected' class because the selected state is already marked using the check box.
52 + $(this).removeClass('selected')
53 + // Add the checkbox to the DOM
54 + $(this).before(checkBox)
48 48   };
49 49  
50 50   var enhanceSearchFacets = function() {
... ... @@ -51,18 +51,18 @@
51 51   var facetsContainer = $(this);
52 52  
53 53   // Add the ability to collapse the facets pane on extra small screens (phones).
54 - facetsContainer.find('.search-facets-header').click(function() {
61 + facetsContainer.find('.search-facets-header').on('click', function() {
55 55   facetsContainer.toggleClass('collapsed-xs');
56 56   });
57 57  
58 58   // Global Expand/Collapse toggle.
59 - facetsContainer.find('.search-facets-action-collapseAll').removeClass('hidden').click(collapseAllFacets);
60 - facetsContainer.find('.search-facets-action-expandAll').removeClass('hidden').click(expandAllFacets);
66 + facetsContainer.find('.search-facets-action-collapseAll').removeClass('hidden').on('click', collapseAllFacets);
67 + facetsContainer.find('.search-facets-action-expandAll').removeClass('hidden').on('click', expandAllFacets);
61 61   updateExpandCollapseAllFacetsState(facetsContainer);
62 62  
63 63   // Expand/Collapse toggle for each facet.
64 - facetsContainer.find('.search-facet-header').click(function(event) {
65 - $(event.target).parent('.search-facet').toggleClass('expanded');
71 + facetsContainer.find('.facet-toggler').on('click', function(event) {
72 + $(event.target).parents('.search-facet').toggleClass('expanded');
66 66   updateExpandCollapseAllFacetsState(facetsContainer);
67 67   });
68 68  
... ... @@ -110,7 +110,8 @@
110 110   searchRequest && searchRequest.abort();
111 111   $('.search-ui').attr('aria-busy', true);
112 112   var getURL = XWiki.currentDocument.getURL('get', getQueryString(viewURL));
113 - searchRequest = $.get(getURL).done(function(html) {
120 + searchRequest = $.get(getURL);
121 + searchRequest.then(html => {
114 114   var state = getSearchUIState();
115 115   updateSearchUI(html);
116 116   setSearchUIState(state);
... ... @@ -123,7 +123,7 @@
123 123   var reloadSearchUI = function(event) {
124 124   event.preventDefault();
125 125   var anchor = $(event.target).closest('a');
126 - anchor.size() > 0 && $(document).trigger('xwiki:search:update', anchor.attr('href'));
134 + anchor.length && $(document).trigger('xwiki:search:update', anchor.attr('href'));
127 127   };
128 128  
129 129   // Others (e.g. a custom facet) can trigger a search UI update by firing this event.
... ... @@ -137,7 +137,8 @@
137 137   $('.search-ui').attr('aria-busy', true);
138 138   var state = event.originalEvent.state;
139 139   var getURL = XWiki.currentDocument.getURL('get', window.location.search.substr(1));
140 - searchRequest = $.get(getURL).done(function(html) {
148 + searchRequest = $.get(getURL);
149 + searchRequest.then(html => {
141 141   updateSearchUI(html);
142 142   setSearchUIState(state);
143 143   });
... ... @@ -178,7 +178,7 @@
178 178   '.search-facet a.itemName',
179 179   '.search-facet-body a.more',
180 180   '.search-facet-body .selectedLocation a'
181 - ].join(',')).click(reloadSearchUI);
190 + ].join(',')).on('click', reloadSearchUI);
182 182   };
183 183  
184 184   enhanceSearchUI();
XWiki.StyleSheetExtension[0]
Code
... ... @@ -222,7 +222,7 @@
222 222   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
223 223   /* Leave space for the bottom shadow. */
224 224   margin-bottom: 1em;
225 - border-radius: 4px;
225 + border-radius: 7px;
226 226  }
227 227  /* Colibri skin doesn't have the grid system. */
228 228  .skin-colibri .search-facets {
... ... @@ -287,28 +287,15 @@
287 287  }
288 288  
289 289  .search-facet-header {
290 - background: url("$doc.getAttachmentURL('dark-grey-disclosure-arrow-left.png')") no-repeat scroll 100% 50% transparent;
291 291   color: $theme.titleColor;
292 292   cursor: pointer;
293 293   line-height: 1.4em;
294 294   margin: 0 .2em;
295 - text-transform: capitalize;
294 + display: flex;
295 + justify-content: space-between;
296 + position: relative;
296 296  }
297 297  
298 -.search-facet-header:after {
299 - border-bottom: 1px dotted $theme.pageContentBackgroundColor;
300 - border-top: 1px dotted $theme.borderColor;
301 - clear: both;
302 - content: "";
303 - display: block;
304 - height: 0;
305 - margin: 2.45em 0 0;
306 - position: absolute;
307 - right: 0;
308 - top: 0;
309 - width: 100%;
310 -}
311 -
312 312  .search-facet:last-of-type .search-facet-header:after {
313 313   border: medium none;
314 314  }
... ... @@ -330,13 +330,37 @@
330 330  }
331 331  
332 332  .search-facet-body li {
320 + display: flex;
321 + flex-wrap: wrap;
333 333   padding: .1em .2em;
334 334  }
335 335  
336 -.search-facet.expanded .search-facet-header {
337 - background-image: url("$doc.getAttachmentURL('dark-grey-disclosure-arrow-down.png')");
325 +.search-facet .search-facet-header .facet-toggler, button.facet-value-toggler {
326 + background: transparent;
327 + transition: background-color .2s ease-in-out;
338 338  }
339 339  
330 +.search-facet .search-facet-header .facet-toggler:active, button.facet-value-toggler:active {
331 + box-shadow: unset;
332 +}
333 +
334 +.search-facet .search-facet-header .facet-toggler > span, button.facet-value-toggler > span,
335 +.search-facet .search-facet-header .facet-toggler > img, button.facet-value-toggler > img {
336 + transform: rotate(90deg);
337 +}
338 +
339 +.search-facet.expanded .search-facet-header .facet-toggler > span, .expanded > button.facet-value-toggler > span,
340 +.search-facet.expanded .search-facet-header .facet-toggler > img, .expanded > button.facet-value-toggler > img {
341 + transform: rotate(0deg);
342 +}
343 +
344 +@media not (prefers-reduced-motion) {
345 + .search-facet .search-facet-header .facet-toggler > span, button.facet-value-toggler > span,
346 + .search-facet .search-facet-header .facet-toggler > img, button.facet-value-toggler > img {
347 + transition: transform 0.2s ease;
348 + }
349 +}
350 +
340 340  .search-facet.expanded .search-facet-body {
341 341   display: block;
342 342  }
... ... @@ -354,7 +354,6 @@
354 354  }
355 355  
356 356  .search-facet-body input[type="checkbox"] {
357 - float: left;
358 358   margin: .2em 0;
359 359  }
360 360  
... ... @@ -367,7 +367,18 @@
367 367   white-space: nowrap;
368 368  }
369 369  
380 +/* Override the default style for links in content. */
381 +body.content.preference-underlining-only-inline-links #xwikicontent .search-facet-body .itemName,
382 +body.content.preference-underlining-only-inline-links #xwikicontent .search-facet-body .more {
383 + text-decoration: none;
384 + /* Make sure we don't take over the default behaviour on hover with too much specificity. */
385 + &:hover, &:focus {
386 + text-decoration: underline;
387 + }
388 +}
389 +
370 370  .search-facet-body .itemName,
391 +.search-facet-body .facet-value-toggler,
371 371  .search-facet-body .more {
372 372   /* Remove link styling */
373 373   color: $theme.textColor;
... ... @@ -385,8 +385,8 @@
385 385  }
386 386  
387 387  .search-facet-body .itemCount {
388 - float: right;
389 389   padding: .1em 0;
410 + margin-left: auto;
390 390  }
391 391  
392 392  @media (max-width: 768px) {