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

330 lines
8.5 KiB
HTML
Raw Normal View History

Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
<!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"/>
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">
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 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">
Move the remaining common css / js to their folders.
2018-02-24 20:51:36 +00:00
<script src="/static/js/common.js"></script>
Improve hotkey framework by making own file & register function.
2018-07-14 21:19:13 +00:00
<script src="/static/js/hotkeys.js"></script>
Move photoclipboard.js to the js folder.
2018-02-24 08:47:44 +00:00
<script src="/static/js/photoclipboard.js"></script>
Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
<style>
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
body
Add CSS clipboard_size; and other clip hook improvements. Any element with class clipboard_size will have its text updated; Removed the call to on_pageload from save_ because it redundantly causes a load. Separate those update hooks.
2018-02-21 04:20:20 +00:00
{
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 300px;
grid-template-areas:
"header header"
"left right";
}
#header
{
grid-area: header;
}
#left
{
word-break: break-word;
grid-area: left;
}
#right
{
position: fixed;
right: 8px;
bottom: 8px;
top: 30px;
width: 300px;
grid-area: right;
display: grid;
Give Photos a `searchhidden` property. By default, photos with searchhidden do not appear in the search results. This allows a small number of representative images from a large album to appear in the results, while the rest can be found on the album's page. The same effect could be achieved with a tag and forbid search, but tag searching has much higher cost and it would be more difficult to implement as a default behavior without requiring lots of special checks whenever listing tags etc.
2018-03-10 01:10:27 +00:00
grid-template-rows: 75px 75px 75px 75px auto;
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
grid-template-areas:
"add_tag_area"
"remove_tag_area"
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
"refresh_metadata_area"
Give Photos a `searchhidden` property. By default, photos with searchhidden do not appear in the search results. This allows a small number of representative images from a large album to appear in the results, while the rest can be found on the album's page. The same effect could be achieved with a tag and forbid search, but tag searching has much higher cost and it would be more difficult to implement as a default behavior without requiring lots of special checks whenever listing tags etc.
2018-03-10 01:10:27 +00:00
"searchhidden_area"
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
"message_area";
background-color: rgba(0, 0, 0, 0.1);
}
#add_tag_area
{
grid-area: add_tag_area;
margin: auto;
}
#remove_tag_area
{
grid-area: remove_tag_area;
margin: auto;
}
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
#refresh_metadata_area
{
grid-area: refresh_metadata_area;
margin: auto;
}
Give Photos a `searchhidden` property. By default, photos with searchhidden do not appear in the search results. This allows a small number of representative images from a large album to appear in the results, while the rest can be found on the album's page. The same effect could be achieved with a tag and forbid search, but tag searching has much higher cost and it would be more difficult to implement as a default behavior without requiring lots of special checks whenever listing tags etc.
2018-03-10 01:10:27 +00:00
#searchhidden_area
{
grid-area: searchhidden_area;
margin: auto;
}
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
#message_area
{
grid-area: message_area;
margin: 8px;
Add CSS clipboard_size; and other clip hook improvements. Any element with class clipboard_size will have its text updated; Removed the call to on_pageload from save_ because it redundantly causes a load. Separate those update hooks.
2018-02-21 04:20:20 +00:00
}
Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
</style>
</head>
<body>
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
{{header.make_header(session=session)}}
<div id="left">
Add button to clear clipboard.
2018-02-25 07:00:28 +00:00
<span>The clipboard contains <span class="clipboard_count">0</span> items.</span>
<button id="clear_clipboard_button" class="red_button" onclick="clear_photo_clipboard()">Clear it.</button>
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
<div id="photo_card_holder">
</div>
</div>
<div id="right">
<div id="add_tag_area">
<input type="text" id="add_tag_textbox">
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
<button class="add_tag_button green_button" id="add_tag_button" onclick="submit_add_tag(add_remove_callback);">Add tag</button>
Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
</div>
Give Photos a `searchhidden` property. By default, photos with searchhidden do not appear in the search results. This allows a small number of representative images from a large album to appear in the results, while the rest can be found on the album's page. The same effect could be achieved with a tag and forbid search, but tag searching has much higher cost and it would be more difficult to implement as a default behavior without requiring lots of special checks whenever listing tags etc.
2018-03-10 01:10:27 +00:00
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
<div id="remove_tag_area">
<input type="text" id="remove_tag_textbox">
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
<button class="red_button" id="remove_tag_button" onclick="submit_remove_tag(add_remove_callback);">Remove tag</button>
</div>
Give Photos a `searchhidden` property. By default, photos with searchhidden do not appear in the search results. This allows a small number of representative images from a large album to appear in the results, while the rest can be found on the album's page. The same effect could be achieved with a tag and forbid search, but tag searching has much higher cost and it would be more difficult to implement as a default behavior without requiring lots of special checks whenever listing tags etc.
2018-03-10 01:10:27 +00:00
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
<div id="refresh_metadata_area">
<button class="green_button" id="refresh_metadata_button" onclick="submit_refresh_metadata(refresh_metadata_callback);">Refresh metadata</button>
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
</div>
Give Photos a `searchhidden` property. By default, photos with searchhidden do not appear in the search results. This allows a small number of representative images from a large album to appear in the results, while the rest can be found on the album's page. The same effect could be achieved with a tag and forbid search, but tag searching has much higher cost and it would be more difficult to implement as a default behavior without requiring lots of special checks whenever listing tags etc.
2018-03-10 01:10:27 +00:00
<div id="searchhidden_area">
<span>
<button class="yellow_button" id="set_searchhidden_button" onclick="submit_set_searchhidden(searchhidden_callback)">Searchhide</button>
<button class="yellow_button" id="unset_searchhidden_button" onclick="submit_unset_searchhidden(searchhidden_callback)">Unhide</button>
</span>
</div>
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
<div id="message_area">
</div>
</div>
Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
</body>
<script type="text/javascript">
var divs = {};
var needed = new Set();
var holder = document.getElementById("photo_card_holder");
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
var add_box = document.getElementById("add_tag_textbox");
var add_button = document.getElementById("add_tag_button");
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
add_box.addEventListener("keyup", entry_with_history_hook);
bind_box_to_button(add_box, add_button);
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
var remove_box = document.getElementById("remove_tag_textbox");
var remove_button = document.getElementById("remove_tag_button");
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
remove_box.addEventListener("keyup", entry_with_history_hook);
bind_box_to_button(remove_box, remove_button);
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
function recalculate_needed()
{
needed = new Set();
photo_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];
var should_keep = photo_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;
}
Rename URL /photo_cards -> /batch/photos/photo_card.
2018-02-20 07:44:24 +00:00
var url = "/batch/photos/photo_card";
Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
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;
}
response = response["data"];
var holder = document.getElementById("photo_card_holder");
for (photo_id in response)
{
photo_div = html_to_element(response[photo_id]);
divs[photo_id] = photo_div;
needed.delete(photo_id)
holder.appendChild(photo_div);
}
apply_check_all();
}
post(url, data, callback);
}
function myhook()
{
recalculate_needed();
request_more_divs();
refresh_divs();
}
on_clipboard_load_hooks.push(myhook);
Add CSS clipboard_size; and other clip hook improvements. Any element with class clipboard_size will have its text updated; Removed the call to on_pageload from save_ because it redundantly causes a load. Separate those update hooks.
2018-02-21 04:20:20 +00:00
on_clipboard_save_hooks.push(myhook);
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
function submit_add_tag(callback)
{
var box = document.getElementById("add_tag_textbox");
var tagname = box.value.trim();
if (! tagname)
{return}
box.value = "";
return submit_add_remove_tag("add", tagname, callback);
}
function submit_remove_tag(callback)
{
var box = document.getElementById("remove_tag_textbox");
var tagname = box.value.trim();
if (! tagname)
{return}
box.value = "";
return submit_add_remove_tag("remove", tagname, callback);
}
function submit_add_remove_tag(action, tagname, callback)
{
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
if (photo_clipboard.size == 0)
{return;}
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
var url = "/batch/photos/" + action + "_tag";
var photo_ids = Array.from(photo_clipboard).join(",");
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
var data = new FormData();
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
data.append("photo_ids", photo_ids);
data.append("tagname", tagname);
post(url, data, callback);
}
function add_remove_callback(response)
{
response = response["data"];
var tagname = response["tagname"];
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
var message_area = document.getElementById("message_area");
Add /clipboard UI for mass-tagging.
2018-02-22 23:23:57 +00:00
var message_positivity;
var message_text;
if ("error_type" in response)
{
message_positivity = "message_negative";
message_text = response["error_message"];
}
else if ("action" in response)
{
var action = response["action"];
message_positivity = "message_positive";
if (action == "add")
{message_text = "Added tag " + tagname;}
else if (action == "remove")
{message_text = "Removed tag " + tagname;}
}
create_message_bubble(message_area, message_positivity, message_text, 8000);
}
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
var refresh_in_progress = false;
function submit_refresh_metadata(callback)
{
if (refresh_in_progress)
{return;}
if (photo_clipboard.size == 0)
{return;}
var url = "/batch/photos/refresh_metadata";
var photo_ids = Array.from(photo_clipboard).join(",");
var data = new FormData();
data.append("photo_ids", photo_ids);
refresh_in_progress = true;
post(url, data, callback);
}
function refresh_metadata_callback(response)
{
Oops, use response["data"].
2018-02-27 03:06:27 +00:00
response = response["data"];
Add /clipboard UI for mass refresh metadata.
2018-02-24 21:23:35 +00:00
refresh_in_progress = false;
if ("error_type" in response)
{
var message_area = document.getElementById("message_area");
var message_positivity = "message_negative";
var message_text = response["error_message"];
create_message_bubble(message_area, message_positivity, message_text, 8000);
}
else
{
location.reload();
}
}
Give Photos a `searchhidden` property. By default, photos with searchhidden do not appear in the search results. This allows a small number of representative images from a large album to appear in the results, while the rest can be found on the album's page. The same effect could be achieved with a tag and forbid search, but tag searching has much higher cost and it would be more difficult to implement as a default behavior without requiring lots of special checks whenever listing tags etc.
2018-03-10 01:10:27 +00:00
function searchhidden_callback(response)
{
response = response["data"];
var message_area = document.getElementById("message_area");
var message_positivity;
var message_text;
if ("error_type" in response)
{
message_positivity = "message_negative";
message_text = response["error_message"];
}
else
{
message_positivity = "message_positive";
message_text = "Success."
}
create_message_bubble(message_area, message_positivity, message_text, 8000);
}
function submit_set_searchhidden()
{
var url = "/batch/photos/set_searchhidden";
var data = new FormData();
data.append("photo_ids", Array.from(photo_clipboard).join(","));
post(url, data, searchhidden_callback);
}
function submit_unset_searchhidden()
{
var url = "/batch/photos/unset_searchhidden";
var data = new FormData();
data.append("photo_ids", Array.from(photo_clipboard).join(","));
post(url, data, searchhidden_callback);
}
Add new page /clipboard, with full photo cards.
2018-02-18 03:12:34 +00:00
</script>
</html>
Reference in a new issue Copy permalink