<!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/common.css"> <script src="/static/common.js"></script> <style> #bookmarks { 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 rgba(0,0,0,0.25); background-color: #ffffd4; } .bookmark_card .bookmark_url { color: #aaa; } </style> </head> <body> {{header.make_header(session=session)}} <div id="content_body"> <div id="bookmarks"> {% 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> </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="submit_bookmark_form()">Create</button> </div> </div> </div> </body> <script type="text/javascript"> function submit_bookmark_form() { var url = document.getElementById("new_bookmark_url").value.trim(); var title = document.getElementById("new_bookmark_title").value.trim(); if (!url) { return; } return create_bookmark(url, title); } function create_bookmark(url, title) { var api_url = "/bookmarks/create_bookmark"; var data = new FormData(); data.append("url", url); if (title) { data.append("title", title); } var callback = function(){location.reload();}; post(api_url, data, callback); } function on_open(editor, edit_element_map) { editor.open(); edit_element_map["title"].focus(); } function on_save(editor, edit_element_map) { var title_editor = edit_element_map["title"]; var url_editor = edit_element_map["url"]; url_editor.value = url_editor.value.trim(); if (!url_editor.value) { return; } editor.show_spinner(); function callback() { editor.hide_spinner(); editor.save(); } var url = "/bookmark/" + editor.misc_data["bookmark_id"] + "/edit"; var data = new FormData(); data.append("title", title_editor.value); data.append("url", url_editor.value); post(url, data, 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]; editor = new Editor([title_div, url_div], on_open, on_save, on_cancel); editor.misc_data["bookmark_id"] = card.dataset.bookmarkId; } } create_editors(); </script> </html>