Skip to content
Snippets Groups Projects

Draft: Issue #3052574: Facets with AJAX not working in most of situations

Files
9
+ 92
47
@@ -3,7 +3,6 @@
* Facets views AJAX handling.
*/
(function ($, Drupal, once) {
'use strict';
@@ -37,17 +36,73 @@
return;
}
// Update view on summary block click.
if (updateFacetsSummaryBlock() && (facetId === 'facets_summary_ajax')) {
$(once(facetId, '[data-drupal-facets-summary-id=' + facetSettings.facets_summary_id + '] ul li')).click(function (e) {
// Update view on range slider stop event.
if (typeof settings.facets !== "undefined" && settings.facets.sliders && settings.facets.sliders[facetId]) {
settings.facets.sliders[facetId].stop = function (event, ui) {
if ("undefined" === typeof ui) {
return;
}
const sliderSettings = settings.facets.sliders[facetId];
var href = sliderSettings.url.replace('__range_slider_min__', Math.round(ui.values[0])).replace('__range_slider_max__', Math.round(ui.values[1]));
// Update facet query params on the request.
var currentHref = window.location.href;
var currentQueryParams = Drupal.Views.parseQueryString(currentHref);
var newQueryParams = Drupal.Views.parseQueryString(href);
var queryParams = {};
var facetPositions = [];
var fCount = 0;
var value = '';
var facetKey = '';
for (var paramName in currentQueryParams) {
if (paramName.substr(0, 1) === 'f') {
value = currentQueryParams[paramName];
// Store the facet position so we can override it later.
facetKey = value.substr(0, value.indexOf(':'));
facetPositions[facetKey] = fCount;
queryParams['f[' + fCount + ']'] = value;
fCount++;
}
else {
queryParams[paramName] = currentQueryParams[paramName];
}
}
var paramKey = '';
for (let paramName in newQueryParams) {
if (paramName.substr(0, 1) === 'f') {
value = newQueryParams[paramName];
// Replace.
facetKey = value.substr(0, value.indexOf(':'));
if (typeof facetPositions[facetKey] !== 'undefined') {
paramKey = 'f[' + facetPositions[facetKey] + ']';
}
else {
paramKey = 'f[' + fCount + ']';
fCount++;
}
queryParams[paramKey] = newQueryParams[paramName];
}
else {
queryParams[paramName] = newQueryParams[paramName];
}
}
href = settings.path.baseUrl + Drupal.Views.getPath(href) + '?' + $.param(queryParams);
updateFacetsView(href, current_dom_id, view_path);
};
}
else if (facetSettings.hasOwnProperty('facets_summary_id')) {
$(once(facetId, '[data-facets-plugin-id="facets_summary_block:' + facetId + '"]')).on('click', 'a', function(e) {
e.preventDefault();
var facetLink = $(this).find('a');
updateFacetsView(facetLink.attr('href'), current_dom_id, view_path);
updateFacetsView($(this).attr('href'), current_dom_id, view_path);
});
}
// Update view on facet item click.
else {
$('[data-drupal-facet-id=' + facetId + ']').each(function (index, facet_item) {
$('[data-drupal-facet-id |= ' + facetId + ']').each(function (index, facet_item) {
if ($(facet_item).hasClass('js-facets-widget')) {
$(facet_item).unbind('facets_filter.facets');
$(facet_item).on('facets_filter.facets', function (event, url) {
@@ -94,6 +149,31 @@
}
});
const formId = 'form#views-exposed-form-' + views_settings.view_name.replace(/_/g, '-') + '-' + views_settings.view_display_id.replace(/_/g, '-'),
$form = $(formId);
if ($form.length) {
// Remove all old facets inputs in exposed form.
$('input[type="hidden"][name^="f["]', $form).remove();
const hashes = href.slice(href.indexOf('?') + 1).split('&');
// Create hidden inputs to preserve facets in exposed form.
for (let i = 0; i < hashes.length; i++) {
const hash = hashes[i].split('='),
hashKey = window.decodeURIComponent(hash[0]);
if (hashKey.substr(0, 2) === 'f[') {
const input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', hashKey);
input.setAttribute('value', window.decodeURIComponent(hash[1]));
$form.append(input);
}
}
}
// Refresh facets blocks.
updateFacetsBlocks(href);
}
@@ -104,7 +184,7 @@
var facets_blocks = facetsBlocks();
// Remove All Range Input Form Facet Blocks from being updated.
if(settings.facets && settings.facets.rangeInput) {
if (settings.facets && settings.facets.rangeInput) {
$.each(settings.facets.rangeInput, function (index, value) {
delete facets_blocks[value.facetId];
});
@@ -119,51 +199,16 @@
}
};
// Update facets summary block.
if (updateFacetsSummaryBlock()) {
var facet_summary_wrapper_id = $('[data-drupal-facets-summary-id=' + settings.facets_views_ajax.facets_summary_ajax.facets_summary_id + ']').attr('id');
var facet_summary_block_id = '';
if (facet_summary_wrapper_id.indexOf('--') !== -1) {
facet_summary_block_id = facet_summary_wrapper_id.substring(0, facet_summary_wrapper_id.indexOf('--')).replace('block-', '');
}
else {
facet_summary_block_id = facet_summary_wrapper_id.replace('block-', '');
}
facet_settings.submit.update_summary_block = true;
facet_settings.submit.facet_summary_block_id = facet_summary_block_id;
facet_settings.submit.facet_summary_wrapper_id = settings.facets_views_ajax.facets_summary_ajax.facets_summary_id;
}
Drupal.ajax(facet_settings).execute();
};
// Helper function to determine if we should update the summary block.
// Returns true or false.
var updateFacetsSummaryBlock = function () {
var settings = drupalSettings;
var update_summary = false;
if (settings.facets_views_ajax.facets_summary_ajax) {
update_summary = true;
}
return update_summary;
};
// Helper function, return facet blocks.
var facetsBlocks = function () {
// Get all ajax facets blocks from the current page.
var facets_blocks = {};
var facets_blocks = [];
$('.block-facets-ajax').each(function (index) {
var block_id_start = 'js-facet-block-id-';
var block_id = $.map($(this).attr('class').split(' '), function (v, i) {
if (v.indexOf(block_id_start) > -1) {
return v.slice(block_id_start.length, v.length);
}
}).join();
var block_selector = '#' + $(this).attr('id');
facets_blocks[block_id] = block_selector;
$('[data-facets-plugin-id]').each(function () {
facets_blocks.push($(this).attr('data-facets-plugin-id'));
});
return facets_blocks;
@@ -203,7 +248,7 @@
beforeSend.apply(this, arguments);
}
// Helper function to add exposed form data to facets url
// Helper function to add exposed form data to facets url.
var addExposedFiltersToFacetsUrl = function (href, view_name, view_display_id) {
var $exposed_form = $('form#views-exposed-form-' + view_name.replace(/_/g, '-') + '-' + view_display_id.replace(/_/g, '-'));
Loading