mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-28 19:24:10 +08:00
Added tags
This commit is contained in:
Anton Ignatov
aignatov-bio
parent
04bd5269ec
commit
f832cfbbd4
3 changed files with 122 additions and 38 deletions
|
|
@ -1,6 +1,7 @@
|
|||
var dropdownSelector = (function() {
|
||||
function generateDropdown(selector){
|
||||
var selectElement = $(selector)
|
||||
var optionContainer;
|
||||
var dropdownContainer = selectElement.after('<div class="dropdown-selector-container"></div>').next()
|
||||
$(`
|
||||
<div class="input-field"></div>
|
||||
|
|
@ -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 $(`
|
||||
<div class="dropdown-option checkbox-icon"
|
||||
data-label="${option.innerHTML}"
|
||||
data-value="${option.value}">
|
||||
${option.innerHTML}
|
||||
</div>"
|
||||
`)
|
||||
}
|
||||
|
||||
function drawGroup(group) {
|
||||
return $(`
|
||||
<div class="dropdown-group">
|
||||
<div class="group-name checkbox-icon">${group.label}</div>
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
|
||||
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 = $(`
|
||||
<div class="dropdown-group">
|
||||
<div class="group-name checkbox-icon">`+ group.label + `</div>
|
||||
</div>
|
||||
`)
|
||||
var groupElement = drawGroup(group)
|
||||
$.each($(group).find('option'), function(oi, option) {
|
||||
optionElement = $(`
|
||||
<div class="dropdown-option checkbox-icon" data-value="` + option.value + `">
|
||||
` + option.innerHTML + `
|
||||
</div>"
|
||||
`)
|
||||
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 = $(`
|
||||
<div class="dropdown-option checkbox-icon" data-value="` + option.value + `">
|
||||
` + option.innerHTML + `
|
||||
</div>"
|
||||
`)
|
||||
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 = $(`<div class="ds-tags" >
|
||||
<div class="tag-label" data-ds-tag-id=${tagId}>${label}</div>
|
||||
<i class="fas fa-times"></i>
|
||||
</div>`).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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
} %>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue