etiquette/frontends/etiquette_flask/static/js/photo_clipboard.js

333 lines
10 KiB
JavaScript
Raw Normal View History

2018-07-23 02:43:07 +00:00
var photo_clipboard = {};
photo_clipboard.clipboard = new Set();
photo_clipboard.on_load_hooks = [];
photo_clipboard.on_save_hooks = [];
// Load save ///////////////////////////////////////////////////////////////////////////////////////
2018-07-23 02:43:07 +00:00
photo_clipboard.clear_clipboard =
function clear_clipboard()
2018-02-25 07:00:28 +00:00
{
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard.clear();
photo_clipboard.save_clipboard();
2018-02-25 07:00:28 +00:00
}
2018-07-23 02:43:07 +00:00
photo_clipboard.load_clipboard =
function load_clipboard(event)
{
2018-07-23 02:43:07 +00:00
console.log("Loading photo clipboard.");
var stored = localStorage.getItem("photo_clipboard");
if (stored === null)
{
2018-07-23 02:43:07 +00:00
if (photo_clipboard.clipboard.size != 0)
{
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard = new Set();
}
}
else
{
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard = new Set(JSON.parse(stored));
}
2018-07-23 02:43:07 +00:00
for (var index = 0; index < photo_clipboard.on_load_hooks.length; index += 1)
{
2018-07-23 02:43:07 +00:00
photo_clipboard.on_load_hooks[index]();
}
2018-07-23 02:43:07 +00:00
return photo_clipboard.clipboard;
}
2018-07-23 02:43:07 +00:00
photo_clipboard.save_clipboard =
function save_clipboard()
{
2018-07-23 02:43:07 +00:00
console.log("Saving photo clipboard.");
var serialized = JSON.stringify(Array.from(photo_clipboard.clipboard));
localStorage.setItem("photo_clipboard", serialized);
2018-07-23 02:43:07 +00:00
photo_clipboard.update_pagestate();
2018-07-23 02:43:07 +00:00
for (var index = 0; index < photo_clipboard.on_save_hooks.length; index += 1)
{
2018-07-23 02:43:07 +00:00
photo_clipboard.on_save_hooks[index]();
}
}
// Card management /////////////////////////////////////////////////////////////////////////////////
2018-07-23 02:43:07 +00:00
photo_clipboard.apply_check =
function apply_check(photo_card)
{
/*
Given a photo card div, set its checkbox to the correct value based on
whether the clipboard contains this card's ID.
*/
var checkbox = photo_card.getElementsByClassName("photo_card_selector_checkbox")[0];
checkbox.checked = photo_clipboard.clipboard.has(photo_card.dataset.id);
if (checkbox.checked)
{
photo_card.classList.remove("photo_card_unselected");
photo_card.classList.add("photo_card_selected");
}
else
{
photo_card.classList.remove("photo_card_selected");
photo_card.classList.add("photo_card_unselected");
}
}
2018-07-23 02:43:07 +00:00
photo_clipboard.apply_check_all =
function apply_check_all()
{
/*
Run through all the photo cards on the page and set their checkbox to the
correct value.
*/
var photo_divs = Array.from(document.getElementsByClassName("photo_card"));
2018-07-23 02:43:07 +00:00
photo_divs.forEach(photo_clipboard.apply_check);
}
2018-07-23 02:43:07 +00:00
photo_clipboard._action_select =
function(photo_div){photo_clipboard.clipboard.add(photo_div.dataset.id)}
photo_clipboard._action_unselect =
function(photo_div){photo_clipboard.clipboard.delete(photo_div.dataset.id)}
photo_clipboard.previous_photo_select = null;
photo_clipboard.on_photo_select =
function on_photo_select(event)
{
/*
Select or unselect the clicked photo, with support for Shift-click to action
everything between the previous click and this one inclusively.
Those middle items will be set to the same state as the new state of the
clicked item.
*/
if (event.target.checked)
{
2018-07-23 02:43:07 +00:00
action = photo_clipboard._action_select;
}
else
{
2018-07-23 02:43:07 +00:00
action = photo_clipboard._action_unselect;
}
2018-07-23 02:43:07 +00:00
if (event.shiftKey && photo_clipboard.previous_photo_select)
{
var current_photo_div = event.target.parentElement;
2018-07-23 02:43:07 +00:00
var previous_photo_div = photo_clipboard.previous_photo_select.target.parentElement;
var photo_divs = Array.from(current_photo_div.parentElement.children);
var current_index = photo_divs.indexOf(current_photo_div);
var previous_index = photo_divs.indexOf(previous_photo_div);
var slice;
if (current_index == previous_index)
{
slice = [current_photo_div];
}
else
{
var left = Math.min(previous_index, current_index);
var right = Math.max(previous_index, current_index);
slice = photo_divs.slice(left, right + 1);
}
slice.forEach(action);
}
else
{
var photo_div = event.target.parentElement;
action(photo_div);
}
2018-07-23 02:43:07 +00:00
photo_clipboard.previous_photo_select = event;
photo_clipboard.save_clipboard();
}
2018-07-23 02:43:07 +00:00
photo_clipboard.select_all_photos =
function select_all_photos()
{
var photo_divs = Array.from(document.getElementsByClassName("photo_card"));
2018-07-23 02:43:07 +00:00
photo_divs.forEach(photo_clipboard._action_select);
photo_clipboard.apply_check_all();
photo_clipboard.save_clipboard();
}
2018-07-23 02:43:07 +00:00
photo_clipboard.unselect_all_photos =
function unselect_all_photos()
{
var photo_divs = Array.from(document.getElementsByClassName("photo_card"));
2018-07-23 02:43:07 +00:00
photo_divs.forEach(photo_clipboard._action_unselect);
photo_clipboard.apply_check_all()
photo_clipboard.previous_photo_select = null;
photo_clipboard.save_clipboard();
}
// Tray management /////////////////////////////////////////////////////////////////////////////////
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard_tray_collapse =
function clipboard_tray_collapse()
{
var tray_body = document.getElementById("clipboard_tray_body");
tray_body.classList.add("hidden");
}
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard_tray_uncollapse =
function clipboard_tray_uncollapse()
{
var tray_body = document.getElementById("clipboard_tray_body");
tray_body.classList.remove("hidden");
2018-07-23 02:43:07 +00:00
photo_clipboard.update_clipboard_tray();
}
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard_tray_collapse_toggle =
function clipboard_tray_collapse_toggle()
{
/*
Show or hide the clipboard.
*/
var tray_body = document.getElementById("clipboard_tray_body");
2018-07-14 09:54:39 +00:00
if (!tray_body)
{
return;
}
2018-07-23 02:43:07 +00:00
if (tray_body.classList.contains("hidden") && photo_clipboard.clipboard.size > 0)
{
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard_tray_uncollapse();
}
else
{
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard_tray_collapse();
}
}
photo_clipboard.ingest_toolbox_items =
function ingest_toolbox_items()
{
/*
The page may provide divs with the class "my_clipboard_tray_toolbox", and
we will migrate all the elements into the real clipboard tray toolbox.
*/
var toolbox = document.getElementById("clipboard_tray_toolbox");
var moreboxes = document.getElementsByClassName("my_clipboard_tray_toolbox");
for (var i = 0; i < moreboxes.length; i += 1)
{
var box = moreboxes[i];
while (box.firstElementChild)
{
toolbox.appendChild(box.firstElementChild);
}
box.parentElement.removeChild(box);
}
}
2018-07-23 02:43:07 +00:00
photo_clipboard.on_tray_delete_button =
function on_tray_delete_button(event)
{
/*
Remove the clicked row from the clipboard.
*/
var clipboard_line = event.target.parentElement;
var photo_id = clipboard_line.dataset.id;
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard.delete(photo_id);
photo_clipboard.save_clipboard();
}
2018-07-23 02:43:07 +00:00
photo_clipboard.update_clipboard_tray =
function update_clipboard_tray()
{
/*
Rebuild the rows if the tray is open.
*/
var clipboard_tray = document.getElementById("clipboard_tray");
if (clipboard_tray === null)
{
return;
}
2018-07-23 02:43:07 +00:00
if (photo_clipboard.clipboard.size == 0)
{
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard_tray_collapse();
}
var tray_lines = document.getElementById("clipboard_tray_lines");
if (!clipboard_tray.classList.contains("hidden"))
{
2018-07-23 02:12:08 +00:00
common.delete_all_children(tray_lines);
2018-07-23 02:43:07 +00:00
var photo_ids = Array.from(photo_clipboard.clipboard);
photo_ids.sort();
for (var i = 0; i < photo_ids.length; i += 1)
{
var clipboard_line = document.createElement("div");
clipboard_line.classList.add("clipboard_tray_line");
clipboard_line.dataset.id = photo_ids[i];
var clipboard_line_delete_button = document.createElement("button");
clipboard_line_delete_button.classList.add("remove_tag_button_perm");
clipboard_line_delete_button.classList.add("red_button");
2018-07-23 02:43:07 +00:00
clipboard_line_delete_button.onclick = photo_clipboard.on_tray_delete_button;
var clipboard_line_link = document.createElement("a");
clipboard_line_link.target = "_blank";
clipboard_line_link.href = "/photo/" + photo_ids[i];
clipboard_line_link.innerText = photo_ids[i];
clipboard_line.appendChild(clipboard_line_delete_button);
clipboard_line.appendChild(clipboard_line_link);
tray_lines.appendChild(clipboard_line);
}
}
}
2018-07-14 09:54:39 +00:00
// Page and event management ///////////////////////////////////////////////////////////////////////
2018-07-23 02:43:07 +00:00
photo_clipboard.open_full_clipboard_tab =
2018-07-14 09:54:39 +00:00
function open_full_clipboard_tab()
{
window.open("/clipboard");
2018-07-14 09:54:39 +00:00
}
2018-07-23 02:43:07 +00:00
photo_clipboard.update_clipboard_count =
function update_clipboard_count()
{
var elements = document.getElementsByClassName("clipboard_count");
for (var index = 0; index < elements.length; index += 1)
{
2018-07-23 02:43:07 +00:00
elements[index].innerText = photo_clipboard.clipboard.size;
}
}
2018-07-23 02:43:07 +00:00
photo_clipboard.on_storage_event =
function on_storage_event()
{
/*
Receive storage events from other tabs and update our state to match.
*/
2018-07-23 02:43:07 +00:00
photo_clipboard.load_clipboard();
photo_clipboard.update_pagestate();
}
2018-07-23 02:43:07 +00:00
photo_clipboard.update_pagestate =
function update_pagestate()
{
2018-07-23 02:43:07 +00:00
photo_clipboard.update_clipboard_count();
photo_clipboard.update_clipboard_tray();
photo_clipboard.apply_check_all();
}
2018-07-23 02:43:07 +00:00
photo_clipboard.on_pageload =
function on_pageload()
{
2018-07-23 02:43:07 +00:00
window.addEventListener("storage", photo_clipboard.on_storage_event, false);
2018-07-23 02:55:29 +00:00
hotkeys.register_hotkey("a", 1, 0, 0, photo_clipboard.select_all_photos, "Select all photos.");
hotkeys.register_hotkey("d", 1, 0, 0, photo_clipboard.unselect_all_photos, "Deselect all photos.");
hotkeys.register_hotkey("c", 0, 0, 0, photo_clipboard.clipboard_tray_collapse_toggle, "Toggle clipboard tray.");
hotkeys.register_hotkey("c", 0, 1, 0, photo_clipboard.open_full_clipboard_tab, "Open full clipboard page.");
photo_clipboard.ingest_toolbox_items();
2018-07-23 02:43:07 +00:00
photo_clipboard.load_clipboard();
photo_clipboard.update_pagestate();
}
2018-07-23 02:43:07 +00:00
document.addEventListener("DOMContentLoaded", photo_clipboard.on_pageload);