mirror of
https://github.com/tabler/tabler.git
synced 2025-12-24 10:48:14 +04:00
57 lines
2.2 KiB
HTML
57 lines
2.2 KiB
HTML
{% assign key = include.key | default: 'people' %}
|
|
{% assign data = site.data.selects[key] %}
|
|
{% assign options = data.options %}
|
|
<select name="{{ key }}" id="select-{{ key }}" class="form-select">
|
|
{% if options == 'people' %}
|
|
{% for person in site.data.people limit: 20 %}
|
|
<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
|
|
{% endfor %}
|
|
|
|
{% else %}
|
|
{% for option in options %}
|
|
{% if option[1] %}
|
|
{% assign value = option[0] %}
|
|
{% assign name = option[1].name %}
|
|
{% assign all-data = option[1] %}
|
|
{% else %}
|
|
{% assign value = option %}
|
|
{% assign name = option %}
|
|
{% endif %}
|
|
<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
</select>
|
|
|
|
{% append_lib selectize %}
|
|
{% capture_global scripts %}
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#select-{{ key }}').selectize({
|
|
{% if key == "countries" %}
|
|
render: {
|
|
option: function (data, escape) {
|
|
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
|
|
},
|
|
item: function (data, escape) {
|
|
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
|
|
}
|
|
}
|
|
{% elsif key == "people" %}
|
|
render: {
|
|
option: function (data, escape) {
|
|
return '<div class="option"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
|
|
},
|
|
item: function (data, escape) {
|
|
return '<div class="d-flex align-items-center"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
|
|
}
|
|
}
|
|
{% endif %}
|
|
{% if data.max-items %}
|
|
maxItems: {{ data.max-items }}
|
|
{% endif %}
|
|
});
|
|
});
|
|
</script>
|
|
{% endcapture_global %}
|