<!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-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="return delete_bookmark_form();" 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() { api.bookmarks.delete('{{bookmark.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.bookmarkId; } } function on_pageload() { create_editors(); } document.addEventListener("DOMContentLoaded", on_pageload); </script> </html>