136 lines
4.9 KiB
PHP
136 lines
4.9 KiB
PHP
@once
|
|
<style>
|
|
.select2-container { width: 100% !important; }
|
|
.select2-container--default .select2-selection--single,
|
|
.select2-container--default .select2-selection--multiple {
|
|
min-height: 2.75rem;
|
|
border-radius: 0.75rem;
|
|
border-color: rgb(63 63 70);
|
|
background: rgb(9 9 11);
|
|
color: rgb(244 244 245);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.select2-container--default .select2-selection--multiple {
|
|
align-items: flex-start;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
border-color: rgb(59 130 246);
|
|
background: rgb(30 64 175);
|
|
color: rgb(255 255 255);
|
|
border-radius: 9999px;
|
|
padding: 0.15rem 0.5rem;
|
|
}
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
|
color: rgb(255 255 255);
|
|
margin-right: 0.35rem;
|
|
}
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: rgb(244 244 245);
|
|
line-height: 2.75rem;
|
|
padding-left: 0.85rem;
|
|
}
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
height: 2.75rem;
|
|
}
|
|
.select2-dropdown {
|
|
border-color: rgb(63 63 70);
|
|
background: rgb(24 24 27);
|
|
color: rgb(244 244 245);
|
|
}
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background: rgb(37 99 235);
|
|
color: white;
|
|
}
|
|
.select2-container--default .select2-results__option[aria-selected=true] {
|
|
background: rgb(39 39 42);
|
|
color: white;
|
|
}
|
|
.select2-search__field {
|
|
background: rgb(9 9 11);
|
|
color: rgb(244 244 245);
|
|
border-color: rgb(63 63 70) !important;
|
|
}
|
|
</style>
|
|
@endonce
|
|
|
|
<script>
|
|
(function () {
|
|
function loadScript(src, callback) {
|
|
const existing = document.querySelector('script[src="' + src + '"]');
|
|
if (existing) {
|
|
existing.addEventListener('load', callback, { once: true });
|
|
if (existing.dataset.loaded === '1') callback();
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.src = src;
|
|
script.onload = function () {
|
|
script.dataset.loaded = '1';
|
|
callback();
|
|
};
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
function loadStyle(href) {
|
|
if (document.querySelector('link[href="' + href + '"]')) return;
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = href;
|
|
document.head.appendChild(link);
|
|
}
|
|
|
|
function initialiseHelpdeskSelects() {
|
|
if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.select2) return;
|
|
|
|
window.jQuery('[data-helpdesk-select2]').each(function () {
|
|
const select = window.jQuery(this);
|
|
|
|
if (select.data('select2')) {
|
|
select.select2('destroy');
|
|
}
|
|
|
|
const isMultiple = this.hasAttribute('multiple');
|
|
|
|
select.select2({
|
|
width: '100%',
|
|
placeholder: this.querySelector('option[value=""]')?.textContent || (isMultiple ? 'Select options' : 'Select option'),
|
|
allowClear: !isMultiple
|
|
});
|
|
|
|
select.off('change.helpdesk').on('change.helpdesk', function () {
|
|
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
this.dispatchEvent(new Event('input', { bubbles: true }));
|
|
});
|
|
});
|
|
}
|
|
|
|
function bootHelpdeskSelects() {
|
|
loadStyle('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');
|
|
|
|
const bootSelect2 = function () {
|
|
if (window.jQuery && window.jQuery.fn && window.jQuery.fn.select2) {
|
|
initialiseHelpdeskSelects();
|
|
return;
|
|
}
|
|
|
|
loadScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', initialiseHelpdeskSelects);
|
|
};
|
|
|
|
if (window.jQuery) {
|
|
bootSelect2();
|
|
return;
|
|
}
|
|
|
|
loadScript('https://code.jquery.com/jquery-3.7.1.min.js', bootSelect2);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', bootHelpdeskSelects);
|
|
document.addEventListener('livewire:navigated', bootHelpdeskSelects);
|
|
document.addEventListener('livewire:updated', bootHelpdeskSelects);
|
|
bootHelpdeskSelects();
|
|
})();
|
|
</script>
|