retoor/devplacepy
1
0
Fork 1
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat: add reactions, bookmarks, polls modules with session remember config

Browse Source 
Add three new feature modules (reactions, bookmarks, polls) with corresponding database tables, indexes, and router registrations. Introduce `SESSION_MAX_AGE_REMEMBER` config for extended session duration, add `get_unread_messages` template global, and include operational defaults for rate limiting and session settings in `site_settings`.
This commit is contained in:
retoor
2026-06-06 14:31:42 +00:00
parent b4e09f4b37
commit 921e382cbc
79 changed files with 2431 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devplacepy/static/css/admin.css
-5
View File
@@ -116,7 +116,6 @@
color: var(--text-secondary);
border: none;
cursor: pointer;
transition: all 0.2s;
}
.admin-btn:hover {
@@ -239,7 +238,6 @@
background: var(--bg-card-hover);
border: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
padding: 0;
display: inline-flex;
align-items: center;
@@ -258,7 +256,6 @@
height: 16px;
border-radius: 50%;
background: var(--text-primary);
transition: transform 0.2s;
}
.admin-toggle-switch.active .admin-toggle-knob {
@@ -297,7 +294,6 @@
color: var(--text-secondary);
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
user-select: none;
}
@@ -338,7 +334,6 @@
font-weight: 600;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.15s;
}
.pagination-page:hover {
devplacepy/static/css/attachments.css
+3 -7
View File
@@ -7,7 +7,6 @@
font-size: 1.125rem;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
background: none;
border: 1px solid transparent;
line-height: 1;
@@ -99,7 +98,6 @@
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.attachment-preview:hover .attachment-remove {
@@ -118,7 +116,6 @@
.attachment-progress-bar {
height: 100%;
background: var(--accent);
transition: width 0.3s;
}
.attachment-gallery {
@@ -136,7 +133,6 @@
border: 1px solid var(--border);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
background: var(--bg-card-hover);
}
@@ -261,9 +257,9 @@
@media (hover: none) and (pointer: coarse) {
.attachment-preview .attachment-remove {
width: 28px;
height: 28px;
font-size: 0.875rem;
width: 32px;
height: 32px;
font-size: 1rem;
opacity: 1;
}
}
devplacepy/static/css/auth.css
-1
View File
@@ -99,7 +99,6 @@
background: var(--accent);
color: #fff;
border-radius: var(--radius);
transition: all 0.2s;
}
.auth-submit:hover {
devplacepy/static/css/base.css
+9 -23
View File
@@ -72,7 +72,6 @@
font-weight: 600;
cursor: pointer;
background: var(--bg-card-hover);
transition: all 0.2s;
}
.topic-radio {
width: auto;
@@ -151,7 +150,6 @@
padding: 0.75rem;
width: 100%;
border-radius: var(--radius);
transition: background 0.2s;
}
.related-link:hover {
background: var(--bg-card);
@@ -345,7 +343,6 @@ body {
a {
color: var(--accent);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
@@ -369,7 +366,6 @@ input, textarea, select {
border-radius: var(--radius);
padding: 0.625rem 0.875rem;
outline: none;
transition: border-color 0.2s;
width: 100%;
}
@@ -413,7 +409,6 @@ img {
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 600;
transition: all 0.2s;
white-space: nowrap;
}
@@ -537,12 +532,11 @@ img {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.2s;
}
.topnav-link:hover { color: var(--text-primary); background: var(--bg-card); }
.topnav-link.active { color: var(--accent); background: var(--accent-light); }
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.topnav-icon { position: relative; padding: 0.375rem; color: var(--text-secondary); font-size: 1.25rem; transition: color 0.2s; background: none; border: none; cursor: pointer; font-family: inherit; line-height: 1; }
.topnav-icon { position: relative; padding: 0.375rem; color: var(--text-secondary); font-size: 1.25rem; background: none; border: none; cursor: pointer; font-family: inherit; line-height: 1; }
.topnav-icon:hover { color: var(--text-primary); }
.nav-badge {
position: absolute; top: 0; right: 0; min-width: 16px; height: 16px;
@@ -550,7 +544,12 @@ img {
font-size: 0.6875rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.topnav-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: var(--radius); transition: background 0.2s; }
.nav-badge-inline {
position: static; margin-left: 0.375rem;
display: inline-flex; vertical-align: middle;
}
.nav-badge[hidden] { display: none; }
.topnav-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: var(--radius); }
.topnav-user:hover { background: var(--bg-card); }
.topnav-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.topnav-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
@@ -608,7 +607,6 @@ img {
z-index: 999;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.topnav-mobile-panel.open {
@@ -632,7 +630,6 @@ img {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.15s;
}
.topnav-mobile-link:hover {
@@ -691,7 +688,7 @@ img {
.user-avatar-link { display: inline-flex; flex-shrink: 0; line-height: 0; }
.user-avatar-link:hover { opacity: 0.85; }
.user-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-primary); transition: color 0.2s; }
.user-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
.user-link:hover { color: var(--accent); text-decoration: none; }
.user-link-name { font-weight: 600; font-size: 0.875rem; }
.user-link-role { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
@@ -748,7 +745,6 @@ img {
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: color 0.2s;
}
.comment-form-actions button:hover {
@@ -803,15 +799,6 @@ button.comment-form-submit:hover {
border-radius: var(--radius-lg);
}
.fade-in {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.icon {
font-size: 1rem;
width: 20px;
@@ -843,7 +830,6 @@ button.comment-form-submit:hover {
padding: 0.5rem;
color: var(--text-muted);
font-size: 1.125rem;
transition: color 0.2s;
background: none;
border: none;
cursor: pointer;
@@ -880,7 +866,7 @@ button.comment-form-submit:hover {
@media (max-width: 360px) {
.page {
padding: 0.25rem;
padding: 0.5rem;
}
.card {
devplacepy/static/css/engagement.css
+318
View File
@@ -0,0 +1,318 @@
.reaction-bar {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.reaction-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.reaction-chip {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 0.15rem 0.5rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: 0.85rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.reaction-chip:hover {
border-color: var(--border-light);
background: var(--bg-card-hover);
}
.reaction-chip.reacted {
border-color: var(--accent);
background: var(--accent-light);
color: var(--text-primary);
}
.reaction-chip[disabled] {
cursor: default;
}
.reaction-chip[hidden] {
display: none;
}
.reaction-count {
font-variant-numeric: tabular-nums;
min-width: 0.75rem;
text-align: center;
}
.reaction-add {
position: relative;
}
.reaction-add-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 0.15rem 0.6rem;
border: 1px dashed var(--border-light);
border-radius: 999px;
background: transparent;
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.4;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.reaction-add-btn:hover {
color: var(--accent);
border-color: var(--accent);
}
.reaction-add-icon {
font-size: 1rem;
line-height: 1;
}
.reaction-add-label {
font-weight: 500;
}
.reaction-palette {
position: absolute;
bottom: calc(100% + var(--space-xs));
left: 0;
z-index: 20;
display: flex;
gap: var(--space-xs);
padding: var(--space-sm);
background: var(--bg-modal);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.reaction-palette[hidden] {
display: none;
}
.reaction-palette-btn {
background: transparent;
border: none;
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
padding: 0.15rem;
border-radius: var(--radius);
}
.reaction-palette-btn:hover {
background: var(--bg-card-hover);
}
.bookmark-btn.bookmarked {
color: var(--accent);
}
.poll {
margin: var(--space-md) 0;
padding: var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-secondary);
}
.poll-question {
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.poll-options {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.poll-option {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
width: 100%;
padding: 0.55rem 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--text-primary);
font-size: 0.9rem;
text-align: left;
cursor: pointer;
overflow: hidden;
}
.poll-option[disabled] {
cursor: default;
}
.poll-option:not([disabled]):hover {
border-color: var(--border-light);
}
.poll-option.chosen {
border-color: var(--accent);
}
.poll-option.chosen .poll-option-label {
font-weight: 600;
}
.poll-option-bar {
position: absolute;
inset: 0;
width: 0;
background: rgba(255, 107, 53, 0.18);
transition: width 0.3s ease;
z-index: 0;
}
.poll-option.chosen .poll-option-bar {
background: rgba(255, 107, 53, 0.32);
}
.poll-option-label {
position: relative;
z-index: 1;
}
.poll-option-meta {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
white-space: nowrap;
}
.poll-option-check {
color: var(--accent);
font-weight: 700;
}
.poll-option-pct {
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.poll-total {
margin-top: var(--space-sm);
font-size: 0.8rem;
color: var(--text-muted);
}
.poll-builder {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: var(--space-lg);
}
.poll-builder[hidden] {
display: none;
}
.poll-builder-options {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.poll-builder-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.poll-builder-row input {
flex: 1;
}
.poll-builder-remove {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.poll-builder-remove:hover {
color: var(--danger);
border-color: var(--danger);
}
.poll-builder-error {
margin: 0;
color: var(--danger);
font-size: 0.8rem;
}
.saved-page {
max-width: 760px;
margin: 0 auto;
padding: var(--space-lg);
}
.saved-title {
margin-bottom: var(--space-lg);
}
.saved-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.saved-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--text-primary);
text-decoration: none;
}
.saved-item:hover {
background: var(--bg-card-hover);
}
.saved-item-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.saved-item-time {
color: var(--text-muted);
font-size: 0.8rem;
}
devplacepy/static/css/feed.css
+1 -7
View File
@@ -25,7 +25,6 @@
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
transition: all 0.2s;
}
.feed-nav-btn:hover {
@@ -49,7 +48,6 @@
padding: 0.375rem 0.5rem;
border-radius: var(--radius);
font-size: 0.875rem;
transition: all 0.2s;
}
.feed-nav-actions button:hover {
@@ -68,7 +66,6 @@
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1rem;
transition: all 0.2s;
}
.post-card:hover {
@@ -130,7 +127,6 @@
margin-bottom: 0.5rem;
color: var(--text-primary);
line-height: 1.3;
transition: color 0.15s ease;
}
.post-content {
@@ -144,7 +140,6 @@
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
transition: color 0.15s ease;
}
.post-content:hover {
@@ -154,6 +149,7 @@
.post-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
@@ -169,7 +165,6 @@
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-muted);
transition: all 0.2s;
background: none;
border: none;
cursor: pointer;
@@ -328,7 +323,6 @@
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(229, 57, 53, 0.4);
transition: all 0.2s;
z-index: 100;
border: none;
cursor: pointer;
devplacepy/static/css/gists.css
-4
View File
@@ -33,7 +33,6 @@
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.25rem;
transition: all 0.2s;
cursor: pointer;
}
@@ -97,7 +96,6 @@
gap: 0.25rem;
font-size: 0.75rem;
color: var(--text-muted);
transition: color 0.2s;
}
.gist-card-star:hover {
@@ -206,7 +204,6 @@
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius);
transition: all 0.2s;
}
.gist-code-header .gist-copy-btn:hover {
@@ -249,7 +246,6 @@
background: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.gist-star-btn:hover {
devplacepy/static/css/landing.css
-5
View File
@@ -90,7 +90,6 @@
background: var(--accent);
color: #fff;
font-weight: 700;
transition: all 0.2s;
}
.landing-cta:hover {
@@ -164,7 +163,6 @@
font-size: 0.875rem;
font-weight: 600;
color: var(--accent);
transition: color 0.2s;
}
.landing-section-link:hover {
@@ -185,7 +183,6 @@
display: flex;
flex-direction: column;
gap: 0.625rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.landing-post-card:hover {
@@ -226,7 +223,6 @@
.landing-post-title a {
color: var(--text-primary);
transition: color 0.2s;
}
.landing-post-title a:hover {
@@ -264,7 +260,6 @@
font-weight: 600;
color: var(--accent);
margin-left: auto;
transition: color 0.2s;
}
.landing-post-open:hover {
devplacepy/static/css/mention.css
-1
View File
@@ -32,7 +32,6 @@
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.1s;
}
.mention-dropdown-item:hover,
devplacepy/static/css/messages.css
+2 -4
View File
@@ -1,6 +1,6 @@
.messages-layout {
display: grid;
grid-template-columns: 320px 1fr;
grid-template-columns: minmax(0, 320px) 1fr;
gap: 0;
height: calc(100vh - var(--nav-height) - 2rem);
background: var(--bg-card);
@@ -13,6 +13,7 @@
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
min-width: 0;
}
.messages-list-header {
@@ -47,7 +48,6 @@
padding: 0.625rem 1rem;
font-size: 0.875rem;
color: var(--text-primary);
transition: background 0.15s;
text-decoration: none;
}
@@ -65,7 +65,6 @@
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
transition: background 0.2s;
cursor: pointer;
}
@@ -207,7 +206,6 @@
align-items: center;
justify-content: center;
font-size: 1rem;
transition: background 0.15s;
}
.messages-send-btn:hover {
devplacepy/static/css/news.css
-4
View File
@@ -31,7 +31,6 @@
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
display: flex;
flex-direction: column;
}
@@ -112,7 +111,6 @@
.news-card-title a {
color: var(--text-primary);
transition: color 0.2s;
}
.news-card-title a:hover {
@@ -136,7 +134,6 @@
font-weight: 600;
color: var(--accent);
align-self: flex-start;
transition: color 0.2s;
}
.news-read-link:hover {
@@ -247,7 +244,6 @@
background: var(--accent);
color: #fff;
border-radius: var(--radius);
transition: all 0.2s;
}
.news-detail-read-link:hover {
devplacepy/static/css/notifications.css
+7 -4
View File
@@ -1,13 +1,11 @@
.notifications-page {
max-width: 640px;
margin: 0 auto;
padding-top: var(--nav-height);
}
.notifications-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
@@ -18,6 +16,13 @@
font-weight: 700;
}
.notifications-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.5rem;
}
.notifications-list {
display: flex;
flex-direction: column;
@@ -32,7 +37,6 @@
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.25rem;
transition: all 0.2s;
cursor: pointer;
}
@@ -70,7 +74,6 @@
padding: 0.25rem;
color: var(--text-muted);
font-size: 0.875rem;
transition: color 0.2s;
}
.notification-dismiss:hover {
devplacepy/static/css/post.css
+3 -18
View File
@@ -54,6 +54,7 @@
.post-detail-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
@@ -98,7 +99,6 @@
padding: 0.25rem;
color: var(--text-muted);
font-size: 0.8125rem;
transition: color 0.2s;
}
.comment-vote-btn.vote-up:hover {
@@ -130,22 +130,6 @@
min-width: 0;
}
.comment-highlight {
animation: comment-highlight-fade 2s ease-out;
border-radius: var(--radius);
}
@keyframes comment-highlight-fade {
from {
background: var(--accent-light);
box-shadow: 0 0 0 4px var(--accent-light);
}
to {
background: transparent;
box-shadow: 0 0 0 4px transparent;
}
}
.comment-header {
display: flex;
align-items: center;
@@ -172,6 +156,8 @@
.comment-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
@@ -180,7 +166,6 @@
color: var(--text-muted);
padding: 0.25rem 0.5rem;
border-radius: var(--radius);
transition: all 0.2s;
}
.comment-action-btn:hover {
devplacepy/static/css/profile.css
+63 -1
View File
@@ -95,7 +95,6 @@ a.profile-stat-value:hover {
height: 100%;
background: var(--accent);
border-radius: 3px;
transition: width 0.3s;
}
.profile-badges {
@@ -236,3 +235,66 @@ a.profile-stat-value:hover {
gap: 0.5rem;
}
}
.profile-heatmap-card {
padding: var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-card);
margin-bottom: var(--space-lg);
}
.heatmap-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.heatmap-title {
font-size: 0.95rem;
margin: 0;
}
.streak-info {
font-size: 0.8rem;
color: var(--text-secondary);
}
.heatmap-grid {
display: flex;
gap: 3px;
overflow-x: auto;
padding-bottom: var(--space-xs);
}
.heatmap-week {
display: flex;
flex-direction: column;
gap: 3px;
}
.heatmap-cell {
width: 11px;
height: 11px;
border-radius: 2px;
background: var(--border);
}
.heatmap-cell.level-1 {
background: rgba(255, 107, 53, 0.35);
}
.heatmap-cell.level-2 {
background: rgba(255, 107, 53, 0.55);
}
.heatmap-cell.level-3 {
background: rgba(255, 107, 53, 0.75);
}
.heatmap-cell.level-4 {
background: var(--accent);
}
devplacepy/static/css/projects.css
-2
View File
@@ -58,7 +58,6 @@
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.25rem;
transition: border-color 0.2s;
cursor: pointer;
}
@@ -265,7 +264,6 @@
background: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.project-star-btn:hover {
background: var(--bg-card-hover);
devplacepy/static/css/sidebar.css
-1
View File
@@ -38,7 +38,6 @@
border-radius: var(--radius);
font-size: 0.875rem;
color: var(--text-secondary);
transition: all 0.2s;
}
.sidebar-link:hover {
devplacepy/static/js/Application.js
+8
View File
@@ -10,6 +10,10 @@ import { ContentEnhancer } from "./ContentEnhancer.js";
import { DomUtils } from "./DomUtils.js";
import { PushManager } from "./PushManager.js";
import { PwaInstaller } from "./PwaInstaller.js";
import { CounterManager } from "./CounterManager.js";
import { ReactionBar } from "./ReactionBar.js";
import { BookmarkManager } from "./BookmarkManager.js";
import { PollManager } from "./PollManager.js";
class Application {
constructor() {
@@ -25,6 +29,10 @@ class Application {
this.dom = new DomUtils();
this.push = new PushManager();
this.pwa = new PwaInstaller();
this.counters = new CounterManager();
this.reactions = new ReactionBar();
this.bookmarks = new BookmarkManager();
this.polls = new PollManager();
}
}
devplacepy/static/js/AttachmentUploader.js
+13 -1
View File
@@ -122,11 +122,15 @@ export class AttachmentUploader {
preview.dataset.uid = result.uid;
if (result.thumbnail_url) {
const img = preview.querySelector("img");
if (img) img.src = result.thumbnail_url;
if (img) {
this.revokePreview(preview);
img.src = result.thumbnail_url;
}
}
}
} catch (err) {
this.showError(err.message);
this.revokePreview(preview);
preview.remove();
} finally {
this.button.classList.remove("uploading");
@@ -158,6 +162,7 @@ export class AttachmentUploader {
this.attachments.splice(idx, 1);
this.updateUids();
}
this.revokePreview(div);
div.remove();
});
div.appendChild(remove);
@@ -168,6 +173,13 @@ export class AttachmentUploader {
return div;
}
revokePreview(preview) {
const img = preview.querySelector("img");
if (img && img.src.startsWith("blob:")) {
URL.revokeObjectURL(img.src);
}
}
updateUids() {
const uids = this.attachments.map((a) => a.uid);
this.uploadedUidsInput.value = uids.join(",");
devplacepy/static/js/BookmarkManager.js
+27
View File
@@ -0,0 +1,27 @@
import { Http } from "./Http.js";
export class BookmarkManager {
constructor() {
document.addEventListener("click", (event) => this.onClick(event));
}
async onClick(event) {
const button = event.target.closest(".bookmark-btn");
if (!button) {
return;
}
event.preventDefault();
const type = button.dataset.bookmarkType;
const uid = button.dataset.bookmarkUid;
try {
const result = await Http.sendForm(`/bookmarks/${type}/${uid}`, {});
button.classList.toggle("bookmarked", result.saved);
const label = button.querySelector(".bookmark-label");
if (label) {
label.textContent = result.saved ? "Saved" : "Save";
}
} catch (error) {
console.error("bookmark failed", error);
}
}
}
devplacepy/static/js/CounterManager.js
+44
View File
@@ -0,0 +1,44 @@
import { Http } from "./Http.js";
export class CounterManager {
constructor() {
if (!document.querySelector("[data-counter]")) {
return;
}
this.interval = 30000;
this.poll();
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
this.poll();
}
});
setInterval(() => {
if (document.visibilityState === "visible") {
this.poll();
}
}, this.interval);
}
async poll() {
let counts;
try {
counts = await Http.getJson("/notifications/counts");
} catch (error) {
console.error("counter poll failed", error);
return;
}
this.apply("notifications", counts.notifications);
this.apply("messages", counts.messages);
}
apply(key, count) {
document.querySelectorAll(`[data-counter="${key}"]`).forEach((target) => {
const badge = target.querySelector("[data-counter-badge]");
if (!badge) {
return;
}
badge.textContent = count;
badge.hidden = count === 0;
});
}
}
devplacepy/static/js/DomUtils.js
+15
View File
@@ -6,6 +6,8 @@ export class DomUtils {
this.initShareButtons();
this.initTogglers();
this.initStopPropagation();
this.initReload();
this.initCardNav();
}
static onDataAttr(attr, event, handler) {
@@ -67,4 +69,17 @@ export class DomUtils {
initStopPropagation() {
DomUtils.onDataAttr("stop-propagation", "click", (el, e) => e.stopPropagation());
}
initReload() {
DomUtils.onDataAttr("reload", "click", () => window.location.reload());
}
initCardNav() {
DomUtils.onDataAttr("card-href", "click", (el, e) => {
if (e.target.closest("a, button")) {
return;
}
window.location.href = el.dataset.cardHref;
});
}
}
devplacepy/static/js/Http.js
+3
View File
@@ -6,6 +6,9 @@ export class Http {
static async getJson(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`request failed with status ${response.status}`);
}
return response.json();
}
devplacepy/static/js/ModalManager.js
+1 -1
View File
@@ -14,7 +14,7 @@ export class ModalManager {
}
const type = input.type === "password" ? "text" : "password";
input.type = type;
btn.textContent = type === "password" ? "\u{1F441}" : "\u{1F441}";
btn.textContent = type === "password" ? "\u{1F441}" : "\u{1F648}";
});
});
}
devplacepy/static/js/NotificationManager.js
+1 -5
View File
@@ -13,11 +13,7 @@ export class NotificationManager {
if (!target) {
return;
}
requestAnimationFrame(() => {
target.scrollIntoView({ behavior: "smooth", block: "center" });
target.classList.add("comment-highlight");
setTimeout(() => target.classList.remove("comment-highlight"), 2000);
});
target.scrollIntoView({ block: "center" });
});
}
}
devplacepy/static/js/PollManager.js
+182
View File
@@ -0,0 +1,182 @@
import { Http } from "./Http.js";
export class PollManager {
constructor() {
document.addEventListener("click", (event) => this.onClick(event));
document.addEventListener("submit", (event) => this.onSubmit(event), true);
}
onClick(event) {
const option = event.target.closest(".poll-option");
if (option && !option.disabled) {
event.preventDefault();
this.vote(option);
return;
}
const toggle = event.target.closest("[data-poll-toggle]");
if (toggle) {
event.preventDefault();
this.toggleBuilder(toggle);
return;
}
const addOption = event.target.closest("[data-poll-add-option]");
if (addOption) {
event.preventDefault();
this.addOption(addOption);
return;
}
const removeOption = event.target.closest("[data-poll-remove-option]");
if (removeOption) {
event.preventDefault();
this.removeOption(removeOption);
}
}
async vote(option) {
const poll = option.closest(".poll");
if (!poll) {
return;
}
const pollUid = poll.dataset.pollUid;
const optionUid = option.dataset.optionUid;
try {
const result = await Http.sendForm(`/polls/${pollUid}/vote`, { option_uid: optionUid });
this.render(poll, result);
} catch (error) {
console.error("poll vote failed", error);
}
}
render(poll, result) {
const byUid = {};
(result.options || []).forEach((option) => {
byUid[option.uid] = option;
});
poll.querySelectorAll(".poll-option").forEach((button) => {
const data = byUid[button.dataset.optionUid];
if (!data) {
return;
}
const chosen = result.my_choice === data.uid;
button.classList.toggle("chosen", chosen);
button.setAttribute("aria-pressed", chosen ? "true" : "false");
const bar = button.querySelector(".poll-option-bar");
if (bar) {
bar.style.width = `${data.pct}%`;
}
const pct = button.querySelector(".poll-option-pct");
if (pct) {
pct.textContent = `${data.pct}%`;
}
const check = button.querySelector(".poll-option-check");
if (check) {
check.hidden = !chosen;
}
});
const total = poll.querySelector(".poll-total");
if (total) {
total.textContent = `${result.total} vote${result.total === 1 ? "" : "s"}`;
}
}
toggleBuilder(toggle) {
const form = toggle.closest("form");
const builder = form ? form.querySelector("[data-poll-builder]") : null;
if (!builder) {
return;
}
const activating = builder.hidden;
builder.hidden = !activating;
this.setPollEnabled(builder, activating);
const label = toggle.querySelector("[data-poll-toggle-label]");
if (label) {
label.textContent = activating ? "Remove poll" : "Add poll";
}
}
setPollEnabled(builder, enabled) {
builder.querySelectorAll("input[name='poll_question'], input[name='poll_options']").forEach((input) => {
input.disabled = !enabled;
if (!enabled) {
input.value = "";
}
});
const error = builder.querySelector("[data-poll-error]");
if (error) {
error.hidden = true;
error.textContent = "";
}
}
addOption(button) {
const form = button.closest("form");
const container = form ? form.querySelector("[data-poll-options]") : null;
if (!container) {
return;
}
const rows = container.querySelectorAll(".poll-builder-row");
if (rows.length >= 6) {
return;
}
const row = document.createElement("div");
row.className = "poll-builder-row";
const input = document.createElement("input");
input.type = "text";
input.name = "poll_options";
input.maxLength = 100;
input.placeholder = `Option ${rows.length + 1}`;
const remove = document.createElement("button");
remove.type = "button";
remove.className = "poll-builder-remove";
remove.dataset.pollRemoveOption = "";
remove.setAttribute("aria-label", "Remove option");
remove.textContent = "×";
row.appendChild(input);
row.appendChild(remove);
container.appendChild(row);
}
removeOption(button) {
const container = button.closest("[data-poll-options]");
if (!container) {
return;
}
if (container.querySelectorAll(".poll-builder-row").length <= 2) {
return;
}
const row = button.closest(".poll-builder-row");
if (row) {
row.remove();
}
}
onSubmit(event) {
const form = event.target;
if (!form || typeof form.querySelector !== "function") {
return;
}
const builder = form.querySelector("[data-poll-builder]");
if (!builder || builder.hidden) {
return;
}
const question = builder.querySelector("input[name='poll_question']");
const options = [...builder.querySelectorAll("input[name='poll_options']")]
.map((input) => input.value.trim())
.filter(Boolean);
let problem = "";
if (!question || !question.value.trim()) {
problem = "Add a poll question, or remove the poll.";
} else if (options.length < 2) {
problem = "Add at least two poll options, or remove the poll.";
}
if (problem) {
event.preventDefault();
event.stopImmediatePropagation();
const error = builder.querySelector("[data-poll-error]");
if (error) {
error.textContent = problem;
error.hidden = false;
}
}
}
}
devplacepy/static/js/ReactionBar.js
+65
View File
@@ -0,0 +1,65 @@
import { Http } from "./Http.js";
export class ReactionBar {
constructor() {
document.addEventListener("click", (event) => this.onClick(event));
}
async onClick(event) {
const addButton = event.target.closest(".reaction-add-btn");
if (addButton) {
event.preventDefault();
this.togglePalette(addButton);
return;
}
const trigger = event.target.closest("[data-reaction-emoji]");
if (trigger && !trigger.disabled) {
event.preventDefault();
await this.react(trigger);
return;
}
this.closeAllPalettes();
}
togglePalette(addButton) {
const palette = addButton.parentElement.querySelector(".reaction-palette");
const isOpen = palette.hidden === false;
this.closeAllPalettes();
palette.hidden = isOpen;
}
closeAllPalettes() {
document.querySelectorAll(".reaction-palette").forEach((palette) => {
palette.hidden = true;
});
}
async react(trigger) {
const bar = trigger.closest(".reaction-bar");
if (!bar) {
return;
}
const type = bar.dataset.reactionType;
const uid = bar.dataset.reactionUid;
const emoji = trigger.dataset.reactionEmoji;
try {
const result = await Http.sendForm(`/reactions/${type}/${uid}`, { emoji });
this.render(bar, result);
} catch (error) {
console.error("reaction failed", error);
}
this.closeAllPalettes();
}
render(bar, result) {
const counts = result.counts || {};
const mine = new Set(result.mine || []);
bar.querySelectorAll(".reaction-list .reaction-chip").forEach((chip) => {
const emoji = chip.dataset.reactionEmoji;
const count = counts[emoji] || 0;
chip.querySelector(".reaction-count").textContent = count;
chip.hidden = count === 0 && !mine.has(emoji);
chip.classList.toggle("reacted", mine.has(emoji));
});
}
}