From 687ddc22e27b9f57d6e42a642f4263d0fda05fcc Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 19 Nov 2022 16:58:32 -0800 Subject: [PATCH 1/8] initial commit 65 minutes --- src/scripts/_index.json | 1 + src/scripts/header_blogs.js | 74 +++++++++++++++++++++++++++++++++++ src/scripts/header_blogs.json | 21 ++++++++++ 3 files changed, 96 insertions(+) create mode 100644 src/scripts/header_blogs.js create mode 100644 src/scripts/header_blogs.json diff --git a/src/scripts/_index.json b/src/scripts/_index.json index 429b3787e..d94223411 100644 --- a/src/scripts/_index.json +++ b/src/scripts/_index.json @@ -4,6 +4,7 @@ "classic_search", "cleanfeed", "collapsed_queue", + "header_blogs", "hide_avatars", "limit_checker", "mass_deleter", diff --git a/src/scripts/header_blogs.js b/src/scripts/header_blogs.js new file mode 100644 index 000000000..02a4f509a --- /dev/null +++ b/src/scripts/header_blogs.js @@ -0,0 +1,74 @@ +import { keyToCss } from '../util/css_map.js'; +import { dom } from '../util/dom.js'; +import { buildStyle } from '../util/interface.js'; +import { pageModifications } from '../util/mutations.js'; +import { getPreferences } from '../util/preferences.js'; +import { userBlogs } from '../util/user.js'; + +let shapeMode; + +const styleElement = buildStyle(` + .xkit-header-avatar { + height: 26px; + width: 26px; + } + + #xkit-header-blogs.circle .xkit-header-avatar { + border-radius: 13px; + } + + #xkit-header-blogs.square .xkit-header-avatar { + border-radius: 3px; + } + + #xkit-header-blogs { + overflow: hidden; + flex: 1.5; + } + + #xkit-header-blogs-inner { + display: flex; + flex-wrap: wrap; + justify-content: right; + + height: 26px; + + column-gap: 12px; + margin: 0px 16px; + } + + header > ${keyToCss('menuRight')} > ${keyToCss('container')}:empty { + margin: 0 !important; + } +`); + +const avatarElements = userBlogs.map(({ name, avatar }) => { + const { url } = avatar[avatar.length - 1]; + return dom('a', { href: `/blog/${name}`, title: name }, null, [ + dom('img', { class: 'xkit-header-avatar', src: url }) + ]); +}); + +const headerBlogElement = dom('div', { id: 'xkit-header-blogs' }, null, [ + dom('div', { id: 'xkit-header-blogs-inner' }, null, avatarElements) +]); + +const processRightMenu = ([rightMenu]) => { + rightMenu.before(headerBlogElement); +}; + +export const main = async function () { + document.head.append(styleElement); + ({ shapeMode } = await getPreferences('header_blogs')); + + headerBlogElement.classList.add(shapeMode); + + pageModifications.register(`header > ${keyToCss('menuRight')}`, processRightMenu); +}; + +export const clean = async function () { + pageModifications.unregister(processRightMenu); + + headerBlogElement.remove(); + styleElement.remove(); +}; diff --git a/src/scripts/header_blogs.json b/src/scripts/header_blogs.json new file mode 100644 index 000000000..d8c80bac2 --- /dev/null +++ b/src/scripts/header_blogs.json @@ -0,0 +1,21 @@ +{ + "title": "Header Blogs", + "description": "Show your blogs in the header", + "icon": { + "class_name": "ri-account-circle-line", + "color": "white", + "background_color": "#000000" + }, + "relatedTerms": [ "Header Options" ], + "preferences": { + "shapeMode": { + "label": "Avatar Shape", + "type": "select", + "options": [ + { "value": "circle", "label": "Circle" }, + { "value": "square", "label": "Square" } + ], + "default": "circle" + } + } +} From 85879834179596ccb8785846d242d312e0f0e8b4 Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 19 Nov 2022 17:53:23 -0800 Subject: [PATCH 2/8] fix shape toggle --- src/scripts/header_blogs.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scripts/header_blogs.js b/src/scripts/header_blogs.js index 02a4f509a..992841714 100644 --- a/src/scripts/header_blogs.js +++ b/src/scripts/header_blogs.js @@ -13,11 +13,11 @@ const styleElement = buildStyle(` width: 26px; } - #xkit-header-blogs.circle .xkit-header-avatar { + #xkit-header-blogs[data-shape="circle"] .xkit-header-avatar { border-radius: 13px; } - #xkit-header-blogs.square .xkit-header-avatar { + #xkit-header-blogs[data-shape="square"] .xkit-header-avatar { border-radius: 3px; } @@ -61,7 +61,7 @@ export const main = async function () { document.head.append(styleElement); ({ shapeMode } = await getPreferences('header_blogs')); - headerBlogElement.classList.add(shapeMode); + headerBlogElement.dataset.shape = shapeMode; pageModifications.register(`header > ${keyToCss('menuRight')}`, processRightMenu); }; From 156a2ad494d3d89b3ef4269ed4c5508cd11596f7 Mon Sep 17 00:00:00 2001 From: Marcus Date: Sun, 20 Nov 2022 02:17:42 -0800 Subject: [PATCH 3/8] use native avatar shape pref --- src/scripts/header_blogs.js | 15 ++++----------- src/scripts/header_blogs.json | 13 +------------ 2 files changed, 5 insertions(+), 23 deletions(-) diff --git a/src/scripts/header_blogs.js b/src/scripts/header_blogs.js index 992841714..34e5289c7 100644 --- a/src/scripts/header_blogs.js +++ b/src/scripts/header_blogs.js @@ -2,22 +2,19 @@ import { keyToCss } from '../util/css_map.js'; import { dom } from '../util/dom.js'; import { buildStyle } from '../util/interface.js'; import { pageModifications } from '../util/mutations.js'; -import { getPreferences } from '../util/preferences.js'; import { userBlogs } from '../util/user.js'; -let shapeMode; - const styleElement = buildStyle(` .xkit-header-avatar { height: 26px; width: 26px; } - #xkit-header-blogs[data-shape="circle"] .xkit-header-avatar { + .xkit-header-avatar.circle { border-radius: 13px; } - #xkit-header-blogs[data-shape="square"] .xkit-header-avatar { + .xkit-header-avatar.square { border-radius: 3px; } @@ -42,10 +39,10 @@ const styleElement = buildStyle(` } `); -const avatarElements = userBlogs.map(({ name, avatar }) => { +const avatarElements = userBlogs.map(({ name, avatar, theme: { avatarShape } }) => { const { url } = avatar[avatar.length - 1]; return dom('a', { href: `/blog/${name}`, title: name }, null, [ - dom('img', { class: 'xkit-header-avatar', src: url }) + dom('img', { class: `xkit-header-avatar ${avatarShape}`, src: url }) ]); }); @@ -59,10 +56,6 @@ const processRightMenu = ([rightMenu]) => { export const main = async function () { document.head.append(styleElement); - ({ shapeMode } = await getPreferences('header_blogs')); - - headerBlogElement.dataset.shape = shapeMode; - pageModifications.register(`header > ${keyToCss('menuRight')}`, processRightMenu); }; diff --git a/src/scripts/header_blogs.json b/src/scripts/header_blogs.json index d8c80bac2..c07fa7dcb 100644 --- a/src/scripts/header_blogs.json +++ b/src/scripts/header_blogs.json @@ -6,16 +6,5 @@ "color": "white", "background_color": "#000000" }, - "relatedTerms": [ "Header Options" ], - "preferences": { - "shapeMode": { - "label": "Avatar Shape", - "type": "select", - "options": [ - { "value": "circle", "label": "Circle" }, - { "value": "square", "label": "Square" } - ], - "default": "circle" - } - } + "relatedTerms": [ "Header Options" ] } From 7a0fb62d5924366489697df8000392f20a2055ce Mon Sep 17 00:00:00 2001 From: Marcus Date: Sun, 20 Nov 2022 12:01:33 -0800 Subject: [PATCH 4/8] improve container styling --- src/scripts/header_blogs.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/scripts/header_blogs.js b/src/scripts/header_blogs.js index 34e5289c7..db87055c6 100644 --- a/src/scripts/header_blogs.js +++ b/src/scripts/header_blogs.js @@ -21,17 +21,18 @@ const styleElement = buildStyle(` #xkit-header-blogs { overflow: hidden; flex: 1.5; + max-width: max-content; } #xkit-header-blogs-inner { display: flex; flex-wrap: wrap; - justify-content: right; + justify-content: space-evenly; height: 26px; column-gap: 12px; - margin: 0px 16px; + margin: 0px 12px; } header > ${keyToCss('menuRight')} > ${keyToCss('container')}:empty { From 949859e352db6688fc280622fe36681faa98a458 Mon Sep 17 00:00:00 2001 From: Marcus Date: Sun, 20 Nov 2022 12:18:36 -0800 Subject: [PATCH 5/8] add count preference --- src/scripts/header_blogs.js | 27 +++++++++++++++++---------- src/scripts/header_blogs.json | 9 ++++++++- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/scripts/header_blogs.js b/src/scripts/header_blogs.js index db87055c6..a84792d17 100644 --- a/src/scripts/header_blogs.js +++ b/src/scripts/header_blogs.js @@ -2,6 +2,7 @@ import { keyToCss } from '../util/css_map.js'; import { dom } from '../util/dom.js'; import { buildStyle } from '../util/interface.js'; import { pageModifications } from '../util/mutations.js'; +import { getPreferences } from '../util/preferences.js'; import { userBlogs } from '../util/user.js'; const styleElement = buildStyle(` @@ -40,22 +41,28 @@ const styleElement = buildStyle(` } `); -const avatarElements = userBlogs.map(({ name, avatar, theme: { avatarShape } }) => { - const { url } = avatar[avatar.length - 1]; - return dom('a', { href: `/blog/${name}`, title: name }, null, [ - dom('img', { class: `xkit-header-avatar ${avatarShape}`, src: url }) - ]); -}); - -const headerBlogElement = dom('div', { id: 'xkit-header-blogs' }, null, [ - dom('div', { id: 'xkit-header-blogs-inner' }, null, avatarElements) -]); +let headerBlogElement; const processRightMenu = ([rightMenu]) => { rightMenu.before(headerBlogElement); }; export const main = async function () { + const { maxBlogs } = await getPreferences('header_blogs'); + + const avatarElements = userBlogs + .slice(0, Number.parseInt(maxBlogs, 10) || Infinity) + .map(({ name, avatar, theme: { avatarShape } }) => { + const { url } = avatar[avatar.length - 1]; + return dom('a', { href: `/blog/${name}`, title: name }, null, [ + dom('img', { class: `xkit-header-avatar ${avatarShape}`, src: url }) + ]); + }); + + headerBlogElement = dom('div', { id: 'xkit-header-blogs' }, null, [ + dom('div', { id: 'xkit-header-blogs-inner' }, null, avatarElements) + ]); + document.head.append(styleElement); pageModifications.register(`header > ${keyToCss('menuRight')}`, processRightMenu); }; diff --git a/src/scripts/header_blogs.json b/src/scripts/header_blogs.json index c07fa7dcb..68e0e1f9e 100644 --- a/src/scripts/header_blogs.json +++ b/src/scripts/header_blogs.json @@ -6,5 +6,12 @@ "color": "white", "background_color": "#000000" }, - "relatedTerms": [ "Header Options" ] + "relatedTerms": [ "Header Options" ], + "preferences": { + "maxBlogs": { + "type": "text", + "label": "Maximum blogs", + "default": "100" + } + } } From d489175f0e1d71cfbfd95e2f3bfa8f7ce7e8624e Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 4 Feb 2023 05:23:40 -0800 Subject: [PATCH 6/8] use soft navigate in header blogs --- src/scripts/header_blogs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scripts/header_blogs.js b/src/scripts/header_blogs.js index a84792d17..ab377d99a 100644 --- a/src/scripts/header_blogs.js +++ b/src/scripts/header_blogs.js @@ -3,6 +3,7 @@ import { dom } from '../util/dom.js'; import { buildStyle } from '../util/interface.js'; import { pageModifications } from '../util/mutations.js'; import { getPreferences } from '../util/preferences.js'; +import { onClickNavigate } from '../util/tumblr_helpers.js'; import { userBlogs } from '../util/user.js'; const styleElement = buildStyle(` @@ -54,7 +55,7 @@ export const main = async function () { .slice(0, Number.parseInt(maxBlogs, 10) || Infinity) .map(({ name, avatar, theme: { avatarShape } }) => { const { url } = avatar[avatar.length - 1]; - return dom('a', { href: `/blog/${name}`, title: name }, null, [ + return dom('a', { href: `/blog/${name}`, title: name }, { click: onClickNavigate }, [ dom('img', { class: `xkit-header-avatar ${avatarShape}`, src: url }) ]); }); From 366b6758274c50b7d70bc4362f29f63d1d66243e Mon Sep 17 00:00:00 2001 From: Marcus Date: Thu, 29 Jun 2023 14:32:36 -0700 Subject: [PATCH 7/8] preliminary header blogs vertical nav fix --- src/scripts/header_blogs.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/scripts/header_blogs.js b/src/scripts/header_blogs.js index ab377d99a..7aaf65e1d 100644 --- a/src/scripts/header_blogs.js +++ b/src/scripts/header_blogs.js @@ -48,6 +48,11 @@ const processRightMenu = ([rightMenu]) => { rightMenu.before(headerBlogElement); }; +const processNavigationLinks = ([navigationLinks]) => { + const logoContainer = navigationLinks.querySelector(keyToCss('logoContainer')); + logoContainer ? logoContainer.after(headerBlogElement) : navigationLinks.prepend(headerBlogElement); +}; + export const main = async function () { const { maxBlogs } = await getPreferences('header_blogs'); @@ -66,10 +71,12 @@ export const main = async function () { document.head.append(styleElement); pageModifications.register(`header > ${keyToCss('menuRight')}`, processRightMenu); + pageModifications.register(keyToCss('navigationLinks'), processNavigationLinks); }; export const clean = async function () { pageModifications.unregister(processRightMenu); + pageModifications.unregister(processNavigationLinks); headerBlogElement.remove(); styleElement.remove(); From d5c3b1270db89916c9c39fb45a6d87a8887ed978 Mon Sep 17 00:00:00 2001 From: Marcus Date: Sat, 14 Sep 2024 12:28:38 -0700 Subject: [PATCH 8/8] use automatic styleelement --- src/features/header_blogs.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/features/header_blogs.js b/src/features/header_blogs.js index 0636f48ae..caeea75aa 100644 --- a/src/features/header_blogs.js +++ b/src/features/header_blogs.js @@ -6,7 +6,7 @@ import { getPreferences } from '../utils/preferences.js'; import { onClickNavigate } from '../utils/tumblr_helpers.js'; import { userBlogs } from '../utils/user.js'; -const styleElement = buildStyle(` +export const styleElement = buildStyle(` .xkit-header-avatar { height: 26px; width: 26px; @@ -69,7 +69,6 @@ export const main = async function () { dom('div', { id: 'xkit-header-blogs-inner' }, null, avatarElements) ]); - document.head.append(styleElement); pageModifications.register(`header > ${keyToCss('menuRight')}`, processRightMenu); pageModifications.register(keyToCss('navigationLinks'), processNavigationLinks); }; @@ -79,5 +78,4 @@ export const clean = async function () { pageModifications.unregister(processNavigationLinks); headerBlogElement.remove(); - styleElement.remove(); };