edlp_d8/sites/all/modules/figli/edlp_search/assets/scripts/edlp_search.js

(function ($, Drupal, drupalSettings) {

  var settings = drupalSettings.edlp_search;
  var _$body = $('body');
  var _$container;
  var _$form;

  function init(){
    // console.log('EdlpSearch Init', settings);
    initEvents();
    initAjax();
  };

  function initEvents(){
    $('body')
      .on('new-content-ajax-loaded', initAjax)
      .on('edlp_search_search_form-col-closed', onSearchClosed);
  };

  function initAjax(){
    _$form = $('#edlp-search-form:not(.ajax-enabled)');
    if(!_$form.length) return false;

    console.log('EdlpSearch initAjaxForm()');
    _$form = $('#edlp-search-form:not(.ajax-enabled)')
      .on('submit', onSubmitForm)
      .addClass('ajax-enabled');
    _$container = _$form.parents('.row');
    if(!_$container.length){
      _$container = _$form.parent();
    }
  };

  function onSubmitForm(e){
    e.preventDefault();
    // console.log('onSubmitForm',e);
    var args = {};

    // search for key words
    args.keys = $('input[type="search"]', this).val();

    // entries filter
    args.entries = [];
    $('input[type="checkbox"]:checked', '#edit-entries').each(function(index, el) {
      args.entries.push($(this).val());
    });

    // langues
    args.langues = $('input[name="language"]', this).val();

    // genres
    args.genres = $('input[name="genres"]', this).val();

    console.log('EdlpSearch onSubmitForm() : args',args);

    if(args.keys.length > 2
      || args.entries.length > 0
      || args.langues.length > 2
      || args.genres.length > 2){
        loadResults(args);
    }

    return false;
  };

  function loadResults(args){
    console.log('EdlpSearch loadResults() : args', args);
    _$form.addClass('ajax-loading');
    _$body.addClass('ajax-loading');
    $('[theme="edlp_search_results"]', _$container).addClass('ajax-loading');
    var path = window.location.origin + drupalSettings.path.baseUrl +settings.results_ajax_url;
    $.getJSON(path, args)
      .done(function(data){
        onResultsLoaded(data);
      })
      .fail(function(jqxhr, textStatus, error){
        onResultsLoadFail(jqxhr, textStatus, error);
      });
  };

  function onResultsLoaded(data){
    console.log('EdlpSearch onResultsLoaded()', data);
    _$form.removeClass('ajax-loading');
    _$body.removeClass('ajax-loading');

    // insert results col
    $prev_results = $('[theme="edlp_search_results"]', _$container);
    if($prev_results.length){
      $prev_results.replaceWith(data.rendered);
    }else{
      _$container.append(data.rendered);
    }

    // trigger event
    _$body.trigger({
      'type':'search-results-loaded',
      'results':data.results_nids
    });


    // piwik
    if(typeof _paq !== 'undefined'){
      // page tracking
      // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
      // _paq.push(['setCustomUrl', state.url]);
      // _paq.push(['setDocumentTitle', data.title]);
      // _paq.push(['trackPageView']);

      // trackEvent(category, action, [name], [value])
      var search_name = data.keys+';'+data.langues+';'+data.genres+';'+data.entry_names.join(',');
      // _paq.push(['trackEvent', 'AjaxSearch', 'Results', search_name, data.results_nids.length]);
      // piwik track searches
      // trackSiteSearch(keyword, [category], [resultsCount])
      _paq.push(['trackSiteSearch', search_name, 'search', data.results_nids.length]);
    }
  };

  function onResultsLoadFail(jqxhr, textStatus, error){
    console.warn('EdlpSearch : search results ajax load failed : '+error, jqxhr.responseText);
  };

  function onSearchClosed(e){
    // console.log('Edlp Search onSearchClosed()');
    $('div[theme="edlp_search_results"]').remove();
    // trigger event
    _$body.trigger({'type':'search-closed'});
  }

  init();
})(jQuery, Drupal, drupalSettings);