templates/ContentBlock/headerJS.html.twig line 1

Open in your IDE?
  1. <style>
  2.     ._resultsContainerBlink {
  3.         animation: resultsContainerBlinker 1s linear infinite;
  4.     }
  5.     @keyframes resultsContainerBlinker {
  6.         50% {
  7.             opacity: 0.3;
  8.         }
  9.     }
  10. </style>
  12. <script>
  13.     /****************************************************************************************/
  14.     /*                         Content block common JS                                      */
  15.     /****************************************************************************************/
  16.     (function(window, $){
  17.         const resultsContainer = function(elem, options){
  18.             this.elem = elem;
  19.             this.$elem = $(elem);
  20.             this.$elem.data('plugin.resultsContainer', this);
  21.             this.options = options;
  22.             this.cachedPages = {}; // Cache object to store preloaded pages
  23.             this.init();
  24.         };
  26.         resultsContainer.prototype = {
  27.             defaults: {
  28.                 debug: false, // when true, it will set a border to every results container, and highlight it everytime an update/reload action takes place
  29.                 infinite_scroll: false,
  30.                 isSentinel: null, // infinite scroll sentinel
  31.                 observer: null, // infinite scroll observer for sentinel
  32.                 var1: false,
  33.                 var2: []
  34.             },
  35.             init: function(){
  36.                 let _this = this;
  37.                 _this.config = $.extend({}, _this.defaults, _this.options);
  38.                 if(_this.$elem.hasClass('_iscroll'))
  39.                 {
  40.                     _this.config.infinite_scroll = true;
  42.                     if(window.history.state && window.history.state.htmlContent)
  43.                     {
  44.                         _this.$elem.html(window.history.state.htmlContent);
  45.                     }
  47.                     _this.config.$sentinel = $('<div/>').addClass('_scroll_sentinel');
  48.                     let $_sentinel = _this.$elem.find('._scroll_sentinel');
  49.                     if($_sentinel.length)
  50.                     {
  51.                         _this.config.$sentinel = $_sentinel;
  52.                     } else {
  53.                         _this.$elem.append(_this.config.$sentinel);
  54.                     }
  55.                     _this.config.$sentinel.data('isLoading', false);
  57.                     _this.initSentinel();
  59.                     _this.$elem.find('._goTop').on('click', function(e){
  60.                         e.preventDefault();
  61.                         $('html, body').animate({scrollTop: _this.$elem.find('._xlabs_results').offset().top - parseInt(_this.config.pagination.auto_scroll_top)}, 100);
  62.                     });
  63.                 }
  65.                 // Preload first page
  66.                 if(_this.$elem.hasClass('_iload'))
  67.                 {
  68.                     _this.cachedPages[1] = _this.$elem.find('._xlabs_results').html();
  69.                 }
  71.                 // Pagination
  72.                 _this.config.pagination = JSON.parse(_this.$elem.attr('data-pagination'));
  73.                 if(_this.config.pagination.ajax_pagination)
  74.                 {
  75.                     $(document).on('click', '[data-container-id="' + _this.$elem.attr('data-container-id') + '"] ._xlabs_results .pageBtn', function(e){
  76.                         e.preventDefault();
  77.                         let btn = $(this);
  78.                         let results = _this.$elem.resultsContainer();
  79.                         results.setParam('page', btn.attr('data-page'));
  80.                         results.reload(false, function(){
  81.                             if(_this.config.pagination.auto_scroll_top)
  82.                             {
  83.                                 $('html, body').animate({scrollTop: _this.$elem.find('._xlabs_results').offset().top - parseInt(_this.config.pagination.auto_scroll_top)}, 100);
  84.                             }
  85.                             if(_this.config.pagination.ajax_pagination_callback)
  86.                             {
  87.                                 if(typeof _this.config.pagination.ajax_pagination_callback === 'function')
  88.                                 {
  89.                                     _this.config.pagination.ajax_pagination_callback();
  90.                                 }
  91.                             }
  92.                             //_this.preloadNextPage(); // Preload the next page after reloading
  93.                         });
  94.                     });
  96.                     _this.preloadNextPage(); // Preload the next page on initialization
  97.                 }
  99.                 if(this.config.debug)
  100.                 {
  101.                     this.enterDebug();
  102.                 }
  103.                 return this;
  104.             },
  105.             update: function(aParams, _fnCallback = false){ // reload with updated params
  106.                 let _this = this;
  107.                 let container = this.$elem;
  108.                 let config = this.config;
  109.                 this.setParams(aParams);
  110.                 container.css('opacity', '.6');
  111.                 _this.stopSentinel();
  112.                 $.ajax({
  113.                     url: container.attr('data-ajax-path'),
  114.                     data: {
  115.                         aParams: aParams
  116.                     },
  117.                     type: 'post',
  118.                     dataType: 'html',
  119.                     success: function(data){
  120.                         if(_this.config.infinite_scroll)
  121.                         {
  122.                             container.find('._pagination').remove();
  123.                             container.find('._search_totals').remove();
  124.                             container.find('._xlabs_results').append(data);
  125.                             _this.initSentinel();
  126.                             _this.config.$sentinel.data('isLoading', false);
  127.                             //_this.$elem.find('.preloader').remove();
  128.                             _this.$elem.find('.preloader').addClass('d-none');
  129.                             window.history.replaceState({
  130.                                 htmlContent: _this.$elem.html()
  131.                             }, document.title, window.location.href);
  132.                         } else {
  133.                             container.find('._xlabs_results').html(data);
  134.                         }
  135.                         container.css('opacity', '1');
  136.                         if(config.debug)
  137.                         {
  138.                             _this.blink();
  139.                             console.log('Updated ' + aParams['container_id']);
  140.                         }
  142.                         if(typeof _fnCallback == 'function')
  143.                         {
  144.                             _fnCallback();
  145.                         }
  146.                         _this.preloadNextPage(); // Preload the next page after updating
  147.                     },
  148.                     error: function(){
  149.                         container.css('opacity', '1');
  150.                     }
  151.                 });
  152.             },
  153.             reload: function(reset = false, _fnCallback = false){ // keeping current params; when reset true, will use original request params
  154.                 let _this = this;
  155.                 let container = this.$elem;
  156.                 let config = this.config;
  157.                 let aParams = reset ? this.getInitialParams() : this.getParams();
  158.                 container.css('opacity', '.6');
  159.                 _this.stopSentinel();
  160.                 if(_this.cachedPages[aParams.page])
  161.                 {
  162.                     if(_this.config.infinite_scroll)
  163.                     {
  164.                         container.find('._pagination').remove();
  165.                         container.find('._search_totals').remove();
  166.                         container.find('._xlabs_results').append(_this.cachedPages[aParams.page]);
  167.                         _this.initSentinel();
  168.                         _this.config.$sentinel.data('isLoading', false);
  169.                         _this.$elem.find('.preloader').addClass('d-none');
  170.                         _this.$elem.find('._goTop').removeClass('d-none');
  171.                         window.history.replaceState({
  172.                             htmlContent: _this.$elem.html()
  173.                         }, document.title, window.location.href);
  174.                     } else {
  175.                         container.find('._xlabs_results').html(_this.cachedPages[aParams.page]);
  176.                     }
  177.                     container.css('opacity', '1');
  178.                     if(config.debug)
  179.                     {
  180.                         _this.blink();
  181.                         console.log('Reloaded ' + aParams['container_id']);
  182.                     }
  183.                     if(typeof _fnCallback == 'function')
  184.                     {
  185.                         _fnCallback();
  186.                     }
  187.                     //if($(_this.cachedPages[aParams.page]).find('._results_item').length)
  188.                     //{
  189.                         _this.preloadNextPage();
  190.                     //}
  191.                 } else {
  192.                     $.ajax({
  193.                         url: container.attr('data-ajax-path'),
  194.                         data: {
  195.                             aParams: aParams
  196.                         },
  197.                         type: 'post',
  198.                         dataType: 'html',
  199.                         success: function(data){
  200.                             if(_this.config.infinite_scroll)
  201.                             {
  202.                                 container.find('._pagination').remove();
  203.                                 container.find('._search_totals').remove();
  204.                                 container.find('._xlabs_results').append(data);
  205.                                 _this.initSentinel();
  206.                                 _this.config.$sentinel.data('isLoading', false);
  207.                                 _this.$elem.find('.preloader').addClass('d-none');
  208.                                 window.history.replaceState({
  209.                                     htmlContent: _this.$elem.html()
  210.                                 }, document.title, window.location.href);
  211.                             } else {
  212.                                 _this.cachedPages[aParams.page] = data;
  213.                                 container.find('._xlabs_results').html(data);
  214.                             }
  215.                             container.css('opacity', '1');
  216.                             if(config.debug)
  217.                             {
  218.                                 _this.blink();
  219.                                 console.log('Reloaded ' + aParams['container_id']);
  220.                             }
  222.                             if(typeof _fnCallback == 'function')
  223.                             {
  224.                                 _fnCallback();
  225.                             }
  226.                             //if($(data).find('._results_item').length)
  227.                             //{
  228.                                 _this.preloadNextPage();
  229.                             //}
  230.                         },
  231.                         error: function(){
  232.                             container.css('opacity', '1');
  233.                         }
  234.                     });
  235.                 }
  236.             },
  237.             preloadNextPage: function(){
  238.                 let _this = this;
  239.                 let currentParams = _this.getParams();
  240.                 let nextPageParams = $.extend({}, currentParams, {page: parseInt(currentParams.page) + 1});
  241.                 if(_this.cachedPages[nextPageParams.page])
  242.                 {
  243.                     return; // Page is already cached
  244.                 }
  245.                 let nextPageCmd = _this.getNextPageCmd();
  246.                 if(!nextPageCmd.length)
  247.                 {
  248.                     return;
  249.                 }
  250.                 $.ajax({
  251.                     url: _this.$elem.attr('data-ajax-path'),
  252.                     data: {
  253.                         aParams: nextPageParams
  254.                     },
  255.                     type: 'post',
  256.                     dataType: 'html',
  257.                     success: function(data){
  258.                         _this.cachedPages[nextPageParams.page] = data; // Cache the next page content
  259.                     }
  260.                 });
  261.             },
  262.             getInitialParams: function(){
  263.                 return JSON.parse(this.$elem.attr('data-original-params'));
  264.             },
  265.             getParams: function(){
  266.                 return JSON.parse(this.$elem.attr('data-ajax-params'));
  267.             },
  268.             setParams: function(aParams){
  269.                 this.$elem.attr('data-ajax-params', JSON.stringify(aParams));
  270.                 return this;
  271.             },
  272.             getParam: function(param){
  273.                 let params = this.getParams();
  274.                 return params[param];
  275.             },
  276.             setParam: function(param, value){
  277.                 let params = this.getParams();
  278.                 params[param] = value;
  279.                 this.setParams(params);
  280.                 return this;
  281.             },
  282.             removeParam: function(param){
  283.                 let params = this.getParams();
  284.                 delete(params[param]);
  285.                 this.setParams(params);
  286.                 return this;
  287.             },
  288.             clear: function(){
  289.                 let _this = this;
  290.                 _this.$elem.find('._xlabs_results ._results_item').remove();
  291.                 _this.$elem.find('._xlabs_results ._no_results').remove();
  292.             },
  293.             clearCachedPages: function(){
  294.                 let _this = this;
  295.                 _this.cachedPages = {};
  296.             },
  297.             initSentinel: function(){ // for infinite scroll
  298.                 let _this = this;
  299.                 if(_this.config.observer)
  300.                 {
  301.                     _this.config.observer.disconnect();
  302.                 }
  303.                 _this.config.observer = new IntersectionObserver(function(entries) {
  304.                     if(entries[0].isIntersecting)
  305.                     {
  306.                         if(_this.config.$sentinel.data('isLoading')) return;
  307.                         _this.config.$sentinel.data('isLoading', true);
  309.                         let nextPageCmd = _this.getNextPageCmd();
  310.                         let isLastPage = !nextPageCmd.length;
  311.                         if(isLastPage)
  312.                         {
  313.                             _this.config.observer.disconnect();
  314.                             return;
  315.                         }
  316.                         _this.$elem.find('.preloader').removeClass('d-none');
  317.                         setTimeout(function(){
  318.                             nextPageCmd.find('a').click();
  319.                         }, 0);
  320.                     }
  321.                 });
  323.                 // Start observing the sentinel element
  324.                 _this.config.observer.observe(_this.config.$sentinel[0]);
  325.             },
  326.             stopSentinel: function(){
  327.                 let _this = this;
  328.                 if(_this.config.observer)
  329.                 {
  330.                     _this.config.observer.disconnect();
  331.                 }
  332.             },
  333.             resetInfiniteScroll: function(){ // required when infinite scroll results have to be reset
  334.                 let _this = this;
  335.                 let container = this.$elem;
  336.                 _this.clear();
  337.                 _this.clearCachedPages();
  338.                 container.find('._results').remove();
  339.             },
  340.             getNextPageCmd: function(){
  341.                 let _this = this;
  342.                 let paginationCmds = _this.$elem.find('.page-item');
  343.                 let currentPageCmd = _this.$elem.find('.page-item.active');
  344.                 let currentPageIndex = paginationCmds.index(currentPageCmd);
  345.                 return paginationCmds.eq(currentPageIndex + 1);
  346.             },
  347.             enterDebug: function(){ // this function can be removed; it´s just to visually check that the plugin is being executed for a container
  348.                 console.log('resultsContainer initialized for container ' + this.$elem.attr('data-container-id'));
  349.                 this.$elem.css({
  350.                     'border': '1px solid #2196F3'
  351.                 });
  352.             },
  353.             blink: function(){ // debug purposes
  354.                 let container = this.$elem;
  355.                 //container.fadeOut(250).fadeIn(250).fadeOut(250).fadeIn(250);
  356.                 container.addClass('_resultsContainerBlink');
  357.                 setTimeout(function()
  358.                 {
  359.                     container.removeClass('_resultsContainerBlink');
  360.                 }, 1000);
  361.             }
  362.         };
  364.         resultsContainer.defaults = resultsContainer.prototype.defaults;
  366.         $.fn.resultsContainer = function(options = {}) {
  367.             //return $(this).data('plugin.resultsContainer') ? $(this).data('plugin.resultsContainer') : new resultsContainer(this, options);
  368.             return $(this).data('plugin.resultsContainer') ? $(this).data('plugin.resultsContainer') : this.each(function(){
  369.                 $(this).data('plugin.resultsContainer') ? $(this).data('plugin.resultsContainer') : new resultsContainer(this, options);
  370.             });
  371.         };
  373.         window.resultsContainer = resultsContainer;
  374.     })(window, jQuery);
  376.     $(document).ready(function(){
  377.         $('._xlabs_results_wrapper').resultsContainer();
  378.     });
  380.     function updateContentBlockResults(aParams_container, updated_aParams)
  381.     {
  382.         aParams_container.resultsContainer().update(updated_aParams);
  383.     }
  384. </script>