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

const photo_clipboard = {};

photo_clipboard.clipboard = new Set();
photo_clipboard.on_load_hooks = [];
photo_clipboard.on_save_hooks = [];

// Load save ///////////////////////////////////////////////////////////////////////////////////////

photo_clipboard.clear_clipboard =
function clear_clipboard()
{
    photo_clipboard.clipboard.clear();
    photo_clipboard.save_clipboard();
}

photo_clipboard.load_clipboard =
function load_clipboard(event)
{
    console.log("Loading photo clipboard from localstorage.");
    const stored = localStorage.getItem("photo_clipboard");
    if (stored === null)
    {
        if (photo_clipboard.clipboard.size != 0)
        {
            photo_clipboard.clipboard = new Set();
        }
    }
    else
    {
        photo_clipboard.clipboard = new Set(JSON.parse(stored));
    }

    for (const on_load_hook of photo_clipboard.on_load_hooks)
    {
        on_load_hook();
    }

    return photo_clipboard.clipboard;
}

photo_clipboard.save_clipboard =
function save_clipboard()
{
    console.log("Saving photo clipboard to localstorage.");
    const serialized = JSON.stringify(Array.from(photo_clipboard.clipboard));
    localStorage.setItem("photo_clipboard", serialized);
    photo_clipboard.update_pagestate();

    for (const on_save_hook of photo_clipboard.on_save_hooks)
    {
        on_save_hook();
    }
}

// Card management /////////////////////////////////////////////////////////////////////////////////

photo_clipboard.give_checkbox =
function give_checkbox(photo_card)
{
    // There are some UIs where photo cards appear
    const checkbox = document.createElement("input")
    checkbox.type = "checkbox";
    checkbox.className = "photo_clipboard_selector_checkbox";
    checkbox.onclick = function(event)
    {
        return photo_clipboard.on_photo_select(event);
    }
    photo_card.appendChild(checkbox);
    return checkbox;
}

photo_clipboard.apply_check =
function apply_check(checkbox)
{
    /*
    Check the checkbox if this photo ID is on the clipboard.

    There are two valid scenarios:
    1. The checkbox is a child of a photo_card div, and that div has data-id
       containing the photo id. That div will receive the CSS class
       photo_card_selected or photo_card_unselected.
       This is the most common usage.
    2. The checkbox has its own data-photo-id, and the parent element will be
       ignored. This is used only if the checkbox needs to be displayed outside
       of a photo card, such as on the /photo/id page where it makes no sense
       to put a photo card of the photo you're already looking at.
    */
    let photo_id;
    let photo_card;
    if (checkbox.dataset.photoId)
    {
        photo_id = checkbox.dataset.photoId;
    }
    else
    {
        photo_card = checkbox.parentElement;
        photo_id = photo_card.dataset.id;
    }
    checkbox.checked = photo_clipboard.clipboard.has(photo_id);
    if (! photo_card)
    {
        // E.g. on the Photo page there is a checkbox for adding it to the
        // clipboard, though it does not reside in a photo_card div.
        return;
    }
    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");
    }
}

photo_clipboard.apply_check_all =
function apply_check_all()
{
    /*
    Run through all the photo cards, give them their checkbox if they don't
    already have it, and check it if that photo is on the clipboard.
    */
    const cards = document.getElementsByClassName("photo_card");
    for (const card of cards)
    {
        let checkbox = card.getElementsByClassName("photo_clipboard_selector_checkbox")[0];
        if (! checkbox)
        {
            checkbox = photo_clipboard.give_checkbox(card);
        }
        photo_clipboard.apply_check(checkbox);
    }
}

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.
    */
    const checkbox = event.target;
    let action;
    if (checkbox.checked)
    {
        action = function(photo_div)
        {
            console.log("photo_card_selected");
            photo_clipboard.clipboard.add(photo_div.dataset.id);
            photo_div.classList.remove("photo_card_unselected");
            photo_div.classList.add("photo_card_selected");
        }
    }
    else
    {
        action = function(photo_div)
        {
            console.log("photo_card_unselected");
            photo_clipboard.clipboard.delete(photo_div.dataset.id);
            photo_div.classList.remove("photo_card_selected");
            photo_div.classList.add("photo_card_unselected");
        }
    }

    if (! checkbox.parentElement.classList.contains("photo_card"))
    {
        if (checkbox.checked)
        {
            photo_clipboard.clipboard.add(checkbox.dataset.photoId);
        }
        else
        {
            photo_clipboard.clipboard.delete(checkbox.dataset.photoId);
        }
    }
    else if (event.shiftKey && photo_clipboard.previous_photo_select)
    {
        const current_photo_div = checkbox.parentElement;
        const previous_photo_div = photo_clipboard.previous_photo_select;
        const photo_divs = Array.from(current_photo_div.parentElement.getElementsByClassName("photo_card"));

        const current_index = photo_divs.indexOf(current_photo_div);
        const previous_index = photo_divs.indexOf(previous_photo_div);

        let slice;
        if (current_index == previous_index)
        {
            slice = [current_photo_div];
        }
        else
        {
            const left = Math.min(previous_index, current_index);
            const right = Math.max(previous_index, current_index);
            slice = photo_divs.slice(left, right + 1);
        }

        for (const photo_div of slice)
        {
            action(photo_div);
        }
        photo_clipboard.previous_photo_select = current_photo_div;
    }
    else
    {
        const photo_div = checkbox.parentElement;
        action(photo_div);
        photo_clipboard.previous_photo_select = photo_div;
    }
    setTimeout(() => photo_clipboard.save_clipboard(), 0);
}

photo_clipboard.select_all_photos =
function select_all_photos()
{
    const photo_divs = Array.from(document.getElementsByClassName("photo_card"));
    for (const photo_div of photo_divs)
    {
        photo_clipboard.clipboard.add(photo_div.dataset.id);
        photo_div.classList.remove("photo_card_unselected");
        photo_div.classList.add("photo_card_selected");
        const checkbox = photo_div.getElementsByClassName("photo_clipboard_selector_checkbox")[0];
        if (checkbox)
        {
            checkbox.checked = true;
        }
    }
    photo_clipboard.previous_photo_select = null;
    setTimeout(() => photo_clipboard.save_clipboard(), 0);
}

photo_clipboard.unselect_all_photos =
function unselect_all_photos()
{
    const photo_divs = Array.from(document.getElementsByClassName("photo_card"));
    for (const photo_div of photo_divs)
    {
        photo_clipboard.clipboard.delete(photo_div.dataset.id);
        photo_div.classList.remove("photo_card_selected");
        photo_div.classList.add("photo_card_unselected");
        const checkbox = photo_div.getElementsByClassName("photo_clipboard_selector_checkbox")[0];
        if (checkbox)
        {
            checkbox.checked = false;
        }
    }
    photo_clipboard.previous_photo_select = null;
    setTimeout(() => photo_clipboard.save_clipboard(), 0);
}

// Tray management /////////////////////////////////////////////////////////////////////////////////

photo_clipboard.clipboard_tray_collapse =
function clipboard_tray_collapse()
{
    const tray_body = document.getElementById("clipboard_tray_body");
    tray_body.classList.add("hidden");
}

photo_clipboard.clipboard_tray_uncollapse =
function clipboard_tray_uncollapse()
{
    const tray_body = document.getElementById("clipboard_tray_body");
    tray_body.classList.remove("hidden");
    photo_clipboard.update_clipboard_tray();
}

photo_clipboard.clipboard_tray_collapse_toggle =
function clipboard_tray_collapse_toggle()
{
    /*
    Show or hide the clipboard.
    */
    const tray_body = document.getElementById("clipboard_tray_body");
    if (!tray_body)
    {
        return;
    }

    if (tray_body.classList.contains("hidden") && photo_clipboard.clipboard.size > 0)
    {
        photo_clipboard.clipboard_tray_uncollapse();
    }
    else
    {
        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.
    */
    const toolbox = document.getElementById("clipboard_tray_toolbox");
    const moreboxes = document.getElementsByClassName("my_clipboard_tray_toolbox");

    for (const morebox of moreboxes)
    {
        while (morebox.firstElementChild)
        {
            toolbox.appendChild(morebox.firstElementChild);
        }
        morebox.parentElement.removeChild(morebox);
    }
}

photo_clipboard.on_tray_delete_button =
function on_tray_delete_button(event)
{
    /*
    Remove the clicked row from the clipboard.
    */
    const clipboard_line = event.target.parentElement;
    const photo_id = clipboard_line.dataset.id;
    photo_clipboard.clipboard.delete(photo_id);
    photo_clipboard.save_clipboard();
}

photo_clipboard.update_clipboard_tray =
function update_clipboard_tray()
{
    /*
    Rebuild the rows if the tray is open.
    */
    const clipboard_tray = document.getElementById("clipboard_tray");
    if (clipboard_tray === null)
    {
        return;
    }

    if (photo_clipboard.clipboard.size == 0)
    {
        photo_clipboard.clipboard_tray_collapse();
    }

    const tray_lines = document.getElementById("clipboard_tray_lines");
    if (!clipboard_tray.classList.contains("hidden"))
    {
        common.delete_all_children(tray_lines);
        const photo_ids = Array.from(photo_clipboard.clipboard);
        photo_ids.sort();
        for (const photo_id of photo_ids)
        {
            const clipboard_line = document.createElement("div");
            clipboard_line.classList.add("clipboard_tray_line");
            clipboard_line.dataset.id = photo_id;

            const 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");
            clipboard_line_delete_button.onclick = photo_clipboard.on_tray_delete_button;

            const clipboard_line_link = document.createElement("a");
            clipboard_line_link.target = "_blank";
            clipboard_line_link.href = "/photo/" + photo_id;
            clipboard_line_link.innerText = photo_id;

            clipboard_line.appendChild(clipboard_line_delete_button);
            clipboard_line.appendChild(clipboard_line_link);
            tray_lines.appendChild(clipboard_line);
        }
    }
}

// Page and event management ///////////////////////////////////////////////////////////////////////

photo_clipboard.open_full_clipboard_tab =
function open_full_clipboard_tab()
{
    window.open("/clipboard");
}

photo_clipboard.on_storage_event =
function on_storage_event()
{
    /*
    Receive storage events from other tabs and update our state to match.
    */
    photo_clipboard.load_clipboard();
    photo_clipboard.update_pagestate();
}

photo_clipboard.update_pagestate =
function update_pagestate()
{
    /*
    Update all relevant DOM elements to match internal state.
    */
    common.update_dynamic_elements("dynamic_clipboard_count", photo_clipboard.clipboard.size);
    photo_clipboard.update_clipboard_tray();
    photo_clipboard.apply_check_all();
}

photo_clipboard.on_pageload =
function on_pageload()
{
    window.addEventListener("storage", photo_clipboard.on_storage_event, false);
    hotkeys.register_hotkey("ctrl a", photo_clipboard.select_all_photos, "Select all photos.");
    hotkeys.register_hotkey("ctrl d", photo_clipboard.unselect_all_photos, "Deselect all photos.");
    hotkeys.register_hotkey("c", photo_clipboard.clipboard_tray_collapse_toggle, "Toggle clipboard tray.");
    hotkeys.register_hotkey("shift c", photo_clipboard.open_full_clipboard_tab, "Open full clipboard page.");
    photo_clipboard.ingest_toolbox_items();
    photo_clipboard.load_clipboard();
    photo_clipboard.update_pagestate();
}
document.addEventListener("DOMContentLoaded", photo_clipboard.on_pageload);