114 lines
4.2 KiB
Smarty
114 lines
4.2 KiB
Smarty
{{define "messages-with-poller"}}
|
|
{{range .MessageIDs}}
|
|
{{$message := (index $.DMTrove.Messages .)}}
|
|
{{$user := (user $message.SenderID)}}
|
|
{{$is_us := (eq $message.SenderID (active_user).ID)}}
|
|
<div class="dm-message-and-reacts-container {{if $is_us}} our-message {{end}}">
|
|
<div class="dm-message-container">
|
|
<div class="sender-profile-image-container">
|
|
<a class="unstyled-link" href="/{{$user.Handle}}">
|
|
{{if $user.IsContentDownloaded}}
|
|
<img class="profile-image" src="/content/{{$user.GetProfileImageLocalPath}}" />
|
|
{{else}}
|
|
<img class="profile-image" src="{{$user.ProfileImageUrl}}" />
|
|
{{end}}
|
|
</a>
|
|
</div>
|
|
<div class="dm-message-content-container">
|
|
{{if (ne $message.InReplyToID 0)}}
|
|
<div class="replying-to-container">
|
|
<div class="replying-to-label row">
|
|
<img class="svg-icon" src="/static/icons/replying_to.svg" />
|
|
<span>Replying to</span>
|
|
</div>
|
|
<div class="replying-to-message">
|
|
{{(index $.DMTrove.Messages $message.InReplyToID).Text}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{if (ne $message.EmbeddedTweetID 0)}}
|
|
<div class="tweet-preview">
|
|
{{template "tweet" (dict
|
|
"TweetID" $message.EmbeddedTweetID
|
|
"RetweetID" 0
|
|
"QuoteNestingLevel" 1)
|
|
}}
|
|
</div>
|
|
{{end}}
|
|
<div class="dm-message-text-container">
|
|
{{template "text-with-entities" $message.Text}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dm-message-reactions">
|
|
{{range $message.Reactions}}
|
|
{{$sender := (user .SenderID)}}
|
|
<span title="{{$sender.DisplayName}} (@{{$sender.Handle}})">{{.Emoji}}</span>
|
|
{{end}}
|
|
</div>
|
|
<p class="posted-at">
|
|
{{$message.SentAt.Time.Format "Jan 2, 2006 @ 3:04 pm"}}
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div id="new-messages-poller"
|
|
hx-swap="outerHTML scroll:.chat-messages:bottom"
|
|
hx-trigger="load delay:3s"
|
|
hx-get="/messages/{{$.ActiveRoomID}}?poll&latest_timestamp={{$.LatestPollingTimestamp}}"
|
|
></div>
|
|
{{end}}
|
|
|
|
{{define "chat-view"}}
|
|
<div id="chat-view">
|
|
<div class="chat-messages">
|
|
{{if $.ActiveRoomID}}
|
|
{{template "messages-with-poller" .}}
|
|
{{end}}
|
|
</div>
|
|
{{if $.ActiveRoomID}}
|
|
<div class="dm-composer-container">
|
|
<form hx-post="/messages/{{$.ActiveRoomID}}/send" hx-target="#new-messages-poller" hx-swap="outerHTML scroll:.chat-messages:bottom" hx-ext="json-enc">
|
|
{{template "dm-composer"}}
|
|
<input id="real-input" type="hidden" name="text" value="" />
|
|
<input type="submit" />
|
|
</form>
|
|
</div>
|
|
<script>
|
|
// Make pasting text work for HTML as well as plain text
|
|
var editor = document.querySelector("#composer");
|
|
editor.addEventListener("paste", function(e) {
|
|
// cancel paste
|
|
e.preventDefault();
|
|
// get text representation of clipboard
|
|
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
|
|
// insert text manually
|
|
document.execCommand("insertHTML", false, text);
|
|
});
|
|
</script>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "dm-composer"}}
|
|
<span
|
|
id="composer"
|
|
role="textbox"
|
|
contenteditable
|
|
{{if .}}
|
|
{{/*
|
|
This is a separate template so it can be OOB-swapped to clear the contents of the composer
|
|
box after a successful DM send. However, the chat-view itself also loads via HTMX call.
|
|
|
|
To prevent the composer from being OOB'd on the initial page load (and thus never rendering),
|
|
we guard the "hx-swap-oob" attr; so if this template is called with nothing as the arg, then
|
|
it will be inlined normally (i.e., not OOB'd), and if the arg is something (e.g., a DMTrove),
|
|
then it will be OOB'd, thus clearing the contents of the composer box.
|
|
*/}}
|
|
hx-swap-oob="true"
|
|
{{end}}
|
|
oninput="var text = this.innerText; document.querySelector('#real-input').value = text"
|
|
>
|
|
</span>
|
|
{{end}}
|