<!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/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/albums.js"></script> <script src="/static/js/editor.js"></script> <script src="/static/js/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-empty-text="{{album.id}}" data-editor-placeholder="title" id="title_text">{{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> <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>{{album.display_name}}</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 id="create_child_prompt_button" class="green_button" onclick="open_creator_prompt(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="submit_create_child(event);">Create</button> <button id="create_child_cancel_button" class="red_button hidden" onclick="cancel_create_child(event);">Cancel</button> </li> </ul> </ul> </ul> {% set photos = album.get_photos() %} {% if photos %} <h3>{{photos|length}} 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.has_any_subalbum_photo() %} {% 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)|bytestring }}) </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)|bytestring }}) </a> {% endif %} {% endif %} </p> {{clipboard_tray.clipboard_tray()}} </div> </body> <script type="text/javascript"> var ALBUM_ID = "{{album.id}}"; function _paste_unpaste_photo_clipboard(add_or_remove) { var photo_ids = Array.from(photo_clipboard).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; } 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) { editor.open(); edit_element_map["title"].focus(); } function on_save(editor, edit_element_map, display_element_map) { function callback() { var title_display = display_element_map["title"]; var description_display = display_element_map["description"]; editor.hide_spinner(); editor.save(); if (title_display.innerText == title_display.dataset.editorEmptyText) { document.title = "Album " + title_display.dataset.editorEmptyText; } else { document.title = "Album " + title_display.innerText; } if (description_display.innerText == "") { description_display.classList.add("hidden"); } } var title_editor = edit_element_map["title"]; title_editor.value = title_editor.value.trim(); var description_editor = edit_element_map["description"]; var url = "/album/{{album.id}}/edit"; var title = edit_element_map["title"].value.trim(); var description = edit_element_map["description"].value; var data = new FormData(); data.append("title", title_editor.value); data.append("description", description_editor.value); editor.show_spinner(); post(url, data, callback); } function on_cancel(editor, edit_element_map, display_element_map) { editor.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 editor = new Editor([title_text, description_text], on_open, on_save, on_cancel); </script> </html>