implement remove buttons on tags

src/features/quick_tags.css

@@ -129,3 +129,25 @@
 .xkit-quick-tags-tags a:hover {
  text-decoration: underline;
 }
+
+.xkit-removable-tag {
+ border: 1px solid rgba(var(--black), .13);
+ border-radius: 1em;
+}
+
+.xkit-removable-tag + .xkit-removable-tag {
+ margin-left: 5px;
+}
+
+.xkit-removable-tag > button {
+ opacity: .5;
+ margin-left: 5px;
+}
+
+.xkit-removable-tag > button:hover:not(:disabled) {
+ opacity: 1;
+}
+
+.xkit-removable-tag > button:disabled {
+ opacity: .13;
+}

src/features/quick_tags.js

@@ -137,17 +137,20 @@ const togglePostOptionPopupDisplay = async function ({ target, currentTarget })
  }
 };
 
-const addTagsToPost = async function ({ postElement, inputTags = [] }) {
+const editPostTags = async function ({ postElement, inputTagsAdd = [], inputTagsRemove = [] }) {
  const postId = postElement.dataset.id;
  const { blog: { uuid }, blogName } = await timelineObject(postElement);
 
  const { response: postData } = await apiFetch(`/v2/blog/${uuid}/posts/${postId}`);
- const { tags = [] } = postData;
+ let { tags = [] } = postData;
 
- const tagsToAdd = inputTags.filter(inputTag => tags.includes(inputTag) === false);
- if (tagsToAdd.length === 0) { return; }
+ const tagsToAdd = inputTagsAdd.filter(inputTag => tags.includes(inputTag) === false);
+ const tagsToRemove = inputTagsRemove.filter(inputTag => tags.includes(inputTag));
+
+ if (tagsToAdd.length === 0 && tagsToRemove.length === 0) { return; }
 
  tags.push(...tagsToAdd);
+ tags = tags.filter(tag => !tagsToRemove.includes(tag));
 
  if (isNpfCompatible(postData)) {
  const { response: { displayText } } = await apiFetch(`/v2/blog/${uuid}/posts/${postId}`, {
@@ -160,7 +163,8 @@ const addTagsToPost = async function ({ postElement, inputTags = [] }) {
 
  notify(displayText);
  } else {
- await megaEdit([postId], { mode: 'add', tags: tagsToAdd });
+ tagsToAdd.length && await megaEdit([postId], { mode: 'add', tags: tagsToAdd });
+ tagsToRemove.length && await megaEdit([postId], { mode: 'remove', tags: tagsToRemove });
  notify(`Edited legacy post on ${blogName}`);
  }
 
@@ -172,6 +176,7 @@ const addFakeTagsToFooter = (postElement, tags) => {
  const fakeTags = tags.map(tag =>
  dom('a', { href: `/tagged/${encodeURIComponent(tag)}`, target: '_blank' }, null, [`#${tag}`])
  );
+ fakeTags.forEach(tagElement => addRemoveTagButton({ tagElement, postElement }));
  const tagsElement = dom('div', { class: tagsClass }, null, [dom('div', null, null, fakeTags)]);
 
  postElement.querySelector('footer').parentNode.prepend(tagsElement);
@@ -181,7 +186,7 @@ const processFormSubmit = function ({ currentTarget }) {
  const postElement = currentTarget.closest(postSelector);
  const inputTags = popupInput.value.split(',').map(inputTag => inputTag.trim());
 
- addTagsToPost({ postElement, inputTags }).catch(showErrorModal);
+ editPostTags({ postElement, inputTagsAdd: inputTags }).catch(showErrorModal);
  currentTarget.reset();
 };
 
@@ -191,7 +196,7 @@ const processBundleClick = function ({ target }) {
  const postElement = target.closest(postSelector);
  const inputTags = target.dataset.tags.split(',').map(inputTag => inputTag.trim());
 
- addTagsToPost({ postElement, inputTags }).catch(showErrorModal);
+ editPostTags({ postElement, inputTagsAdd: inputTags }).catch(showErrorModal);
  popupElement.remove();
 };
 
@@ -216,8 +221,38 @@ const processPosts = postElements => filterPostElements(postElements).forEach(po
  const clonedControlButton = cloneControlButton(controlButtonTemplate, { click: togglePopupDisplay });
  const controlIcon = editButton.closest(controlIconSelector);
  controlIcon.before(clonedControlButton);
+
+ [...postElement.querySelectorAll(`${keyToCss('footerWrapper')} ${keyToCss('tag')}:not(.xkit-removable-tag)`)]
+ .forEach(tagElement => addRemoveTagButton({ tagElement, postElement }));
 });
 
+const addRemoveTagButton = ({ tagElement, postElement }) => {
+ const tag = tagElement.getAttribute('href').replace(/^\/tagged\//, '');
+
+ // if (!preferenceNameGoesHere) return;
+ // if (!['Youtube'].includes(tag)) return;
+
+ const onClickRemove = async event => {
+ event.preventDefault();
+ event.stopPropagation();
+
+ removeButton.disabled = true;
+ editPostTags({ postElement, inputTagsRemove: [tag] })
+ .catch(showErrorModal)
+ .finally(() => { removeButton.disabled = false; });
+ };
+
+ const removeButton =
+ dom('button', null, { click: onClickRemove }, [
+ dom('svg', { height: 10, width: 10, style: '--icon-color-primary: RGB(var(--black));', role: 'presentation', xmlns: 'http://www.w3.org/2000/svg' }, null, [
+ dom('use', { href: '#managed-icon__close-thin', xmlns: 'http://www.w3.org/2000/svg' })
+ ])
+ ]);
+
+ tagElement.append(removeButton);
+ tagElement.classList.add('xkit-removable-tag');
+};
+
 popupElement.addEventListener('click', processBundleClick);
 popupForm.addEventListener('submit', processFormSubmit);
 postOptionPopupElement.addEventListener('click', processPostOptionBundleClick);
@@ -302,6 +337,8 @@ export const clean = async function () {
  $(`.${buttonClass}`).remove();
  $(`.${excludeClass}`).removeClass(excludeClass);
  $(`.${tagsClass}`).remove();
+ $('.xkit-removable-tag > button').remove();
+ $('.xkit-removable-tag').removeClass('xkit-removable-tag');
 
  editedTagsMap = new WeakMap();