<!DOCTYPE html5> <html> <head> {% import "photo_card.html" as photo_card %} {% import "header.html" as header %} {% import "clipboard_tray.html" as clipboard_tray %} <title>Album {{album.display_name}}</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="/static/common.css"> <script src="/static/common.js"></script> <script src="/static/photoclipboard.js"></script> <style> p { word-break: break-word; } #content_body { /* overriding common.css here */ display: block; } #title_editor, #description_editor { width: 100%; max-width: 800px; } #description_text { font-family: initial; padding: 8px; background-color: rgba(0, 0, 0, 0.1); } #description_editor textarea { width: 100%; } </style> </head> <body> {{header.make_header(session=session)}} <div id="content_body"> <h2> <span data-editor-id="title" data-editor-placeholder="title" id="title_text"> {%- if album.title -%} {{album.title}} {%- else -%} Album {{album.id}} {%- endif -%} </span> </h2> <pre id="description_text" data-editor-id="description" data-editor-placeholder="description" {% if album.description == "" %}class="hidden"{% endif %} > {{-album.description-}} </pre> <ul> {% set viewparam = "?view=list" if view == "list" else "" %} {% set parent = album.get_parent() %} {% if parent %} <li><a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></li> {% else %} <li><a href="/albums">Albums</a></li> {% endif %} <ul> <li>You are here</li> <ul> {% set sub_albums = album.get_children() %} {% for sub_album in sub_albums|sort(attribute='title') %} <li><a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a></li> {% endfor %} <li><button class="green_button" onclick="var parent='{{album.id}}'; create_album_and_follow(parent);">Create child</button></li> </ul> </ul> </ul> {% set photos = album.get_photos() %} {% if photos %} <h3>Photos</h3> {% if view != "list" %} <a href="?view=list">List view</a> {% else %} <a href="?view=grid">Grid view</a> {% endif %} <ul> {% for photo in photos %} {{photo_card.create_photo_card(photo, view=view)}} {% endfor %} </ul> {% endif %} <p> {% set has_local_photos = photos|length > 0 %} {% set has_child_photos = album.sum_photos() > photos|length %} {% if has_local_photos or has_child_photos %} Download: {% if has_local_photos %} <a href="/album/{{album.id}}.zip?recursive=no"> These files ({{album.sum_bytes(recurse=False, string=True)}}) </a> {% endif %} {% if has_local_photos and has_child_photos %}—{% endif %} {% if has_child_photos %} <a href="/album/{{album.id}}.zip?recursive=yes"> Include children ({{album.sum_bytes(recurse=True, string=True)}}) </a> {% endif %} {% endif %} </p> {{clipboard_tray.clipboard_tray()}} </div> </body> <script type="text/javascript"> var blank_title_text = "Album {{album.id}}"; function _paste_unpaste_photo_clipboard(add_or_remove) { var photo_ids = Array.from(photo_clipboard); photo_ids = photo_ids.join(","); var url = "/album/{{album.id}}/" + add_or_remove; var data = new FormData(); data.append("photo_id", photo_ids); var callback = function(response) { if (response["meta"]["status"] !== 200) { return; } photo_clipboard.clear(); save_photo_clipboard(); location.reload(); }; post(url, data, callback); } function paste_photo_clipboard() { _paste_unpaste_photo_clipboard("add_photo"); } function unpaste_photo_clipboard() { _paste_unpaste_photo_clipboard("remove_photo"); } var paste_photo_clipboard_button = document.createElement("button"); paste_photo_clipboard_button.classList.add("green_button"); paste_photo_clipboard_button.innerText = "Add to album"; paste_photo_clipboard_button.onclick = paste_photo_clipboard; document.getElementById("clipboard_tray_toolbox").appendChild(paste_photo_clipboard_button); var unpaste_photo_clipboard_button = document.createElement("button"); unpaste_photo_clipboard_button.classList.add("red_button"); unpaste_photo_clipboard_button.innerText = "Remove from album"; unpaste_photo_clipboard_button.onclick = unpaste_photo_clipboard; document.getElementById("clipboard_tray_toolbox").appendChild(unpaste_photo_clipboard_button); function on_open(editor, edit_element_map, display_element_map) { if (display_element_map["title"].innerText == blank_title_text) { display_element_map["title"].innerText = ""; } editor.open(); edit_element_map["title"].focus(); } function on_save(editor, edit_element_map, display_element_map) { var title_editor = edit_element_map["title"]; var description_editor = edit_element_map["description"]; editor.show_spinner(); function callback() { editor.hide_spinner(); editor.save(); if (title_text.innerText == "") { document.title = blank_title_text; title_text.innerText = blank_title_text; } else { document.title = "Album " + title_text.innerText; } if (description_text.innerText == "") { description_text.classList.add("hidden"); } } var url = "/album/{{album.id}}/edit"; var data = new FormData(); data.append("title", title_editor.value); data.append("description", description_editor.value); post(url, data, callback); } function on_cancel(editor, edit_element_map, display_element_map) { editor.cancel(); if (display_element_map["title"].innerText == "") { display_element_map["title"].innerText = blank_title_text; } 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 editor = new Editor([title_text, description_text], on_open, on_save, on_cancel); </script> </html>