etiquette/frontends/etiquette_flask/templates/album.html

225 lines
7.1 KiB
HTML
Raw Normal View History

2016-09-18 08:33:46 +00:00
<!DOCTYPE html5>
<html>
<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 %}
{% import "clipboard_tray.html" as clipboard_tray %}
<title>Album {{album.display_name}}</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"/>
<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/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;
}
2016-09-18 08:33:46 +00:00
#content_body
{
/* overriding common.css here */
display: block;
}
2017-04-23 04:38:23 +00:00
#title_editor,
#description_editor
{
width: 100%;
max-width: 800px;
}
#description_text
2017-04-23 04:38:23 +00:00
{
font-family: initial;
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
2017-04-23 04:38:23 +00:00
}
#description_editor textarea
2017-04-23 04:38:23 +00:00
{
width: 100%;
2017-04-23 04:38:23 +00:00
}
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>
{{header.make_header(session=session)}}
2016-09-18 08:33:46 +00:00
<div id="content_body">
<h2>
<span data-editor-id="title" data-editor-empty-text="{{album.id}}" data-editor-placeholder="title" id="title_text">{{album.display_name}}</span>
2017-04-23 04:38:23 +00:00
</h2>
<pre
id="description_text"
data-editor-id="description"
data-editor-placeholder="description"
{% if not album.description %}class="hidden"{% endif %}
>
{{-album.description-}}
</pre>
2017-04-23 04:38:23 +00:00
2016-09-18 08:33:46 +00:00
<ul>
{% set viewparam = "?view=list" if view == "list" else "" %}
{% set parent = album.get_parent() %}
{% if parent %}
<li><a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></li>
{% 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="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="submit_create_child(event);">Create</button>
<button id="create_child_cancel_button" class="red_button hidden" onclick="cancel_create_child(event);">Cancel</button>
</li>
</ul>
</ul>
2016-09-18 08:33:46 +00:00
</ul>
2017-04-23 04:38:23 +00:00
2018-02-17 07:03:54 +00:00
{% set photos = album.get_photos() %}
2016-09-18 08:33:46 +00:00
{% if photos %}
<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 %}
<p>
{% set has_local_photos = photos|length > 0 %}
{% set has_child_photos = album.sum_photos() > photos|length %}
{% 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, string=True)}})
</a>
{% endif %}
{% if has_local_photos and has_child_photos %}&mdash;{% endif %}
{% if has_child_photos %}
<a href="/album/{{album.id}}.zip?recursive=yes">
Include children ({{album.sum_bytes(recurse=True, string=True)}})
</a>
{% endif %}
{% endif %}
</p>
{{clipboard_tray.clipboard_tray()}}
2016-09-18 08:33:46 +00:00
</div>
</body>
<script type="text/javascript">
var ALBUM_ID = "{{album.id}}";
2017-04-23 04:38:23 +00:00
function _paste_unpaste_photo_clipboard(add_or_remove)
{
var photo_ids = Array.from(photo_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;
}
save_photo_clipboard();
location.reload();
};
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 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 album";
unpaste_photo_clipboard_button.onclick = unpaste_photo_clipboard;
document.getElementById("clipboard_tray_toolbox").appendChild(unpaste_photo_clipboard_button);
function on_open(editor, edit_element_map, display_element_map)
{
editor.open();
edit_element_map["title"].focus();
2017-04-23 04:38:23 +00:00
}
function on_save(editor, edit_element_map, display_element_map)
2017-04-23 04:38:23 +00:00
{
function callback()
{
var title_display = display_element_map["title"];
var description_display = display_element_map["description"];
editor.hide_spinner();
editor.save();
if (title_display.innerText == title_display.dataset.editorEmptyText)
2017-04-23 04:38:23 +00:00
{
document.title = "Album " + title_display.dataset.editorEmptyText;
2017-04-23 04:38:23 +00:00
}
else
{
document.title = "Album " + title_display.innerText;
}
if (description_display.innerText == "")
{
description_display.classList.add("hidden");
2017-04-23 04:38:23 +00:00
}
}
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);
editor.show_spinner();
post(url, data, callback);
2017-04-23 04:38:23 +00:00
}
function on_cancel(editor, edit_element_map, display_element_map)
{
editor.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 editor = new Editor([title_text, description_text], on_open, on_save, on_cancel);
2016-11-27 09:06:11 +00:00
</script>
2017-04-23 04:38:23 +00:00
</html>