Skip to content

Commit

Permalink
jquery removed from listing entry
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oksydan
Oksydan committed Oct 12, 2023
1 parent 42496cf commit d327c81
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 64 deletions.
32 changes: 18 additions & 14 deletions _dev/js/listing/components/filters/Filters.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import prestashop from 'prestashop';
import $ from 'jquery';
import FiltersRangeSliders from '@js/listing/components/filters/FiltersRangeSliders';
import FiltersRangeSliders from './FiltersRangeSliders';
import useEvent from '../../../theme/components/event/useEvent';

class Filters {
constructor() {
this.$body = $('body');
this.body = document.querySelector('body');
this.setEvents();
this.rangeSliders = FiltersRangeSliders;
this.rangeSliders.init();
}

setEvents() {
const { on } = useEvent();

prestashop.on('updatedProductList', () => {
prestashop.pageLoader.hideLoader();
this.rangeSliders.init();
Expand All @@ -20,34 +22,36 @@ class Filters {
prestashop.pageLoader.showLoader();
});

this.$body.on('click', '.js-search-link', (event) => {
on(this.body, 'click', '.js-search-link', (event) => {
event.preventDefault();
prestashop.emit('updateFacets', $(event.target).closest('a').get(0).href);
prestashop.emit('updateFacets', event.target.closest('a').href);
});

this.$body.on('change', '[data-action="search-select"]', ({ target }) => {
prestashop.emit('updateFacets', $(target).find('option:selected').data('href'));
on(this.body, 'change', '[data-action="search-select"]', ({ target }) => {
const selectedElement = target.options[target.selectedIndex];

prestashop.emit('updateFacets', selectedElement.dataset.href);
});

this.$body.on('click', '.js-search-filters-clear-all', (event) => {
on(this.body, 'click', '.js-search-filters-clear-all', (event) => {
prestashop.emit('updateFacets', this.constructor.parseSearchUrl(event));
});

this.$body.on('change', '#search_filters input[data-search-url]', (event) => {
on(this.body, 'change', '#search_filters input[data-search-url]', (event) => {
prestashop.emit('updateFacets', this.constructor.parseSearchUrl(event));
});
}

static parseSearchUrl(event) {
if (event.target.dataset.searchUrl !== undefined) {
return event.target.dataset.searchUrl;
static parseSearchUrl({ target }) {
if (target.dataset.searchUrl !== undefined) {
return target.dataset.searchUrl;
}

if ($(event.target).parent()[0].dataset.searchUrl === undefined) {
if (target.parent.dataset.searchUrl === undefined) {
throw new Error('Can not parse search URL');
}

return $(event.target).parent()[0].dataset.searchUrl;
return target.parent.dataset.searchUrl;
}
}

Expand Down
11 changes: 5 additions & 6 deletions _dev/js/listing/components/filters/FiltersRangeSliders.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import $ from 'jquery';
import RangeSlider from '@js/listing/components/filters/RangeSlider';
import RangeSlider from './RangeSlider';
import { each } from '../../../theme/utils/DOMHelpers';

class FiltersRangeSliders {
static init() {
const $rangeSliders = $('.js-range-slider');
each('.js-range-slider', (slider) => {
const rangeSlider = new RangeSlider(slider);

$rangeSliders.each((i, el) => {
/* eslint no-unused-vars: ["error", { "varsIgnorePattern": "slider" }] */
const slider = new RangeSlider(el);
rangeSlider.init();
});
}
}
Expand Down
97 changes: 53 additions & 44 deletions _dev/js/listing/components/filters/RangeSlider.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import $ from 'jquery';
import prestashop from 'prestashop';
import noUiSlider from 'nouislider';
import wNumb from 'wnumb';
import FiltersUrlHandler from '@js/listing/components/filters/FiltersUrlHandler';
import FiltersUrlHandler from './FiltersUrlHandler';
import useEvent from '../../../theme/components/event/useEvent';

class RangeSlider {
constructor(element) {
this.$slider = $(element);
this.slider = element;
}

init() {
// If slider already initialized, do nothing
if (typeof this.slider.noUiSlider !== 'undefined') {
return;
}

this.setConfig();
this.setFormat();
Expand All @@ -17,32 +24,33 @@ class RangeSlider {
}

getSliderType() {
this.sliderType = this.$slider.data('slider-specifications') ? 'price' : 'weight';
this.sliderType = this.slider.dataset.sliderSpecifications ? 'price' : 'weight';
}

setConfig() {
this.min = this.$slider.data('slider-min');
this.max = this.$slider.data('slider-max');
this.$parentContainer = this.$slider.closest('.js-input-range-slider-container');
this.$inputs = [this.$parentContainer.find('[data-action="range-from"]'), this.$parentContainer.find('[data-action="range-to"]')];
this.min = Number.parseFloat(this.slider.dataset.sliderMin);
this.max = Number.parseFloat(this.slider.dataset.sliderMax);
this.parentContainer = this.slider.closest('.js-input-range-slider-container');
this.inputs = [
this.parentContainer.querySelector('[data-action="range-from"]'),
this.parentContainer.querySelector('[data-action="range-to"]'),
];

this.getSliderType();

if (this.sliderType === 'price') {
const {
currencySymbol,
positivePattern,
} = this.$slider.data('slider-specifications');
} = JSON.parse(this.slider.dataset.sliderSpecifications);

this.sign = currencySymbol;
this.positivePattern = positivePattern;
this.values = this.$slider.data('slider-values');
this.values = JSON.parse(this.slider.dataset.sliderValues);
this.signPosition = this.positivePattern.indexOf('¤') === 0 ? 'prefix' : 'suffix';
} else if (this.sliderType === 'weight') {
const unit = this.$slider.data('slider-unit');

this.sign = unit;
this.values = this.$slider.data('slider-values');
this.sign = this.slider.dataset.sliderUnit;
this.values = JSON.parse(this.slider.dataset.sliderValues);
this.signPosition = 'suffix';
}

Expand All @@ -62,7 +70,7 @@ class RangeSlider {
}

initFilersSlider() {
this.sliderHandler = noUiSlider.create(this.$slider.get(0), {
this.sliderHandler = noUiSlider.create(this.slider, {
start: this.values,
connect: [false, true, false],
range: {
Expand All @@ -78,75 +86,76 @@ class RangeSlider {
}

setInputValues(values, formatValue = false) {
this.$inputs.forEach((input, i) => {
const val = formatValue ? this.format.from(values[i]) : values[i];
$(input).val(val);
this.inputs.forEach((input, i) => {
input.value = formatValue ? this.format.from(values[i]) : values[i];
});
}

setEvents() {
const { on, off } = useEvent();
this.sliderHandler.off('set', this.constructor.handlerSliderSet);
this.sliderHandler.on('set', this.constructor.handlerSliderSet);
this.sliderHandler.off('update', this.handlerSliderUpdate);
this.sliderHandler.on('update', this.handlerSliderUpdate);

this.$inputs.forEach(($input) => {
$input.off('focus', this.handleInputFocus);
$input.on('focus', this.handleInputFocus);
$input.off('blur', this.handleInputBlur);
$input.on('blur', this.handleInputBlur);
$input.on('keyup', this.handleInputKeyup);
this.inputs.forEach((input) => {
off(input, 'keyup', this.handleInputKeyup);
on(input, 'keyup', this.handleInputKeyup);

off(input, 'focus', this.handleInputFocus);
on(input, 'focus', this.handleInputFocus);

off(input, 'blur', this.handleInputBlur);
on(input, 'blur', this.handleInputBlur);
});
}

static getInputAction($input) {
return $input.data('action');
static getInputAction(input) {
return input.dataset.action;
}

getInputPositionInValue($input) {
getInputPositionInValue(input) {
const actionPosition = {
'range-from': 0,
'range-to': 1,
};

return actionPosition[this.constructor.getInputAction($input)];
return actionPosition[this.constructor.getInputAction(input)];
}

handleInputFocus = ({ target }) => {
const $input = $(target);
$input.val(this.format.from($input.val()));
handleInputFocus = ({ target: input }) => {
input.value = this.format.from(input.value);
};

handleInputBlur = ({ target }) => {
const $input = $(target);
const value = $input.val();
const position = this.getInputPositionInValue($input);
handleInputBlur = ({ target: input }) => {
const { value } = input;
const position = this.getInputPositionInValue(input);
const oldValues = this.values;
const newValues = [...oldValues];
newValues[position] = value;

if (value !== oldValues[position]) {
this.sliderHandler.set(newValues);
} else {
$input.val(this.format.to(parseFloat($input.val(), 10)));
input.value = this.format.to(Number.parseFloat(input.value));
}
};

handleInputKeyup = ({ target, keyCode }) => {
handleInputKeyup = ({ target: input, keyCode }) => {
if (keyCode !== 13) {
return;
}
const $input = $(target);
const value = $input.val();
const position = this.getInputPositionInValue($input);

const { value } = input;
const position = this.getInputPositionInValue(input);
const oldValues = this.values;
const newValues = [...oldValues];
newValues[position] = value;

if (value !== oldValues[position]) {
this.sliderHandler.set(newValues);
} else {
$input.val(this.format.to(parseFloat($input.val(), 10)));
input.value = this.format.to(Number.parseFloat(input.value));
}
};

Expand All @@ -165,9 +174,9 @@ class RangeSlider {
noUiSliderInstance,
) {
const formatFunction = noUiSliderInstance.options.format;
const $target = $(noUiSliderInstance.target);
const group = $target.data('slider-label');
const unit = $target.data('slider-unit');
const { target } = noUiSliderInstance;
const group = target.dataset.sliderLabel;
const unit = target.dataset.sliderUnit;
const [from, to] = values.map((val) => formatFunction.from(val));

const filtersHandler = new FiltersUrlHandler();
Expand Down

0 comments on commit d327c81

Please sign in to comment.