Ethan Dalool
949f7177de
Red seems too aggressive and indicates danger when not appropriate. Gray seems better for reverting to an already safe state.
227 lines
7.1 KiB
HTML
227 lines
7.1 KiB
HTML
<!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.display_name}} | 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">
|
|
<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/hotkeys.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
|
|
id="title_text"
|
|
data-editor-id="title"
|
|
data-editor-empty-text="{{album.id}}"
|
|
data-editor-placeholder="title"
|
|
>
|
|
{{-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 parents = album.get_parents() %}
|
|
{% if parents %}
|
|
{% for parent in parents %}
|
|
<li><a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></li>
|
|
{% endfor %}
|
|
{% 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="albums.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="albums.submit_create_child(event);">Create</button>
|
|
<button id="create_child_cancel_button" class="gray_button hidden" onclick="albums.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.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;
|
|
}
|
|
location.reload();
|
|
};
|
|
common.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 this 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 this album";
|
|
unpaste_photo_clipboard_button.onclick = unpaste_photo_clipboard;
|
|
document.getElementById("clipboard_tray_toolbox").appendChild(unpaste_photo_clipboard_button);
|
|
|
|
function on_open(ed, edit_element_map, display_element_map)
|
|
{
|
|
ed.open();
|
|
edit_element_map["title"].focus();
|
|
}
|
|
|
|
function on_save(ed, edit_element_map, display_element_map)
|
|
{
|
|
function callback()
|
|
{
|
|
var title_display = display_element_map["title"];
|
|
var description_display = display_element_map["description"];
|
|
|
|
ed.hide_spinner();
|
|
ed.save();
|
|
document.title = title_display.innerText + " | Albums";
|
|
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);
|
|
|
|
ed.show_spinner();
|
|
common.post(url, data, callback);
|
|
}
|
|
|
|
function on_cancel(ed, edit_element_map, display_element_map)
|
|
{
|
|
ed.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 ed = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel);
|
|
</script>
|
|
</html>
|