Use tom-select instead of chosen

lolibrary · Feb 4, 2024 · 2d34dcf · 2d34dcf
1 parent f7e690d
commit 2d34dcf
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -23,16 +23,14 @@
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
-        "vue": "2.6.11",
-        "vue-template-compiler": "2.6.11"
+        "vue-template-compiler": "^2.7.16"
     },
     "dependencies": {
         "@fortawesome/fontawesome-pro": "file:/../fortawesome-fontawesome-pro-5.15.1.tgz",
-        "bootstrap4c-chosen": "^1.1.1",
+        "bootstrap-slider": "11.0.2",
         "qs": "^6.8.0",
         "sass-svg-uri": "^1.0.0",
         "simple-lightbox": "^2.1.0",
-        "vue-select": "^3.1.0",
-        "bootstrap-slider": "11.0.2"
+        "tom-select": "^2.3.1"
     }
 }
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
@@ -19,7 +19,7 @@ try {
  * This will just attach itself to any .form-control-chosen element.
  */
 
-window.chosen = require('chosen-js');
+window.TomSelect = require('tom-select');
 
 /**
  * simple-lightbox is a lightweight lightbox interface, to make paging through
@@ -41,7 +41,6 @@ window.chosen = require('chosen-js');
  */
 
 $(() => {
-    $('.form-control-chosen').chosen()
     $('[data-toggle="tooltip"]').tooltip()
     let lightbox = new SimpleLightbox({elements: '[data-lightbox="show"]'});
 });

diff --git a/resources/js/search.js b/resources/js/search.js
@@ -13,11 +13,16 @@ $(() => {
             searchJs.year_slider.on('slideStop', (evt) => {
                 searchJs.doSearch();
             });
+            searchJs.filters = [];
 
-            $('.form-control-chosen').chosen().on('change', (evt) => {
-                let filter = $(evt.currentTarget);
-                searchJs.matchVisibility(filter);
-                searchJs.doSearch();
+            let selectSettings = {closeAfterSelect: true, plugins: ['remove_button']};
+            document.querySelectorAll('.form-control-chosen').forEach((el)=>{
+                 let tom = new TomSelect(el, selectSettings);
+                 tom.on('change', (val) => {
+                    searchJs.matchVisibility(tom, val);
+                    searchJs.doSearch();
+                });
+                searchJs.filters.push(tom);
             });
 
             $('button[name="action:search"]')
@@ -43,8 +48,7 @@ $(() => {
                 evt.stopPropagation();
                 evt.preventDefault();
 
-                $('select.form-control-filter').val([]);
-                $('select.form-control-filter').trigger('chosen:updated');
+                searchJs.filters.forEach((filter) => filter.clear());
                 $('.match_type').hide();
                 let slider_min = parseInt($("#year-slider").data('slider-min'), 10);
                 let slider_max = parseInt($("#year-slider").data('slider-max'));
@@ -60,7 +64,7 @@ $(() => {
                 searchJs.doSearch();
             });
 
-            $('select.form-control-filter').each(function(){searchJs.matchVisibility($(this))});
+            searchJs.filters.forEach((filter) => {searchJs.matchVisibility(filter, filter.getValue());});
         },
 
         triggerSearch: (evt) => {
@@ -82,9 +86,9 @@ $(() => {
                     searchJs.results.html(text);
                 });
         },
-        matchVisibility: (filter) => {
-            let matcher = filter.nextAll('.match_type');
-            if (filter.val().length > 0) {
+        matchVisibility: (filter, val) => {
+            let matcher = $(filter.wrapper).nextAll('.match_type');
+            if (val.length > 0) {
                 matcher.show();
             } else {
                 matcher.hide();

diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
@@ -16,3 +16,7 @@ $slider-line-height: 10px;
 $brand-primary: #6868a1;
 $slider-primary-bottom: #6868a1;
 $slider-horizontal-width: 100%;
+
+// Dropdowns
+$chosen-svg-up:                 "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z";
+$chosen-svg-down:               "M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z";
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -12,10 +12,11 @@
 @import '~bootstrap/scss/bootstrap';
 
 // Chosen
-@import '~sass-svg-uri/svg-uri';
-@import 'chosen/component-variables';
-@import 'chosen/component-chosen';
+// @import '~sass-svg-uri/svg-uri';
+// @import 'chosen/component-variables';
+// @import 'chosen/component-chosen';
 
+@import '~tom-select/dist/scss/tom-select.bootstrap4';
 // Bootstrap-slider
 @import 'slider/bootstrap-slider';
 
@@ -31,6 +32,8 @@
 @import "component/forms";
 @import "component/footer";
 
+$select-arrow-color: $gray-500;
+
 .navbar-laravel {
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
@@ -71,4 +74,50 @@
 
 .year_match_type {
   display: block;
+}
+
+.ts-control:not(.rtl) {
+	padding-right:	max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important;
+}
+
+.ts-control.rtl {
+	padding-left:	max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important;
+}
+
+.ts-wrapper {
+  .ts-control {
+    --ts-pr-caret: 2rem;
+
+    &::after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: 50%;
+      margin-top: round(-0.5 * $select-arrow-size);
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: $select-arrow-size $select-arrow-size 0 $select-arrow-size;
+      border-color: $select-arrow-color transparent transparent transparent;
+    }
+
+    &:not(.rtl)::after {
+      right: $select-arrow-offset;
+    }
+
+    &.rtl::after {
+      left: $select-arrow-offset;
+    }
+  }
+
+  &.dropdown-active .ts-control::after {
+    margin-top: $select-arrow-size * -0.8;
+    border-width: 0 $select-arrow-size $select-arrow-size $select-arrow-size;
+    border-color: transparent transparent $select-arrow-color transparent;
+  }
+
+  &.input-active .ts-control,
+  &.input-active .ts-control input {
+    cursor: text;
+  }
 }
diff --git a/resources/sass/component/_forms.scss b/resources/sass/component/_forms.scss
@@ -5,14 +5,6 @@
   background-color: theme-color-level(primary, -10) !important;
 }
 
-.v-select .dropdown-toggle {
-  border: 0 !important;
-}
-
-.form-control {
-  border: 1px solid #ccc !important;
-}
-
 .match_type, .year_match_type {
   padding-top: 10px;
   width: 100%;