Source: src/js/views/search/SorterView.js

/*global define */
define(["backbone"], function (Backbone) {
  "use strict";
/**
  * @class SorterView
  * @classdesc A view that displays a sort controller and sets the sort order on the attached {@link SolrResults} collection.
  * @name SorterView
  * @extends Backbone.View
  * @constructor
  * @since 2.22.0
  * @classcategory Views/Search
  * */
  return Backbone.View.extend(
    /**
     * @lends SorterView.prototype
     */ {
      /**
       * A reference to the {@link SolrResults} collection that this sorter displays and controls.
       * @type {SolrResults}
       */
      searchResults: null,

      /**
       * A list of sort order options to display in this view.
       * @typedef {Object} SearchSortOptions
       * @property {string} value The sort value that will be sent directly to the search index in the query string.
       * @property {string} label The name of the sort option that will be shown to the user.
       * @since 2.22.0
       */
      sortOptions: [
        { value: "dateUploaded+desc", label: "Most recent" },
        { value: "id+asc", label: "Identifier (a-z)" },
        { value: "titlestr+asc", label: "Title (a-z)" },
        { value: "authorSurNameSort+asc", label: "Author (a-z)" },
      ],

      tagName: "div",
      className: "sorter-view",

      events: {
        change: "setSort",
      },

      /**
       * Renders the view
       */
      render: function () {
        let select = document.createElement("select");
        select.setAttribute("id", "sortOrder");

        for (let opt of this.sortOptions) {
          select.insertAdjacentHTML(
            "beforeend",
            `<option value="${opt.value}">${opt.label}</option>`
          );
        }

        this.el.replaceChildren(select);
      },

      /**
       * Sets the sort order on the {@link SolrResults} when the sort is changed in the UI.
       * @param {Event} e
       */
      setSort: function (e) {
        this.searchResults.setSort(e.target.value);
      },
    }
  );
});