custom selects

tabler · Feb 11, 2021 · acc31ea · acc31ea
1 parent 92b349f
commit acc31ea
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html
@@ -15,14 +15,20 @@
 		{% assign options = data.options %}
 
 		{% if data.data == 'people' %}
-			{% for person in site.data.people %}
-				<option value="{{ person.id }}">{{ person.full_name }}</option>
+			{% for person in site.data.people limit: 20 %}
+				<option value="{{ person.id }}"{% if include.indicator == 'avatar' %} data-indicator="{% capture indicator %}{% include ui/avatar.html size='xs' person=person %}{% endcapture %}{{ indicator | strip | escape }}"{% endif %}>{{ person.full_name }}</option>
 			{% endfor %}
 
 		{% else %}
 			{% for option in options %}
 				{% if option.first %}
-					<option value="{{ option[0] }}">{{ option[1].name }}</option>
+					{% if include.indicator == 'flag' %}
+						{% capture indicator-html %}
+							{% include ui/flag.html size="xs" flag=option.flag %}
+						{% endcapture %}
+					{% endif %}
+
+					<option value="{{ option[0] }}"{% if include.indicator %} data-indicator="{{ indicator-html | strip | escape }}"{% endif %}>{{ option[1].name }}</option>
 				{% else %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endif %}
@@ -53,6 +59,31 @@
 			},
 			shouldSort: false,
 			{% unless include.show-search %}searchEnabled: false,{% endunless %}
+
+			{% if include.indicator %}
+			callbackOnCreateTemplates: function(template) {
+				var classNames = this.config.className,
+						itemSelectText = this.config.itemSelectText;
+
+				{% capture indicator-text %}
+					{% if include.indicator == 'avatar' %}
+						<span class="avatar avatar-xs"></span>
+					{% elsif include.indicator == 'flag' %}
+						<span class="flag flag-xs"></span>
+					{% endif %}
+				{% endcapture %}
+
+				return {
+					item: function(classNames, data) {
+						return template('<div class="' + String(classNames.item) + ' ' + String( data.highlighted ? classNames.highlightedState : classNames.itemSelectable ) + '" data-item data-id="' + String(data.id) + '" data-value="' + String(data.value) + '"' + String(data.active ? 'aria-selected="true"' : '') + '' + String(data.disabled ? 'aria-disabled="true"' : '') + '><span class="dropdown-item-indicator">{{ indicator-text | strip }}</span>' + String(data.label) + '</div>');
+					},
+					choice: function(classNames, data) {
+						console.log('data', data);
+						return template('<div class="' + String(classNames.item) + ' ' + String(classNames.itemChoice) + ' ' + String( data.disabled ? classNames.itemDisabled : classNames.itemSelectable ) + '" data-select-text="' + String(itemSelectText) + '" data-choice  ' + String( data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable' ) + ' data-id="' + String(data.id) + '" data-value="' + String(data.value) + '" ' + String( data.groupId > 0 ? 'role="treeitem"' : 'role="option"' ) + ' ><span class="dropdown-item-indicator">{{ indicator-text | strip }}</span>' + String(data.label) + '</div>');
+					},
+				};
+			},
+			{% endif %}
 		}));
 
 	});

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -361,7 +361,7 @@ $dropdown-spacer: 1px !default;
 $dropdown-min-width: 11rem !default;
 $dropdown-max-width: 25rem !default;
 
-$dropdown-scrollable-height: 12rem !default;
+$dropdown-scrollable-height: 13rem !default;
 
 $dropdown-link-active-color: $primary !default;
 $dropdown-link-active-bg: $active-bg !default;

diff --git a/src/scss/ui/_dropdowns.scss b/src/scss/ui/_dropdowns.scss
@@ -31,6 +31,16 @@
   text-align: center;
 }
 
+.dropdown-item-indicator {
+  margin-right: .5rem;
+  margin-left: -.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  line-height: 1;
+  vertical-align: middle;
+  align-items: center;
+}
+
 .dropdown-header {
   @include subheader;
   padding-bottom: .25rem;

diff --git a/src/scss/vendor/_choices.scss b/src/scss/vendor/_choices.scss
@@ -22,8 +22,11 @@
   .dropdown-menu {
     width: 100%;
     height: auto;
-    max-height: $dropdown-scrollable-height;
-    overflow-x: hidden;
+
+    .choices__list {
+      max-height: $dropdown-scrollable-height;
+      overflow-x: hidden;
+    }
 
     .dropdown-item {
       padding-left: $input-padding-x;
@@ -52,11 +55,6 @@
 }
 
 .choices__list--dropdown {
-
-  .is-focused &,
-  .is-open & {
-  }
-
   .choices__item--selectable:after {
     content: none;
   }