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;
2020-11-05 00:56:24 +00:00
grid-row-gap: 8px;
2019-08-26 00:56:54 +00:00
grid-auto-rows: max-content;
}
2019-08-26 00:23:33 +00:00
#right
{
2020-09-19 02:58:22 +00:00
display: grid;
2019-08-26 00:23:33 +00:00
grid-row-gap: 8px;
2020-09-19 02:58:22 +00:00
grid-auto-rows: min-content;
2019-08-26 00:23:33 +00:00
}
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;
}
< / 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)}}
2020-09-19 02:58:22 +00:00
< div id = "content_body" class = "sticky_side_right sticky_bottom_right" >
2018-11-13 06:15:59 +00:00
< 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 >
2020-11-04 00:25:04 +00:00
< div id = "right" class = "panel" >
2018-11-13 06:15:59 +00:00
{% 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 >
2020-10-04 01:37:08 +00:00
< script src = "/static/js/album_autocomplete.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)}}
2020-09-19 02:58:22 +00:00
< div id = "content_body" class = "sticky_side_right sticky_bottom_right" >
2020-11-04 00:25:04 +00:00
< div id = "right" class = "panel" >
2018-11-18 01:52:40 +00:00
{% 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"
2020-10-04 01:37:08 +00:00
data-holder-id="add_child_holder"
2019-04-27 22:33:28 +00:00
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" >
2021-01-02 03:46:06 +00:00
< h2 > < span id = "title_text" > {{-album.display_name-}}< / span > < / h2 >
2018-11-13 06:15:59 +00:00
< pre
id="description_text"
{% 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 %}
2020-11-05 01:11:48 +00:00
< div id = "hierarchy_photos" class = "photos_holder panel" >
2018-11-18 01:36:47 +00:00
< h3 > {{photos|length}} Photos< / h3 >
< div id = "photo_list" >
2020-09-20 20:16:52 +00:00
{% for photo in photos|sort(attribute='basename', case_sensitive=False) %}
2018-11-18 01:36:47 +00:00
{{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;
}
2020-11-07 05:42:28 +00:00
api.albums.add_child(ALBUM_ID, child_id, common.refresh_or_alert);
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()
{
2020-11-07 05:42:28 +00:00
api.albums.refresh_directories(ALBUM_ID, common.refresh_or_alert);
2020-09-18 01:14:07 +00:00
}
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);
2020-11-07 05:42:28 +00:00
api.albums.add_photos(ALBUM_ID, photo_ids, common.refresh_or_alert);
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);
2020-11-07 05:42:28 +00:00
api.albums.remove_photos(ALBUM_ID, photo_ids, common.refresh_or_alert);
2017-12-16 22:19:37 +00:00
}
2018-07-29 08:25:53 +00:00
2021-01-02 03:46:06 +00:00
rename_ed_on_open = undefined;
2017-04-23 04:38:23 +00:00
2021-01-02 03:46:06 +00:00
function rename_ed_on_save(ed)
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-11-07 06:50:05 +00:00
ed.hide_spinner();
if (! response.meta.json_ok)
{
alert(JSON.stringify(response));
return;
}
if ("error_type" in response.data)
2019-01-13 22:44:21 +00:00
{
2020-11-07 06:50:05 +00:00
ed.show_error(response.data.error_message);
2019-01-13 22:44:21 +00:00
return;
}
2021-01-02 03:46:06 +00:00
// The data coming back from the server will have been normalized.
ed.elements["title"].edit.value = response.data.title;
2018-03-10 21:24:23 +00:00
2021-01-02 03:46:06 +00:00
ed.save();
2019-01-13 22:44:21 +00:00
2021-01-02 03:46:06 +00:00
document.title = ed.elements["title"].display.innerText + " | Albums";
2017-04-23 04:38:23 +00:00
}
2017-06-15 04:45:20 +00:00
2021-01-02 03:46:06 +00:00
const title = ed.elements["title"].edit.value;
const description = ed.elements["description"].edit.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
2021-01-02 03:46:06 +00:00
const rename_ed_elements = [
2017-06-15 04:56:47 +00:00
{
2021-01-02 03:46:06 +00:00
"id": "title",
"element": document.getElementById("title_text"),
"placeholder": "title",
"empty_text": ALBUM_ID,
"autofocus": true,
},
{
"id": "description",
"element": document.getElementById("description_text"),
"placeholder": "description",
"hide_when_empty": true,
},
];
2017-06-15 04:45:20 +00:00
2020-10-18 00:26:07 +00:00
const rename_ed = new editor.Editor(
2021-01-02 03:46:06 +00:00
rename_ed_elements,
2020-10-18 00:26:07 +00:00
rename_ed_on_open,
rename_ed_on_save,
);
2020-10-04 01:37:08 +00:00
function add_album_datalist_on_load(datalist)
{
/*
I found that the `list` property must be set by setAttribute, not
regular assignment, and it must be provided the ID of the datalist, not
the datalist object itself. Furthermore, it cannot be done until the
datalist is ready -- I tried adjusting the button_with_confirm
initializer to let me set the datalist during the input's construction,
but at that point the datalist prep usually / certainly hasn't run yet
and it didn't work. All that is to say I had to add this on_load hook
function to only call setAttribute after the datalist has been prepared.
*/
const holder = document.getElementById("add_child_holder");
const input = holder.getElementsByTagName("input")[0];
input.setAttribute("list", "album_autocomplete_datalist");
}
album_autocomplete.on_load_hooks.push(add_album_datalist_on_load);
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
function on_album_drag_start(event)
{
2020-09-20 19:23:43 +00:00
const album_card = event.target.closest(".album_card");
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-20 19:20:36 +00:00
let prompt;
if (parent_id === "root")
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
prompt = `Remove child\n${child_title}?`;
}
else
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
const parent_title = parent.querySelector('.album_card_title').textContent.trim();
prompt = `Move\n${child_title}\ninto\n${parent_title}?`;
}
2020-09-20 19:15:01 +00:00
if (! confirm(prompt))
2020-01-15 07:04:22 +00:00
{
2020-09-20 19:15:01 +00:00
return;
}
2020-09-20 19:20:36 +00:00
if (parent_id === "root")
{
2020-11-07 05:42:28 +00:00
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
2020-09-20 19:20:36 +00:00
}
else if (ALBUM_ID)
2020-09-20 19:15:01 +00:00
{
api.albums.add_child(parent_id, child_id, null);
2020-11-07 05:42:28 +00:00
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
2020-09-20 19:15:01 +00:00
}
else
{
2020-11-07 05:42:28 +00:00
api.albums.add_child(parent_id, child_id, common.refresh_or_alert);
2020-01-15 07:04:22 +00:00
}
}
2016-11-27 09:06:11 +00:00
< / script >
2017-04-23 04:38:23 +00:00
< / html >
