2016-09-18 08:33:46 +00:00
|
|
|
<!DOCTYPE html5>
|
|
|
|
|
<html>
|
2018-09-23 22:13:31 +00:00
|
|
|
|
|
|
|
|
{% if album is not defined %} {## Album listing ###################################################}
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
{% import "header.html" as header %}
|
|
|
|
|
<title>Albums</title>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
|
|
|
<script src="/static/js/common.js"></script>
|
|
|
|
|
<script src="/static/js/api.js"></script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
#album_list
|
|
|
|
|
{
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
{{header.make_header(session=session)}}
|
|
|
|
|
<div id="content_body">
|
|
|
|
|
<div id="album_list">
|
|
|
|
|
<h2>Albums</h2>
|
|
|
|
|
<ul>
|
|
|
|
|
{% for album in albums %}
|
|
|
|
|
<li><a href="/album/{{album.id}}">{{album.display_name}}</a></li>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
<li>
|
|
|
|
|
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create album</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="create_child_form(event);">Create</button>
|
|
|
|
|
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script id="album_listing_script" type="text/javascript">
|
|
|
|
|
ALBUM_ID = undefined;
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
{% else %} {## Individual album ###################################################################}
|
|
|
|
|
|
2016-09-18 08:33:46 +00:00
|
|
|
<head>
|
2016-11-07 02:00:30 +00:00
|
|
|
{% import "photo_card.html" as photo_card %}
|
2016-09-18 08:33:46 +00:00
|
|
|
{% import "header.html" as header %}
|
2017-12-16 11:47:54 +00:00
|
|
|
{% import "clipboard_tray.html" as clipboard_tray %}
|
2018-04-28 03:04:01 +00:00
|
|
|
<title>{{album.display_name}} | Albums</title>
|
2016-09-18 08:33:46 +00:00
|
|
|
<meta charset="UTF-8">
|
2017-07-21 06:10:48 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
2018-02-24 20:51:36 +00:00
|
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
2018-02-24 09:06:27 +00:00
|
|
|
<link rel="stylesheet" href="/static/css/clipboard_tray.css">
|
2018-02-24 08:58:43 +00:00
|
|
|
<link rel="stylesheet" href="/static/css/photo_card.css">
|
2018-02-24 20:51:36 +00:00
|
|
|
<script src="/static/js/common.js"></script>
|
2018-09-23 22:13:31 +00:00
|
|
|
<script src="/static/js/api.js"></script>
|
2018-02-24 08:46:55 +00:00
|
|
|
<script src="/static/js/editor.js"></script>
|
2018-07-14 21:19:13 +00:00
|
|
|
<script src="/static/js/hotkeys.js"></script>
|
2018-02-24 08:47:44 +00:00
|
|
|
<script src="/static/js/photoclipboard.js"></script>
|
2016-11-27 09:06:11 +00:00
|
|
|
|
2016-09-18 08:33:46 +00:00
|
|
|
<style>
|
2016-12-14 21:26:42 +00:00
|
|
|
p
|
|
|
|
|
{
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
}
|
2018-08-18 05:05:16 +00:00
|
|
|
#album_metadata
|
2017-04-23 04:38:23 +00:00
|
|
|
{
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
}
|
2017-05-13 22:26:34 +00:00
|
|
|
#description_text
|
2017-04-23 04:38:23 +00:00
|
|
|
{
|
2017-07-17 00:28:06 +00:00
|
|
|
font-family: initial;
|
2017-05-13 22:26:34 +00:00
|
|
|
padding: 8px;
|
2018-09-22 23:01:34 +00:00
|
|
|
background-color: var(--color_site_transparency);
|
2017-04-23 04:38:23 +00:00
|
|
|
}
|
2018-09-23 22:13:31 +00:00
|
|
|
|
|
|
|
|
ul
|
|
|
|
|
{
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.remove_child_button
|
|
|
|
|
{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.remove_child_button:hover,
|
|
|
|
|
li:hover .remove_child_button
|
|
|
|
|
{
|
|
|
|
|
display: initial;
|
|
|
|
|
}
|
2016-09-18 08:33:46 +00:00
|
|
|
</style>
|
2016-11-27 09:06:11 +00:00
|
|
|
</head>
|
|
|
|
|
|
2016-09-18 08:33:46 +00:00
|
|
|
|
|
|
|
|
<body>
|
2016-12-18 13:12:14 +00:00
|
|
|
{{header.make_header(session=session)}}
|
2016-09-18 08:33:46 +00:00
|
|
|
<div id="content_body">
|
2018-08-18 05:05:16 +00:00
|
|
|
<div id="album_metadata">
|
2018-09-23 22:13:31 +00:00
|
|
|
<h2><span
|
2018-07-28 22:17:18 +00:00
|
|
|
id="title_text"
|
|
|
|
|
data-editor-id="title"
|
|
|
|
|
data-editor-empty-text="{{album.id}}"
|
|
|
|
|
data-editor-placeholder="title"
|
|
|
|
|
>
|
|
|
|
|
{{-album.display_name-}}
|
2018-09-23 22:13:31 +00:00
|
|
|
</span></h2>
|
|
|
|
|
|
|
|
|
|
<pre
|
|
|
|
|
id="description_text"
|
|
|
|
|
data-editor-id="description"
|
|
|
|
|
data-editor-placeholder="description"
|
|
|
|
|
{% if not album.description %}class="hidden"{% endif %}
|
|
|
|
|
>
|
|
|
|
|
{{-album.description-}}
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="red_button button_with_confirm"
|
|
|
|
|
data-onclick="api.albums.delete(ALBUM_ID, api.albums.callback_go_to_albums)"
|
|
|
|
|
data-prompt="Delete Album?"
|
|
|
|
|
data-confirm-class="red_button"
|
|
|
|
|
data-cancel-class="gray_button"
|
|
|
|
|
>
|
|
|
|
|
Delete
|
|
|
|
|
</button>
|
2018-08-18 05:05:16 +00:00
|
|
|
</div>
|
2017-04-23 04:38:23 +00:00
|
|
|
|
2018-09-23 22:13:31 +00:00
|
|
|
<!-- Parent & Child tree -->
|
2016-09-18 08:33:46 +00:00
|
|
|
<ul>
|
2017-11-28 00:00:52 +00:00
|
|
|
{% set viewparam = "?view=list" if view == "list" else "" %}
|
2018-07-20 05:42:21 +00:00
|
|
|
{% set parents = album.get_parents() %}
|
|
|
|
|
{% if parents %}
|
|
|
|
|
{% for parent in parents %}
|
2017-11-28 00:00:52 +00:00
|
|
|
<li><a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></li>
|
2018-07-20 05:42:21 +00:00
|
|
|
{% endfor %}
|
2017-11-28 00:00:52 +00:00
|
|
|
{% else %}
|
|
|
|
|
<li><a href="/albums">Albums</a></li>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
<ul>
|
2018-03-11 03:54:22 +00:00
|
|
|
<li>{{album.display_name}}</li>
|
2017-11-28 00:00:52 +00:00
|
|
|
<ul>
|
2018-02-17 07:00:43 +00:00
|
|
|
{% set sub_albums = album.get_children() %}
|
2017-11-28 00:00:52 +00:00
|
|
|
{% for sub_album in sub_albums|sort(attribute='title') %}
|
2018-09-23 22:13:31 +00:00
|
|
|
<li>
|
|
|
|
|
<a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="remove_child_button button_with_confirm red_button"
|
|
|
|
|
data-onclick="api.albums.remove_child(ALBUM_ID, '{{sub_album.id}}', common.refresh)"
|
|
|
|
|
data-prompt="Remove child?"
|
|
|
|
|
data-holder-class="remove_child_button"
|
|
|
|
|
data-confirm-class="red_button"
|
|
|
|
|
data-cancel-class="gray_button"
|
|
|
|
|
>
|
|
|
|
|
Unlink
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
2017-11-28 00:00:52 +00:00
|
|
|
{% endfor %}
|
2018-03-10 01:38:40 +00:00
|
|
|
<li>
|
2018-09-23 22:13:31 +00:00
|
|
|
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create child</button>
|
2018-03-10 01:38:40 +00:00
|
|
|
<input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title">
|
2018-09-23 22:13:31 +00:00
|
|
|
<button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button>
|
|
|
|
|
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button id="add_child_prompt_button" class="green_button" onclick="open_add_child(event);">Add child</button>
|
|
|
|
|
<input type="text" id="add_child_id_entry" class="hidden" placeholder="Album ID">
|
|
|
|
|
<button id="add_child_submit_button" class="green_button hidden" onclick="add_child_form(event);">Add</button>
|
|
|
|
|
<button id="add_child_cancel_button" class="gray_button hidden" onclick="cancel_add_child(event);">Cancel</button>
|
2018-03-10 01:38:40 +00:00
|
|
|
</li>
|
2017-11-28 00:00:52 +00:00
|
|
|
</ul>
|
|
|
|
|
</ul>
|
2016-09-18 08:33:46 +00:00
|
|
|
</ul>
|
2017-04-23 04:38:23 +00:00
|
|
|
|
2018-09-23 22:13:31 +00:00
|
|
|
<!-- Photo list -->
|
2018-02-17 07:03:54 +00:00
|
|
|
{% set photos = album.get_photos() %}
|
2016-09-18 08:33:46 +00:00
|
|
|
{% if photos %}
|
2018-04-07 04:50:13 +00:00
|
|
|
<h3>{{photos|length}} Photos</h3>
|
2017-03-31 01:56:27 +00:00
|
|
|
{% if view != "list" %}
|
|
|
|
|
<a href="?view=list">List view</a>
|
|
|
|
|
{% else %}
|
|
|
|
|
<a href="?view=grid">Grid view</a>
|
|
|
|
|
{% endif %}
|
|
|
|
|
<ul>
|
2016-09-18 08:33:46 +00:00
|
|
|
{% for photo in photos %}
|
2017-03-31 01:56:27 +00:00
|
|
|
{{photo_card.create_photo_card(photo, view=view)}}
|
2016-09-18 08:33:46 +00:00
|
|
|
{% endfor %}
|
2017-03-31 01:56:27 +00:00
|
|
|
</ul>
|
2016-09-18 08:33:46 +00:00
|
|
|
{% endif %}
|
2017-11-12 23:21:53 +00:00
|
|
|
|
2018-09-23 22:13:31 +00:00
|
|
|
<!-- Download links -->
|
2018-08-18 05:05:16 +00:00
|
|
|
{% set has_local_photos = photos|length > 0 %}
|
|
|
|
|
{% set has_child_photos = album.has_any_subalbum_photo() %}
|
|
|
|
|
{% if has_local_photos or has_child_photos %}
|
|
|
|
|
<p>
|
2018-09-23 22:13:31 +00:00
|
|
|
<span>Download:</span>
|
2017-11-12 23:21:53 +00:00
|
|
|
{% if has_local_photos %}
|
2018-09-23 22:13:31 +00:00
|
|
|
<a href="/album/{{album.id}}.zip?recursive=no">These files ({{album.sum_bytes(recurse=False)|bytestring }})</a>
|
|
|
|
|
{% if has_child_photos %}<span>—</span>{% endif %}
|
2017-05-13 22:25:31 +00:00
|
|
|
{% endif %}
|
2017-11-12 23:21:53 +00:00
|
|
|
{% if has_child_photos %}
|
2018-09-23 22:13:31 +00:00
|
|
|
<a href="/album/{{album.id}}.zip?recursive=yes">Include children ({{album.sum_bytes(recurse=True)|bytestring }})</a>
|
2017-05-13 22:25:31 +00:00
|
|
|
{% endif %}
|
2018-08-18 05:05:16 +00:00
|
|
|
</p>
|
|
|
|
|
{% endif %}
|
2018-09-23 22:13:31 +00:00
|
|
|
|
|
|
|
|
<!-- Clipboard -->
|
2017-12-16 11:47:54 +00:00
|
|
|
{{clipboard_tray.clipboard_tray()}}
|
2018-09-23 22:13:31 +00:00
|
|
|
<div class="my_clipboard_tray_toolbox">
|
|
|
|
|
<button class="green_button" onclick="paste_photo_clipboard">Add to this album</button>
|
|
|
|
|
<button class="red_button" onclick="unpaste_photo_clipboard">Remove from this album</button>
|
|
|
|
|
</div>
|
2016-09-18 08:33:46 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
2018-09-23 22:13:31 +00:00
|
|
|
<script id="album_individual_script" type="text/javascript">
|
2018-03-10 01:38:40 +00:00
|
|
|
var ALBUM_ID = "{{album.id}}";
|
2017-04-23 04:38:23 +00:00
|
|
|
|
2018-09-23 22:13:31 +00:00
|
|
|
function open_add_child(event)
|
|
|
|
|
{
|
|
|
|
|
document.getElementById("add_child_prompt_button").classList.add("hidden");
|
|
|
|
|
document.getElementById("add_child_id_entry").classList.remove("hidden");
|
|
|
|
|
document.getElementById("add_child_id_entry").focus();
|
|
|
|
|
document.getElementById("add_child_submit_button").classList.remove("hidden");
|
|
|
|
|
document.getElementById("add_child_cancel_button").classList.remove("hidden");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function cancel_add_child(event)
|
2017-12-16 22:19:37 +00:00
|
|
|
{
|
2018-09-23 22:13:31 +00:00
|
|
|
document.getElementById("add_child_prompt_button").classList.remove("hidden");
|
|
|
|
|
document.getElementById("add_child_id_entry").value = "";
|
|
|
|
|
document.getElementById("add_child_id_entry").classList.add("hidden");
|
|
|
|
|
document.getElementById("add_child_submit_button").classList.add("hidden");
|
|
|
|
|
document.getElementById("add_child_cancel_button").classList.add("hidden");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function add_child_form(event)
|
|
|
|
|
{
|
|
|
|
|
var child_id = document.getElementById("add_child_id_entry").value;
|
|
|
|
|
if (! child_id)
|
2018-02-18 02:47:17 +00:00
|
|
|
{
|
2018-09-23 22:13:31 +00:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
api.albums.add_child(ALBUM_ID, child_id, common.refresh);
|
2017-12-16 22:19:37 +00:00
|
|
|
}
|
2018-09-23 22:13:31 +00:00
|
|
|
|
2017-12-16 22:19:37 +00:00
|
|
|
function paste_photo_clipboard()
|
|
|
|
|
{
|
2018-09-23 22:13:31 +00:00
|
|
|
var photo_ids = Array.from(photo_clipboard.clipboard);
|
|
|
|
|
api.albums.add_photos(ALBUM_ID, photo_ids, common.refresh);
|
2017-12-16 22:19:37 +00:00
|
|
|
}
|
|
|
|
|
function unpaste_photo_clipboard()
|
|
|
|
|
{
|
2018-09-23 22:13:31 +00:00
|
|
|
var photo_ids = Array.from(photo_clipboard.clipboard);
|
|
|
|
|
api.albums.remove_photos(ALBUM_ID, photo_ids, common.refresh);
|
2017-12-16 22:19:37 +00:00
|
|
|
}
|
2018-07-29 08:25:53 +00:00
|
|
|
|
2018-07-28 22:17:18 +00:00
|
|
|
function on_open(ed, edit_element_map, display_element_map)
|
2017-05-06 04:17:13 +00:00
|
|
|
{
|
2018-07-28 22:17:18 +00:00
|
|
|
ed.open();
|
2017-07-14 06:32:14 +00:00
|
|
|
edit_element_map["title"].focus();
|
2017-04-23 04:38:23 +00:00
|
|
|
}
|
|
|
|
|
|
2018-07-28 22:17:18 +00:00
|
|
|
function on_save(ed, edit_element_map, display_element_map)
|
2017-04-23 04:38:23 +00:00
|
|
|
{
|
2017-06-15 04:45:20 +00:00
|
|
|
function callback()
|
2017-05-06 04:17:13 +00:00
|
|
|
{
|
2018-03-10 21:24:23 +00:00
|
|
|
var title_display = display_element_map["title"];
|
|
|
|
|
var description_display = display_element_map["description"];
|
|
|
|
|
|
2018-07-28 22:17:18 +00:00
|
|
|
ed.hide_spinner();
|
|
|
|
|
ed.save();
|
2018-04-28 03:04:01 +00:00
|
|
|
document.title = title_display.innerText + " | Albums";
|
2018-03-10 21:24:23 +00:00
|
|
|
if (description_display.innerText == "")
|
2017-06-15 04:45:20 +00:00
|
|
|
{
|
2018-03-10 21:24:23 +00:00
|
|
|
description_display.classList.add("hidden");
|
2017-04-23 04:38:23 +00:00
|
|
|
}
|
|
|
|
|
}
|
2017-06-15 04:45:20 +00:00
|
|
|
|
2018-09-23 22:13:31 +00:00
|
|
|
edit_element_map["title"].value = edit_element_map["title"].value.trim();
|
|
|
|
|
var title = edit_element_map["title"].value;
|
2018-03-10 21:24:23 +00:00
|
|
|
var description = edit_element_map["description"].value;
|
|
|
|
|
|
2018-07-28 22:17:18 +00:00
|
|
|
ed.show_spinner();
|
2018-09-23 22:13:31 +00:00
|
|
|
api.albums.edit(ALBUM_ID, title, description, callback);
|
2017-04-23 04:38:23 +00:00
|
|
|
}
|
2017-06-15 04:45:20 +00:00
|
|
|
|
2018-07-28 22:17:18 +00:00
|
|
|
function on_cancel(ed, edit_element_map, display_element_map)
|
2017-06-15 04:56:47 +00:00
|
|
|
{
|
2018-07-28 22:17:18 +00:00
|
|
|
ed.cancel();
|
2017-07-14 06:32:14 +00:00
|
|
|
if (display_element_map["description"].innerText == "")
|
2017-06-15 04:56:47 +00:00
|
|
|
{
|
2017-07-14 06:32:14 +00:00
|
|
|
display_element_map["description"].classList.add("hidden");
|
2017-06-15 04:56:47 +00:00
|
|
|
}
|
|
|
|
|
}
|
2017-06-15 04:45:20 +00:00
|
|
|
|
2017-07-14 06:32:14 +00:00
|
|
|
var title_text = document.getElementById("title_text");
|
|
|
|
|
var description_text = document.getElementById("description_text");
|
2018-07-28 22:17:18 +00:00
|
|
|
var ed = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel);
|
2018-09-23 22:13:31 +00:00
|
|
|
|
|
|
|
|
function on_pageload()
|
|
|
|
|
{
|
|
|
|
|
common.bind_box_to_button(
|
|
|
|
|
document.getElementById("add_child_id_entry"),
|
|
|
|
|
document.getElementById("add_child_submit_button")
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
document.addEventListener("DOMContentLoaded", on_pageload);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
{% endif %} {## Shared ############################################################################}
|
|
|
|
|
|
|
|
|
|
<script id="album_shared_script" type="text/javascript">
|
|
|
|
|
|
|
|
|
|
function open_create_child(event)
|
|
|
|
|
{
|
|
|
|
|
document.getElementById("create_child_prompt_button").classList.add("hidden");
|
|
|
|
|
document.getElementById("create_child_title_entry").classList.remove("hidden");
|
|
|
|
|
document.getElementById("create_child_title_entry").focus();
|
|
|
|
|
document.getElementById("create_child_submit_button").classList.remove("hidden");
|
|
|
|
|
document.getElementById("create_child_cancel_button").classList.remove("hidden");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function cancel_create_child(event)
|
|
|
|
|
{
|
|
|
|
|
document.getElementById("create_child_prompt_button").classList.remove("hidden");
|
|
|
|
|
document.getElementById("create_child_title_entry").value = "";
|
|
|
|
|
document.getElementById("create_child_title_entry").classList.add("hidden");
|
|
|
|
|
document.getElementById("create_child_submit_button").classList.add("hidden");
|
|
|
|
|
document.getElementById("create_child_cancel_button").classList.add("hidden");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function create_child_form(event)
|
|
|
|
|
{
|
|
|
|
|
var title = document.getElementById("create_child_title_entry").value;
|
|
|
|
|
if (! title)
|
|
|
|
|
{
|
|
|
|
|
title = undefined;
|
|
|
|
|
}
|
|
|
|
|
var parent_id = ALBUM_ID;
|
|
|
|
|
api.albums.create(title, parent_id, api.albums.callback_follow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function on_pageload()
|
|
|
|
|
{
|
|
|
|
|
common.bind_box_to_button(
|
|
|
|
|
document.getElementById("create_child_title_entry"),
|
|
|
|
|
document.getElementById("create_child_submit_button")
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
document.addEventListener("DOMContentLoaded", on_pageload);
|
2016-11-27 09:06:11 +00:00
|
|
|
</script>
|
2017-04-23 04:38:23 +00:00
|
|
|
</html>
|
