Ethan Dalool
4c65ccaf68
I found that the strict heirarchy was not satisfying the situation where one tag is the intersection of two others, but we can only pick one as the parent For example, does red_jacket belong under clothes.red_clothes or clothes.jackets? A search for "red_clothes AND jackets" might give us someone wearing red pants and a black jacket, so this definitely needs to be a separate tag, but picking only one parent for it is not sufficient. Now, a search for red_clothes and a search for jackets will both find our red_jacket photo. The change also applies to Albums because why not, and I'm sure a similar case can be made. Unfortunately this means tags no longer have one true qualname. The concept of qualnames has not been completely phased out but it's in progress. This commit is very big because I was not sure for a long time whether to go through with it, and so much stuff had to change that I don't want to go back and figure out what could be grouped together.
220 lines
7 KiB
HTML
220 lines
7 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 data-editor-id="title" data-editor-empty-text="{{album.id}}" data-editor-placeholder="title" id="title_text">{{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="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>
|
|
</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).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 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(editor, edit_element_map, display_element_map)
|
|
{
|
|
editor.open();
|
|
edit_element_map["title"].focus();
|
|
}
|
|
|
|
function on_save(editor, edit_element_map, display_element_map)
|
|
{
|
|
function callback()
|
|
{
|
|
var title_display = display_element_map["title"];
|
|
var description_display = display_element_map["description"];
|
|
|
|
editor.hide_spinner();
|
|
editor.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);
|
|
|
|
editor.show_spinner();
|
|
post(url, data, callback);
|
|
}
|
|
|
|
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);
|
|
</script>
|
|
</html>
|