Ethan Dalool
adb1d0ef39
There was always some semblance that two blank lines has some kind of meaning or structure that's different from single blank lines, but in reality it was mostly arbitrary and I can't stand to look at it any more.
170 lines
4.7 KiB
HTML
170 lines
4.7 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
{% import "header.html" as header %}
|
|
<title>Bookmarks</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
<link rel="stylesheet" href="/static/css/etiquette.css">
|
|
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
|
<script src="/static/js/common.js"></script>
|
|
<script src="/static/js/api.js"></script>
|
|
<script src="/static/js/spinner.js"></script>
|
|
<script src="/static/js/editor.js"></script>
|
|
|
|
<style>
|
|
#bookmark_list
|
|
{
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
}
|
|
.bookmark_card,
|
|
.new_bookmark_card
|
|
{
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
align-items: baseline;
|
|
|
|
padding: 8px;
|
|
margin: 8px;
|
|
max-width: 500px;
|
|
|
|
border-radius: 8px;
|
|
box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
|
|
|
|
background-color: var(--color_secondary);
|
|
}
|
|
.bookmark_card .bookmark_url
|
|
{
|
|
color: #aaa;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
{{header.make_header(session=session)}}
|
|
<div id="content_body">
|
|
<div id="bookmark_list">
|
|
<h2>Bookmarks</h2>
|
|
{% for bookmark in bookmarks %}
|
|
<div class="bookmark_card" data-id="{{bookmark.id}}">
|
|
<a
|
|
href="{{bookmark.url}}"
|
|
class="bookmark_title"
|
|
data-editor-id="title"
|
|
data-editor-placeholder="title (optional)"
|
|
data-editor-empty-text="{{bookmark.id}}"
|
|
>
|
|
{%- if bookmark.title -%}
|
|
{{bookmark.title}}
|
|
{%- else -%}
|
|
{{bookmark.id}}
|
|
{%- endif -%}
|
|
</a>
|
|
|
|
<a
|
|
href="{{bookmark.url}}"
|
|
class="bookmark_url"
|
|
data-editor-id="url"
|
|
data-editor-placeholder="url"
|
|
>
|
|
{{-bookmark.url-}}
|
|
</a>
|
|
|
|
<button
|
|
class="red_button button_with_confirm"
|
|
data-onclick="return delete_bookmark_form(event);"
|
|
data-prompt="Delete Bookmark?"
|
|
data-cancel-class="gray_button"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="new_bookmark_card">
|
|
<input id="new_bookmark_title" type="text" placeholder="title (optional)">
|
|
<input id="new_bookmark_url" type="text" placeholder="url">
|
|
<button id="new_bookmark_button" class="green_button" onclick="return create_bookmark_form();">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
function create_bookmark_form()
|
|
{
|
|
const url = document.getElementById("new_bookmark_url").value.trim();
|
|
const title = document.getElementById("new_bookmark_title").value.trim();
|
|
if (!url)
|
|
{
|
|
return;
|
|
}
|
|
return api.bookmarks.create(url, title, common.refresh);
|
|
}
|
|
|
|
function delete_bookmark_form(event)
|
|
{
|
|
const id = event.target.closest(".bookmark_card").dataset.id;
|
|
api.bookmarks.delete(id, common.refresh);
|
|
}
|
|
|
|
function on_open(ed, edit_element_map)
|
|
{
|
|
ed.open();
|
|
edit_element_map["title"].focus();
|
|
}
|
|
|
|
function on_save(ed, edit_element_map, display_element_map)
|
|
{
|
|
function callback(response)
|
|
{
|
|
if (response.meta.status != 200)
|
|
{
|
|
ed.show_error("Status: " + response.meta.status);
|
|
return;
|
|
}
|
|
|
|
ed.save();
|
|
display_element_map["title"].href = response.data.url;
|
|
display_element_map["url"].href = response.data.url;
|
|
}
|
|
|
|
edit_element_map["url"].value = edit_element_map["url"].value.trim();
|
|
if (!edit_element_map["url"].value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
const bookmark_id = ed.misc_data["bookmark_id"];
|
|
const title = edit_element_map["title"].value;
|
|
const url = edit_element_map["url"].value;
|
|
|
|
ed.show_spinner();
|
|
api.bookmarks.edit(bookmark_id, title, url, callback);
|
|
}
|
|
|
|
on_cancel = undefined;
|
|
|
|
function create_editors()
|
|
{
|
|
const cards = document.getElementsByClassName("bookmark_card");
|
|
for (const card of cards)
|
|
{
|
|
const title_div = card.getElementsByClassName("bookmark_title")[0];
|
|
const url_div = card.getElementsByClassName("bookmark_url")[0];
|
|
ed = new editor.Editor([title_div, url_div], on_open, on_save, on_cancel);
|
|
ed.misc_data["bookmark_id"] = card.dataset.id;
|
|
}
|
|
}
|
|
|
|
function on_pageload()
|
|
{
|
|
create_editors();
|
|
}
|
|
document.addEventListener("DOMContentLoaded", on_pageload);
|
|
</script>
|
|
</html>
|