<!DOCTYPE html5> <html> {% macro shared_css() %} <style> h2, h3 { margin-top: 0; } #left { margin-left: auto; margin-right: auto; width: 95%; } #left > * { background-color: var(--color_site_transparency); margin-bottom: 30px; padding: 8px; border-radius: 5px; } #album_metadata h2 .editor_input { font-size: inherit; font-weight: inherit; } #description_text { font-family: initial; padding: 8px; } #right > * { margin-right: auto; } .remove_child_button { display: none; } .remove_child_button:hover, .album_card:hover .remove_child_button { display: initial; } @media screen and (max-width: 800px) { #content_body { grid-template: "left" 1fr "right" 150px /1fr; } #right { top: unset !important; width: unset !important; left: 8px; right: 8px; bottom: 8px; height: 150px; } } </style> {% endmacro %} {% if album is not defined %} {## Album listing ###################################################} <head> {% import "header.html" as header %} {% import "album_card.html" as album_card %} <title>Albums</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="/static/css/common.css"> <link rel="stylesheet" href="/static/css/photo_card.css"> <script src="/static/js/common.js"></script> <script src="/static/js/api.js"></script> {{shared_css()}} </head> <body> {{header.make_header(session=session)}} <div id="content_body" class="sticky_side_right"> <div id="left"> <div id="album_list"> <h2>Albums</h2> {% for album in albums %} {{album_card.create_album_card(album, view=view)}} {% endfor %} </div> </div> <div id="right"> {% if view != "list" %} <a href="?view=list">List view</a> {% else %} <a href="?view=grid">Grid view</a> {% endif %} <div> <button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create album</button> <input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title"> <button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button> <button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button> </div> </div> </div> </body> <script id="album_listing_script" type="text/javascript"> ALBUM_ID = undefined; </script> {% else %} {## Individual album ###################################################################} <head> {% import "header.html" as header %} {% import "album_card.html" as album_card %} {% import "photo_card.html" as photo_card %} {% import "clipboard_tray.html" as clipboard_tray %} <title>{{album.display_name}} | Albums</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="/static/css/common.css"> <link rel="stylesheet" href="/static/css/clipboard_tray.css"> <link rel="stylesheet" href="/static/css/photo_card.css"> <script src="/static/js/common.js"></script> <script src="/static/js/api.js"></script> <script src="/static/js/editor.js"></script> <script src="/static/js/hotkeys.js"></script> <script src="/static/js/photo_clipboard.js"></script> {{shared_css()}} </head> <body> {{header.make_header(session=session)}} <div id="content_body" class="sticky_side_right"> <div id="right"> {% if view != "list" %} <a href="?view=list">List view</a> {% else %} <a href="?view=grid">Grid view</a> {% endif %} <button class="red_button button_with_confirm" data-onclick="api.albums.delete(ALBUM_ID, api.albums.callback_go_to_albums)" data-prompt="Delete Album?" data-confirm-class="red_button" data-cancel-class="gray_button" > Delete </button> <div> <button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create child</button> <input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title"> <button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button> <button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button> </div> <div> <button id="add_child_prompt_button" class="green_button" onclick="open_add_child(event);">Add child</button> <input type="text" id="add_child_id_entry" class="hidden" placeholder="Album ID"> <button id="add_child_submit_button" class="green_button hidden" onclick="add_child_form(event);">Add</button> <button id="add_child_cancel_button" class="gray_button hidden" onclick="cancel_add_child(event);">Cancel</button> </div> </div> <div id="left"> <div id="hierarchy_self"> <div id="album_metadata"> <h2><span id="title_text" data-editor-id="title" data-editor-empty-text="{{album.id}}" data-editor-placeholder="title" > {{-album.display_name-}} </span></h2> <pre id="description_text" data-editor-id="description" data-editor-placeholder="description" {% if not album.description %}class="hidden"{% endif %} > {{-album.description-}} </pre> </div> <button class="green_button editor_toolbox_placeholder">Edit</button> </div> <div id="hierarchy_parents"> {% set parents = album.get_parents() %} {% if parents %} <h3>{{parents|length}} Parents</h3> {% for parent in parents %} {{album_card.create_album_card(parent, view=view)}} {% endfor %} {% else %} <h3>1 Parent</h3> {{album_card.create_root_album_card(view=view)}} {% endif %} </div> {% set sub_albums = album.get_children() %} {% if sub_albums %} <div id="hierarchy_children"> <h3>{{sub_albums|length}} Children</h3> {% for sub_album in sub_albums|sort(attribute='title') %} {{album_card.create_album_card(sub_album, view=view, unlink_parent=album)}} {% endfor %} </div> {% endif %} {% set photos = album.get_photos() %} {% if photos %} <div id="hierarchy_photos"> <h3>{{photos|length}} Photos</h3> <div id="photo_list"> {% for photo in photos %} {{photo_card.create_photo_card(photo, view=view)}} {% endfor %} </div> </div> {% endif %} {% set has_local_photos = photos|length > 0 %} {% set has_child_photos = album.has_any_subalbum_photo() %} {% if has_local_photos or has_child_photos %} <div id="download_links"> <h3>Download</h3> {% if has_local_photos %} <p><a id="download_link_single" href="/album/{{album.id}}.zip?recursive=no">These files – {{album.sum_bytes(recurse=False)|bytestring}}</a></p> {% endif %} {% if has_child_photos %} <p><a id="download_link_recursive" href="/album/{{album.id}}.zip?recursive=yes">Include children – {{album.sum_bytes(recurse=True)|bytestring}}</a></p> {% endif %} </div> {% endif %} </div> {{clipboard_tray.clipboard_tray()}} <div class="my_clipboard_tray_toolbox"> <button class="green_button" onclick="paste_photo_clipboard()">Add to this album</button> <button class="red_button" onclick="unpaste_photo_clipboard()">Remove from this album</button> </div> </div> </body> <script id="album_individual_script" type="text/javascript"> var ALBUM_ID = "{{album.id}}"; function open_add_child(event) { document.getElementById("add_child_prompt_button").classList.add("hidden"); document.getElementById("add_child_id_entry").classList.remove("hidden"); document.getElementById("add_child_id_entry").focus(); document.getElementById("add_child_submit_button").classList.remove("hidden"); document.getElementById("add_child_cancel_button").classList.remove("hidden"); } function cancel_add_child(event) { document.getElementById("add_child_prompt_button").classList.remove("hidden"); document.getElementById("add_child_id_entry").value = ""; document.getElementById("add_child_id_entry").classList.add("hidden"); document.getElementById("add_child_submit_button").classList.add("hidden"); document.getElementById("add_child_cancel_button").classList.add("hidden"); } function add_child_form(event) { var child_id = document.getElementById("add_child_id_entry").value; if (! child_id) { return; } api.albums.add_child(ALBUM_ID, child_id, common.refresh); } function paste_photo_clipboard() { var photo_ids = Array.from(photo_clipboard.clipboard); api.albums.add_photos(ALBUM_ID, photo_ids, common.refresh); } function unpaste_photo_clipboard() { var photo_ids = Array.from(photo_clipboard.clipboard); api.albums.remove_photos(ALBUM_ID, photo_ids, common.refresh); } function on_open(ed, edit_element_map, display_element_map) { ed.open(); edit_element_map["title"].focus(); } function on_save(ed, edit_element_map, display_element_map) { function callback() { var title_display = display_element_map["title"]; var description_display = display_element_map["description"]; ed.hide_spinner(); ed.save(); document.title = title_display.innerText + " | Albums"; if (description_display.innerText == "") { description_display.classList.add("hidden"); } } edit_element_map["title"].value = edit_element_map["title"].value.trim(); var title = edit_element_map["title"].value; var description = edit_element_map["description"].value; ed.show_spinner(); api.albums.edit(ALBUM_ID, title, description, callback); } function on_cancel(ed, edit_element_map, display_element_map) { ed.cancel(); if (display_element_map["description"].innerText == "") { display_element_map["description"].classList.add("hidden"); } } var title_text = document.getElementById("title_text"); var description_text = document.getElementById("description_text"); var ed = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel); function on_pageload() { common.bind_box_to_button( document.getElementById("add_child_id_entry"), document.getElementById("add_child_submit_button") ); } document.addEventListener("DOMContentLoaded", on_pageload); </script> {% endif %} {## Shared ############################################################################} <script id="album_shared_script" type="text/javascript"> function open_create_child(event) { document.getElementById("create_child_prompt_button").classList.add("hidden"); document.getElementById("create_child_title_entry").classList.remove("hidden"); document.getElementById("create_child_title_entry").focus(); document.getElementById("create_child_submit_button").classList.remove("hidden"); document.getElementById("create_child_cancel_button").classList.remove("hidden"); } function cancel_create_child(event) { document.getElementById("create_child_prompt_button").classList.remove("hidden"); document.getElementById("create_child_title_entry").value = ""; document.getElementById("create_child_title_entry").classList.add("hidden"); document.getElementById("create_child_submit_button").classList.add("hidden"); document.getElementById("create_child_cancel_button").classList.add("hidden"); } function create_child_form(event) { var title = document.getElementById("create_child_title_entry").value; if (! title) { title = undefined; } var parent_id = ALBUM_ID; api.albums.create(title, parent_id, api.albums.callback_follow); } function on_pageload() { common.bind_box_to_button( document.getElementById("create_child_title_entry"), document.getElementById("create_child_submit_button") ); } document.addEventListener("DOMContentLoaded", on_pageload); </script> </html>