extract blog/tag modal utils

AprilSylph · Nov 10, 2024 · c8cea89 · c8cea89
1 parent efbaf27
commit c8cea89
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 54 deletions.
diff --git a/src/content_scripts/modals.css b/src/content_scripts/modals.css
@@ -142,3 +142,27 @@
 #xkit-modal .buttons :is(a, button, input).blue {
   background-color: rgb(var(--blue));
 }
+
+.xkit-modal-tag,
+.xkit-modal-blog {
+  display: inline-block;
+
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.xkit-modal-tag {
+  padding: 0 0.5em;
+  border-radius: 1em;
+  margin: 0.25rem 0;
+
+  background-color: rgb(var(--deprecated-accent));
+  color: rgb(var(--navy));
+}
+
+.xkit-modal-blog {
+  font-weight: 700;
+}
+
+.xkit-modal-tag::before { content: '#'; }
+.xkit-modal-blog::before { content: '@'; }
diff --git a/src/features/mass_privater.css b/src/features/mass_privater.css
diff --git a/src/features/mass_privater.js b/src/features/mass_privater.js
@@ -1,15 +1,13 @@
 import { dom } from '../utils/dom.js';
 import { megaEdit } from '../utils/mega_editor.js';
-import { showModal, modalCancelButton, modalCompleteButton, hideModal, showErrorModal } from '../utils/modals.js';
+import { showModal, modalCancelButton, modalCompleteButton, hideModal, showErrorModal, createTagSpan, createBlogSpan } from '../utils/modals.js';
 import { addSidebarItem, removeSidebarItem } from '../utils/sidebar.js';
 import { apiFetch } from '../utils/tumblr_helpers.js';
 import { userBlogs } from '../utils/user.js';
 
 const getPostsFormId = 'xkit-mass-privater-get-posts';
 
 const createBlogOption = ({ name, title, uuid }) => dom('option', { value: uuid, title }, null, [name]);
-const createTagSpan = tag => dom('span', { class: 'mass-privater-tag' }, null, [tag]);
-const createBlogSpan = name => dom('span', { class: 'mass-privater-blog' }, null, [name]);
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 const dateTimeFormat = new Intl.DateTimeFormat(document.documentElement.lang, {
@@ -280,4 +278,3 @@ const sidebarOptions = {
 
 export const main = async () => addSidebarItem(sidebarOptions);
 export const clean = async () => removeSidebarItem(sidebarOptions.id);
-export const stylesheet = true;
diff --git a/src/features/tag_replacer.css b/src/features/tag_replacer.css
diff --git a/src/features/tag_replacer.js b/src/features/tag_replacer.js
@@ -1,15 +1,13 @@
 import { dom } from '../utils/dom.js';
 import { megaEdit } from '../utils/mega_editor.js';
-import { showModal, modalCancelButton, modalCompleteButton, showErrorModal } from '../utils/modals.js';
+import { showModal, modalCancelButton, modalCompleteButton, showErrorModal, createTagSpan, createBlogSpan } from '../utils/modals.js';
 import { addSidebarItem, removeSidebarItem } from '../utils/sidebar.js';
 import { apiFetch } from '../utils/tumblr_helpers.js';
 import { userBlogs } from '../utils/user.js';
 
 const getPostsFormId = 'xkit-tag-replacer-get-posts';
 
 const createBlogOption = ({ name, title, uuid }) => dom('option', { value: uuid, title }, null, [name]);
-const createTagSpan = tag => dom('span', { class: 'tag-replacer-tag' }, null, [tag]);
-const createBlogSpan = name => dom('span', { class: 'tag-replacer-blog' }, null, [name]);
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 const showInitialPrompt = async () => {
@@ -207,4 +205,3 @@ const sidebarOptions = {
 
 export const main = async () => addSidebarItem(sidebarOptions);
 export const clean = async () => removeSidebarItem(sidebarOptions.id);
-export const stylesheet = true;
diff --git a/src/utils/modals.js b/src/utils/modals.js
@@ -59,3 +59,6 @@ export const showErrorModal = exception => {
     buttons: [modalCompleteButton]
   });
 };
+
+export const createTagSpan = tag => dom('span', { class: 'xkit-modal-tag' }, null, [tag]);
+export const createBlogSpan = name => dom('span', { class: 'xkit-modal-blog' }, null, [name]);