244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
<link rel="stylesheet" href="social/social.css" />
|
|
|
|
<div class="social-app">
|
|
<div class="social-header">
|
|
<div class="social-tabs">
|
|
<button class="social-tab active" data-tab="feed" hx-get="/api/ui/social/feed" hx-target="#social-content" hx-swap="innerHTML">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
</svg>
|
|
<span data-i18n="social-feed">Feed</span>
|
|
</button>
|
|
<button class="social-tab" data-tab="communities" hx-get="/api/ui/social/communities" hx-target="#social-content" hx-swap="innerHTML">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
<span data-i18n="social-communities">Communities</span>
|
|
</button>
|
|
<button class="social-tab" data-tab="announcements" hx-get="/api/ui/social/announcements" hx-target="#social-content" hx-swap="innerHTML">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
|
|
</svg>
|
|
<span data-i18n="social-announcements">Announcements</span>
|
|
</button>
|
|
</div>
|
|
<div class="social-actions">
|
|
<button class="btn-new-post" onclick="showNewPostModal()">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"/>
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
<span data-i18n="social-new-post">New Post</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="social-layout">
|
|
<aside class="social-sidebar">
|
|
<div class="sidebar-section">
|
|
<h3 data-i18n="social-my-communities">My Communities</h3>
|
|
<div id="my-communities" hx-get="/api/ui/social/my-communities" hx-trigger="load" hx-swap="innerHTML">
|
|
<div class="loading-placeholder"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
<h3 data-i18n="social-trending">Trending</h3>
|
|
<div id="trending-topics" hx-get="/api/ui/social/trending" hx-trigger="load" hx-swap="innerHTML">
|
|
<div class="loading-placeholder"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
<h3 data-i18n="social-suggested">Suggested Communities</h3>
|
|
<div id="suggested-communities" hx-get="/api/ui/social/suggested" hx-trigger="load" hx-swap="innerHTML">
|
|
<div class="loading-placeholder"></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="social-main">
|
|
<div class="post-composer">
|
|
<div class="composer-avatar">
|
|
<div class="avatar-placeholder"></div>
|
|
</div>
|
|
<div class="composer-input" onclick="showNewPostModal()">
|
|
<span data-i18n="social-whats-on-mind">What's on your mind?</span>
|
|
</div>
|
|
<div class="composer-actions">
|
|
<button class="composer-btn" title="Add image">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
</button>
|
|
<button class="composer-btn" title="Add poll">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="20" x2="18" y2="10"/>
|
|
<line x1="12" y1="20" x2="12" y2="4"/>
|
|
<line x1="6" y1="20" x2="6" y2="14"/>
|
|
</svg>
|
|
</button>
|
|
<button class="composer-btn" title="Send praise">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="social-content" hx-get="/api/ui/social/feed" hx-trigger="load" hx-swap="innerHTML">
|
|
<div class="loading-state">
|
|
<div class="spinner"></div>
|
|
<span data-i18n="loading">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<aside class="social-right-sidebar">
|
|
<div class="sidebar-section">
|
|
<h3 data-i18n="social-recent-activity">Recent Activity</h3>
|
|
<div id="recent-activity" hx-get="/api/ui/social/activity" hx-trigger="load" hx-swap="innerHTML">
|
|
<div class="loading-placeholder"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
<h3 data-i18n="social-people">People to Follow</h3>
|
|
<div id="people-suggestions" hx-get="/api/ui/social/people" hx-trigger="load" hx-swap="innerHTML">
|
|
<div class="loading-placeholder"></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="newPostModal">
|
|
<div class="modal-backdrop" onclick="closeNewPostModal()"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 data-i18n="social-create-post">Create Post</h3>
|
|
<button class="btn-close" onclick="closeNewPostModal()">×</button>
|
|
</div>
|
|
<form id="newPostForm" hx-post="/api/social/posts" hx-swap="none" hx-on::after-request="handlePostCreated(event)">
|
|
<div class="modal-body">
|
|
<div class="post-author-row">
|
|
<div class="avatar-placeholder"></div>
|
|
<div class="author-info">
|
|
<span class="author-name" id="currentUserName">User</span>
|
|
<select name="visibility" class="visibility-select">
|
|
<option value="organization" data-i18n="social-org-only">Organization</option>
|
|
<option value="community" data-i18n="social-community-only">Community Only</option>
|
|
<option value="public" data-i18n="social-public">Public</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<textarea name="content" class="post-textarea" placeholder="What's on your mind?" rows="5" required></textarea>
|
|
<div class="post-attachments" id="postAttachments"></div>
|
|
<div class="post-options">
|
|
<select name="community_id" class="community-select">
|
|
<option value="" data-i18n="social-no-community">No Community</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="post-tools">
|
|
<button type="button" class="tool-btn" title="Add image">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="tool-btn" title="Add poll" onclick="togglePollCreator()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="20" x2="18" y2="10"/>
|
|
<line x1="12" y1="20" x2="12" y2="4"/>
|
|
<line x1="6" y1="20" x2="6" y2="14"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="tool-btn" title="Mention someone">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="4"/>
|
|
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button type="submit" class="btn-post">
|
|
<span data-i18n="social-post">Post</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
"use strict";
|
|
|
|
function showNewPostModal() {
|
|
document.getElementById("newPostModal").classList.add("active");
|
|
document.querySelector(".post-textarea").focus();
|
|
}
|
|
|
|
function closeNewPostModal() {
|
|
document.getElementById("newPostModal").classList.remove("active");
|
|
document.getElementById("newPostForm").reset();
|
|
}
|
|
|
|
function handlePostCreated(event) {
|
|
if (event.detail.successful) {
|
|
closeNewPostModal();
|
|
htmx.trigger("#social-content", "refresh");
|
|
if (window.GBAlerts) {
|
|
window.GBAlerts.info("Social", "Post created successfully!");
|
|
}
|
|
}
|
|
}
|
|
|
|
function togglePollCreator() {
|
|
var attachments = document.getElementById("postAttachments");
|
|
var existing = attachments.querySelector(".poll-creator");
|
|
if (existing) {
|
|
existing.remove();
|
|
return;
|
|
}
|
|
var pollHtml = '<div class="poll-creator">' +
|
|
'<input type="text" name="poll_question" placeholder="Ask a question..." class="poll-question" />' +
|
|
'<div class="poll-options">' +
|
|
'<input type="text" name="poll_option_1" placeholder="Option 1" />' +
|
|
'<input type="text" name="poll_option_2" placeholder="Option 2" />' +
|
|
'<button type="button" class="btn-add-option" onclick="addPollOption()">+ Add option</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
attachments.innerHTML = pollHtml;
|
|
}
|
|
|
|
function addPollOption() {
|
|
var options = document.querySelector(".poll-options");
|
|
var count = options.querySelectorAll("input").length + 1;
|
|
var input = document.createElement("input");
|
|
input.type = "text";
|
|
input.name = "poll_option_" + count;
|
|
input.placeholder = "Option " + count;
|
|
options.insertBefore(input, options.querySelector(".btn-add-option"));
|
|
}
|
|
|
|
document.querySelectorAll(".social-tab").forEach(function(tab) {
|
|
tab.addEventListener("click", function() {
|
|
document.querySelectorAll(".social-tab").forEach(function(t) {
|
|
t.classList.remove("active");
|
|
});
|
|
this.classList.add("active");
|
|
});
|
|
});
|
|
|
|
window.showNewPostModal = showNewPostModal;
|
|
window.closeNewPostModal = closeNewPostModal;
|
|
window.handlePostCreated = handlePostCreated;
|
|
window.togglePollCreator = togglePollCreator;
|
|
window.addPollOption = addPollOption;
|
|
})();
|
|
</script>
|