etiquette/frontends/etiquette_flask/templates/album.html

168 lines
4.4 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 %}
<title>Album {{album.display_name}}</title>
2016-09-18 08:33:46 +00:00
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/common.css">
2017-04-23 04:38:23 +00:00
<script src="/static/common.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
{
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-placeholder="title" id="title_text">
{%- if album.title -%}
{{album.title}}
{%- else -%}
Album {{album.id}}
{%- endif -%}
</span>
2017-04-23 04:38:23 +00:00
</h2>
<p data-editor-id="description" data-editor-placeholder="description" id="description_text" {% if album.description == "" %}class="hidden"{% endif %}>{{album.description}}</p>
2017-04-23 04:38:23 +00:00
{% set viewparam = "?view=list" if view == "list" else "" %}
2017-04-23 04:38:23 +00:00
{% set parent = album.parent() %}
2016-09-18 08:33:46 +00:00
{% if parent %}
<h3>Parent: <a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></h3>
2016-11-06 00:58:37 +00:00
{% else %}
<h3>Parent: <a href="/albums">Albums</a></h3>
2016-09-18 08:33:46 +00:00
{% endif %}
2017-04-23 04:38:23 +00:00
{% set sub_albums = album.children() %}
2016-09-18 08:33:46 +00:00
<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>
2016-09-18 08:33:46 +00:00
{% endfor %}
<li><button class="green_button" onclick="var parent='{{album.id}}'; create_album_and_follow(parent);">Create child</button></li>
2016-09-18 08:33:46 +00:00
</ul>
2017-04-23 04:38:23 +00:00
{% set photos = album.photos() %}
2016-09-18 08:33:46 +00:00
{% if photos %}
2017-03-31 01:56:27 +00:00
<h3>Photos</h3>
{% 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>
{% 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 %}&mdash;{% 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>
2016-09-18 08:33:46 +00:00
</div>
</body>
<script type="text/javascript">
2017-04-23 04:38:23 +00:00
var title_text = document.getElementById("title_text");
var description_text = document.getElementById("description_text");
var blank_title_text = "Album {{album.id}}";
function on_open(editor, edit_element_map)
{
if (title_text.innerText == blank_title_text)
2017-04-23 04:38:23 +00:00
{
title_text.innerText = "";
2017-04-23 04:38:23 +00:00
}
editor.open();
edit_element_map['title'].focus();
2017-04-23 04:38:23 +00:00
}
function on_save(editor, edit_element_map)
2017-04-23 04:38:23 +00:00
{
var title_editor = edit_element_map['title'];
var description_editor = edit_element_map['description'];
editor.show_spinner();
function callback()
{
editor.hide_spinner();
editor.save();
if (title_text.innerText == "")
2017-04-23 04:38:23 +00:00
{
document.title = blank_title_text;
2017-04-23 04:38:23 +00:00
title_text.innerText = blank_title_text;
}
else
{
document.title = "Album " + title_text.innerText;
}
if (description_text.innerText == "")
{
description_text.classList.add("hidden");
2017-04-23 04:38:23 +00:00
}
}
var url = "/album/{{album.id}}/edit";
var data = new FormData();
data.append("title", title_editor.value);
data.append("description", description_editor.value);
post(url, data, callback);
2017-04-23 04:38:23 +00:00
}
function on_cancel(editor, edit_element_map)
{
editor.cancel();
if (title_text.innerText == "")
{
title_text.innerText = blank_title_text;
}
if (description_text.innerText == "")
{
description_text.classList.add("hidden");
}
}
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>