allow removing existing tag with -tag, ctrl+enter for form submission, disable autocomplete on tag editor

This commit is contained in:
byte[] 2020-09-14 22:00:44 -04:00
parent d03b5a2c82
commit 074453ddf1
3 changed files with 28 additions and 3 deletions

View file

@ -2,7 +2,7 @@
* Fancy tag editor.
*/
import { $, $$, clearEl, removeEl, showEl, hideEl, escapeHtml } from './utils/dom';
import { $, $$, clearEl, removeEl, showEl, hideEl, escapeCss, escapeHtml } from './utils/dom';
function setupTagsInput(tagBlock) {
const [ textarea, container ] = $$('.js-taginput', tagBlock);
@ -29,6 +29,9 @@ function setupTagsInput(tagBlock) {
// Respond to autocomplete form clicks
inputField.addEventListener('autocomplete', handleAutocomplete);
// Respond to Ctrl+Enter shortcut
tagBlock.addEventListener('keydown', handleCtrlEnter);
// TODO: Cleanup this bug fix
// Switch to fancy tagging if user settings want it
if (fancyEditorRequested(tagBlock)) {
@ -85,11 +88,27 @@ function setupTagsInput(tagBlock) {
}
function handleCtrlEnter(event) {
const { keyCode, ctrlKey } = event;
if (keyCode !== 13 || !ctrlKey) return;
$('[type="submit"]', tagBlock.closest('form')).click();
}
function insertTag(name) {
name = name.trim(); // eslint-disable-line no-param-reassign
// Add if not degenerate or already present
if (name.length === 0 || tags.indexOf(name) !== -1) return;
// Remove instead if the tag name starts with a minus
if (name[0] === "-") {
name = name.slice(1); // eslint-disable-line no-param-reassign
tagLink = $(`[data-tag-name="${escapeCss(name)}"]`, container);
return removeTag(name, tagLink.parentNode);
}
tags.push(name);
textarea.value = tags.join(', ');

View file

@ -62,8 +62,13 @@ function escapeHtml(html) {
.replace(/"/g, '"');
}
function escapeCss(css) {
return css.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"');
}
function findFirstTextNode(of) {
return Array.prototype.filter.call(of.childNodes, el => el.nodeType === Node.TEXT_NODE)[0];
}
export { $, $$, showEl, hideEl, toggleEl, clearEl, removeEl, makeEl, insertBefore, onLeftClick, whenReady, escapeHtml, findFirstTextNode };
export { $, $$, showEl, hideEl, toggleEl, clearEl, removeEl, makeEl, insertBefore, onLeftClick, whenReady, escapeHtml, escapeCss, findFirstTextNode };

View file

@ -1,7 +1,8 @@
elixir:
textarea_options = [
class: "input input--wide tagsinput js-image-input js-taginput js-taginput-plain js-taginput-#{@name}",
placeholder: "Add tags separated with commas"
placeholder: "Add tags separated with commas",
autocomplete: "off"
]
html_options = Keyword.merge(textarea_options, assigns[:extra] || [])