Ethan Dalool
b81aad78dd
There was just no point to naming them like this because all of the color vars obviously represent some part of the site's color theme.
168 lines
4.6 KiB
HTML
168 lines
4.6 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">
|
|
{% 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;
|
|
width: 500px;
|
|
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-bookmark-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="api.bookmarks.delete('{{bookmark.id}}', common.refresh)"
|
|
data-prompt="Delete Bookmark?"
|
|
data-confirm-class="red_button"
|
|
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="create_bookmark_form()">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script type="text/javascript">
|
|
function create_bookmark_form()
|
|
{
|
|
var url = document.getElementById("new_bookmark_url").value.trim();
|
|
var title = document.getElementById("new_bookmark_title").value.trim();
|
|
if (!url)
|
|
{
|
|
return;
|
|
}
|
|
return api.bookmarks.create(url, title, 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;
|
|
}
|
|
|
|
var bookmark_id = ed.misc_data["bookmark_id"];
|
|
var title = edit_element_map["title"].value;
|
|
var url = edit_element_map["url"].value;
|
|
|
|
ed.show_spinner();
|
|
api.bookmarks.edit(bookmark_id, title, url, callback);
|
|
}
|
|
|
|
on_cancel = undefined;
|
|
|
|
function create_editors()
|
|
{
|
|
var cards = document.getElementsByClassName("bookmark_card");
|
|
for (var index = 0; index < cards.length; index += 1)
|
|
{
|
|
var card = cards[index];
|
|
var title_div = card.getElementsByClassName("bookmark_title")[0];
|
|
var 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.bookmarkId;
|
|
}
|
|
}
|
|
|
|
function on_pageload()
|
|
{
|
|
create_editors();
|
|
}
|
|
document.addEventListener("DOMContentLoaded", on_pageload);
|
|
</script>
|
|
</html>
|