A class to make URL Paramter XHR Requests super easy
npm i @meteora-digital/filters
yarn add @meteora-digital/filters
<select name="colours" id="colours">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="purple">purple</option>
<option value="yellow">yellow</option>
</select>
import FiltersController from '@meteora-digital/filters';
const Filter = new FiltersController('/my/endpoint');
const select = document.querySelector('select');
Filter.on('success', (response) => {
// do something with the response
})
select.addEventListener('change', () => {
Filter.set(select.name, select.value);
Filter.apply();
});
Argument | Type | Description |
---|---|---|
api | string | This is the URL that will be used in the ajax call |
First argument should either be an object or a string. The second argument will only be used if the first argument is a string. The second argument can either be a string or an array of strings.
set()
This will remove any current values in this parameter and set it to a specific value in the value object.
Filter.set({
colour: ['purple', 'red', 'blue'],
});
Filter.set('colour', ['purple', 'red', 'blue']);
add()
Add more values to the filters object
Filter.add({
colour: 'green',
});
Filter.add('colour', 'green');
remove()
Remove data from the filters object
Filter.remove({
colour: 'red',
});
Filter.remove('colour', 'red');
clear()
Remove all data from the filters object
Filter.clear();
apply()
Make the XHR Request to load new content
Filter.apply();
updateURL()
Replace the history state and update the URL to a string
Filter.updateURL(Filter.api.segmentURL);
Each method has it's own event that is fired when the method is called. These can be accessed using the on() method
on()
Filter.on('success', (response) => {
// do something with the response
});
Filter.on('change', (value) => {
// do something when the filters changes
});