<!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 input, .new_bookmark_card input { width: 100%; } .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" > {{-bookmark.display_name-}} </a> <a href="{{bookmark.url}}" class="bookmark_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_or_alert); } function delete_bookmark_form(event) { const id = event.target.closest(".bookmark_card").dataset.id; api.bookmarks.delete(id, common.refresh_or_alert); } ed_on_open = undefined; function ed_on_save(ed) { function callback(response) { ed.hide_spinner(); if (response.meta.status != 200) { ed.show_error("Status: " + response.meta.status); return; } // The data coming back from the server will have been normalized. ed.elements["title"].edit.value = response.data.title; ed.save(); ed.elements["title"].display.href = response.data.url; ed.elements["url"].display.href = response.data.url; } ed.elements["url"].edit.value = ed.elements["url"].edit.value.trim(); if (! ed.elements["url"].edit.value) { return; } const bookmark_id = ed.misc_data["bookmark_id"]; const title = ed.elements["title"].edit.value; const url = ed.elements["url"].edit.value; ed.show_spinner(); api.bookmarks.edit(bookmark_id, title, url, callback); } ed_on_cancel = undefined; function create_editors() { const cards = document.getElementsByClassName("bookmark_card"); for (const card of cards) { const ed_elements = [ { "id": "title", "element": card.getElementsByClassName("bookmark_title")[0], "placeholder": "title (optional)", "empty_text": card.dataset.id, "autofocus": true, }, { "id": "url", "element": card.getElementsByClassName("bookmark_url")[0], "placeholder": "url", }, ]; ed = new editor.Editor(ed_elements, ed_on_open, ed_on_save, ed_on_cancel); ed.misc_data["bookmark_id"] = card.dataset.id; } } function on_pageload() { create_editors(); } document.addEventListener("DOMContentLoaded", on_pageload); </script> </html>