diff --git a/app/assets/stylesheets/components/select_box.scss b/app/assets/stylesheets/components/select_box.scss index e869097203..071b911458 100644 --- a/app/assets/stylesheets/components/select_box.scss +++ b/app/assets/stylesheets/components/select_box.scss @@ -16,3 +16,25 @@ a span.check-mark { .bootstrap-select.btn-group .dropdown-menu.inner { max-height: 400px !important; } + +.select2-container--default .select2-results__group { + border-top: 1px solid #e5e5e5; + color: #6c757d; + font-size: 0.875rem; + cursor: pointer !important; + &::before { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; + margin-right: 0.3em; + transform: rotate(-90deg); + &.open { + transform: rotate(0deg); + } + } +} diff --git a/app/javascript/figgy/figgy_boot.js b/app/javascript/figgy/figgy_boot.js index ebb881facc..bc0ad50ef3 100644 --- a/app/javascript/figgy/figgy_boot.js +++ b/app/javascript/figgy/figgy_boot.js @@ -90,6 +90,50 @@ export default class Initializer { allowClear: true }) + // Allows collapsible optgroups in the subject select + // Pulled from + // https://stackoverflow.com/questions/52156973/collapse-expand-optgroup-using-select2 + $("body").on('click', '.select2-container--open .select2-results__group', function() { + $(this).siblings().toggle(); + let id = $(this).closest('.select2-results__options').attr('id'); + let index = $('.select2-results__group').index(this); + optgroupState[id][index] = !optgroupState[id][index]; + if(optgroupState[id][index]) { + $(this).addClass("open") + $(this).removeClass("closed") + } else { + $(this).addClass("closed") + $(this).removeClass("open") + } + }) + + let optgroupState = {}; + + $('select.select2').on('select2:open', function() { + $('.select2-dropdown--below').css('opacity', 0); + setTimeout(() => { + let groups = $('.select2-container--open .select2-results__group'); + let id = $('.select2-results__options').attr('id'); + if (!optgroupState[id]) { + optgroupState[id] = {}; + } + $.each(groups, (index, v) => { + optgroupState[id][index] = optgroupState[id][index] || false; + if(optgroupState[id][index]) { + $(v).siblings().show(); + $(v).addClass("open") + $(v).removeClass("closed") + } else { + $(v).siblings().hide(); + $(v).addClass("closed") + $(v).removeClass("open") + } + optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide(); + }) + $('.select2-dropdown--below').css('opacity', 1); + }, 0); + }) + $(".document div.member-resources").each((_i, element) => { const $element = $(element) const $form = $element.parent('form') diff --git a/app/views/numismatics/accessions/edit_fields/_firm_id.html.erb b/app/views/numismatics/accessions/edit_fields/_firm_id.html.erb index 9c766a9b04..9b8652f066 100644 --- a/app/views/numismatics/accessions/edit_fields/_firm_id.html.erb +++ b/app/views/numismatics/accessions/edit_fields/_firm_id.html.erb @@ -1,4 +1,4 @@ -