make chat.html self contained
parent
d6fe1544e0
commit
13b0821eef
GPG Key ID:
B1836DCE2F50BDF7
3
main.go
3
main.go
|
|
@ -356,9 +356,8 @@ func main() {
|
|||
log.Fatal("Error getting working directory:", err)
|
||||
}
|
||||
|
||||
// Parse base and partial templates
|
||||
// Parse partial templates
|
||||
tmpl := template.Must(template.ParseFiles(
|
||||
filepath.Join(dir, "templates/base.html"),
|
||||
filepath.Join(dir, "templates/partials/navbar.html"),
|
||||
filepath.Join(dir, "templates/partials/cookie_banner.html"),
|
||||
))
|
||||
|
|
|
|||
|
|
@ -1,60 +1,78 @@
|
|||
{{define "chat"}}{{template "base" .}}{{end}}
|
||||
|
||||
{{define "chat-content"}}
|
||||
<div class="chat-container" data-board-id="{{.Board.ID}}" data-base-path="{{.BasePath}}" data-current-username="{{.CurrentUsername}}">
|
||||
<div class="chat-breadcrumb">
|
||||
<a href="{{.BasePath}}/">Home</a>
|
||||
<span class="chat-breadcrumb-separator">›</span>
|
||||
<a href="{{.BasePath}}/boards/">Boards</a>
|
||||
<span class="chat-breadcrumb-separator">›</span>
|
||||
<span>{{.Board.Name}}</span>
|
||||
</div>
|
||||
<header class="chat-header">
|
||||
<div class="connection-status">
|
||||
<div class="connection-dot connecting" id="connection-dot"></div>
|
||||
<span id="connection-text">Connecting...</span>
|
||||
</div>
|
||||
<h2>{{.Board.Name}}</h2>
|
||||
<p>{{.Board.Description}}</p>
|
||||
</header>
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="typing-indicator" id="typing-indicator">
|
||||
<span id="typing-users"></span><span class="typing-dots"><span>.</span><span>.</span><span>.</span></span>
|
||||
</div>
|
||||
{{range .Messages}}
|
||||
<div class="chat-message{{if .Mentions}}{{range .Mentions}}{{if eq . $.CurrentUsername}} chat-message-highlighted{{end}}{{end}}{{end}}" id="msg-{{.ID}}" data-user="{{.Username}}" data-reply="{{.ReplyTo}}">
|
||||
<div class="chat-message-header">
|
||||
{{if .PfpFileID.Valid}}
|
||||
<img src="{{$.BasePath}}/file?id={{.PfpFileID.Int64}}" alt="PFP" class="chat-message-pfp">
|
||||
{{else}}
|
||||
<div class="chat-message-pfp" style="background-color: #001858;"></div>
|
||||
{{define "chat"}}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{.Title}}</title>
|
||||
<link rel="stylesheet" href="{{.StaticPath}}/style.css">
|
||||
<script src="{{.StaticPath}}/validation.js" defer></script>
|
||||
<script src="{{.StaticPath}}/drafts.js" defer></script>
|
||||
<script src="{{.StaticPath}}/forms.js" defer></script>
|
||||
<script src="{{.StaticPath}}/shortcuts.js" defer></script>
|
||||
<script src="{{.StaticPath}}/likes.js" defer></script>
|
||||
<script src="{{.StaticPath}}/app.js" defer></script>
|
||||
<script src="{{.StaticPath}}/chat.js" defer></script>
|
||||
</head>
|
||||
<body class="chat-page">
|
||||
{{template "navbar" .}}
|
||||
<main>
|
||||
<div class="chat-container" data-board-id="{{.Board.ID}}" data-base-path="{{.BasePath}}" data-current-username="{{.CurrentUsername}}">
|
||||
<div class="chat-breadcrumb">
|
||||
<a href="{{.BasePath}}/">Home</a>
|
||||
<span class="chat-breadcrumb-separator">›</span>
|
||||
<a href="{{.BasePath}}/boards/">Boards</a>
|
||||
<span class="chat-breadcrumb-separator">›</span>
|
||||
<span>{{.Board.Name}}</span>
|
||||
</div>
|
||||
<header class="chat-header">
|
||||
<div class="connection-status">
|
||||
<div class="connection-dot connecting" id="connection-dot"></div>
|
||||
<span id="connection-text">Connecting...</span>
|
||||
</div>
|
||||
<h2>{{.Board.Name}}</h2>
|
||||
<p>{{.Board.Description}}</p>
|
||||
</header>
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="typing-indicator" id="typing-indicator">
|
||||
<span id="typing-users"></span><span class="typing-dots"><span>.</span><span>.</span><span>.</span></span>
|
||||
</div>
|
||||
{{range .Messages}}
|
||||
<div class="chat-message{{if .Mentions}}{{range .Mentions}}{{if eq . $.CurrentUsername}} chat-message-highlighted{{end}}{{end}}{{end}}" id="msg-{{.ID}}" data-user="{{.Username}}" data-reply="{{.ReplyTo}}">
|
||||
<div class="chat-message-header">
|
||||
{{if .PfpFileID.Valid}}
|
||||
<img src="{{$.BasePath}}/file?id={{.PfpFileID.Int64}}" alt="PFP" class="chat-message-pfp">
|
||||
{{else}}
|
||||
<div class="chat-message-pfp" style="background-color: #001858;"></div>
|
||||
{{end}}
|
||||
<span class="chat-message-username">{{.Username}}</span>
|
||||
<span class="chat-message-timestamp">{{.Timestamp.Format "02/01/2006 15:04"}}</span>
|
||||
</div>
|
||||
{{if gt .ReplyTo 0}}
|
||||
<div class="chat-message-reply" onclick="scrollToMessage({{.ReplyTo}})">Replying to message...</div>
|
||||
{{end}}
|
||||
<div class="chat-message-content">{{.Content}}</div>
|
||||
<div class="post-actions">
|
||||
<a href="javascript:void(0)" onclick="replyToMessage({{printf "%v" .ID}}, '{{.Username}}')">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<span class="chat-message-username">{{.Username}}</span>
|
||||
<span class="chat-message-timestamp">{{.Timestamp.Format "02/01/2006 15:04"}}</span>
|
||||
</div>
|
||||
{{if gt .ReplyTo 0}}
|
||||
<div class="chat-message-reply" onclick="scrollToMessage({{.ReplyTo}})">Replying to message...</div>
|
||||
{{end}}
|
||||
<div class="chat-message-content">{{.Content}}</div>
|
||||
<div class="post-actions">
|
||||
<a href="javascript:void(0)" onclick="replyToMessage({{printf "%v" .ID}}, '{{.Username}}')">Reply</a>
|
||||
<button class="jump-to-bottom" id="jump-to-bottom" title="Jump to bottom" type="button">
|
||||
↓
|
||||
<span class="unread-badge" id="unread-badge" style="display: none;">0</span>
|
||||
</button>
|
||||
<div class="chat-input">
|
||||
<div id="reply-indicator" class="reply-indicator">
|
||||
<span id="reply-username">Replying to </span>
|
||||
<button onclick="cancelReply()" type="button">X</button>
|
||||
</div>
|
||||
<textarea id="chat-input-text" placeholder="Type a message..."></textarea>
|
||||
<button onclick="sendMessage()" type="button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<button class="jump-to-bottom" id="jump-to-bottom" title="Jump to bottom" type="button">
|
||||
↓
|
||||
<span class="unread-badge" id="unread-badge" style="display: none;">0</span>
|
||||
</button>
|
||||
<div class="chat-input">
|
||||
<div id="reply-indicator" class="reply-indicator">
|
||||
<span id="reply-username">Replying to </span>
|
||||
<button onclick="cancelReply()" type="button">X</button>
|
||||
</div>
|
||||
<textarea id="chat-input-text" placeholder="Type a message..."></textarea>
|
||||
<button onclick="sendMessage()" type="button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="autocomplete-popup" class="autocomplete-popup"></div>
|
||||
<script type="application/json" id="chat-usernames">{{.AllUsernames}}</script>
|
||||
<div id="autocomplete-popup" class="autocomplete-popup"></div>
|
||||
<script type="application/json" id="chat-usernames">{{.AllUsernames}}</script>
|
||||
</main>
|
||||
{{template "cookie_banner" .}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue