mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 08:44:56 +02:00
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.
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
})();
|
||||
|
||||
9
news.njk
9
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"
|
||||
>
|
||||
<span class="share-post-icon">✏️</span>
|
||||
@@ -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"
|
||||
>
|
||||
<span class="share-post-icon">✏️</span>
|
||||
@@ -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"
|
||||
>
|
||||
<span class="share-post-icon">✏️</span>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user