etiquette/frontends/etiquette_flask/static/js/cards.js

326 lines
9.5 KiB
JavaScript
Raw Normal View History

const cards = {};
/******************************************************************************/
cards.albums = {};
cards.albums.drag_start =
function drag_start(event)
{
const album_card = event.target.closest(".album_card");
event.dataTransfer.setData("text/plain", album_card.id);
}
cards.albums.drag_end =
function drag_end(event)
{
}
cards.albums.drag_over =
function drag_over(event)
{
event.preventDefault();
}
cards.albums.drag_drop =
function drag_drop(event)
{
const child = document.getElementById(event.dataTransfer.getData("text"));
const child_id = child.dataset.id;
const parent = event.currentTarget;
const parent_id = parent.dataset.id;
event.dataTransfer.clearData();
if (child_id == parent_id)
{
return;
}
let prompt;
if (parent_id === "root")
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
prompt = `Remove child\n${child_title}?`;
}
else
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
const parent_title = parent.querySelector('.album_card_title').textContent.trim();
prompt = `Move\n${child_title}\ninto\n${parent_title}?`;
}
if (! confirm(prompt))
{
return;
}
if (parent_id === "root")
{
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
}
else if (ALBUM_ID)
{
api.albums.add_child(parent_id, child_id, null);
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
}
else
{
api.albums.add_child(parent_id, child_id, common.refresh_or_alert);
}
}
/******************************************************************************/
cards.bookmarks = {};
cards.bookmarks.create =
function create(bookmark, add_author, add_delete_button, add_url_element)
{
const bookmark_card = document.createElement("div");
bookmark_card.className = "bookmark_card"
bookmark_card.dataset.id = bookmark.id;
const h2 = document.createElement("h2");
const bookmark_title = document.createElement("a");
bookmark_title.className = "bookmark_title";
bookmark_title.href = bookmark.url;
bookmark_title.innerText = bookmark.display_name;
h2.appendChild(bookmark_title);
bookmark_card.appendChild(h2);
// The URL element is always display:none, but its presence is useful in
// facilitating the Editor object. If this bookmark will not be editable,
// there is no need for it.
if (add_url_element)
{
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);
}
// If more tools are added, this will become an `or`.
// I just want to have the structure in place now.
if (add_delete_button)
{
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 = {};
cards.photos.MIMETYPE_THUMBNAILS = {
"svg": "svg",
"application/zip": "archive",
"application/x-tar": "archive",
"archive": "archive",
"audio": "audio",
"image": "image",
"video": "video",
"text": "txt",
};
cards.photos.file_link =
function file_link(photo, short)
{
if (short)
{
return `/file/${photo.id}${photo.dot_extension}`;
}
const basename = escape(photo.filename);
return `/file/${photo.id}/${basename}`;
}
cards.photos.create =
function create(photo, view)
{
if (view !== "list" && view !== "grid")
{
view = "grid";
}
const photo_card = document.createElement("div");
photo_card.id = `photo_card_${photo.id}`;
photo_card.dataset.id = photo.id;
photo_card.className = `photo_card photo_card_${view} photo_card_unselected`
if (photo.searchhidden)
{
photo_card.classList.add("photo_card_searchhidden");
}
photo_card.ondragstart = "return cards.photos.drag_start(event);";
photo_card.ondragend = "return cards.photos.drag_end(event);";
photo_card.ondragover = "return cards.photos.drag_over(event);";
photo_card.ondrop = "return cards.photos.drag_drop(event);";
photo_card.draggable = true;
const photo_card_filename = document.createElement("div");
photo_card_filename.className = "photo_card_filename";
const filename_link = document.createElement("a");
filename_link.target = "_blank";
filename_link.href = `/photo/${photo.id}`;
filename_link.draggable = false;
filename_link.innerText = photo.filename;
photo_card_filename.appendChild(filename_link);
photo_card.appendChild(photo_card_filename);
const photo_card_metadata = document.createElement("span");
photo_card_metadata.className = "photo_card_metadata";
const metadatas = [];
if (photo.width)
{
metadatas.push(`${photo.width}×${photo.height}`);
}
if (photo.duration)
{
metadatas.push(`${photo.duration_string}`);
}
photo_card_metadata.innerHTML = common.join_and_trail(metadatas, ", ");
const filesize_file_link = document.createElement("a");
filesize_file_link.href = cards.photos.file_link(photo);
filesize_file_link.target = "_blank";
filesize_file_link.draggable = false;
filesize_file_link.innerText = photo.bytes_string;
photo_card_metadata.append(filesize_file_link);
photo_card.appendChild(photo_card_metadata);
if (view == "grid")
{
let thumbnail_src;
if (photo.has_thumbnail)
{
thumbnail_src = `/thumbnail/${photo.id}.jpg`;
}
else
{
thumbnail_src =
cards.photos.MIMETYPE_THUMBNAILS[photo.extension] ||
cards.photos.MIMETYPE_THUMBNAILS[photo.mimetype] ||
cards.photos.MIMETYPE_THUMBNAILS[photo.simple_mimetype] ||
"other";
thumbnail_src = `/static/basic_thumbnails/${thumbnail_src}.png`;
}
const photo_card_thumbnail = document.createElement("a");
photo_card_thumbnail.className = "photo_card_thumbnail";
photo_card_thumbnail.target = "_blank";
photo_card_thumbnail.href = `/photo/${photo.id}`;
photo_card_thumbnail.draggable = false;
const thumbnail_img = document.createElement("img");
thumbnail_img.loading = "lazy";
thumbnail_img.src = thumbnail_src;
thumbnail_img.draggable = false;
photo_card_thumbnail.appendChild(thumbnail_img);
photo_card.appendChild(photo_card_thumbnail);
}
let tag_names_title = [];
let tag_names_inner = "";
for (const tag of photo.tags)
{
tag_names_title.push(tag.name);
tag_names_inner = "T";
}
const photo_card_tags = document.createElement("span");
photo_card_tags.className = "photo_card_tags";
photo_card_tags.title = tag_names_title.join(",");
photo_card_tags.innerText = tag_names_inner;
photo_card.appendChild(photo_card_tags);
if (photo_clipboard)
{
const clipboard_checkbox = photo_clipboard.give_checkbox(photo_card);
photo_clipboard.apply_check(clipboard_checkbox);
}
return photo_card;
}
2021-01-25 21:47:47 +00:00
cards.photos.drag_start =
function drag_start(event)
{
}
cards.photos.drag_end =
function drag_end(event)
{
}
cards.photos.drag_over =
function drag_over(event)
{
}
cards.photos.drag_drop =
function drag_drop(event)
{
}
cards.photos.photo_contextmenu = null;
cards.photos.set_contextmenu =
function set_contextmenu(element, build_function)
{
element.classList.add("photo_card_contextmenu");
element.classList.add("contextmenu");
element.onclick = "event.stopPropagation(); return;";
cards.photos.photo_contextmenu = element;
cards.photos.build_photo_contextmenu = build_function;
contextmenus.hide_open_menus();
}
cards.photos.right_clicked_photo = null;
cards.photos.photo_rightclick =
function photo_rightclick(event)
{
if (["A", "IMG"].includes(event.target.tagName))
{
return true;
}
if (cards.photos.photo_contextmenu === null)
{
return true;
}
if (event.ctrlKey || event.shiftKey || event.altKey)
{
return true;
}
const photo_card = event.target.closest(".photo_card");
if (! photo_card)
{
cards.photos.right_clicked_photo = null;
contextmenus.hide_open_menus();
return true;
}
if (contextmenus.menu_is_open())
{
contextmenus.hide_open_menus();
}
cards.photos.right_clicked_photo = photo_card;
const menu = cards.photos.photo_contextmenu;
cards.photos.build_photo_contextmenu(photo_card, menu);
setTimeout(() => {contextmenus.show_menu(event, menu);}, 0);
event.stopPropagation();
event.preventDefault();
return false;
}
/******************************************************************************/
cards.tags = {};