<!DOCTYPE html5> <html> <head> {% import "photo_card.html" as photo_card %} {% import "header.html" as header %} <title>Album {{album.display_name}}</title> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/common.css"> <script src="/static/common.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 { 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> <p data-editor-id="description" data-editor-placeholder="description" id="description_text" {% if album.description == "" %}class="hidden"{% endif %}>{{album.description}}</p> {% set viewparam = "?view=list" if view == "list" else "" %} {% set parent = album.parent() %} {% if parent %} <h3>Parent: <a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></h3> {% else %} <h3>Parent: <a href="/albums">Albums</a></h3> {% endif %} {% set sub_albums = album.children() %} <h3>Sub-albums</h3> <ul> {% 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> {% set photos = album.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> {% if photos or sub_albums %} Download: {% if photos %} <a href="/album/{{album.id}}.zip?recursive=no"> These files ({{album.sum_bytes(recurse=False, string=True)}}) </a> {% endif %} {% if photos and sub_albums %}—{% endif %} {% if sub_albums %} <a href="/album/{{album.id}}.zip?recursive=yes"> Include children ({{album.sum_bytes(recurse=True, string=True)}}) </a> {% endif %} {% endif %} </p> </div> </body> <script type="text/javascript"> var blank_title_text = "Album {{album.id}}"; 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>