<!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_editor textarea { width: 100%; height: 100%; } #description_editor { height: 100px; } .hidden { display: none; } </style> </head> <body> {{header.make_header(session=session)}} <div id="content_body"> <h2> {% if album.title %} <span id="title_text">{{album.title}}</span> {% else %} <span id="title_text">Album {{album.id}}</span> {% endif %} <input id="title_editor" class="hidden" type="text" value="{{album.title}}" placeholder="title"> <button id="edit_button" class="green_button" onclick="start_editing()">edit</button> </h2> <p id="description_text">{{album.description}}</p> <div id="description_editor" class="hidden"> <textarea id="description_editor_box" placeholder="description">{{album.description}}</textarea> <span> <button id="save_button" class="green_button" onclick="finish_editing(true)">Save</button> <button id="cancel_button" class="red_button" onclick="finish_editing(false)">Cancel</button> </span> <span id="edit_submitting_spinner">Submitting...</span> </div> {% 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() %} {% if sub_albums %} <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 %} </ul> {% endif %} {% set photos = album.photos() %} {% if photos or sub_albums %} <span> Download: {% if photos %} <a href="/album/{{album.id}}.zip?recursive=no"> These files ({{album.sum_bytes(recurse=False, string=True)}}) </a> {% endif %} {% if sub_albums %} <a href="/album/{{album.id}}.zip?recursive=yes"> Include children ({{album.sum_bytes(recurse=True, string=True)}}) </a> {% endif %} </span> {% endif %} {% 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 %} </div> </body> <script type="text/javascript"> var edit_button = document.getElementById("edit_button"); var save_button = document.getElementById("save_button"); var cancel_button = document.getElementById("cancel_button"); var title_text = document.getElementById("title_text"); var title_editor = document.getElementById("title_editor"); var description_text = document.getElementById("description_text"); var description_editor = document.getElementById("description_editor"); var description_editor_box = document.getElementById("description_editor_box"); var edit_submitting_spinner = document.getElementById("edit_submitting_spinner"); bind_box_to_button(title_editor, save_button); var title_is_blank = {{ (album.title == '')|int }}; var blank_title_text = "Album {{album.id}}"; function submit_tag(callback) { add_photo_tag('{{album.id}}', add_tag_box.value, callback); add_tag_box.value = ""; } function show_editor() { edit_button.classList.add("hidden"); edit_submitting_spinner.classList.add("hidden"); title_text.classList.add("hidden"); title_editor.classList.remove("hidden"); description_text.classList.add("hidden"); description_editor.classList.remove("hidden"); } function show_spinner() { edit_submitting_spinner.classList.remove("hidden"); } function hide_editor() { edit_button.classList.remove("hidden"); edit_submitting_spinner.classList.add("hidden"); title_text.classList.remove("hidden"); title_editor.classList.add("hidden"); description_text.classList.remove("hidden"); description_editor.classList.add("hidden"); } function start_editing() { if (title_is_blank) { title_editor.value = ""; } else { title_editor.value = title_text.innerText; } show_editor(); title_editor.focus(); description_editor_box.value = description_text.innerText; } function finish_editing(do_save) { if (do_save === true) { var title = title_editor.value; var description = description_editor_box.value; var url = "/album/{{album.id}}/edit"; var data = new FormData(); data.append("title", title); data.append("description", description); show_spinner(); post(url, data, callback_edit); } else { hide_editor(); } } function callback_edit(response) { console.log(response); if (response["_status"] == 200) { if (response["title"] === "") { document.title = "Album {{album.id}}"; title_text.innerText = blank_title_text; title_is_blank = true; } else { document.title = "Album " + response["title"]; title_text.innerText = response["title"]; title_is_blank = false; } description_text.innerText = response["description"]; hide_editor(); } } </script> </html>