_renderNavHandler(spec) {

    const {
      isFirstPage,
      thereAreMoreResults,
      bindings,
      offset,
      queryString
    } = spec;

    // CSS classes for template
    const css = {
      prev: 'ac-adapter-get-prev',
      next: 'ac-adapter-get-next',
      wrap: 'ac-adapter-get-more',
      more: 'ac-adapter-more-results',
      active: 'ac-adapter-get-active',
      left: "fa fa-caret-left", // icon
      right: "fa fa-caret-right"
    };

    // Access keys for navigation
    const keys = {
      prev: '<',
      next: '>'
    };

    //  UI messages
    const msg = {
      more: libreviews.msg('more results'),
      prev: libreviews.msg('load previous page', { accessKey: keys.prev }),
      next: libreviews.msg('load next page', { accessKey: keys.next })
    };

    // Templates
    const $navPlaceholder = $(`<div class="${css.prev}">&nbsp;</div>`),
      $navWrapper =
      $(`<div class="${css.wrap}"></div>`),
      $navMoreResultsText =
      $(`<div class="${css.more}">${msg.more}</div>`),
      $navPreviousPage =
      $(`<div accesskey="${keys.prev}" class="${css.prev} ${css.active}" ` +
        `title="${msg.prev}"><span class="${css.left}">&nbsp;</span></div>`),
      $navNextPage =
      $(`<div class="${css.next} ${css.active}" accesskey="${keys.next}" ` +
        `title="${msg.next}"><span class="${css.right}">&nbsp;</span></div>`);

    const $wrapper = $(this.rowWrapperEl),
      $getMore = $navWrapper.appendTo($wrapper);

    // Add "previous page" navigation
    if (!isFirstPage) {
      $navPreviousPage
        .appendTo($getMore)
        .click(() => this.requestFn(queryString, this.prevStack.pop()));
    }

    // The query helpfully returns an ordinal, the position of the result in
    // the result set _before_ the filter criteria (disambig pages etc.) are
    // applied. We can just continue from there.
    if (thereAreMoreResults) {
      const nextOffset = (offset || 0) +
        +bindings[this.adapter.displayResults].ordinal.value;

      // Add whitespace placeholder
      if (isFirstPage)
        $navPlaceholder
        .appendTo($getMore);

      // Add "MORE RESULTS" centered text
      $navMoreResultsText
        .appendTo($getMore);

      // Add "next page" navigation
      $navNextPage
        .appendTo($getMore)
        .click(() => {
          this.prevStack.push(offset);
          this.requestFn(queryString, nextOffset);
        });
    } else if (!isFirstPage) {
      // Add "MORE RESULTS" centered text
      $navMoreResultsText
        .appendTo($getMore);
    }
  }
/**
   * Render next/previous navigation within the autocomplete widget.
   *
   * @param {Object} spec
   *  Navigation settings
   * @param {Boolean} spec.isFirstPage
   *  First page of results doesn't get a "previous page" icon and click handler
   *  that calls {@link WikidataAutocompleteAdapter#_requestHandler} (previously
   *  loaded results are not cached)
   * @param {Boolean} spec.thereAreMoreResults
   *  If true, render "next page" icon and attach click handler that calls
   *  request handler
   * @param {Array} spec.bindings
   *  the `bindings` property of a Wikidata query service result from a SPARQL
   *  query - this contains the actual search result data
   * @param {Number} spec.offset
   *  the offset that was used for the search we're rendering navigation for
   * @param {String} spec.queryString
   *  the original (unescaped) query string, used by the click handler to
   *  fire off subsequent requests
   * @this WikidataAutocompleteAdapter#ac
   */
Render next/previous navigation within the autocomplete widget.
Render next / previous navigation within the autocomplete widget .
_renderNavHandler(spec) {
    const {
      isFirstPage,
      thereAreMoreResults,
      bindings,
      offset,
      queryString
    } = spec;
    const css = {
      prev: 'ac-adapter-get-prev',
      next: 'ac-adapter-get-next',
      wrap: 'ac-adapter-get-more',
      more: 'ac-adapter-more-results',
      active: 'ac-adapter-get-active',
      left: "fa fa-caret-left", 
      right: "fa fa-caret-right"
    };
    const keys = {
      prev: '<',
      next: '>'
    };
    const msg = {
      more: libreviews.msg('more results'),
      prev: libreviews.msg('load previous page', { accessKey: keys.prev }),
      next: libreviews.msg('load next page', { accessKey: keys.next })
    };
    const $navPlaceholder = $(`<div class="${css.prev}">&nbsp;</div>`),
      $navWrapper =
      $(`<div class="${css.wrap}"></div>`),
      $navMoreResultsText =
      $(`<div class="${css.more}">${msg.more}</div>`),
      $navPreviousPage =
      $(`<div accesskey="${keys.prev}" class="${css.prev} ${css.active}" ` +
        `title="${msg.prev}"><span class="${css.left}">&nbsp;</span></div>`),
      $navNextPage =
      $(`<div class="${css.next} ${css.active}" accesskey="${keys.next}" ` +
        `title="${msg.next}"><span class="${css.right}">&nbsp;</span></div>`);
    const $wrapper = $(this.rowWrapperEl),
      $getMore = $navWrapper.appendTo($wrapper);
    if (!isFirstPage) {
      $navPreviousPage
        .appendTo($getMore)
        .click(() => this.requestFn(queryString, this.prevStack.pop()));
    }
    if (thereAreMoreResults) {
      const nextOffset = (offset || 0) +
        +bindings[this.adapter.displayResults].ordinal.value;
      if (isFirstPage)
        $navPlaceholder
        .appendTo($getMore);
      $navMoreResultsText
        .appendTo($getMore);
      $navNextPage
        .appendTo($getMore)
        .click(() => {
          this.prevStack.push(offset);
          this.requestFn(queryString, nextOffset);
        });
    } else if (!isFirstPage) {
      $navMoreResultsText
        .appendTo($getMore);
    }
  }
_renderNavHandler ( spec ) { const { isFirstPage , thereAreMoreResults , bindings , offset , queryString } = spec ; const css = { prev : 'ac-adapter-get-prev' , next : 'ac-adapter-get-next' , wrap : 'ac-adapter-get-more' , more : 'ac-adapter-more-results' , active : 'ac-adapter-get-active' , left : "fa fa-caret-left" , right : "fa fa-caret-right" } ; const keys = { prev : '<' , next : '>' } ; const msg = { more : libreviews . msg ( 'more results' ) , prev : libreviews . msg ( 'load previous page' , { accessKey : keys . prev } ) , next : libreviews . msg ( 'load next page' , { accessKey : keys . next } ) } ; const $navPlaceholder = $ ( ` ${ css . prev } ` ) , $navWrapper = $ ( ` ${ css . wrap } ` ) , $navMoreResultsText = $ ( ` ${ css . more } ${ msg . more } ` ) , $navPreviousPage = $ ( ` ${ keys . prev } ${ css . prev } ${ css . active } ` + ` ${ msg . prev } ${ css . left } ` ) , $navNextPage = $ ( ` ${ css . next } ${ css . active } ${ keys . next } ` + ` ${ msg . next } ${ css . right } ` ) ; const $wrapper = $ ( this . rowWrapperEl ) , $getMore = $navWrapper . appendTo ( $wrapper ) ; if ( ! isFirstPage ) { $navPreviousPage . appendTo ( $getMore ) . click ( ( ) => this . requestFn ( queryString , this . prevStack . pop ( ) ) ) ; } if ( thereAreMoreResults ) { const nextOffset = ( offset || 0 ) + + bindings [ this . adapter . displayResults ] . ordinal . value ; if ( isFirstPage ) $navPlaceholder . appendTo ( $getMore ) ; $navMoreResultsText . appendTo ( $getMore ) ; $navNextPage . appendTo ( $getMore ) . click ( ( ) => { this . prevStack . push ( offset ) ; this . requestFn ( queryString , nextOffset ) ; } ) ; } else if ( ! isFirstPage ) { $navMoreResultsText . appendTo ( $getMore ) ; } }
Render next/previous navigation within the autocomplete widget.
Render next / previous navigation within the autocomplete widget .
// CSS classes for template // icon // Access keys for navigation //  UI messages // Templates // Add "previous page" navigation // The query helpfully returns an ordinal, the position of the result in // the result set _before_ the filter criteria (disambig pages etc.) are // applied. We can just continue from there. // Add whitespace placeholder // Add "MORE RESULTS" centered text // Add "next page" navigation // Add "MORE RESULTS" centered text