Merge albums.html and album.html, remove album.js.
The markup for the album listing page and individual album page were different enough that I decided to make them wholly separate, but then this left the shared javascript in its own stupid file unlike any of the other types. So, I'm merging them as a huge jinja if-else, which is also dumb but it feels better than all these separate files.
This commit is contained in:
parent
fd4ead1d1a
commit
616c490391
4 changed files with 212 additions and 193 deletions
|
|
@ -166,7 +166,7 @@ def get_albums_core():
|
|||
def get_albums_html():
|
||||
albums = get_albums_core()
|
||||
session = session_manager.get(request)
|
||||
return flask.render_template('albums.html', albums=albums, session=session)
|
||||
return flask.render_template('album.html', albums=albums, session=session)
|
||||
|
||||
@site.route('/albums.json')
|
||||
@session_manager.give_token
|
||||
|
|
@ -178,18 +178,19 @@ def get_albums_json():
|
|||
# Album create and delete ##########################################################################
|
||||
|
||||
@site.route('/albums/create_album', methods=['POST'])
|
||||
@session_manager.give_token
|
||||
@decorators.catch_etiquette_exception
|
||||
def post_albums_create():
|
||||
title = request.form.get('title', None)
|
||||
description = request.form.get('description', None)
|
||||
parent = request.form.get('parent', None)
|
||||
if parent is not None:
|
||||
parent = common.P_album(parent)
|
||||
parent_id = request.form.get('parent_id', None)
|
||||
if parent_id is not None:
|
||||
parent = common.P_album(parent_id)
|
||||
|
||||
user = session_manager.get(request).user
|
||||
|
||||
album = common.P.new_album(title=title, description=description, author=user)
|
||||
if parent is not None:
|
||||
if parent_id is not None:
|
||||
parent.add_child(album)
|
||||
|
||||
response = etiquette.jsonify.album(album, minimal=False)
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
var albums = {};
|
||||
|
||||
albums.create_child_prompt_button = null;
|
||||
albums.create_child_title_entry = null;
|
||||
albums.create_child_submit_button = null;
|
||||
albums.create_child_cancel_button = null;
|
||||
|
||||
albums.open_creator_prompt =
|
||||
function open_creator_prompt(event)
|
||||
{
|
||||
albums.create_child_prompt_button.classList.add("hidden");
|
||||
albums.create_child_title_entry.classList.remove("hidden");
|
||||
albums.create_child_title_entry.focus();
|
||||
albums.create_child_submit_button.classList.remove("hidden");
|
||||
albums.create_child_cancel_button.classList.remove("hidden");
|
||||
}
|
||||
|
||||
albums.cancel_create_child =
|
||||
function cancel_create_child(event)
|
||||
{
|
||||
albums.create_child_prompt_button.classList.remove("hidden");
|
||||
albums.create_child_title_entry.value = "";
|
||||
albums.create_child_title_entry.classList.add("hidden");
|
||||
albums.create_child_submit_button.classList.add("hidden");
|
||||
albums.create_child_cancel_button.classList.add("hidden");
|
||||
}
|
||||
|
||||
albums.create_album_and_follow =
|
||||
function create_album_and_follow(title, parent)
|
||||
{
|
||||
var url = "/albums/create_album";
|
||||
var data = new FormData();
|
||||
if (title !== undefined)
|
||||
{
|
||||
data.append("title", title);
|
||||
}
|
||||
if (parent !== undefined)
|
||||
{
|
||||
data.append("parent", parent);
|
||||
}
|
||||
function receive_callback(response)
|
||||
{
|
||||
if (response["meta"]["status"] == 200 && response["data"]["id"])
|
||||
{
|
||||
window.location.href = "/album/" + response["data"]["id"];
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
common.post(url, data, receive_callback);
|
||||
}
|
||||
|
||||
albums.submit_create_child =
|
||||
function submit_create_child(event)
|
||||
{
|
||||
var title = document.getElementById("create_child_title_entry").value;
|
||||
if (! title)
|
||||
{
|
||||
title = undefined;
|
||||
}
|
||||
var parent_id = ALBUM_ID;
|
||||
albums.create_album_and_follow(title, parent_id);
|
||||
}
|
||||
|
||||
albums.on_pageload =
|
||||
function on_pageload()
|
||||
{
|
||||
albums.create_child_prompt_button = document.getElementById("create_child_prompt_button");
|
||||
albums.create_child_title_entry = document.getElementById("create_child_title_entry");
|
||||
albums.create_child_submit_button = document.getElementById("create_child_submit_button");
|
||||
albums.create_child_cancel_button = document.getElementById("create_child_cancel_button");
|
||||
common.bind_box_to_button(albums.create_child_title_entry, albums.create_child_submit_button);
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", albums.on_pageload);
|
||||
|
|
@ -1,5 +1,53 @@
|
|||
<!DOCTYPE html5>
|
||||
<html>
|
||||
|
||||
{% if album is not defined %} {## Album listing ###################################################}
|
||||
|
||||
<head>
|
||||
{% import "header.html" as header %}
|
||||
<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">
|
||||
<script src="/static/js/common.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
|
||||
<style>
|
||||
#album_list
|
||||
{
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
{{header.make_header(session=session)}}
|
||||
<div id="content_body">
|
||||
<div id="album_list">
|
||||
<h2>Albums</h2>
|
||||
<ul>
|
||||
{% for album in albums %}
|
||||
<li><a href="/album/{{album.id}}">{{album.display_name}}</a></li>
|
||||
{% endfor %}
|
||||
<li>
|
||||
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create album</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="create_child_form(event);">Create</button>
|
||||
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
<script id="album_listing_script" type="text/javascript">
|
||||
ALBUM_ID = undefined;
|
||||
</script>
|
||||
|
||||
{% else %} {## Individual album ###################################################################}
|
||||
|
||||
<head>
|
||||
{% import "photo_card.html" as photo_card %}
|
||||
{% import "header.html" as header %}
|
||||
|
|
@ -11,7 +59,7 @@
|
|||
<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/api.js"></script>
|
||||
<script src="/static/js/editor.js"></script>
|
||||
<script src="/static/js/hotkeys.js"></script>
|
||||
<script src="/static/js/photoclipboard.js"></script>
|
||||
|
|
@ -21,11 +69,6 @@ p
|
|||
{
|
||||
word-break: break-word;
|
||||
}
|
||||
#content_body
|
||||
{
|
||||
/* overriding common.css here */
|
||||
display: block;
|
||||
}
|
||||
#album_metadata
|
||||
{
|
||||
max-width: 800px;
|
||||
|
|
@ -36,6 +79,21 @@ p
|
|||
padding: 8px;
|
||||
background-color: var(--color_site_transparency);
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.remove_child_button
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.remove_child_button:hover,
|
||||
li:hover .remove_child_button
|
||||
{
|
||||
display: initial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -44,16 +102,14 @@ p
|
|||
{{header.make_header(session=session)}}
|
||||
<div id="content_body">
|
||||
<div id="album_metadata">
|
||||
<h2>
|
||||
<span
|
||||
<h2><span
|
||||
id="title_text"
|
||||
data-editor-id="title"
|
||||
data-editor-empty-text="{{album.id}}"
|
||||
data-editor-placeholder="title"
|
||||
>
|
||||
{{-album.display_name-}}
|
||||
</span>
|
||||
</h2>
|
||||
</span></h2>
|
||||
|
||||
<pre
|
||||
id="description_text"
|
||||
|
|
@ -63,8 +119,19 @@ p
|
|||
>
|
||||
{{-album.description-}}
|
||||
</pre>
|
||||
|
||||
<button
|
||||
class="red_button button_with_confirm"
|
||||
data-onclick="api.albums.delete(ALBUM_ID, api.albums.callback_go_to_albums)"
|
||||
data-prompt="Delete Album?"
|
||||
data-confirm-class="red_button"
|
||||
data-cancel-class="gray_button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Parent & Child tree -->
|
||||
<ul>
|
||||
{% set viewparam = "?view=list" if view == "list" else "" %}
|
||||
{% set parents = album.get_parents() %}
|
||||
|
|
@ -81,18 +148,38 @@ p
|
|||
<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>
|
||||
<li>
|
||||
<a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a>
|
||||
|
||||
<button
|
||||
class="remove_child_button button_with_confirm red_button"
|
||||
data-onclick="api.albums.remove_child(ALBUM_ID, '{{sub_album.id}}', common.refresh)"
|
||||
data-prompt="Remove child?"
|
||||
data-holder-class="remove_child_button"
|
||||
data-confirm-class="red_button"
|
||||
data-cancel-class="gray_button"
|
||||
>
|
||||
Unlink
|
||||
</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li>
|
||||
<button id="create_child_prompt_button" class="green_button" onclick="albums.open_creator_prompt(event);">Create child</button>
|
||||
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(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="albums.submit_create_child(event);">Create</button>
|
||||
<button id="create_child_cancel_button" class="gray_button hidden" onclick="albums.cancel_create_child(event);">Cancel</button>
|
||||
<button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button>
|
||||
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button>
|
||||
</li>
|
||||
<li>
|
||||
<button id="add_child_prompt_button" class="green_button" onclick="open_add_child(event);">Add child</button>
|
||||
<input type="text" id="add_child_id_entry" class="hidden" placeholder="Album ID">
|
||||
<button id="add_child_submit_button" class="green_button hidden" onclick="add_child_form(event);">Add</button>
|
||||
<button id="add_child_cancel_button" class="gray_button hidden" onclick="cancel_add_child(event);">Cancel</button>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<!-- Photo list -->
|
||||
{% set photos = album.get_photos() %}
|
||||
{% if photos %}
|
||||
<h3>{{photos|length}} Photos</h3>
|
||||
|
|
@ -108,69 +195,74 @@ p
|
|||
</ul>
|
||||
{% endif %}
|
||||
|
||||
<!-- Download links -->
|
||||
{% set has_local_photos = photos|length > 0 %}
|
||||
{% set has_child_photos = album.has_any_subalbum_photo() %}
|
||||
{% if has_local_photos or has_child_photos %}
|
||||
<p>
|
||||
Download:
|
||||
<span>Download:</span>
|
||||
{% if has_local_photos %}
|
||||
<a href="/album/{{album.id}}.zip?recursive=no">
|
||||
These files ({{album.sum_bytes(recurse=False)|bytestring }})
|
||||
</a>
|
||||
{% if has_child_photos %}—{% endif %}
|
||||
<a href="/album/{{album.id}}.zip?recursive=no">These files ({{album.sum_bytes(recurse=False)|bytestring }})</a>
|
||||
{% if has_child_photos %}<span>—</span>{% endif %}
|
||||
{% endif %}
|
||||
{% if has_child_photos %}
|
||||
<a href="/album/{{album.id}}.zip?recursive=yes">
|
||||
Include children ({{album.sum_bytes(recurse=True)|bytestring }})
|
||||
</a>
|
||||
<a href="/album/{{album.id}}.zip?recursive=yes">Include children ({{album.sum_bytes(recurse=True)|bytestring }})</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<!-- Clipboard -->
|
||||
{{clipboard_tray.clipboard_tray()}}
|
||||
<div class="my_clipboard_tray_toolbox">
|
||||
<button class="green_button" onclick="paste_photo_clipboard">Add to this album</button>
|
||||
<button class="red_button" onclick="unpaste_photo_clipboard">Remove from this album</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
<script id="album_individual_script" type="text/javascript">
|
||||
var ALBUM_ID = "{{album.id}}";
|
||||
|
||||
function _paste_unpaste_photo_clipboard(add_or_remove)
|
||||
function open_add_child(event)
|
||||
{
|
||||
var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
|
||||
var url = "/album/{{album.id}}/" + add_or_remove;
|
||||
var data = new FormData();
|
||||
data.append("photo_id", photo_ids);
|
||||
var callback = function(response)
|
||||
document.getElementById("add_child_prompt_button").classList.add("hidden");
|
||||
document.getElementById("add_child_id_entry").classList.remove("hidden");
|
||||
document.getElementById("add_child_id_entry").focus();
|
||||
document.getElementById("add_child_submit_button").classList.remove("hidden");
|
||||
document.getElementById("add_child_cancel_button").classList.remove("hidden");
|
||||
}
|
||||
|
||||
function cancel_add_child(event)
|
||||
{
|
||||
if (response["meta"]["status"] !== 200)
|
||||
document.getElementById("add_child_prompt_button").classList.remove("hidden");
|
||||
document.getElementById("add_child_id_entry").value = "";
|
||||
document.getElementById("add_child_id_entry").classList.add("hidden");
|
||||
document.getElementById("add_child_submit_button").classList.add("hidden");
|
||||
document.getElementById("add_child_cancel_button").classList.add("hidden");
|
||||
}
|
||||
|
||||
function add_child_form(event)
|
||||
{
|
||||
var child_id = document.getElementById("add_child_id_entry").value;
|
||||
if (! child_id)
|
||||
{
|
||||
return;
|
||||
}
|
||||
common.refresh();
|
||||
};
|
||||
common.post(url, data, callback);
|
||||
api.albums.add_child(ALBUM_ID, child_id, common.refresh);
|
||||
}
|
||||
|
||||
function paste_photo_clipboard()
|
||||
{
|
||||
_paste_unpaste_photo_clipboard("add_photo");
|
||||
var photo_ids = Array.from(photo_clipboard.clipboard);
|
||||
api.albums.add_photos(ALBUM_ID, photo_ids, common.refresh);
|
||||
}
|
||||
function unpaste_photo_clipboard()
|
||||
{
|
||||
_paste_unpaste_photo_clipboard("remove_photo");
|
||||
var photo_ids = Array.from(photo_clipboard.clipboard);
|
||||
api.albums.remove_photos(ALBUM_ID, photo_ids, common.refresh);
|
||||
}
|
||||
|
||||
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(ed, edit_element_map, display_element_map)
|
||||
{
|
||||
ed.open();
|
||||
|
|
@ -193,19 +285,12 @@ function on_save(ed, edit_element_map, display_element_map)
|
|||
}
|
||||
}
|
||||
|
||||
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();
|
||||
edit_element_map["title"].value = edit_element_map["title"].value.trim();
|
||||
var title = edit_element_map["title"].value;
|
||||
var description = edit_element_map["description"].value;
|
||||
var data = new FormData();
|
||||
data.append("title", title_editor.value);
|
||||
data.append("description", description_editor.value);
|
||||
|
||||
ed.show_spinner();
|
||||
common.post(url, data, callback);
|
||||
api.albums.edit(ALBUM_ID, title, description, callback);
|
||||
}
|
||||
|
||||
function on_cancel(ed, edit_element_map, display_element_map)
|
||||
|
|
@ -220,5 +305,57 @@ function on_cancel(ed, edit_element_map, display_element_map)
|
|||
var title_text = document.getElementById("title_text");
|
||||
var description_text = document.getElementById("description_text");
|
||||
var ed = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel);
|
||||
|
||||
function on_pageload()
|
||||
{
|
||||
common.bind_box_to_button(
|
||||
document.getElementById("add_child_id_entry"),
|
||||
document.getElementById("add_child_submit_button")
|
||||
);
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", on_pageload);
|
||||
</script>
|
||||
|
||||
{% endif %} {## Shared ############################################################################}
|
||||
|
||||
<script id="album_shared_script" type="text/javascript">
|
||||
|
||||
function open_create_child(event)
|
||||
{
|
||||
document.getElementById("create_child_prompt_button").classList.add("hidden");
|
||||
document.getElementById("create_child_title_entry").classList.remove("hidden");
|
||||
document.getElementById("create_child_title_entry").focus();
|
||||
document.getElementById("create_child_submit_button").classList.remove("hidden");
|
||||
document.getElementById("create_child_cancel_button").classList.remove("hidden");
|
||||
}
|
||||
|
||||
function cancel_create_child(event)
|
||||
{
|
||||
document.getElementById("create_child_prompt_button").classList.remove("hidden");
|
||||
document.getElementById("create_child_title_entry").value = "";
|
||||
document.getElementById("create_child_title_entry").classList.add("hidden");
|
||||
document.getElementById("create_child_submit_button").classList.add("hidden");
|
||||
document.getElementById("create_child_cancel_button").classList.add("hidden");
|
||||
}
|
||||
|
||||
function create_child_form(event)
|
||||
{
|
||||
var title = document.getElementById("create_child_title_entry").value;
|
||||
if (! title)
|
||||
{
|
||||
title = undefined;
|
||||
}
|
||||
var parent_id = ALBUM_ID;
|
||||
api.albums.create(title, parent_id, api.albums.callback_follow);
|
||||
}
|
||||
|
||||
function on_pageload()
|
||||
{
|
||||
common.bind_box_to_button(
|
||||
document.getElementById("create_child_title_entry"),
|
||||
document.getElementById("create_child_submit_button")
|
||||
);
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", on_pageload);
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html5>
|
||||
<html>
|
||||
<head>
|
||||
{% import "header.html" as header %}
|
||||
<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">
|
||||
<script src="/static/js/common.js"></script>
|
||||
<script src="/static/js/albums.js"></script>
|
||||
|
||||
<style>
|
||||
#content_body
|
||||
{
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
{{header.make_header(session=session)}}
|
||||
<div id="content_body">
|
||||
<h2>Albums</h2>
|
||||
<ul>
|
||||
{% for album in albums %}
|
||||
<li><a href="/album/{{album.id}}">{{album.display_name}}</a></li>
|
||||
{% endfor %}
|
||||
<li>
|
||||
<button id="create_child_prompt_button" class="green_button" onclick="albums.open_creator_prompt(event);">Create album</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="albums.submit_create_child(event);">Create</button>
|
||||
<button id="create_child_cancel_button" class="gray_button hidden" onclick="albums.cancel_create_child(event);">Cancel</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
ALBUM_ID = undefined;
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in a new issue