2016-09-18 08:33:46 +00:00
<!DOCTYPE html5>
< html >
2018-09-23 22:13:31 +00:00
2018-11-13 06:15:59 +00:00
{% macro shared_css() %}
< style >
h2, h3
{
margin-top: 0;
}
2018-11-18 00:55:47 +00:00
#album_metadata h2 .editor_input
{
font-size: inherit;
font-weight: inherit;
}
2018-11-13 06:15:59 +00:00
#description_text
{
font-family: initial;
padding: 8px;
}
2019-08-26 00:56:54 +00:00
#left
{
display: grid;
grid-row-gap: 30px;
grid-auto-rows: max-content;
}
2019-08-26 00:23:33 +00:00
#right
{
grid-row-gap: 8px;
}
2018-11-18 00:57:07 +00:00
#right > *
{
2019-08-26 00:47:02 +00:00
/* Fixes button_with_confirm, spinner, etc. from width-jumping on load,
because originally the button is occupying the full width and then becomes
small when it gets put into the holder */
2018-11-18 00:57:07 +00:00
margin-right: auto;
2020-08-11 04:02:11 +00:00
/* Fixes the button_with_confirm inputs from causing the overall row to
become wider than the containing parent when expanded. */
word-break: break-all;
2018-11-18 00:57:07 +00:00
}
2019-08-26 00:36:05 +00:00
#right input
{
margin: 0;
}
2019-04-27 22:33:28 +00:00
#right .confirm_holder_stage2
{
display: flex;
flex-direction: row;
}
#right .confirm_holder_stage2 span,
#right .confirm_holder_stage2 input
{
flex: 1;
min-width: 0;
}
2018-11-13 06:15:59 +00:00
.remove_child_button
{
display: none;
}
.remove_child_button:hover,
.album_card:hover .remove_child_button
{
display: initial;
}
2018-11-18 00:57:07 +00:00
2018-11-13 06:15:59 +00:00
@media screen and (max-width: 800px)
{
#content_body
{
grid-template:
"left" 1fr
"right" 150px
2019-08-26 22:18:33 +00:00
/ 1fr !important;
2018-11-13 06:15:59 +00:00
}
2019-03-16 20:07:00 +00:00
#left
{
margin-right: unset;
}
2018-11-13 06:15:59 +00:00
#right
{
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
height: 150px;
}
}
< / style >
{% endmacro %}
2018-09-23 22:13:31 +00:00
{% if album is not defined %} {## Album listing ###################################################}
< head >
{% import "header.html" as header %}
2018-11-13 06:15:59 +00:00
{% import "album_card.html" as album_card %}
2018-09-23 22:13:31 +00:00
< 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" >
2020-09-03 18:50:16 +00:00
< link rel = "stylesheet" href = "/static/css/etiquette.css" >
2018-11-13 06:15:59 +00:00
< link rel = "stylesheet" href = "/static/css/photo_card.css" >
2019-08-14 20:43:35 +00:00
{% if theme %}< link rel = "stylesheet" href = "/static/css/theme_{{theme}}.css" > {% endif %}
2018-09-23 22:13:31 +00:00
< script src = "/static/js/common.js" > < / script >
< script src = "/static/js/api.js" > < / script >
2018-11-13 06:15:59 +00:00
{{shared_css()}}
2018-09-23 22:13:31 +00:00
< / head >
< body >
{{header.make_header(session=session)}}
2018-11-13 06:15:59 +00:00
< div id = "content_body" class = "sticky_side_right" >
< div id = "left" >
2019-08-14 20:49:08 +00:00
< div id = "album_list" class = "panel" >
2018-11-13 06:15:59 +00:00
< h2 > Albums< / h2 >
2018-09-23 22:13:31 +00:00
{% for album in albums %}
2020-01-15 07:04:22 +00:00
{{album_card.create_album_card(album, view=view, draggable=true)}}
2018-09-23 22:13:31 +00:00
{% endfor %}
2018-11-13 06:15:59 +00:00
< / div >
< / div >
< div id = "right" >
{% if view != "list" %}
< a href = "?view=list" > List view< / a >
{% else %}
< a href = "?view=grid" > Grid view< / a >
{% endif %}
2019-04-27 22:33:28 +00:00
< button
class="green_button button_with_confirm"
data-is-input="1"
data-prompt="Album title"
data-cancel-class="gray_button"
2020-09-04 17:37:04 +00:00
data-onclick="return create_child(event.target.input_source.value);"
2019-04-27 22:33:28 +00:00
>
2019-06-16 00:03:07 +00:00
Create album
2019-04-27 22:33:28 +00:00
< / button >
2018-09-23 22:13:31 +00:00
< / div >
< / div >
< / body >
< script id = "album_listing_script" type = "text/javascript" >
2020-09-15 01:33:53 +00:00
const ALBUM_ID = undefined;
2018-09-23 22:13:31 +00:00
< / script >
{% else %} {## Individual album ###################################################################}
2016-09-18 08:33:46 +00:00
< head >
{% import "header.html" as header %}
2018-11-13 06:15:59 +00:00
{% import "album_card.html" as album_card %}
{% import "photo_card.html" as photo_card %}
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" >
2020-09-03 18:50:16 +00:00
< link rel = "stylesheet" href = "/static/css/etiquette.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" >
2019-08-14 20:43:35 +00:00
{% if theme %}< link rel = "stylesheet" href = "/static/css/theme_{{theme}}.css" > {% endif %}
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 >
2019-04-27 22:42:02 +00:00
< script src = "/static/js/spinner.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-09-23 22:17:31 +00:00
< script src = "/static/js/photo_clipboard.js" > < / script >
2016-11-27 09:06:11 +00:00
2018-11-13 06:15:59 +00:00
{{shared_css()}}
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)}}
2018-11-13 06:15:59 +00:00
< div id = "content_body" class = "sticky_side_right" >
2018-11-18 01:52:40 +00:00
< div id = "right" >
{% if view != "list" %}
< a href = "?view=list" > List view< / a >
{% else %}
< a href = "?view=grid" > Grid view< / a >
{% endif %}
< button
class="red_button button_with_confirm"
2020-09-18 01:14:07 +00:00
data-onclick="return delete_album_form();"
2018-11-18 01:52:40 +00:00
data-prompt="Delete Album?"
data-cancel-class="gray_button"
>
Delete
< / button >
2019-04-27 22:33:28 +00:00
< button
class="green_button button_with_confirm"
data-is-input="1"
data-prompt="Album title"
data-cancel-class="gray_button"
2020-09-04 17:37:04 +00:00
data-onclick="return create_child(event.target.input_source.value);"
2019-04-27 22:33:28 +00:00
>
Create child
< / button >
< button
class="green_button button_with_confirm"
data-is-input="1"
data-prompt="Child ID"
data-cancel-class="gray_button"
2020-09-04 17:37:04 +00:00
data-onclick="return add_child(event.target.input_source.value);"
2019-04-27 22:33:28 +00:00
>
Add child
< / button >
2019-06-15 23:04:33 +00:00
2020-09-15 03:26:46 +00:00
{% set associated_directories = album.get_associated_directories() %}
2019-06-15 23:04:33 +00:00
< button
class="green_button button_with_spinner"
2020-09-18 01:14:07 +00:00
onclick="return refresh_associated_directories_form();"
2019-06-15 23:04:33 +00:00
data-spinner-delay="500"
2020-09-15 03:26:46 +00:00
{% if associated_directories %}
title="Pull from {{associated_directories|length}} directories"
{% else %}
2019-06-16 00:03:23 +00:00
title="No associated directories"
disabled
{% endif %}
2019-06-15 23:04:33 +00:00
>
Refresh directories
< / button >
2018-11-18 01:52:40 +00:00
< / div >
2018-11-13 06:15:59 +00:00
< div id = "left" >
2019-08-14 20:49:08 +00:00
< div id = "hierarchy_self" class = "panel" >
2018-11-13 06:15:59 +00:00
< div id = "album_metadata" >
< 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 >
< / div >
2018-11-18 00:50:41 +00:00
< button class = "green_button editor_toolbox_placeholder" > Edit< / button >
2018-11-13 06:15:59 +00:00
< / div >
2019-08-14 20:49:08 +00:00
< div id = "hierarchy_parents" class = "panel" >
2018-11-13 06:15:59 +00:00
{% set parents = album.get_parents() %}
{% if parents %}
2018-12-24 00:00:28 +00:00
< h3 > {{parents|length}} Parents< / h3 >
{% for parent in parents %}
{{album_card.create_album_card(parent, view=view)}}
{% endfor %}
2018-11-13 06:15:59 +00:00
{% else %}
2018-12-24 00:00:28 +00:00
< h3 > 1 Parent< / h3 >
2019-12-21 09:47:33 +00:00
{{album_card.create_album_card("root", view=view)}}
2018-11-13 06:15:59 +00:00
{% endif %}
< / div >
{% set sub_albums = album.get_children() %}
{% if sub_albums %}
2019-08-14 20:49:08 +00:00
< div id = "hierarchy_children" class = "panel" >
2018-12-24 00:00:28 +00:00
< h3 > {{sub_albums|length}} Children< / h3 >
2018-11-13 06:15:59 +00:00
{% for sub_album in sub_albums|sort(attribute='title') %}
2020-01-15 07:04:22 +00:00
{{album_card.create_album_card(sub_album, view=view, unlink_parent=album, draggable=true)}}
2018-11-13 06:15:59 +00:00
{% endfor %}
< / div >
{% endif %}
{% set photos = album.get_photos() %}
{% if photos %}
2019-08-14 20:49:08 +00:00
< div id = "hierarchy_photos" class = "panel" >
2018-11-18 01:36:47 +00:00
< h3 > {{photos|length}} Photos< / h3 >
< div id = "photo_list" >
{% for photo in photos %}
{{photo_card.create_photo_card(photo, view=view)}}
{% endfor %}
< / div >
2018-11-13 06:15:59 +00:00
< / div >
{% endif %}
{% set has_local_photos = photos|length > 0 %}
{% set has_child_photos = album.has_any_subalbum_photo() %}
{% if has_local_photos or has_child_photos %}
2019-08-14 20:49:08 +00:00
< div id = "download_links" class = "panel" >
2018-11-13 06:15:59 +00:00
< h3 > Download< / h3 >
{% if has_local_photos %}
< p > < a id = "download_link_single" href = "/album/{{album.id}}.zip?recursive=no" > These files – {{album.sum_bytes(recurse=False)|bytestring}}< / a > < / p >
{% endif %}
{% if has_child_photos %}
< p > < a id = "download_link_recursive" href = "/album/{{album.id}}.zip?recursive=yes" > Include children – {{album.sum_bytes(recurse=True)|bytestring}}< / a > < / p >
{% endif %}
< / div >
{% endif %}
< / div >
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" >
2020-09-04 17:37:04 +00:00
< button class = "green_button" onclick = "return paste_photo_clipboard();" > Add to this album< / button >
< button class = "red_button" onclick = "return unpaste_photo_clipboard();" > Remove from this album< / button >
2018-09-23 22:13:31 +00:00
< / 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" >
2020-09-15 01:33:53 +00:00
const ALBUM_ID = "{{album.id}}";
2017-04-23 04:38:23 +00:00
2019-04-27 22:33:28 +00:00
function add_child(child_id)
2018-09-23 22:13:31 +00:00
{
2019-04-27 22:33:28 +00:00
if (! child_id.trim())
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
2020-09-18 01:14:07 +00:00
function delete_album_form()
{
api.albums.delete(ALBUM_ID, api.albums.callback_go_to_albums);
}
function refresh_associated_directories_form()
{
api.albums.refresh_directories(ALBUM_ID, common.refresh);
}
2017-12-16 22:19:37 +00:00
function paste_photo_clipboard()
{
2020-09-15 01:33:53 +00:00
const photo_ids = Array.from(photo_clipboard.clipboard);
2018-09-23 22:13:31 +00:00
api.albums.add_photos(ALBUM_ID, photo_ids, common.refresh);
2017-12-16 22:19:37 +00:00
}
function unpaste_photo_clipboard()
{
2020-09-15 01:33:53 +00:00
const photo_ids = Array.from(photo_clipboard.clipboard);
2018-09-23 22:13:31 +00:00
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
{
2019-01-13 22:44:21 +00:00
function callback(response)
2017-05-06 04:17:13 +00:00
{
2020-06-29 00:54:16 +00:00
if (response.meta.status != 200)
2019-01-13 22:44:21 +00:00
{
2020-06-29 00:54:16 +00:00
ed.show_error("Status: " + response.meta.status);
2019-01-13 22:44:21 +00:00
return;
}
ed.save();
2020-09-15 01:33:53 +00:00
const title_display = display_element_map["title"];
const description_display = display_element_map["description"];
2018-03-10 21:24:23 +00:00
2018-04-28 03:04:01 +00:00
document.title = title_display.innerText + " | Albums";
2019-01-13 22:44:21 +00:00
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();
2020-09-15 01:33:53 +00:00
const title = edit_element_map["title"].value;
const description = edit_element_map["description"].value;
2018-03-10 21:24:23 +00:00
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
2020-09-15 01:33:53 +00:00
const title_text = document.getElementById("title_text");
const description_text = document.getElementById("description_text");
const ed = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel);
2018-09-23 22:13:31 +00:00
< / script >
{% endif %} {## Shared ############################################################################}
< script id = "album_shared_script" type = "text/javascript" >
2019-04-27 22:33:28 +00:00
function create_child(title)
2018-09-23 22:13:31 +00:00
{
if (! title)
{
title = undefined;
}
2020-09-15 01:33:53 +00:00
const parent_id = ALBUM_ID;
2018-09-23 22:13:31 +00:00
api.albums.create(title, parent_id, api.albums.callback_follow);
}
2020-01-15 07:04:22 +00:00
2020-09-03 22:39:34 +00:00
function get_album_card_from_child(element)
{
/*
Given an element which is known to be a child of an album card, navigate up
the parent tree until we find that album card.
This is used to make drag-and-drop work even when you start your drag by
clicking on the album's thumbnail, title, etc.
*/
while (! element.classList.contains("album_card"))
{
element = element.parentElement;
}
return element;
}
2020-01-15 07:04:22 +00:00
function on_album_drag_start(event)
{
2020-09-15 01:33:53 +00:00
const album_card = get_album_card_from_child(event.target);
2020-09-03 22:39:34 +00:00
event.dataTransfer.setData("text/plain", album_card.id);
2020-01-15 07:04:22 +00:00
}
function on_album_drag_end(event)
{
}
function on_album_drag_over(event)
{
event.preventDefault();
}
function on_album_drag_drop(event)
{
2020-09-15 01:33:53 +00:00
const child = document.getElementById(event.dataTransfer.getData("text"));
const child_id = child.dataset.id;
const parent = event.currentTarget;
const parent_id = parent.dataset.id;
2020-01-15 07:04:22 +00:00
event.dataTransfer.clearData();
if (child_id == parent_id)
{
return;
}
2020-09-15 01:33:53 +00:00
const child_title = child.querySelector('.album_card_title').textContent.trim();
const parent_title = parent.querySelector('.album_card_title').textContent.trim();
2020-01-15 07:04:22 +00:00
if (confirm(`Move\n${child_title}\ninto\n${parent_title}?`))
{
if (ALBUM_ID)
{
api.albums.add_child(parent_id, child_id, null);
api.albums.remove_child(ALBUM_ID, child_id, common.refresh);
}
else
{
api.albums.add_child(parent_id, child_id, common.refresh);
}
}
}
2016-11-27 09:06:11 +00:00
< / script >
2017-04-23 04:38:23 +00:00
< / html >
