etiquette/frontends/etiquette_flask/templates/clipboard.html

361 lines
9.7 KiB
HTML
Raw Normal View History

<!DOCTYPE html5>
<html>
<head>
{% import "header.html" as header %}
{% import "clipboard_tray.html" as clipboard_tray %}
<title>Clipboard</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/photo_card.css">
<link rel="stylesheet" href="/static/css/clipboard_tray.css">
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<script src="/static/js/hotkeys.js"></script>
<script src="/static/js/photo_clipboard.js"></script>
<script src="/static/js/spinner.js"></script>
2018-07-23 03:45:16 +00:00
<script src="/static/js/tag_autocomplete.js"></script>
<style>
2018-02-22 23:23:57 +00:00
#left
{
word-break: break-word;
}
#right
{
grid-row-gap: 8px;
grid-template:
"toolbox" auto
"message_area" 1fr
/ 1fr;
}
#toolbox
{
display: grid;
grid-auto-rows: min-content;
2019-08-14 20:49:08 +00:00
grid-row-gap: 8px;
2018-02-22 23:23:57 +00:00
}
#toolbox > *
{
display: flex;
}
#toolbox input
{
margin: 0;
}
#toolbox .spinner_holder
{
display: flex;
flex: 1;
}
#toolbox button
{
flex: 1;
}
#toolbox { grid-area: toolbox; }
#message_area { grid-area: message_area; }
#add_tag_area input,
#remove_tag_area input
{
flex: 1;
}
#add_tag_area button,
#remove_tag_area button
{
flex: initial;
2018-02-22 23:23:57 +00:00
}
2018-11-05 02:36:17 +00:00
@media screen and (max-width: 800px)
{
#content_body
{
grid-template:
"left" 1fr
"right" 200px
/ 1fr !important;
}
#right
{
top: unset !important;
width: unset !important;
left: 8px;
right: 8px;
bottom: 8px;
height: 200px;
grid-template:
"toolbox message_area" 1fr
/1fr minmax(50px, 200px);
}
}
</style>
</head>
<body>
2018-02-22 23:23:57 +00:00
{{header.make_header(session=session)}}
<div id="content_body" class="sticky_side_right">
2018-02-22 23:23:57 +00:00
<div id="left">
2019-08-14 20:49:08 +00:00
<div class="panel">The clipboard contains <span class="clipboard_count">0</span> items.
2018-07-23 02:43:07 +00:00
<button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button>
2019-08-14 20:49:08 +00:00
</div>
2018-02-22 23:23:57 +00:00
<div id="photo_card_holder">
</div>
</div>
<div id="right">
<div id="toolbox">
<div id="add_tag_area">
<input type="text" id="add_tag_textbox" list="tag_autocomplete_datalist">
<button class="add_tag_button green_button" id="add_tag_button" onclick="add_tag_form();">Add tag</button>
</div>
<div id="remove_tag_area">
<input type="text" id="remove_tag_textbox" list="tag_autocomplete_datalist">
<button class="red_button" id="remove_tag_button" onclick="remove_tag_form();">Remove tag</button>
</div>
<div id="refresh_metadata_area">
<button class="green_button button_with_spinner" id="refresh_metadata_button" data-spinner-delay="500" onclick="refresh_metadata_form();">Refresh metadata</button>
</div>
<div id="searchhidden_area">
<button class="yellow_button" id="set_searchhidden_button" onclick="set_searchhidden_form()">Searchhide</button>
<button class="yellow_button" id="unset_searchhidden_button" onclick="unset_searchhidden_form()">Unhide</button>
</div>
<div id="download_zip_area">
<button class="yellow_button" id="download_zip_button" onclick="download_zip_form()">Download .zip</button>
</div>
</div>
2018-02-22 23:23:57 +00:00
<div id="message_area">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var divs = {};
var needed = new Set();
var holder = document.getElementById("photo_card_holder");
2018-02-22 23:23:57 +00:00
var add_box = document.getElementById("add_tag_textbox");
var add_button = document.getElementById("add_tag_button");
2018-07-23 02:12:08 +00:00
add_box.addEventListener("keyup", common.entry_with_history_hook);
common.bind_box_to_button(add_box, add_button);
2018-02-22 23:23:57 +00:00
var remove_box = document.getElementById("remove_tag_textbox");
var remove_button = document.getElementById("remove_tag_button");
2018-07-23 02:12:08 +00:00
remove_box.addEventListener("keyup", common.entry_with_history_hook);
common.bind_box_to_button(remove_box, remove_button);
2018-02-22 23:23:57 +00:00
function recalculate_needed()
{
needed = new Set();
2018-07-23 02:43:07 +00:00
photo_clipboard.clipboard.forEach(function(photo_id)
{
if (!(photo_id in divs))
{
needed.add(photo_id);
}
});
}
function refresh_divs()
{
for (var photo_id in divs)
{
var photo_div = divs[photo_id];
2018-07-23 02:43:07 +00:00
var should_keep = photo_clipboard.clipboard.has(photo_id);
var on_page = holder.contains(photo_div);
if (on_page && !should_keep)
{
holder.removeChild(photo_div)
}
if (!on_page && should_keep)
{
holder.appendChild(photo_div)
}
}
}
function request_more_divs()
{
if (needed.size == 0)
{
return;
}
var url = "/batch/photos/photo_card";
var data = new FormData();
var photo_ids = Array.from(needed).join(",");
data.append("photo_ids", photo_ids);
function callback(response)
{
if (response.meta.status !== 200)
{
return;
}
for (photo_id in response.data)
{
photo_div = common.html_to_element(response.data[photo_id]);
divs[photo_id] = photo_div;
needed.delete(photo_id)
holder.appendChild(photo_div);
}
2018-07-23 02:43:07 +00:00
photo_clipboard.apply_check_all();
}
2018-07-23 02:12:08 +00:00
common.post(url, data, callback);
}
function my_clipboard_load_save_hook()
{
recalculate_needed();
request_more_divs();
refresh_divs();
}
2018-07-23 03:45:16 +00:00
tag_autocomplete.init_datalist();
photo_clipboard.on_load_hooks.push(my_clipboard_load_save_hook);
photo_clipboard.on_save_hooks.push(my_clipboard_load_save_hook);
2018-02-22 23:23:57 +00:00
////////////////////////////////////////////////////////////////////////////////////////////////////
2018-02-22 23:23:57 +00:00
function add_remove_tag_callback(response)
2018-02-22 23:23:57 +00:00
{
var tagname = response.data.tagname;
var message_area = document.getElementById("message_area");
2018-02-22 23:23:57 +00:00
var message_positivity;
var message_text;
if ("error_type" in response.data)
2018-02-22 23:23:57 +00:00
{
message_positivity = "message_negative";
message_text = response.data.error_message;
2018-02-22 23:23:57 +00:00
}
else if ("action" in response.data)
2018-02-22 23:23:57 +00:00
{
var action = response.data.action;
2018-02-22 23:23:57 +00:00
message_positivity = "message_positive";
if (action == "add")
{message_text = "Added tag " + tagname;}
else if (action == "remove")
{message_text = "Removed tag " + tagname;}
}
2018-07-23 02:12:08 +00:00
common.create_message_bubble(message_area, message_positivity, message_text, 8000);
2018-02-22 23:23:57 +00:00
}
function add_tag_form()
{
if (photo_clipboard.clipboard.size == 0)
{return;}
var box = document.getElementById("add_tag_textbox");
var tagname = box.value.trim();
if (! tagname)
{return}
box.value = "";
var photo_ids = Array.from(photo_clipboard.clipboard);
api.photos.batch_add_tag(photo_ids, tagname, add_remove_tag_callback);
}
function remove_tag_form()
{
if (photo_clipboard.clipboard.size == 0)
{return;}
var box = document.getElementById("remove_tag_textbox");
var tagname = box.value.trim();
if (! tagname)
{return}
box.value = "";
var photo_ids = Array.from(photo_clipboard.clipboard);
api.photos.batch_remove_tag(photo_ids, tagname, add_remove_tag_callback);
}
////////////////////////////////////////////////////////////////////////////////
function download_zip_form()
{
2018-07-23 02:43:07 +00:00
if (photo_clipboard.clipboard.size == 0)
{return;}
var photo_ids = Array.from(photo_clipboard.clipboard);
api.photos.get_download_zip_token(photo_ids, api.photos.callback_download_zip);
}
////////////////////////////////////////////////////////////////////////////////
var refresh_metadata_button = document.getElementById("refresh_metadata_button");
function refresh_metadata_callback(response)
{
window[refresh_metadata_button.dataset.spinnerCloser]();
if ("error_type" in response.data)
{
var message_area = document.getElementById("message_area");
var message_positivity = "message_negative";
var message_text = response.data.error_message;
2018-07-23 02:12:08 +00:00
common.create_message_bubble(message_area, message_positivity, message_text, 8000);
}
else
{
common.refresh();
}
}
function refresh_metadata_form()
{
if (photo_clipboard.clipboard.size == 0)
{
window[refresh_metadata_button.dataset.spinnerCloser]();
return;
}
var photo_ids = Array.from(photo_clipboard.clipboard);
api.photos.batch_refresh_metadata(photo_ids, refresh_metadata_callback);
}
////////////////////////////////////////////////////////////////////////////////
function set_unset_searchhidden_callback(response)
{
var message_area = document.getElementById("message_area");
var message_positivity;
var message_text;
if ("error_type" in response.data)
{
message_positivity = "message_negative";
message_text = response.data.error_message;
}
else
{
message_positivity = "message_positive";
message_text = "Success."
}
2018-07-23 02:12:08 +00:00
common.create_message_bubble(message_area, message_positivity, message_text, 8000);
}
function set_searchhidden_form()
{
2018-07-23 02:43:07 +00:00
if (photo_clipboard.clipboard.size == 0)
{return;}
var photo_ids = Array.from(photo_clipboard.clipboard);
api.photos.batch_set_searchhidden(photo_ids, set_unset_searchhidden_callback);
}
function unset_searchhidden_form()
{
2018-07-23 02:43:07 +00:00
if (photo_clipboard.clipboard.size == 0)
{return;}
var photo_ids = Array.from(photo_clipboard.clipboard);
api.photos.batch_unset_searchhidden(photo_ids, set_unset_searchhidden_callback);
}
</script>
</html>