abc-filter v1.1.7
ABC Filter
ABC filter is an open librairy for people who don't make any other filter in their life.
How to use
Make sure to install the latest version of ABC filter
npm i abcfilter
import ABC from 'abcfilter'
ABC.filter({
//Your parameters
});Formats availables
- Json to HTML
Inputs availables
Events availables
- On change (https://www.wolubilis.be/type/a-voir/spectacles/)
- On click ()
- On redirect (https://www.tousapied.be/)
Params
url typeof string
Your json url who contain all informations to compare between filters and datas
create_url typeof boolean
optionnal
Create a friendly url depending on selected filters. default set to false
debug typeof boolean
optionnal
Add warning in the console or more specific error. default set to false
Results
results typeof object
Define all paramaters to based filter on datas elements in HTML
results: {
target: false,
id : false,
visible_class: false,
hidden_class : false,
before_show : false, // not yet
before_hide : false, // not yet
after_hide : false, // not yet
after_show : false, // not yet
}results//target typeof string
Define targets elements by class, attribute or id
results//id typeof string
Define params in the json to base on and can match with ids elements.
results//visible_class typeof string
optionnal
Add class when visible.
results//hidden_class typeof string
optionnal
Add class when hide.
results//before_show typeof function
optionnal
Not available
results//before_hide typeof function
optionnal
Not available
results//after_show typeof function
optionnal
Not available
results//after_hide typeof function
optionnal
Not available
Number of results
nb_results typeof object
optionnal
Define the number of results in your HTML.
nb_results: {
target: '',
no_results: '',
singular: '',
plural: ''
}nb_results//target typeof string
Define targets elements by class, attribute or id
nb_results//no_results typeof string
optionnal
Sentence in case of no result.
nb_results//no_results typeof string
optionnal
Sentence in case of one result.
Use -var- to replace by the number of results.
nb_results//no_results typeof string
optionnal
Sentence in case of more than one result.
Use -var- to replace by the number of results.
Form
form typeof object
Define container of form target and the right action o apply
form: {
target: 'form',
action: 'change',
action_target: '',
}form//target typeof string
Define the container (class,attribute,id, tag) that contains all filters.
form//action typeof string
Action to apply : change, submit, redirect.
form//action typeof string
Define submit target on submit or redirect actions
Must be a <a>for the redirect action.
Inputs
inputs typeof object
inputs: {
search:[],
select:[],
checkbox:[],
radio:[],
range:[], //not yet
}Search
inputs//search typeof array
optionnal
Define one or more object by input text or search to filtered
The search has a dependance to fuse.js to control threesold.
search: [
{
name : false,
compare : false,
url_name: false,
threshold: 0.4,
relation: "and",
value : "",
}
]inputs//search//name typeof string
Attribute name of the input to based on.
inputs//search//compare typeof array
Datas to compare with the value of the input.
inputs//search//url_name typeof string
optionnal
CREATE URL MODE ONLY
You can add a nice name to replace the input attribute name in the url.
inputs//search//threshold typeof number
optionnal
Define a error threshold default: 0.4
inputs//search//relation typeof string
optionnal
Relation between this input and other inputs in the form. default: "and"
inputs//search//value typeof string
optionnal
Define a default value for your input.
Select
inputs//select typeof array
optionnal
Define one or more object by select input to filtered
select: [
{
name : false
compare : false
url_name: false
multiple: false
operator: "or"
relation: "and"
value : []
id : true
}
]inputs//select//name typeof string
Attribute name of the input to based on.
inputs//select//compare typeof string
Datas to compare with the value of the input.
inputs//select//url_name typeof string
optionnal
CREATE URL MODE ONLY
You can add a nice name to replace the input attribute name in the url.
inputs//select//multiple typeof boolean
optionnal
Define if the select input can have several values selected in the same time
Do not forget to add the attribute on your select
inputs//select//operator typeof string
optionnal
MULTIPLE MODE ONLY Relation between options selected in a select.
default: "or"
inputs//select//relation typeof string
optionnal
Relation between this input and other inputs in the form. default: "and"
inputs//select//value typeof array
optionnal
Define a default value for your select.
MULTIPLE MODE ONLY Define several values for your select.
inputs//select//id typeof boolean
optionnal
CREATE URL MODE ONLY
If id is set on true AND options tags have an id attribute,
the value of the option in the url can be replaced by a nicer name.
Checkbox
inputs//checkbox typeof array
optionnal
Define one or more object by checkbox group to filtered
checkbox: [
{
name : false
compare : false
url_name: false
operator: "or"
relation: "and"
value : []
id : true
}
]inputs//checkbox//name typeof string
Attribute name of the input to based on.
inputs//checkbox//compare typeof string
Datas to compare with the value of the input.
inputs//checkbox//url_name typeof string
optionnal
CREATE URL MODE ONLY
You can add a nice name to replace the input attribute name in the url.
inputs//checkbox//operator typeof string
optionnal
Relation between inputs checked in a group.
default: "or"
inputs//checkbox//relation typeof string
optionnal
Relation between this input and other inputs in the form. default: "and"
inputs//checkbox//value typeof array
optionnal
Define one or several values for your checkbox group.
inputs//checkbox//id typeof boolean
optionnal
CREATE URL MODE ONLY
If id is set on true AND checkbox tags have an id attribute,
the value of the checkbox in the url can be replaced by a nicer name.
Radio
inputs//radio typeof array
optionnal
Define one or more object by radio group to filtered
radio: [
{
name : false
compare : false
url_name: false
relation: "and"
value : []
id : true
}
]inputs//radio//name typeof string
Attribute name of the input to based on.
inputs//radio//compare typeof string
Datas to compare with the value of the input.
inputs//radio//url_name typeof string
optionnal
CREATE URL MODE ONLY
You can add a nice name to replace the input attribute name in the url.
inputs//radio//relation typeof string
optionnal
Relation between this input and other inputs in the form. default: "and"
inputs//radio//value typeof array
optionnal
Define one or several values for your radio group.
inputs//radio//id typeof boolean
optionnal
CREATE URL MODE ONLY
If id is set on true AND radio tags have an id attribute,
the value of the radio in the url can be replaced by a nicer name.
Exemple :
{
url : 'https://www.myjson_url.be',
create_url:true,
results: {
target: 'my-element'
id: 'myArray.mySubArray.myIDKey`
visible_class: 'abc-show',
hidden_class : 'abc-hide',
},
nb_results: {
target: 'my-element-results'
no_results: 'Sorry there is no result for your search'
singular: 'Only -var- result found.',
plural : 'Your good! We found -var- results for your search.',
},
inputs: [
search: [
{
name: "my_search",
compare: ['data_1', 'myArray.data_2', 'myArray.data_3'],
url_name: "keywords",
}
]
]
}