JAVASCRIPT   118

jet search

Guest on 9th May 2022 02:03:19 AM

  1. (function( $, elementor ) {
  2.  
  3.         'use strict';
  4.  
  5.         var JetSearch = {
  6.  
  7.                 init: function() {
  8.  
  9.                         var widgets = {
  10.                                 'jet-ajax-search.default': JetSearch.widgetAjaxSearch
  11.                         };
  12.  
  13.                         $.each( widgets, function( widget, callback ) {
  14.                                 elementor.hooks.addAction( 'frontend/element_ready/' + widget, callback );
  15.                         } );
  16.                 },
  17.  
  18.                 widgetAjaxSearch: function( $scope ) {
  19.                         var settings = {
  20.                                         searchClass:        '.jet-ajax-search',
  21.                                         searchFormClass:    '.jet-ajax-search__form',
  22.                                         fieldsHolderClass:  '.jet-ajax-search__fields-holder',
  23.                                         inputClass:         '.jet-ajax-search__field',
  24.                                         settingsInput:      'input[name="jet_ajax_search_settings"]',
  25.                                         submitClass:        '.jet-ajax-search__submit',
  26.                                         chosenClass:        '.jet-ajax-search__categories select[name="jet_ajax_search_categories"]',
  27.                                         resultsAreaClass:   '.jet-ajax-search__results-area',
  28.                                         resultsHeaderClass: '.jet-ajax-search__results-header',
  29.                                         resultsFooterClass: '.jet-ajax-search__results-footer',
  30.                                         listHolderClass:    '.jet-ajax-search__results-holder',
  31.                                         listClass:          '.jet-ajax-search__results-list',
  32.                                         listInnerClass:     '.jet-ajax-search__results-list-inner',
  33.                                         listSlideClass:     '.jet-ajax-search__results-slide',
  34.                                         itemClass:          '.jet-ajax-search__results-item',
  35.                                         countClass:         '.jet-ajax-search__results-count',
  36.                                         messageHolderClass: '.jet-ajax-search__message',
  37.                                         fullResultsClass:   '.jet-ajax-search__full-results',
  38.                                         navigationClass:    '.jet-ajax-search__navigation-holder',
  39.                                         navButtonClass:     '.jet-ajax-search__navigate-button',
  40.                                         bulletClass:        '.jet-ajax-search__bullet-button',
  41.                                         numberClass:        '.jet-ajax-search__number-button',
  42.                                         prevClass:          '.jet-ajax-search__prev-button',
  43.                                         nextClass:          '.jet-ajax-search__next-button',
  44.                                         activeNavClass:     '.jet-ajax-search__active-button',
  45.                                         disableNavClass:    '.jet-ajax-search__navigate-button-disable',
  46.                                         spinnerClass:       '.jet-ajax-search__spinner-holder',
  47.                                         handlerId:          'jetSearchSettings',
  48.                                         isRtl:              elementor.config.is_rtl ? elementor.config.is_rtl : $( 'body' ).hasClass( 'rtl' )
  49.                                 };
  50.  
  51.                         $scope.find( settings.searchClass ).jetAjaxSearch( settings );
  52.  
  53.                         var $chosenSelect = $scope.find( settings.chosenClass );
  54.  
  55.                         if ( $chosenSelect[0] ) {
  56.                                 $chosenSelect.chosen( {
  57.                                         disable_search: true,
  58.                                         placeholder_text: '',
  59.                                         placeholder_text_single: ''
  60.                                 } );
  61.                         }
  62.                 }
  63.         };
  64.  
  65.         $( window ).on( 'elementor/frontend/init', JetSearch.init );
  66.  
  67.         /**
  68.          * JetAjaxSearch jQuery Plugin
  69.          *
  70.          * @param args
  71.          */
  72.         $.fn.jetAjaxSearch = function( args ) {
  73.                 var self              = this[0],
  74.                         settings          = args,
  75.                         timer             = null,
  76.                         itemTemplate      = null,
  77.                         resultsArea       = $( settings.resultsAreaClass, self ),
  78.                         resultsHolder     = $( settings.listHolderClass, resultsArea ),
  79.                         resultsHeader     = $( settings.resultsHeaderClass, resultsArea ),
  80.                         resultsFooter     = $( settings.resultsFooterClass, resultsArea ),
  81.                         countHolder       = $( settings.countClass, resultsArea ),
  82.                         fullResults       = $( settings.fullResultsClass, resultsArea ),
  83.                         resultsList       = $( settings.listClass, resultsArea ),
  84.                         resultsListInner  = $( settings.listInnerClass, resultsArea ),
  85.                         resultsHeaderNav  = $( settings.navigationClass, resultsHeader ),
  86.                         resultsFooterNav  = $( settings.navigationClass, resultsFooter ),
  87.                         messageHolder     = $( settings.messageHolderClass, resultsArea ),
  88.                         spinner           = $( settings.spinnerClass, resultsArea ),
  89.                         data              = $( self ).data( 'settings' ) || [],
  90.                         formFocusClass    = settings.searchFormClass.replace( '.', '' ) + '--focus',
  91.                         currentPosition   = 1;
  92.  
  93.                 if ( !self.isInit ) {
  94.                         self.isInit = true;
  95.  
  96.                         /**
  97.                          * Ajax request instance
  98.                          */
  99.                         self.ajaxRequest = null;
  100.  
  101.                         /**
  102.                          * Ajax settings from localized global variable
  103.                          */
  104.                         self.ajaxSettings = window[ settings.handlerId ] || {};
  105.  
  106.                         self.inputChangeHandler = function( event ) {
  107.                                 var value = $( event.target ).val();
  108.  
  109.                                 if ( 2 > value.length ) {
  110.                                         self.hideList();
  111.                                         return false;
  112.                                 }
  113.  
  114.                                 resultsHolder.removeClass( 'show' );
  115.                                 self.outputMessage( '', '' );
  116.                                 resultsListInner.css( 'transform', 'translateX(0)' );
  117.                                 resultsList.css( 'height', 'auto' );
  118.  
  119.                                 if ( value ) {
  120.                                         self.showList();
  121.                                         spinner.addClass( 'show' );
  122.  
  123.                                         clearTimeout( timer );
  124.                                         timer = setTimeout( function() {
  125.                                                 data.value = value;
  126.                                                 data.deviceMode = elementor.getCurrentDeviceMode() ? elementor.getCurrentDeviceMode() : false;
  127.                                                 self.ajaxSendData( data );
  128.                                         }, 450 );
  129.                                 } else {
  130.                                         self.hideList();
  131.                                 }
  132.                         };
  133.  
  134.                         self.successCallback = function( response ) {
  135.                                 if ( ! response.success ) {
  136.                                         spinner.removeClass( 'show' );
  137.                                         self.outputMessage( data.server_error, 'error show' );
  138.                                         return;
  139.                                 }
  140.  
  141.                                 var responseData = response.data,
  142.                                         error        = responseData.error,
  143.                                         message      = responseData.message,
  144.                                         posts        = responseData.posts,
  145.                                         post         = null,
  146.                                         outputHtml   = '',
  147.                                         listItemHtml = '',
  148.                                         listHtml     = '<div class="' + settings.listSlideClass.replace( '.', '' ) + '">%s</div>';
  149.  
  150.                                 resultsHolder.removeClass( 'show' );
  151.                                 spinner.removeClass( 'show' );
  152.                                 currentPosition = 1;
  153.  
  154.                                 resultsListInner.html( '' );
  155.  
  156.                                 if ( 0 !== responseData.post_count && !error ) {
  157.  
  158.                                         messageHolder.removeClass( 'show' );
  159.                                         itemTemplate = wp.template( 'jet-ajax-search-results-item' );
  160.  
  161.                                         for ( post in posts ) {
  162.                                                 listItemHtml += itemTemplate( posts[post] );
  163.  
  164.                                                 if ( (parseInt( post ) + 1) % responseData.limit_query == 0 || parseInt( post ) === posts.length - 1 ) {
  165.                                                         outputHtml += listHtml.replace( '%s', listItemHtml );
  166.                                                         listItemHtml = '';
  167.                                                 }
  168.                                         }
  169.  
  170.                                         $( 'span', countHolder ).html( responseData.post_count );
  171.                                         resultsListInner
  172.                                                 .html( outputHtml )
  173.                                                 .data( 'columns', responseData.columns );
  174.  
  175.                                         resultsHeaderNav.html( responseData.results_navigation.in_header );
  176.                                         resultsFooterNav.html( responseData.results_navigation.in_footer );
  177.  
  178.                                         if ( !countHolder[0] && !responseData.results_navigation.in_header ) {
  179.                                                 resultsHeader.addClass( 'is-empty' );
  180.                                         } else {
  181.                                                 resultsHeader.removeClass( 'is-empty' );
  182.                                         }
  183.  
  184.                                         if ( !fullResults[0] && !responseData.results_navigation.in_footer ) {
  185.                                                 resultsFooter.addClass( 'is-empty' );
  186.                                         } else {
  187.                                                 resultsFooter.removeClass( 'is-empty' );
  188.                                         }
  189.  
  190.                                         resultsHolder.addClass( 'show' );
  191.                                         resultsListInner.imagesLoaded( function() {
  192.                                                 resultsList.css( 'height', $( settings.listSlideClass, resultsListInner ).eq(0).outerHeight() );
  193.                                         } );
  194.  
  195.                                 } else {
  196.                                         self.outputMessage( message, 'show' );
  197.                                         //self.hideList();
  198.                                 }
  199.                         };
  200.  
  201.                         self.errorCallback = function( jqXHR ) {
  202.                                 if ( 'abort' !== jqXHR.statusText ) {
  203.                                         spinner.removeClass( 'show' );
  204.                                         self.outputMessage( data.server_error, 'error show' );
  205.                                 }
  206.                         };
  207.  
  208.                         self.ajaxSendData = function( sendData ) {
  209.                                 var ajaxData = {
  210.                                         action: self.ajaxSettings.action,
  211.                                         nonce: self.ajaxSettings.nonce,
  212.                                         data: sendData || {}
  213.                                 };
  214.  
  215.                                 self.ajaxRequest = jQuery.ajax( {
  216.                                         type: 'GET',
  217.                                         url: self.ajaxSettings.ajaxurl,
  218.                                         data: ajaxData,
  219.                                         dataType: 'json',
  220.                                         cache: false,
  221.                                         processData: true,
  222.                                         beforeSend: function( jqXHR, ajaxSettings ) {
  223.                                                 if ( null !== self.ajaxRequest ) {
  224.                                                         self.ajaxRequest.abort();
  225.                                                 }
  226.                                         },
  227.                                         error: function( jqXHR, textStatus, errorThrown ) {
  228.                                                 self.errorCallback( jqXHR );
  229.                                         },
  230.                                         success: function( response, textStatus, jqXHR ) {
  231.                                                 self.successCallback( response );
  232.                                         }
  233.                                 } );
  234.                         };
  235.  
  236.                         self.hideList = function() {
  237.                                 resultsArea.removeClass( 'show' );
  238.                         };
  239.  
  240.                         self.showList = function() {
  241.                                 resultsArea.addClass( 'show' );
  242.                         };
  243.  
  244.                         self.focusHandler = function( event ) {
  245.                                 var value = event.target.value;
  246.  
  247.                                 $( settings.searchFormClass, self ).addClass( formFocusClass );
  248.  
  249.                                 if ( 2 > value.length ) {
  250.                                         return;
  251.                                 }
  252.  
  253.                                 self.showList();
  254.                         };
  255.  
  256.                         self.blurHandler = function( event ) {
  257.                                 $( settings.searchFormClass, self ).removeClass( formFocusClass );
  258.                         };
  259.  
  260.                         self.outputMessage = function( message, messageClass ) {
  261.                                 message = message.replace( /\\/g, '' ); // remove slashes
  262.                                 message = $( "<div/>" ).html( message ).text();
  263.                                 message = message.replace( /\\*"/g, '' );
  264.                                 messageHolder.removeClass( 'error show' ).addClass( messageClass ).html( message );
  265.                         };
  266.  
  267.                         self.formClick = function( event ) {
  268.                                 event.stopPropagation();
  269.                         };
  270.  
  271.                         self.clickFullResults = function( event ) {
  272.                                 var searchInput = $( settings.inputClass, self );
  273.  
  274.                                 event.preventDefault();
  275.  
  276.                                 if ( searchInput.val().length != 0) {
  277.                                         $( settings.searchFormClass, self ).submit();
  278.                                 }
  279.                         };
  280.  
  281.                         self.changeSlide = function( number ) {
  282.                                 var currentSlide = $( settings.listSlideClass, resultsListInner ).eq( number ),
  283.                                         direction = settings.isRtl ? 1 : -1,
  284.                                         position = number * 100 * direction;
  285.  
  286.                                 currentSlide.scrollTop( 0 );
  287.                                 resultsListInner.css( 'transform', 'translateX(' + position + '%)' );
  288.                                 resultsList.css( 'height', currentSlide.outerHeight() );
  289.                         };
  290.  
  291.                         self.clickBulletHandler = function( event ) {
  292.                                 var target = $( event.target );
  293.  
  294.                                 currentPosition = target.data( 'number' );
  295.                                 self.syncNavigation();
  296.  
  297.                                 self.changeSlide( currentPosition - 1 );
  298.                         };
  299.  
  300.                         self.clickNavigationButtonHandler = function( event ) {
  301.                                 var target    = $( event.target ),
  302.                                         direction = target.data( 'direction' );
  303.  
  304.                                 currentPosition = currentPosition + direction;
  305.                                 self.syncNavigation();
  306.  
  307.                                 self.changeSlide( currentPosition - 1 );
  308.                         };
  309.  
  310.                         self.syncNavigation = function() {
  311.                                 var lastPosition = resultsListInner.data( 'columns' ),
  312.                                         disableClass = settings.disableNavClass.replace( '.', '' ),
  313.                                         activeClass  = settings.activeNavClass.replace( '.', '' );
  314.  
  315.                                 $( settings.activeNavClass, self ).removeClass( activeClass );
  316.                                 $( settings.disableNavClass, self ).removeClass( disableClass );
  317.  
  318.                                 $( settings.navButtonClass + '[data-number="' + currentPosition +'"]', self ).addClass( activeClass );
  319.  
  320.                                 if ( 1 === currentPosition ) {
  321.                                         $( settings.prevClass, self ).addClass( disableClass );
  322.                                 }
  323.  
  324.                                 if ( lastPosition === currentPosition ) {
  325.                                         $( settings.nextClass, self ).addClass( disableClass );
  326.                                 }
  327.                         };
  328.  
  329.                         self.formSubmit = function( event ) {
  330.                                 var value = event.target.value;
  331.  
  332.                                 if ( (2 > value.length || 0 === $( settings.itemClass, resultsListInner ).length) && (13 === event.keyCode || 'click' === event.type) ) {
  333.                                         return false;
  334.                                 } else {
  335.                                         if ( 13 === event.keyCode ) {
  336.                                                 event.preventDefault();
  337.                                                 $( settings.searchFormClass, self ).submit();
  338.                                         }
  339.                                 }
  340.                         };
  341.  
  342.                         self.changeHandler = function( event ) {
  343.                                 var target              = $( event.target ),
  344.                                         settingsInput       = $( settings.settingsInput, self ),
  345.                                         querySettings       = JSON.parse( settingsInput.val() ),
  346.                                         globalQuerySettings = $( self ).data( 'settings' );
  347.  
  348.                                 querySettings.category__in = target.val();
  349.                                 globalQuerySettings.category__in = target.val();
  350.  
  351.                                 settingsInput.val( JSON.stringify( querySettings ) );
  352.                                 $( self ).data( 'settings', globalQuerySettings );
  353.  
  354.                                 self.inputChangeHandler( { target: $( settings.inputClass, self ) } )
  355.                         };
  356.  
  357.                         self.chosenFocusHandler = function() {
  358.                                 self.hideList();
  359.                         };
  360.  
  361.                         self.setResultsAreaWidth = function() {
  362.  
  363.                                 if ( 'fields_holder' !== data.results_area_width_by ) {
  364.                                         return;
  365.                                 }
  366.  
  367.                                 resultsArea.css( 'width', $( settings.fieldsHolderClass, self ).outerWidth() );
  368.                         };
  369.  
  370.                         $( settings.inputClass, self )
  371.                                 .on( 'input' + settings.searchClass, self.inputChangeHandler )
  372.                                 .on( 'focus' + settings.searchClass, self.focusHandler )
  373.                                 .on( 'blur' + settings.searchClass, self.blurHandler )
  374.                                 .on( 'keypress' + settings.searchClass, self.formSubmit );
  375.  
  376.                         $( settings.submitClass, self ).on( 'click' + settings.searchClass, self.clickFullResults );
  377.  
  378.                         $( self )
  379.                                 .on( 'click' + settings.searchClass, self.formClick )
  380.                                 .on( 'touchend' + settings.searchClass, self.formClick )
  381.                                 .on( 'click' + settings.searchClass, settings.fullResultsClass, self.clickFullResults )
  382.                                 .on( 'click' + settings.searchClass, settings.countClass, self.clickFullResults )
  383.                                 .on( 'click' + settings.searchClass, settings.bulletClass, self.clickBulletHandler )
  384.                                 .on( 'click' + settings.searchClass, settings.numberClass, self.clickBulletHandler )
  385.                                 .on( 'click' + settings.searchClass, settings.prevClass + ':not( ' + settings.disableNavClass + ' )', self.clickNavigationButtonHandler )
  386.                                 .on( 'click' + settings.searchClass, settings.nextClass + ':not( ' + settings.disableNavClass + ' )', self.clickNavigationButtonHandler )
  387.                                 .on( 'change', settings.chosenClass, self.changeHandler )
  388.                                 .on( 'chosen:showing_dropdown', settings.chosenClass, self.chosenFocusHandler );
  389.  
  390.                         // If after reloading the page the value of the select is not '0'.
  391.                         if ( '0' !== $( settings.chosenClass, self ).val() ) {
  392.                                 $( settings.chosenClass, self ).trigger( 'change' );
  393.                         }
  394.  
  395.                         $( 'body' )
  396.                                 .on( 'click' + settings.searchClass, self.hideList )
  397.                                 .on( 'touchend' + settings.searchClass, self.hideList );
  398.  
  399.                         self.setResultsAreaWidth();
  400.                         $( window ).on( 'resize' + settings.searchClass, self.setResultsAreaWidth );
  401.  
  402.                 } else {
  403.                         return 'is init: true';
  404.                 }
  405.         };
  406.  
  407. }( jQuery, window.elementorFrontend ));

Raw Paste


Login or Register to edit or fork this paste. It's free.