From 2d34dcfad9d2c7d1b59183e97a1e82eb7fd59b63 Mon Sep 17 00:00:00 2001 From: Cocoa Date: Sat, 3 Feb 2024 20:40:54 -0500 Subject: [PATCH] Use tom-select instead of chosen --- package.json | 8 ++-- resources/js/bootstrap.js | 3 +- resources/js/search.js | 24 +++++++----- resources/sass/_variables.scss | 4 ++ resources/sass/app.scss | 55 ++++++++++++++++++++++++++-- resources/sass/component/_forms.scss | 8 ---- 6 files changed, 74 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index e2ed9234..1319fb3c 100644 --- 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 index ffa7a215..d5090485 100644 --- 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 index f10c1da1..e11d7382 100644 --- 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 index f2585904..d01196de 100644 --- 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"; \ No newline at end of file diff --git a/resources/sass/app.scss b/resources/sass/app.scss index f97b50ff..3f283ed5 100644 --- 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; + } } \ No newline at end of file diff --git a/resources/sass/component/_forms.scss b/resources/sass/component/_forms.scss index 56ed4e56..bcd177df 100644 --- 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%;