Changes for page Solr Search

Last modified by teamwire004 on 2026/03/03 08:31

Manage
- Copy
Actions
- Export
- Print Preview
Viewers
- Source
- Siblings
- Content

From 4.1 to 3.1

From version 6.1

edited by teamwire004
on 2026/03/03 08:31

Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui/17.10.3]

To version 4.1

edited by teamwire005
on 2025/01/07 08:42

Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui/16.10.2]

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (2 modified, 0 added, 0 removed)
- XWiki.JavaScriptExtension[0]
- XWiki.StyleSheetExtension[0]

Details

Page properties

Author

@@ -1,1 +1,1 @@
--XWiki.teamwire004
++XWiki.teamwire005

XWiki.JavaScriptExtension[0]

Code

@@ -1,7 +1,11 @@
  require(['jquery', 'xwiki-events-bridge'], function($) {
    var enhanceSearchResultHighlights = function() {
--    const highlights = $(this).removeClass('hidden').prev('.search-result-highlights').addClass('preview');
++    var highlights = $(this).removeClass('hidden').parent().prev('.search-result-highlights').addClass('preview');
++    // Workaround for IE8 which doesn't support :first-of-type CSS selector.
++    highlights.find('.search-result-highlight').first().addClass('first').parent('dd').addClass('first')
++      .prev('dt').addClass('first');
++
      $(this).one('click', function(event) {
        event.preventDefault();
        $(event.target).remove();
@@ -11,19 +11,19 @@
    var collapseAllFacets = function(event) {
      event.preventDefault();
--    $(event.target).closest('.search-facets').find('.search-facet .search-facet-body').collapse('hide');
++    $(event.target).closest('.search-facets').find('.search-facet').removeClass('expanded');
      $(event.target).hide().parent().children('.search-facets-action-expandAll').show();
    };
    var expandAllFacets = function(event) {
      event.preventDefault();
--    $(event.target).closest('.search-facets').find('.search-facet .search-facet-body').collapse('show');
++    $(event.target).closest('.search-facets').find('.search-facet').addClass('expanded');
      $(event.target).hide().parent().children('.search-facets-action-collapseAll').show();
    };
    var updateExpandCollapseAllFacetsState = function(facetsContainer) {
--    let facetCount = facetsContainer.find('.search-facet').length;
--    let expandedFacetCount = facetsContainer.find('.search-facet-body.collapse.in').length;
++    var facetCount = facetsContainer.find('.search-facet').length;
++    var expandedFacetCount = facetsContainer.find('.search-facet.expanded').length;
      if (expandedFacetCount > facetCount / 2) {
        facetsContainer.find('.search-facets-action-collapseAll').show()
          .parent().children('.search-facets-action-expandAll').hide();
@@ -33,16 +33,10 @@
      }
    };
--  var addFacetValueCheckbox = function() {
++  var addFacetValueCheckbox = function(index) {
      // Create an id unique to the facet value.
      let facetContainer = $(this).parents('.search-facet').first();
--    // We need the ids of the target facet elements to stay stable through the change, in order to refocus the item
--    // that was clicked and triggered the change.
--    // We use the JQuery index, so that id indexes are reset across facetContainers.
--    // This allows for stable indexes: when reloading the facets after changing the filter for the target facet X,
--    // the ids of all the checkbox for the target facet X will keep the same index.
--    // This property is lost if multiple facets are changed in the query at once.
--    $(this).attr('id', facetContainer.attr('data-name') + '-' + facetContainer.find('a.itemName').index($(this)));
++    $(this).attr('id', facetContainer.attr('data-name') + '-' + index.toString());
      // Initialize the checkbox.
      let checkBox = $(document.createElement('input')).attr('type', 'checkbox');
      checkBox.attr('aria-labelledby', $(this).attr('id'));
@@ -70,7 +70,8 @@
      updateExpandCollapseAllFacetsState(facetsContainer);
      // Expand/Collapse toggle for each facet.
--    facetsContainer.find('.search-facet-body').on('hidden.bs.collapse shown.bs.collapse', function(event) {
++    facetsContainer.find('.facet-toggler').on('click', function(event) {
++      $(event.target).parents('.search-facet').toggleClass('expanded');
        updateExpandCollapseAllFacetsState(facetsContainer);
      });
@@ -84,15 +84,10 @@
      var queryIndex = url.indexOf('?');
      return queryIndex < 0 ? '' : url.substr(queryIndex + 1);
    };
--
--  let removeQueryString = function(url) {
--    let queryIndex = url.indexOf('?');
--    return queryIndex < 0 ? url : url.substring(0, queryIndex);
--  };
    var getSearchUIState = function() {
      var expandedFacets = [];
--    $('.search-facet:has(btn.facet-toggle:not(.collapsed))').each(function() {
++    $('.search-facet.expanded').each(function() {
        expandedFacets.push($(this).attr('data-name'));
      });
      return {
@@ -103,7 +103,7 @@
    var setSearchUIState = function(state) {
      state = state || {};
      var expandedFacets = state.expandedFacets || [];
--    $('.search-facet:has(btn.facet-toggle.collapsed)').each(function() {
++    $('.search-facet').not('.expanded').each(function() {
        if (expandedFacets.indexOf($(this).attr('data-name')) >= 0) {
          $(this).addClass('expanded');
        }
@@ -118,9 +118,7 @@
    var searchRequest = null;
--  // changeTargetSelector is the CSS selector of the facet anchor that initiated this reload. '
--  // We expect the focus to go back to this place once the UI is reloaded.
--  var pushSearchUIState = function(viewURL, changeTargetSelector) {
++  var pushSearchUIState = function(viewURL) {
      // If there is a request in progress, abort it to prevent its callback from being called.
      searchRequest && searchRequest.abort();
      $('.search-ui').attr('aria-busy', true);
@@ -133,7 +133,6 @@
        window.history.replaceState && window.history.replaceState(state, document.title);
        // Make sure the browser address bar reflects the new state (and thus the new state can be bookmarked).
        window.history.pushState && window.history.pushState(state, document.title, viewURL);
--      document.querySelector(changeTargetSelector)?.focus();
      });
    };
@@ -140,12 +140,12 @@
    var reloadSearchUI = function(event) {
      event.preventDefault();
      var anchor = $(event.target).closest('a');
--    anchor.length && anchor.first().trigger('xwiki:search:update', anchor.attr('href'));
++    anchor.length && $(document).trigger('xwiki:search:update', anchor.attr('href'));
    };
    // Others (e.g. a custom facet) can trigger a search UI update by firing this event.
    $(document).on('xwiki:search:update', function(event, viewURL) {
--    pushSearchUIState(viewURL, `[data-facetvalue='${CSS.escape(event.target.dataset.facetvalue)}']`);
++    pushSearchUIState(viewURL);
    });
    $(window).on('popstate', function(event) {
@@ -185,41 +185,10 @@
    });
    var enhanceSearchUI = function() {
--    // Enhance search options
--    document.querySelectorAll('input.options-item').forEach(function (option){
--      option.addEventListener('change', function() {
--        let queryFieldName = this.getAttribute('data-query-name');
--        let queryField = document.querySelector('input[name="' + queryFieldName + '"]');
--        queryField.value = this.checked ? 'true' : 'false';
--        // We want to build the URL the same way it's done in the velocimacro #extendQueryString
--        // We retrieve the search parameters of the latest request
--        let params = new URLSearchParams(window.location.search);
--        let formParams = new URLSearchParams(new FormData(this.form));
--        // We replace the existing parameters with their value from the form
--        for (let param of formParams.keys()) {
--          if (params.has(param)) params.delete(param);
--          for (let paramValue of formParams.getAll(param)) {
--            params.append(param,paramValue);
--          }
--        }
--        pushSearchUIState(window.location.pathname + '?' + params.toString(),
--          'input[data-query-name="' + queryFieldName + '"]');
--      });
--    });
--    // Enhance search result sorting
--    document.querySelectorAll('.search-results-sort select#sort-by-input, ' +
--     '.search-results-sort input#sort-order-input').forEach(function (sortInput){
--      sortInput.addEventListener('change', function() {
--        let baseURL = removeQueryString(this.form.getAttribute('action'));
--        pushSearchUIState(baseURL + "?" +
--          new URLSearchParams(new FormData(this.form)).toString(),
--          'input[data-query-name="' + this.getAttribute('name') + '"]');
--      });
--     });
--
      $('.search-result-highlightAll').each(enhanceSearchResultHighlights);
      $('.search-facets').each(enhanceSearchFacets);
      $([
++      '.search-results-sort a.sort-item',
        '.search-options a.options-item',
        '.pagination a',
        '.controlPagination a',

XWiki.StyleSheetExtension[0]

Code

@@ -1,7 +1,7 @@
  #template('colorThemeInit.vm')
  /* Hide the 'Created by', 'Modified by' and 'Tags' document sections. */
--.xdocLastModification, #xdocFooter {
++.xdocLastModification, .skin-colibri #document-info, #xdocFooter {
    display: none;
  }
  #document-title > h1 {
@@ -9,99 +9,86 @@
    margin-bottom: 0;
  }
--/**
-- * Layout for the search bar
-- */
--.search-bar {
--  margin: .5em 0;
--}
--
--@media (min-width: 768px) {
--  .search-bar {
--    max-width: 50%;
--  }
--}
--
  /**
-- * Layout for search controls (sort + options)
++ * Search form
   */
--.search-results-controls {
--  display: flex;
--  flex-wrap: wrap;
--  gap: 1em;
--
--  & label {
--    /* Reset the styles of the labels. */
--    margin: 0;
--    font-weight: unset;
--  }
++.skin-colibri .search-form {
++  /* There is no space after the title in Colibri. */
++  margin-top: 1.5em;
  }
--.search-results-sort,
--.search-options, .search-options > ul, .search-options > ul > li,
--.search-options > ul > li > label {
--  display: flex;
--  gap: .4em;
--  align-items: center;
++.skin-colibri .search-form input[type="search"] {
++  /* Colibri doesn't have the grid system. */
++  width: 50%;
  }
  /**
   * Sort
   */
--/* This select should be especially lightweight on the UI. We're removing the default border and shadow. */
--#sort-by-input {
--  cursor: pointer;
--  &:hover, &:focus {
--      cursor: pointer;
--  }
--}
--
--/* This checkbox input should be styled as a switch between ascending and descending states. */
--.search-results-sort #sort-order-input {
--  /* Hide the default checkbox. We rely on the style of the icon in its label to make it work. */
--  appearance: none;
++ul.search-results-sort {
++  color: $theme.textSecondaryColor;
++  font-size: .9em;
++  padding: 5px 0 2px 0;
    margin: 0;
  }
--
--#sort-by-input, .search-results-sort label:has(>#sort-order-input) {
--  /* We want most of the styles from "form-control", but not the shadow that comes from bootstrap. */
--  box-shadow: none;
--  & :hover,& :focus,& :focus-within {
--    border-color: var(--input-border-focus);
--  }
++.search-results-sort li {
++  display: inline;
++  list-style-type: none;
++  padding-left: 1.5em;
  }
--
--/* Flip the second icon so that it's the arrow going up and down. */
--.search-results-sort label #sort-order-input + * + * {
--  transform: scaleY(-1);
++.search-results-sort li:first-of-type {
++  padding: 0;
  }
--
--/* When the box is checked, we want to hide the first icon.
--When the box is not checked, we want to hide the second icon. */
--.search-results-sort label #sort-order-input:checked + *,
--.search-results-sort label #sort-order-input:not(:checked) + * + * {
--  display: none;
++a.sort-item {
++  color: inherit;
++  text-decoration: none;
  }
++a.sort-item:hover {
++  color: $theme.linkColor;
++  text-decoration: underline;
++}
++a.sort-item.active, a.sort-item.active:hover {
++  font-weight: bold;
++  color: $theme.textColor;
++  text-decoration: none;
++}
++.sort-item-order {
++  margin-left: .3em;
++}
  /**
   * Options
   */
--.search-options ul {
++ul.search-options {
++  color: $theme.textSecondaryColor;
++  font-size: .9em;
++  padding: 5px 0 2px 0;
    margin: 0;
++}
++.search-options li {
++  display: inline;
++  list-style-type: none;
++  padding-left: 1.5em;
++}
++.search-options li:first-of-type {
    padding: 0;
--
--  & input[type="checkbox"] {
--    position: unset;
--    margin: 0;
--  }
--
--  & label {
--    margin-right: 1em;
--  }
  }
++a.options-item {
++  color: inherit;
++  text-decoration: none;
++}
++a.options-item:hover {
++  color: $theme.linkColor;
++  text-decoration: underline;
++}
++a.options-item.active, a.options-item.active:hover{
++  font-weight: bold;
++  color: $theme.textColor;
++  text-decoration: none;
++}
  /**
   * Search Results
@@ -111,6 +111,12 @@
    margin-top: 1em;
  }
++/* Colibri skin doesn't have the grid system. */
++.skin-colibri .search-results-left {
++  margin: 0.5em 20em 0.5em 0;
++  padding: 0.5em 0.5em 0.5em 0;
++}
++
  .search-results {
    padding: .3em 0 .8em 0;
  }
@@ -174,8 +174,6 @@
  dl.search-result-highlights > dt {
    margin-top: .3em;
--  color: var(--text-muted);
--  font-weight: var(--font-weight-semibold);
  }
  blockquote.search-result-highlight {
@@ -196,6 +196,11 @@
    font-weight: bold;
  }
++dl.search-result-highlights > dt {
++  color: $theme.textSecondaryColor;
++  font-weight: normal;
++}
++
  dl.search-result-highlights.preview dt,
  dl.search-result-highlights.preview dd > * {
    display: none;
@@ -202,10 +202,17 @@
  }
  dl.search-result-highlights.preview dt:first-of-type,
--dl.search-result-highlights.preview dd:first-of-type blockquote:first-of-type {
++dl.search-result-highlights.preview dd:first-of-type blockquote:first-of-type,
++/* Workaround for IE8 which doesn't support :first-of-type CSS selector. */
++dl.search-result-highlights.preview dt.first,
++dl.search-result-highlights.preview dd.first blockquote.first {
    display: block;
  }
++a.search-result-highlightAll:after {
++  content: ' \bb';
++}
++
  .search-result-debug {
    white-space: pre;
  }
@@ -214,25 +214,40 @@
   * Facets
   */
--.search-facets-header{
--  border-bottom: 1px solid var(--xwiki-border-color);
++.search-facets {
++  background-color: $theme.backgroundSecondaryColor;
++  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
++  /* Leave space for the bottom shadow. */
++  margin-bottom: 1em;
++  border-radius: 7px;
  }
++/* Colibri skin doesn't have the grid system. */
++.skin-colibri .search-facets {
++  float: right;
++  max-width: 19.5em;
++  width: 19.5em;
++}
--.search-facets-header strong {
--  font-size: 1.25em;
++.search-facets-header,
++.search-facets-actions,
++.search-facet {
++  border-bottom: 1px solid $theme.borderColor;
++  border-top: 1px solid $theme.pageContentBackgroundColor;
++  position: relative;
  }
  .search-facets-header,
  .search-facets-actions {
--  padding: .5em 0;
++  padding: 0.5em 1em;
  }
--
  .search-facet {
--  padding: .2em 0;
--  display: flex;
--  flex-direction: column;
++  padding: 0.5em .8em;
  }
++.search-facets-header {
++  border-top: none;
++}
++
  .search-facets-header > p,
  .search-facets-actions > p {
    /* The wiki syntax generates paragraphs which have bottom margin. */
@@ -243,6 +243,16 @@
    font-size: .8em;
  }
++.search-facets-actions a {
++  color: $theme.textSecondaryColor;
++  text-decoration: none;
++}
++
++.search-facets-actions a:hover {
++  color: $theme.linkColor;
++  text-decoration: underline;
++}
++
  .search-facets-action-collapseAll,
  .search-facets-action-expandAll {
    float: right;
@@ -254,28 +254,33 @@
    margin: 0;
  }
--.search-facet-header, .search-facet-body {
--  padding-left: .5em;
--  border: 1px solid var(--xwiki-border-color);
--  border-radius: var(--border-radius-small);
++.search-facet:last-of-type {
++  border-bottom: none;
  }
  .search-facet-header {
--  background-color: var(--xwiki-background-secondary-color);
--}
--
--.search-facet-header label {
    color: $theme.titleColor;
    cursor: pointer;
++  line-height: 1.4em;
++  margin: 0 .2em;
    display: flex;
    justify-content: space-between;
--  align-items: center;
++  position: relative;
  }
++.search-facet:last-of-type .search-facet-header:after {
++  border: medium none;
++}
++
++.search-facet.expanded:last-of-type .search-facet-header:after {
++  border-bottom: 1px dotted $theme.pageContentBackgroundColor;
++  border-top: 1px dotted $theme.borderColor;
++}
++
  .search-facet-body {
--  border-top-width: 0;
--  border-top-left-radius: 0;
--  border-top-right-radius: 0;
++  overflow: hidden; /* required for effect */
++  display: none;
++  margin-top: .5em;
  }
  .search-facet-body ul,
@@ -286,46 +286,37 @@
  .search-facet-body li {
    display: flex;
    flex-wrap: wrap;
--  padding: .3em .5em;
++  padding: .1em .2em;
  }
--.search-facet .search-facet-header  .facet-toggle, button.facet-value-toggle {
++.search-facet .search-facet-header .facet-toggler, button.facet-value-toggler {
    background: transparent;
    transition: background-color .2s ease-in-out;
  }
--.search-facet .search-facet-header .facet-toggle:active, button.facet-value-toggle:active {
++.search-facet .search-facet-header .facet-toggler:active, button.facet-value-toggler:active {
    box-shadow: unset;
  }
--.search-facet .search-facet-header .facet-toggle.collapsed > span, button.facet-value-toggle > span,
--.search-facet .search-facet-header .facet-toggle.collapsed > img, button.facet-value-toggle > img {
++.search-facet .search-facet-header .facet-toggler > span, button.facet-value-toggler > span,
++.search-facet .search-facet-header .facet-toggler > img, button.facet-value-toggler > img {
    transform: rotate(90deg);
  }
--.search-facet .search-facet-header .facet-toggle > span, .expanded > button.facet-value-toggle > span,
--.search-facet .search-facet-header .facet-toggle > img, .expanded > button.facet-value-toggle > img {
++.search-facet.expanded .search-facet-header .facet-toggler > span, .expanded > button.facet-value-toggler > span,
++.search-facet.expanded .search-facet-header .facet-toggler > img, .expanded > button.facet-value-toggler > img {
    transform: rotate(0deg);
  }
--@media (prefers-reduced-motion: no-preference) {
--  .search-facet .search-facet-header .facet-toggle > span, button.facet-value-toggle > span,
--  .search-facet .search-facet-header .facet-toggle > img, button.facet-value-toggle > img {
++@media not (prefers-reduced-motion) {
++  .search-facet .search-facet-header .facet-toggler > span, button.facet-value-toggler > span,
++  .search-facet .search-facet-header .facet-toggler > img, button.facet-value-toggler > img {
      transition: transform 0.2s ease;
    }
  }
--.search-facet:has(.search-facet-body.collapse.in),
--.search-facet:has(.search-facet-body.collapsing) {
--  & .search-facet-header {
--    border-bottom-width: 0;
--    border-bottom-left-radius: 0;
--    border-bottom-right-radius: 0;
--
--    & label {
--      font-weight: var(--font-weight-semibold);
--    }
--  }
++.search-facet.expanded .search-facet-body {
++  display: block;
  }
  .search-facet-body ul, .search-facet-body ul.users {
@@ -336,6 +336,10 @@
    margin: .5em 0;
  }
++.search-facet-body li:hover {
++  background-color: $theme.highlightColor;
++}
++
  .search-facet-body input[type="checkbox"] {
    margin: .2em 0;
  }
@@ -360,8 +360,7 @@
  }
  .search-facet-body .itemName,
--.search-facet-body .itemNameempty,
--.search-facet-body .facet-value-toggle,
++.search-facet-body .facet-value-toggler,
  .search-facet-body .more {
    /* Remove link styling */
    color: $theme.textColor;
@@ -379,11 +379,8 @@
  }
  .search-facet-body .itemCount {
--  padding: .1em .5em;
++  padding: .1em 0;
    margin-left: auto;
--  background-color: var(--nav-link-hover-bg);
--  /* We want those item count blocks to be pill shaped. */
--  border-radius: 1em / 50%;
  }
  @media (max-width: 768px) {
@@ -403,6 +403,17 @@
  }
  /**
++ * Fix the breadcrumb in Colibri skin.
++ */
++.skin-colibri .breadcrumb > li {
++  display: inline;
++}
++.skin-colibri .breadcrumb > li + li:before {
++  color: $theme.textSecondaryColor;
++  content: ' \00BB  ';
++}
++
++/**
   * Miscellaneous
   */
@@ -411,3 +411,13 @@
    padding-left: 0;
  }
++.paginationFilter .resultsNo,
++.paginationFilter .controlPagination,
++.paginationFilter .pagination {
++  line-height: 22px;
++}
++
++.iconRSS {
++  background: url("$xwiki.getSkinFile('icons/silk/feed.png')") no-repeat scroll 0 0 transparent;
++  padding-left: 20px;
++}