Skip to content

Added ability using icons instead of images in options. #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EXayer wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added ability using icons instead of images in options. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ LC Select has been created focusing on these aspects: a pure javascript (ES6) pl
- (optional) searchbar with minimum fields threshold
- (optional) maximum selectable options
- complete keyboard events integration
- option images support
- option images, icons support
- mobile ready
- multilanguage ready

Expand Down Expand Up @@ -50,18 +50,20 @@ new lc_select('select');

## Specific HTML attributes

There are two optional attributes you can use to take advantage of plugin functionalities:
There are three optional attributes you can use to take advantage of plugin functionalities:

- **data-placeholder:** to be used on the *select* HTML tag, sets field placeholder in case of no option selected<br/>(check also *pre_placeh_opt* option for simple selects)

- **data-image:** to be used on *optgroup* or *option* HTML tags, sets option's image

- **data-icon:** to be used on *optgroup* or *option* HTML tags, sets option's icon (has priority over data-image)

```
<select name="simple" data-placeholder="Select something please ..">
<optgroup label="Europe" data-image="demo-img/eu.svg">
<option value="ita" data-image="demo-img/ita.svg">Italy</option>
<option value="fra" data-image="demo-img/fra.png">France</option>
<option value="esp" data-image="demo-img/esp.png">Spain</option>
<option value="esp" data-icon="icon-flag-esp icon-lg icon-yellow">Spain</option>
</optgroup>
</select>
```
Expand Down
28 changes: 20 additions & 8 deletions lc_select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,14 +378,16 @@
select.querySelectorAll('option').forEach(opt => {

if(opt.selected) {
const img = (opt.hasAttribute('data-image')) ? '<i class="lcslt-img" style="background-image: url(\''+ opt.getAttribute('data-image').trim() +'\')"></i>' : '';

const img = (opt.hasAttribute('data-image')) ? '<i class="lcslt-img" style="background-image: url(\''+ opt.getAttribute('data-image').trim() +'\')"></i>' : '',
icon = opt.hasAttribute('data-icon') ? '<i class="lcslt-icon ' + opt.getAttribute('data-icon').trim() + '"></i>' : '';

const image = icon.length ? icon : img;
if(is_multiple) {
code += '<div class="lcslt-multi-selected" data-val="'+ opt.getAttribute('value') +'" title="'+ opt.innerHTML +'"><span>'+ img + opt.innerHTML +'</span></div>';
code += '<div class="lcslt-multi-selected" data-val="'+ opt.getAttribute('value') +'" title="'+ opt.innerHTML +'"><span>'+ image + opt.innerHTML +'</span></div>';
}
else {
const single_placeh_mode = (options.pre_placeh_opt && opt.hasAttribute('data-lcslt-placeh')) ? 'class="lcslt-placeholder"' : '';
code = '<span '+ single_placeh_mode +' title="'+ opt.innerHTML +'">'+ img + opt.innerHTML +'</span>';
const single_placeh_mode = (options.pre_placeh_opt && opt.hasAttribute('data-lcslt-placeh')) ? 'class="lcslt-placeholder"' : '';
code = '<span '+ single_placeh_mode +' title="'+ opt.innerHTML +'">'+ image + opt.innerHTML +'</span>';
}

sel_opts++;
Expand Down Expand Up @@ -501,6 +503,7 @@
group_name : [map] {
opt_val : {
img : (string) ,
icon : (string) ,
name : (string),
selected: (bool),
disabled: (bool)
Expand Down Expand Up @@ -530,6 +533,7 @@

let obj = {
img : (opt.hasAttribute('data-image')) ? opt.getAttribute('data-image').trim() : '',
icon : (opt.hasAttribute('data-icon')) ? opt.getAttribute('data-icon').trim() : '',
name : opt.innerHTML,
selected: opt.selected,
disabled: opt.disabled,
Expand Down Expand Up @@ -577,17 +581,24 @@
const dis_class = (disabled_groups.indexOf(group) !== -1) ? 'lcslt-disabled': '';

const optgroup = select.querySelector('optgroup[label="'+ group_key +'"]'),
img = (optgroup.hasAttribute('data-image') && optgroup.getAttribute('data-image')) ? '<i class="lcslt-img" style="background-image: url(\''+ optgroup.getAttribute('data-image').trim() +'\')"></i>' : '';
img = (optgroup.hasAttribute('data-image') && optgroup.getAttribute('data-image'))
? '<i class="lcslt-img" style="background-image: url(\'' + optgroup.getAttribute('data-image').trim() + '\')"></i>'
: '',
icon = (optgroup.hasAttribute('data-icon') && optgroup.getAttribute('data-icon'))
? '<i class="lcslt-icon ' + optgroup.getAttribute('data-icon').trim() + '"></i>' : '';

const image = icon.length ? icon : img;

code +=
'<li class="lcslt-group '+ dis_class +'"><span class="lcslt-group-name">'+ img + group_key +'</span>' +
'<li class="lcslt-group '+ dis_class +'"><span class="lcslt-group-name">'+ image + group_key +'</span>' +
'<ul class="lcslt-group-opts">';
}

// group options
structure.get(group_key).forEach((opt, opt_key) => {
const vals = structure.get(group_key).get(opt_key),
img = (vals.img) ? '<i class="lcslt-img" style="background-image: url(\''+ vals.img +'\')"></i>' : '',
icon = (vals.icon) ? '<i class="lcslt-icon ' + vals.icon + '"></i>' : '',
sel_class = (vals.selected) ? 'lcslt-selected' : '',
dis_class = (vals.disabled || disabled_groups.indexOf(group) !== -1) ? 'lcslt-disabled': '',
hlight_class = (!highligh_set && sel_class) ? 'lcslt-dd-opt-hlight' : '';
Expand All @@ -597,9 +608,10 @@
return;
}

const image = icon.length ? icon : img;
code +=
'<li class="lcslt-dd-opt '+ sel_class +' '+ dis_class +' '+ hlight_class +'" data-val="'+ opt_key +'">'+
'<span>'+ img + vals.name +'</span>'+
'<span>'+ image + vals.name +'</span>'+
'</li>';
});

Expand Down
28 changes: 1 addition & 27 deletions lc_select.min.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion themes/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,14 @@


/* images */
.lcslt-img {
.lcslt-img, .lcslt-icon {
display: inline-block;
height: 17px;
width: 20px;
margin-right: 7px;
}

.lcslt-icon {
vertical-align: middle;
font-size: 17px;
}
7 changes: 6 additions & 1 deletion themes/dark_prefixed.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,14 @@


/* images */
.lcslt-dark .lcslt-img {
.lcslt-dark .lcslt-img, .lcslt-dark .lcslt-icon {
display: inline-block;
height: 17px;
width: 20px;
margin-right: 7px;
}

.lcslt-dark .lcslt-icon {
vertical-align: middle;
font-size: 17px;
}
7 changes: 6 additions & 1 deletion themes/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,14 @@


/* images */
.lcslt-img {
.lcslt-img, .lcslt-icon {
display: inline-block;
height: 17px;
width: 20px;
margin-right: 7px;
}

.lcslt-icon {
vertical-align: middle;
font-size: 17px;
}
7 changes: 6 additions & 1 deletion themes/light_prefixed.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,14 @@


/* images */
.lcslt-light .lcslt-img {
.lcslt-light .lcslt-img, .lcslt-light .lcslt-icon {
display: inline-block;
height: 17px;
width: 20px;
margin-right: 7px;
}

.lcslt-light .lcslt-icon {
vertical-align: middle;
font-size: 17px;
}