From fb19a68f9e228704daa680d347f53b71ec5e4511 Mon Sep 17 00:00:00 2001 From: Ricardo Date: Sat, 28 Feb 2026 11:12:07 +0100 Subject: [PATCH] feat: replace Post button with post-type dropdown menu Clicking Post now shows a dropdown with Note, Bookmark, Reply, Like, Repost, and Article options. Each opens /posts/create with the selected type and pre-filled URL/title in a popup window. --- blogroll.njk | 1 - css/tailwind.css | 54 +++++++++++++++++++++++++++++++++ js/share-post.js | 78 ++++++++++++++++++++++++++++++++++++++---------- news.njk | 9 ++---- podroll.njk | 1 - 5 files changed, 120 insertions(+), 23 deletions(-) diff --git a/blogroll.njk b/blogroll.njk index 382d9e6..525f973 100644 --- a/blogroll.njk +++ b/blogroll.njk @@ -180,7 +180,6 @@ permalink: /blogroll/ class="share-post-btn" :data-share-url="item.url" :data-share-title="item.title" - data-share-type="note" title="Create post" aria-label="Create post" > diff --git a/css/tailwind.css b/css/tailwind.css index 377ae80..49d2489 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -795,3 +795,57 @@ body[data-indiekit-auth="true"] .share-post-btn:hover { border-color: #d1d5db; color: #10b981; } + +/* Post type dropdown */ +.post-type-dropdown { + display: none; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin-bottom: 4px; + background: white; + border: 1px solid #e5e7eb; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + z-index: 50; + min-width: 120px; + overflow: hidden; +} + +.post-type-dropdown.open { + display: block; +} + +.post-type-dropdown-item { + display: block; + width: 100%; + padding: 6px 12px; + font-size: 13px; + color: #374151; + text-align: left; + background: none; + border: none; + cursor: pointer; + white-space: nowrap; +} + +.post-type-dropdown-item:hover { + background: #f3f4f6; + color: #10b981; +} + +/* Dark mode */ +@media (prefers-color-scheme: dark) { + .post-type-dropdown { + background: #1f2937; + border-color: #374151; + } + .post-type-dropdown-item { + color: #d1d5db; + } + .post-type-dropdown-item:hover { + background: #374151; + color: #34d399; + } +} diff --git a/js/share-post.js b/js/share-post.js index 9b9a453..9165613 100644 --- a/js/share-post.js +++ b/js/share-post.js @@ -1,38 +1,86 @@ /** * Share Post — frontend module - * Opens the Indiekit share form in a popup window for creating posts - * from blogroll, podroll, and news page items. + * Opens the Indiekit post creation form in a popup window. + * Provides a dropdown menu with post type choices. * Only active when user is logged in (body[data-indiekit-auth="true"]). */ (function () { + var POST_TYPES = [ + { value: 'note', label: 'Note' }, + { value: 'bookmark', label: 'Bookmark' }, + { value: 'reply', label: 'Reply' }, + { value: 'like', label: 'Like' }, + { value: 'repost', label: 'Repost' }, + { value: 'article', label: 'Article' } + ]; + function isLoggedIn() { return document.body.getAttribute('data-indiekit-auth') === 'true'; } - function openSharePopup(button) { - var url = button.dataset.shareUrl; - var title = button.dataset.shareTitle || ''; - var type = button.dataset.shareType || 'note'; - if (!url) return; - - var shareUrl = '/share/bookmarklet' - + '?name=' + encodeURIComponent(title) + function openPostPopup(type, url, title) { + var createUrl = '/posts/create' + + '?type=' + encodeURIComponent(type) + '&url=' + encodeURIComponent(url) - + '&type=' + encodeURIComponent(type); + + '&name=' + encodeURIComponent(title); window.open( - shareUrl, - 'Sharer', - 'resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=578,height=720,location=0' + createUrl, + 'PostCreator', + 'resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=620,height=780,location=0' ); } + function createDropdown(button) { + if (button.querySelector('.post-type-dropdown')) return; + + var url = button.dataset.shareUrl; + var title = button.dataset.shareTitle || ''; + + var dropdown = document.createElement('div'); + dropdown.className = 'post-type-dropdown'; + + POST_TYPES.forEach(function (pt) { + var item = document.createElement('button'); + item.type = 'button'; + item.className = 'post-type-dropdown-item'; + item.textContent = pt.label; + item.addEventListener('click', function (e) { + e.stopPropagation(); + openPostPopup(pt.value, url, title); + closeAllDropdowns(); + }); + dropdown.appendChild(item); + }); + + button.style.position = 'relative'; + button.appendChild(dropdown); + } + + function closeAllDropdowns() { + document.querySelectorAll('.post-type-dropdown.open').forEach(function (d) { + d.classList.remove('open'); + }); + } + document.addEventListener('click', function (e) { if (!isLoggedIn()) return; + var button = e.target.closest('.share-post-btn'); if (button) { e.preventDefault(); - openSharePopup(button); + e.stopPropagation(); + createDropdown(button); + var dropdown = button.querySelector('.post-type-dropdown'); + var wasOpen = dropdown.classList.contains('open'); + closeAllDropdowns(); + if (!wasOpen) { + dropdown.classList.add('open'); + } + return; } + + // Click outside closes dropdowns + closeAllDropdowns(); }); })(); diff --git a/news.njk b/news.njk index 5ef2965..af12fce 100644 --- a/news.njk +++ b/news.njk @@ -164,8 +164,7 @@ withSidebar: true class="share-post-btn" :data-share-url="item.link" :data-share-title="item.title" - data-share-type="note" - title="Create post" + title="Create post" aria-label="Create post" > ✏️ @@ -219,8 +218,7 @@ withSidebar: true class="share-post-btn mt-2" :data-share-url="item.link" :data-share-title="item.title" - data-share-type="note" - title="Create post" + title="Create post" aria-label="Create post" > ✏️ @@ -297,8 +295,7 @@ withSidebar: true class="share-post-btn" :data-share-url="item.link" :data-share-title="item.title" - data-share-type="note" - title="Create post" + title="Create post" aria-label="Create post" > ✏️ diff --git a/podroll.njk b/podroll.njk index bffc14d..7888eb3 100644 --- a/podroll.njk +++ b/podroll.njk @@ -148,7 +148,6 @@ permalink: /podroll/ class="share-post-btn" :data-share-url="episode.url" :data-share-title="episode.title" - data-share-type="note" title="Create post" aria-label="Create post" >