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; } 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 = {};