From f832cfbbd4f7029d4e4ca4af5cfa93b437ebf0ef Mon Sep 17 00:00:00 2001 From: Anton Ignatov Date: Mon, 5 Aug 2019 17:21:58 +0200 Subject: [PATCH] Added tags --- .../javascripts/sitewide/dropdown_selector.js | 130 +++++++++++++----- .../stylesheets/shared/dropdown_selector.scss | 28 +++- .../global_activities/_side_filters.html.erb | 2 +- 3 files changed, 122 insertions(+), 38 deletions(-) diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js index ce29bc911..1d28ea84e 100644 --- a/app/assets/javascripts/sitewide/dropdown_selector.js +++ b/app/assets/javascripts/sitewide/dropdown_selector.js @@ -1,6 +1,7 @@ var dropdownSelector = (function() { function generateDropdown(selector){ var selectElement = $(selector) + var optionContainer; var dropdownContainer = selectElement.after('
').next() $(`
@@ -11,7 +12,11 @@ var dropdownSelector = (function() { ps = new PerfectScrollbar(dropdownContainer.find('.dropdown-container')[0]) activePSB.push(ps) + optionContainer = dropdownContainer.find('.dropdown-container') + dropdownContainer.find('.input-field').click(() => { + optionContainer.find('.dropdown-group, .dropdown-option').remove() + optionContainer.scrollTo(0) dropdownContainer.toggleClass("open") if (dropdownContainer.hasClass("open")) { loadData(selectElement , dropdownContainer) @@ -22,10 +27,6 @@ var dropdownSelector = (function() { updateDropdownDirection(dropdownContainer) }) - dropdownContainer.blur(function() { - console.log(1) - }) - $(window).click(() => { dropdownContainer.removeClass("open") }); @@ -52,53 +53,55 @@ var dropdownSelector = (function() { function loadData(selector, container) { - container.find('.dropdown-container .dropdown-group').remove() - container.find('.dropdown-container .dropdown-option').remove() + function drawOption(option) { + return $(` +
+ ${option.innerHTML} +
" + `) + } + + function drawGroup(group) { + return $(` +
+
${group.label}
+
+ `) + } + + function clickOption() { + $(this).toggleClass('select') + saveData(selector, container) + } + if (selector.data('select-by-group')){ var groups = selector.find('optgroup') $.each(groups, function(gi, group) { - var groupElement = $(` -
-
`+ group.label + `
-
- `) + var groupElement = drawGroup(group) $.each($(group).find('option'), function(oi, option) { - optionElement = $(` -
- ` + option.innerHTML + ` -
" - `) - optionElement.click(function() { - $(this).toggleClass('select') - saveData(container) - }) + optionElement = drawOption(option) + optionElement.click(clickOption) optionElement.appendTo(groupElement) }) groupElement.find('.group-name').click(function() { var groupContainer = $(this).parent() - groupContainer.toggleClass('select') - if (groupContainer.hasClass('select')) { + if (groupContainer.toggleClass('select').hasClass('select')) { groupContainer.find('.dropdown-option').addClass('select') }else{ groupContainer.find('.dropdown-option').removeClass('select') } - saveData(container) + saveData(selector, container) }) groupElement.appendTo(container.find('.dropdown-container')) }) } else { options = selector.find('option') $.each(options, function(oi, option) { - optionElement = $(` -
- ` + option.innerHTML + ` -
" - `) - optionElement.click(function() { - $(this).toggleClass('select') - saveData(container) - }) + optionElement = drawOption(option) + optionElement.click(clickOption) optionElement.appendTo(container.find('.dropdown-container')) }) } @@ -106,7 +109,7 @@ var dropdownSelector = (function() { PerfectSb().update_all() $.each(JSON.parse(container.find('.data-field').val()), function(i, selectedOption) { - container.find('.dropdown-container .dropdown-option[data-value="' + selectedOption + '"]').addClass('select') + container.find('.dropdown-container .dropdown-option[data-value="' + selectedOption.value + '"]').addClass('select') }) if (selector.data('select-by-group')){ $.each(container.find('.dropdown-group'), function(gi, group) { @@ -117,14 +120,69 @@ var dropdownSelector = (function() { } } - function saveData(container) { - var selectArray = [] + function saveData(selector, container) { + var oldSelect = JSON.parse(container.find('.data-field').val()) + var newSelect = [] $.each(container.find('.dropdown-container .dropdown-option.select'), function(oi ,option){ - selectArray.push(option.dataset.value) + newSelect.push({ + label: option.dataset.label, + value: option.dataset.value + }) }) + + $.each(oldSelect, function(oldValue){ + + }) + container.find('.data-field').val(JSON.stringify(selectArray)) + + updateTags(selector, container) } + function updateTags(selector, container) { + selectedOptions = JSON.parse(container.find('.data-field').val()) + + function drawTag(label, tagId) { + var tag = $(`
+
${label}
+ +
`).appendTo(container.find('.input-field')) + + tag.click((e) => {e.stopPropagation()}); + tag.find('.fa-times').click(function(e) { + var label = $(this).closest('.tag-label') + e.stopPropagation() + if (selector.data('combine-tags')) { + container.find('.data-field').val('[]') + $(this).parent().remove() + } else { + + } + updateDropdownDirection($(selector).next()) + }); + + updateDropdownDirection($(selector).next()) + } + + + if (selector.data('combine-tags')){ + container.find('.ds-tags').remove() + if (selectedOptions.length === 1) { + drawTag(selectedOptions[0].label, selectedOptions[0].value) + } else if (allOptionsSelected(selector, container)) { + drawTag(selector.data('select-multiple-all-selected'), 0) + } else if (selectedOptions.length > 1) { + drawTag(selectedOptions.length + ' ' + selector.data('select-multiple-name'), 0) + } + } else { + + } + } + + + function allOptionsSelected(selector, container){ + return container.find('.data-field').val().length === selector.find('option').length && !(selector.data('ajax-data')) + } return { diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 4d6b9fd9e..ded097f64 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -2,18 +2,44 @@ .dropdown-selector-container { display: inline-block; + float: left; position: relative; width: 100%; .input-field { + align-items: center; background: $color-white; border: 1px solid $color-alto; border-radius: 4px; - min-height: 32px; + display: flex; + flex-wrap: wrap; + min-height: 36px; + padding: 3px; position: relative; transition: .2s; width: 100%; z-index: 12; + + .ds-tags { + align-items: center; + background: $color-concrete; + border-radius: 12px; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); + display: flex; + line-height: 14px; + margin: 2px 3px; + padding: 5px 7px; + + .tag-label { + margin-right: 5px + } + + .fas { + cursor: pointer; + font-size: 14px; + opacity: 0.7; + } + } } .dropdown-container { diff --git a/app/views/global_activities/_side_filters.html.erb b/app/views/global_activities/_side_filters.html.erb index 23cec67ae..fecaf6416 100644 --- a/app/views/global_activities/_side_filters.html.erb +++ b/app/views/global_activities/_side_filters.html.erb @@ -49,8 +49,8 @@ 'data-select-all': 'true', 'data-select-multiple-name': t('global_activities.index.l_activities'), 'data-select-multiple-all-selected': t('global_activities.index.all_activities'), - 'data-dropdown-position': 'left', 'data-select-by-group': 'true', + 'data-combine-tags': 'true', 'data-placeholder': t('global_activities.index.select_activity_types') } %>