76 lines
2.5 KiB
Elixir
76 lines
2.5 KiB
Elixir
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/">Overview</a></li>
|
|
<li class="breadcrumb-item"><a href="/chats">Chats</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Chat</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<h2>Chat</h2>
|
|
|
|
<%= for message <- messages do %>
|
|
<div class="row" style="margin-bottom: 2px;"
|
|
id="msg-<%= message.id %>"
|
|
<%= unless is_nil(message.bookmark) do %>
|
|
data-bookmark="<%= message.bookmark %>"
|
|
<% end %>
|
|
>
|
|
<div class="card">
|
|
<div class="card-body" style="padding: 8px;">
|
|
<blockquote class="blockquote mb-0" style="font-size: 1rem;">
|
|
<%= BdfrBrowser.RenderUtils.message(message.message) %>
|
|
|
|
<footer class="blockquote-footer">
|
|
<%= BdfrBrowser.RenderUtils.link_to_user(message.author) %>,
|
|
<small><%= DateTime.to_iso8601(message.posted_at) %></small>
|
|
|
|
<%= unless is_nil(message.bookmark) do %>
|
|
<span class="badge text-bg-secondary"><%= message.bookmark %></span>
|
|
<% end %>
|
|
</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<script>
|
|
const bookmarks = document.querySelectorAll('[data-bookmark]');
|
|
|
|
if (bookmarks.length > 0) {
|
|
const header = document.getElementsByTagName('h2')[0];
|
|
|
|
const container = document.createElement('div');
|
|
container.className = 'dropdown';
|
|
|
|
const dropdownButton = document.createElement('button');
|
|
dropdownButton.id = 'bookmarkDropdown';
|
|
dropdownButton.className = 'btn btn-secondary dropdown-toggle';
|
|
dropdownButton.setAttribute('type', 'button');
|
|
dropdownButton.setAttribute('data-bs-toggle', 'dropdown');
|
|
dropdownButton.setAttribute('aria-expanded', 'false');
|
|
dropdownButton.innerText = 'Bookmarks';
|
|
|
|
container.appendChild(dropdownButton);
|
|
|
|
const dropdownMenu = document.createElement('ul');
|
|
dropdownMenu.className = 'dropdown-menu';
|
|
|
|
for (var i = 0; i < bookmarks.length; i++) {
|
|
console.log(bookmarks[i]);
|
|
let liElement = document.createElement('li');
|
|
let bookmarkElement = document.createElement('a');
|
|
bookmarkElement.href = `#${bookmarks[i].id}`;
|
|
bookmarkElement.innerText = bookmarks[i].dataset.bookmark;
|
|
bookmarkElement.className = "dropdown-item";
|
|
|
|
liElement.appendChild(bookmarkElement);
|
|
dropdownMenu.appendChild(liElement);
|
|
}
|
|
|
|
container.appendChild(dropdownMenu);
|
|
header.after(container);
|
|
container.after(document.createElement('br'));
|
|
}
|
|
</script>
|