Example here: https://cptx032.github.io/selecter/index.html
Selecter is made to select anything in a web page. You must give to it a jquery filter that returns the elements that will be selectable and is it!
After created the object all select items are available by selection
property.
When selecter selects something it adds a css class to the element. The default value is 'active', You can change this value settings this option. Example:
let selecter = new Selecter('#my-list li', {
select_class: 'my_cool_css_class'
});
By default, any click in element will selects it. But you can configures selecter
to select elements only when control key is pressed. This is done by setting 'enable_ctrl'
to true
.
This options enables a "radio button behaviour", that is, only one element must be selected
at a time. The default is false
. The function unselect_all
is called by this function
to unselect all items, so the callback on_unselect
can be called many times.
In selecter a "mark" is a HTML element that is appended to selected item. This is usefull
when you want show a image with a "check" or things like that. "add_mark" works together
with the options: mark_html
, mark_class
.
mark_html
is a string with the exact HTML code that will be appended to selected item.
In unselection selecter must remove this element, this is done using a class name.
So, the HTML code must have a element with a unique class name.
In this option you must set the class name of mark element
An example of mark use follows:
var selecter = new Selecter('ul li', {
add_mark: true,
mark_html: '<img width="32" style="position: absolute; top: -5px; right: -5px;" class="__mark_icon" src="imgs/check.png">',
mark_class: '__mark_icon'
});
This callback is triggered when the user unselects a item. The arguments are showed in following example:
new Selecter('ul li', {
on_unselect: function(html_element, js_event) {
//
}
});
The same of on_unselect
callback but being called in selection.
This function is called when the last item is unselected.
new Selecter('ul li', {
on_unselecting_all: function(html_element, js_event) {
console.log('No more items selected');
disable_edition_buttons();
}
});
This function is called in any selection or unselection. Functions like select_all
will call this callback many times.
new Selecter('ul li', {
on_change: function(html_element, js_event, selected) {
if (selected) {
console.log(html_element.textContent + 'was selected!');
}
}
});
This function is called when the first item is selected.
new Selecter('ul li', {
on_at_least_one_selection: function(html_element, js_event) {
enable_all_item_edition_buttons();
}
});
This functions is called before any selection. If defined, the item will be selected only if this function returns true
new Selecter('ul li', {
validate_selection: function(html_element, js_event) {
if (html_element.classList.contains('wrong_class')) {
return false;
}
returns true;
}
});
Deselects all items. Items that are already deselected will not have the function on_unselect
called for it.
Selects all items. This function have a aditional argument called 'reselect'. If reselect is true items that are already selected will have the function 'on_select' called again. The default is 'false'.
Receives a HTML elements and returns true if it is selected.