Abcfilter NPM | npm.io

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",
            }
        ]
    ]
}

filter filters checkbox search

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago