voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
etiquette/frontends/etiquette_flask/templates/album.html

235 lines
7.2 KiB
HTML
Raw Normal View History

checkpoint
2016-09-18 08:33:46 +00:00
<!DOCTYPE html5>
<html>
<head>
list view
2016-11-07 02:00:30 +00:00
{% import "photo_card.html" as photo_card %}
checkpoint
2016-09-18 08:33:46 +00:00
{% import "header.html" as header %}
Add the clipboard tray where users manage their photo clipboard. Appearing on search and album pages, the tray is where you can remove items from your clipboard without having to click on its checkbox -- that photo card may not even be on the current page.
2017-12-16 11:47:54 +00:00
{% import "clipboard_tray.html" as clipboard_tray %}
Add Album.@display_name to remove duplicate logic elsewhere
2017-03-11 01:08:38 +00:00
<title>Album {{album.display_name}}</title>
checkpoint
2016-09-18 08:33:46 +00:00
<meta charset="UTF-8">
Add meta viewport to all pages.
2017-07-21 06:10:48 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Move the remaining common css / js to their folders.
2018-02-24 20:51:36 +00:00
<link rel="stylesheet" href="/static/css/common.css">
Move clipboard_tray rules to own file in css folder.
2018-02-24 09:06:27 +00:00
<link rel="stylesheet" href="/static/css/clipboard_tray.css">
Create css folder. Move photo_card rules to own file.
2018-02-24 08:58:43 +00:00
<link rel="stylesheet" href="/static/css/photo_card.css">
Move the remaining common css / js to their folders.
2018-02-24 20:51:36 +00:00
<script src="/static/js/common.js"></script>
Support giving title when creating albums. Two-step prompt.
2018-03-10 01:38:40 +00:00
<script src="/static/js/albums.js"></script>
Create js folder. Move Editor to its own file.
2018-02-24 08:46:55 +00:00
<script src="/static/js/editor.js"></script>
Move photoclipboard.js to the js folder.
2018-02-24 08:47:44 +00:00
<script src="/static/js/photoclipboard.js"></script>
checkpoint
2016-11-27 09:06:11 +00:00
checkpoint
2016-09-18 08:33:46 +00:00
<style>
Display album description
2016-12-14 21:26:42 +00:00
p
{
word-break: break-word;
}
checkpoint
2016-09-18 08:33:46 +00:00
#content_body
{
/* overriding common.css here */
display: block;
}
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
#title_editor,
#description_editor
{
width: 100%;
max-width: 800px;
}
Improve editor appearance and use ctrl+enter for desc.
2017-05-13 22:26:34 +00:00
#description_text
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
{
Use <pre> instead of <p> so \n is kept.
2017-07-17 00:28:06 +00:00
font-family: initial;
Improve editor appearance and use ctrl+enter for desc.
2017-05-13 22:26:34 +00:00
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
}
Improve editor appearance and use ctrl+enter for desc.
2017-05-13 22:26:34 +00:00
#description_editor textarea
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
{
Improve editor appearance and use ctrl+enter for desc.
2017-05-13 22:26:34 +00:00
width: 100%;
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
}
checkpoint
2016-09-18 08:33:46 +00:00
</style>
checkpoint
2016-11-27 09:06:11 +00:00
</head>
checkpoint
2016-09-18 08:33:46 +00:00
<body>
very early session and registration support
2016-12-18 13:12:14 +00:00
{{header.make_header(session=session)}}
checkpoint
2016-09-18 08:33:46 +00:00
<div id="content_body">
Nevermind, the span wasn't useless. The h2 needs to hold the title input so it stays block-level.
2017-07-14 06:28:51 +00:00
<h2>
<span data-editor-id="title" data-editor-placeholder="title" id="title_text">
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
{%- if album.title -%}
{{album.title}}
{%- else -%}
Album {{album.id}}
{%- endif -%}
Nevermind, the span wasn't useless. The h2 needs to hold the title input so it stays block-level.
2017-07-14 06:28:51 +00:00
</span>
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
</h2>
Use <pre> instead of <p> so \n is kept.
2017-07-17 00:28:06 +00:00
<pre
id="description_text"
data-editor-id="description"
data-editor-placeholder="description"
{% if album.description == "" %}class="hidden"{% endif %}
>
{{-album.description-}}
</pre>
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
checkpoint
2016-09-18 08:33:46 +00:00
<ul>
Display album hierarchy as nested bullets instead of separate lists. Not perfect yet but I didn't like having all those header elements.
2017-11-28 00:00:52 +00:00
{% set viewparam = "?view=list" if view == "list" else "" %}
Rename Groupable.parent -> get_parent. After making the "if x.parent is None" mistake too many times, forgetting that it was not a @property, I've decided that the verby name is better.
2018-02-17 06:59:34 +00:00
{% set parent = album.get_parent() %}
Display album hierarchy as nested bullets instead of separate lists. Not perfect yet but I didn't like having all those header elements.
2017-11-28 00:00:52 +00:00
{% 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>You are here</li>
<ul>
Rename Groupable.children -> get_children.
2018-02-17 07:00:43 +00:00
{% set sub_albums = album.get_children() %}
Display album hierarchy as nested bullets instead of separate lists. Not perfect yet but I didn't like having all those header elements.
2017-11-28 00:00:52 +00:00
{% for sub_album in sub_albums|sort(attribute='title') %}
<li><a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a></li>
{% endfor %}
Support giving title when creating albums. Two-step prompt.
2018-03-10 01:38:40 +00:00
<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>
Display album hierarchy as nested bullets instead of separate lists. Not perfect yet but I didn't like having all those header elements.
2017-11-28 00:00:52 +00:00
</ul>
</ul>
checkpoint
2016-09-18 08:33:46 +00:00
</ul>
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
Rename Album.photos -> get_photos.
2018-02-17 07:03:54 +00:00
{% set photos = album.get_photos() %}
checkpoint
2016-09-18 08:33:46 +00:00
{% if photos %}
Add link to grid or list view
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>
checkpoint
2016-09-18 08:33:46 +00:00
{% for photo in photos %}
Add link to grid or list view
2017-03-31 01:56:27 +00:00
{{photo_card.create_photo_card(photo, view=view)}}
checkpoint
2016-09-18 08:33:46 +00:00
{% endfor %}
Add link to grid or list view
2017-03-31 01:56:27 +00:00
</ul>
checkpoint
2016-09-18 08:33:46 +00:00
{% endif %}
Improve Album bytes caching, start caching photo count. More careful uncaching of the summed bytes, to minimize recalculation. Fewer cases where the album itself is removed from the photodb's getter cache. This also helps the download link on album pages disappear if the child albums don't actually have any photos.
2017-11-12 23:21:53 +00:00
Move album dl link to bottom. Just feels better.
2017-05-13 22:25:31 +00:00
<p>
Improve Album bytes caching, start caching photo count. More careful uncaching of the summed bytes, to minimize recalculation. Fewer cases where the album itself is removed from the photodb's getter cache. This also helps the download link on album pages disappear if the child albums don't actually have any photos.
2017-11-12 23:21:53 +00:00
{% set has_local_photos = photos|length > 0 %}
{% set has_child_photos = album.sum_photos() > photos|length %}
{% if has_local_photos or has_child_photos %}
Move album dl link to bottom. Just feels better.
2017-05-13 22:25:31 +00:00
Download:
Improve Album bytes caching, start caching photo count. More careful uncaching of the summed bytes, to minimize recalculation. Fewer cases where the album itself is removed from the photodb's getter cache. This also helps the download link on album pages disappear if the child albums don't actually have any photos.
2017-11-12 23:21:53 +00:00
{% if has_local_photos %}
Move album dl link to bottom. Just feels better.
2017-05-13 22:25:31 +00:00
<a href="/album/{{album.id}}.zip?recursive=no">
These files ({{album.sum_bytes(recurse=False, string=True)}})
</a>
{% endif %}
Improve Album bytes caching, start caching photo count. More careful uncaching of the summed bytes, to minimize recalculation. Fewer cases where the album itself is removed from the photodb's getter cache. This also helps the download link on album pages disappear if the child albums don't actually have any photos.
2017-11-12 23:21:53 +00:00
{% if has_local_photos and has_child_photos %}&mdash;{% endif %}
{% if has_child_photos %}
Move album dl link to bottom. Just feels better.
2017-05-13 22:25:31 +00:00
<a href="/album/{{album.id}}.zip?recursive=yes">
Include children ({{album.sum_bytes(recurse=True, string=True)}})
</a>
{% endif %}
{% endif %}
</p>
Add the clipboard tray where users manage their photo clipboard. Appearing on search and album pages, the tray is where you can remove items from your clipboard without having to click on its checkbox -- that photo card may not even be on the current page.
2017-12-16 11:47:54 +00:00
{{clipboard_tray.clipboard_tray()}}
checkpoint
2016-09-18 08:33:46 +00:00
</div>
</body>
<script type="text/javascript">
Support giving title when creating albums. Two-step prompt.
2018-03-10 01:38:40 +00:00
var ALBUM_ID = "{{album.id}}";
var BLANK_TITLE_TEXT = "Album {{album.id}}";
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
Add paste/unpaste buttons to clipboard tray toolbox for albums.
2017-12-16 22:19:37 +00:00
function _paste_unpaste_photo_clipboard(add_or_remove)
{
Support giving title when creating albums. Two-step prompt.
2018-03-10 01:38:40 +00:00
var photo_ids = Array.from(photo_clipboard).join(",");
Add paste/unpaste buttons to clipboard tray toolbox for albums.
2017-12-16 22:19:37 +00:00
var url = "/album/{{album.id}}/" + add_or_remove;
var data = new FormData();
data.append("photo_id", photo_ids);
Split HTTP response dict into ["meta"] and ["data"].
2018-02-18 02:47:17 +00:00
var callback = function(response)
{
if (response["meta"]["status"] !== 200)
Only reload the page if the clip operation was successful.
2018-01-20 05:44:21 +00:00
{
Split HTTP response dict into ["meta"] and ["data"].
2018-02-18 02:47:17 +00:00
return;
Only reload the page if the clip operation was successful.
2018-01-20 05:44:21 +00:00
}
Split HTTP response dict into ["meta"] and ["data"].
2018-02-18 02:47:17 +00:00
photo_clipboard.clear();
save_photo_clipboard();
location.reload();
Add paste/unpaste buttons to clipboard tray toolbox for albums.
2017-12-16 22:19:37 +00:00
};
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);
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
function on_open(editor, edit_element_map, display_element_map)
Keep editor open until response. New Submitting... text.
2017-05-06 04:17:13 +00:00
{
Support giving title when creating albums. Two-step prompt.
2018-03-10 01:38:40 +00:00
if (display_element_map["title"].innerText == BLANK_TITLE_TEXT)
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
{
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
display_element_map["title"].innerText = "";
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
}
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
editor.open();
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
edit_element_map["title"].focus();
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
}
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
function on_save(editor, edit_element_map, display_element_map)
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
{
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
var title_editor = edit_element_map["title"];
var description_editor = edit_element_map["description"];
Keep editor open until response. New Submitting... text.
2017-05-06 04:17:13 +00:00
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
editor.show_spinner();
function callback()
Keep editor open until response. New Submitting... text.
2017-05-06 04:17:13 +00:00
{
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
editor.hide_spinner();
editor.save();
if (title_text.innerText == "")
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
{
Support giving title when creating albums. Two-step prompt.
2018-03-10 01:38:40 +00:00
document.title = BLANK_TITLE_TEXT;
title_text.innerText = BLANK_TITLE_TEXT;
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
}
else
{
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
document.title = "Album " + title_text.innerText;
}
if (description_text.innerText == "")
{
description_text.classList.add("hidden");
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
}
}
Replace old work with new Editor class.
2017-06-15 04:45:20 +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);
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
}
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
function on_cancel(editor, edit_element_map, display_element_map)
Fix blank_title_text not being restored upon cancel.
2017-06-15 04:56:47 +00:00
{
editor.cancel();
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
if (display_element_map["title"].innerText == "")
Fix blank_title_text not being restored upon cancel.
2017-06-15 04:56:47 +00:00
{
Support giving title when creating albums. Two-step prompt.
2018-03-10 01:38:40 +00:00
display_element_map["title"].innerText = BLANK_TITLE_TEXT;
Fix blank_title_text not being restored upon cancel.
2017-06-15 04:56:47 +00:00
}
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
if (display_element_map["description"].innerText == "")
Fix blank_title_text not being restored upon cancel.
2017-06-15 04:56:47 +00:00
{
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
display_element_map["description"].classList.add("hidden");
Fix blank_title_text not being restored upon cancel.
2017-06-15 04:56:47 +00:00
}
}
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
Use the provided display_element_map instead of the global vars.
2017-07-14 06:32:14 +00:00
var title_text = document.getElementById("title_text");
var description_text = document.getElementById("description_text");
Replace old work with new Editor class.
2017-06-15 04:45:20 +00:00
var editor = new Editor([title_text, description_text], on_open, on_save, on_cancel);
checkpoint
2016-11-27 09:06:11 +00:00
</script>
Add title/desc edit interface.
2017-04-23 04:38:23 +00:00
</html>
Reference in a new issue Copy permalink