finish redoing tags to allow multiple tag inputs on a single page

This commit is contained in:
Andrew Brown 2021-06-20 18:01:01 -07:00
parent daa08528b6
commit 3e3cd7b79f
4 changed files with 13 additions and 8 deletions

View File

@ -1,8 +1,9 @@
$(document).ready(function () {
$('.js-add-tag').click(function() {
var clicked_tag = $(this).find('.badge').data('badge-caption');
var chips_reference = $(this).closest('.input-field').find('.chips');
M.Chips.getInstance($('.chips')).addChip({tag: clicked_tag});
M.Chips.getInstance(chips_reference).addChip({ tag: clicked_tag });
return false;
});
});

View File

@ -4,4 +4,5 @@ class PageTag < ApplicationRecord
# Delimiter to be used wherever we want to allow submitting multiple tags in a single string
SUBMISSION_DELIMITER = ',,,|||,,,'
end

View File

@ -4,10 +4,11 @@
<i class="material-icons left grey-text">label</i>
<%= f.label field[:id], field[:label] if field[:label] %>
</small>
<div class="chips chips-autocomplete chips-initial"></div>
<div class="chips chips-autocomplete chips-initial" id="chips-for-<%= page.id %>"></div>
<%=
hidden_field_tag 'field[value]', page.page_tags.join(PageTag::SUBMISSION_DELIMITER),
id: 'hidden_page_tags_value'
hidden_field_tag 'field[value]',
page.page_tags.join(PageTag::SUBMISSION_DELIMITER),
class: 'hidden_page_tags_value'
%>
<div class="help-text show-when-focused">
@ -30,18 +31,20 @@
</div>
<%= content_for :javascript do %>
function update_hidden_page_tag_value(e) {
var chips = M.Chips.getInstance($('.chips')).chipsData.map(function (c) {
var chips = M.Chips.getInstance($(e).parent().find('.chips')).chipsData.map(function (c) {
return c['tag'];
});
var hidden_input = $('#hidden_page_tags_value').first();
var hidden_input = $(e).parent().find('.hidden_page_tags_value');
hidden_input.val(chips.join('<%= PageTag::SUBMISSION_DELIMITER %>'));
// Trigger autosave manually
hidden_input.closest('form').submit();
M.toast({ html: "Saving changes..." });
}
var chips = $('.chips-autocomplete').chips({
var chips = $('#chips-for-<%= page.id %>').chips({
placeholder: 'Add tags',
secondaryPlaceholder: '+ Tag',
autocompleteOptions: {

View File

@ -17,7 +17,7 @@
<div class="activator" style="height: 200px; background: url('<%= content_image %>'); background-size: cover;"></div>
<% end %>
<span class="card-title js-content-name activator">
<span class="card-title js-content-name activator" style="padding: 0.2em 0.3em">
<div class="bordered-text">
<%= ContentFormatterService.show(text: content.name.presence || 'Untitled', viewing_user: current_user) %>
</div>