235 lines
6.1 KiB
HTML
235 lines
6.1 KiB
HTML
<!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 %}
|
|
{% 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 %}
|
|
<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 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>
|