voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add new bookmarks to page without refreshing.

Browse source 
This is the first card to get a javascript version, so I'm testing
the waters with the low-stakes bookmarks.
This commit is contained in:
voussoir 2021-05-02 18:37:28 -07:00
parent c984f6884e
commit 59654a89e6
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
2 changed files with 59 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontends/etiquette_flask/static/js/cards.js
View file

@ -71,6 +71,43 @@ function drag_drop(event)
/******************************************************************************/
cards.bookmarks = {};
cards.bookmarks.create =
function create(bookmark, add_delete_button)
{
const bookmark_card = document.createElement("div");
bookmark_card.className = "bookmark_card"
bookmark_card.dataset.id = bookmark.id;
const bookmark_title = document.createElement("a");
bookmark_title.className = "bookmark_title";
bookmark_title.href = bookmark.url;
bookmark_title.innerText = bookmark.display_name;
bookmark_card.appendChild(bookmark_title);
const bookmark_url = document.createElement("a");
bookmark_url.className = "bookmark_url";
bookmark_url.href = bookmark.url;
bookmark_url.innerText = bookmark.url;
bookmark_card.appendChild(bookmark_url);
const bookmark_toolbox = document.createElement("div");
bookmark_toolbox.className = "bookmark_toolbox"
bookmark_card.appendChild(bookmark_toolbox);
if (add_delete_button)
{
const delete_button = document.createElement("button");
delete_button.className = "red_button button_with_confirm";
delete_button.dataset.onclick = "return delete_bookmark_form(event);";
delete_button.dataset.prompt = "Delete Bookmark?";
delete_button.dataset.cancelClass = "gray_button";
delete_button.innerText = "Delete";
bookmark_toolbox.appendChild(delete_button);
common.init_button_with_confirm(delete_button);
}
return bookmark_card;
}
/******************************************************************************/
cards.photos = {};

23
frontends/etiquette_flask/templates/bookmarks.html
View file

@ -12,6 +12,7 @@
{% 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/cards.js"></script>
<script src="/static/js/spinner.js"></script>
<script src="/static/js/editor.js"></script>
@ -54,7 +55,27 @@ function create_bookmark_form()
{
return;
}
return api.bookmarks.create(url, title, common.refresh_or_alert);
return api.bookmarks.create(url, title, create_bookmark_callback);
}
function create_bookmark_callback(response)
{
if (! (response.meta.status === 200 && response.meta.json_ok))
{
alert(JSON.stringify(response));
return;
}
const bookmark = response.data;
const add_delete_button = true;
const bookmark_card = cards.bookmarks.create(bookmark, add_delete_button);
create_editor(bookmark_card);
const bookmark_list = document.getElementById("bookmark_list");
const new_bookmark_card = document.getElementById("new_bookmark_card");
bookmark_list.insertBefore(bookmark_card, new_bookmark_card);
document.getElementById("new_bookmark_url").value = "";
document.getElementById("new_bookmark_title").value = "";
}
function delete_bookmark_form(event)