voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add namespacing to photoclipboard.js.

Browse source
This commit is contained in:
voussoir 2018-07-22 19:43:07 -07:00
parent c7cce5a4e5
commit d7b9020585
5 changed files with 116 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
frontends/etiquette_flask/static/js/photoclipboard.js
View file

@ -1,54 +1,60 @@
var photo_clipboard = new Set(); var photo_clipboard = {};
var on_clipboard_load_hooks = [];
var on_clipboard_save_hooks = []; photo_clipboard.clipboard = new Set();
photo_clipboard.on_load_hooks = [];
photo_clipboard.on_save_hooks = [];
// Load save /////////////////////////////////////////////////////////////////////////////////////// // Load save ///////////////////////////////////////////////////////////////////////////////////////
function clear_photo_clipboard() photo_clipboard.clear_clipboard =
function clear_clipboard()
{ {
photo_clipboard.clear(); photo_clipboard.clipboard.clear();
save_photo_clipboard(); photo_clipboard.save_clipboard();
} }
function load_photo_clipboard(event) photo_clipboard.load_clipboard =
function load_clipboard(event)
{ {
console.log("Loading photo clipboard"); console.log("Loading photo clipboard.");
var stored = localStorage.getItem("photo_clipboard"); var stored = localStorage.getItem("photo_clipboard");
if (stored === null) if (stored === null)
{ {
if (photo_clipboard.size != 0) if (photo_clipboard.clipboard.size != 0)
{ {
photo_clipboard = new Set(); photo_clipboard.clipboard = new Set();
} }
} }
else else
{ {
photo_clipboard = new Set(JSON.parse(stored)); photo_clipboard.clipboard = new Set(JSON.parse(stored));
} }
for (var index = 0; index < on_clipboard_load_hooks.length; index += 1) for (var index = 0; index < photo_clipboard.on_load_hooks.length; index += 1)
{ {
on_clipboard_load_hooks[index](); photo_clipboard.on_load_hooks[index]();
} }
return photo_clipboard; return photo_clipboard.clipboard;
} }
function save_photo_clipboard() photo_clipboard.save_clipboard =
function save_clipboard()
{ {
console.log("Saving photo clipboard"); console.log("Saving photo clipboard.");
var serialized = JSON.stringify(Array.from(photo_clipboard)); var serialized = JSON.stringify(Array.from(photo_clipboard.clipboard));
localStorage.setItem("photo_clipboard", serialized); localStorage.setItem("photo_clipboard", serialized);
update_pagestate(); photo_clipboard.update_pagestate();
for (var index = 0; index < on_clipboard_save_hooks.length; index += 1) for (var index = 0; index < photo_clipboard.on_save_hooks.length; index += 1)
{ {
on_clipboard_save_hooks[index](); photo_clipboard.on_save_hooks[index]();
} }
} }
// Card management ///////////////////////////////////////////////////////////////////////////////// // Card management /////////////////////////////////////////////////////////////////////////////////
photo_clipboard.apply_check =
function apply_check(photo_card) function apply_check(photo_card)
{ {
/* /*
@ -56,7 +62,7 @@ function apply_check(photo_card)
whether the clipboard contains this card's ID. whether the clipboard contains this card's ID.
*/ */
var checkbox = photo_card.getElementsByClassName("photo_card_selector_checkbox")[0]; var checkbox = photo_card.getElementsByClassName("photo_card_selector_checkbox")[0];
if (photo_clipboard.has(photo_card.dataset.id)) if (photo_clipboard.clipboard.has(photo_card.dataset.id))
{ {
checkbox.checked = true; checkbox.checked = true;
} }
@ -66,6 +72,7 @@ function apply_check(photo_card)
} }
} }
photo_clipboard.apply_check_all =
function apply_check_all() function apply_check_all()
{ {
/* /*
@ -73,12 +80,18 @@ function apply_check_all()
correct value. correct value.
*/ */
var photo_divs = Array.from(document.getElementsByClassName("photo_card")); var photo_divs = Array.from(document.getElementsByClassName("photo_card"));
photo_divs.forEach(apply_check); photo_divs.forEach(photo_clipboard.apply_check);
} }
var _action_select = function(photo_div){photo_clipboard.add(photo_div.dataset.id)} photo_clipboard._action_select =
var _action_unselect = function(photo_div){photo_clipboard.delete(photo_div.dataset.id)} function(photo_div){photo_clipboard.clipboard.add(photo_div.dataset.id)}
var previous_photo_select = null;
photo_clipboard._action_unselect =
function(photo_div){photo_clipboard.clipboard.delete(photo_div.dataset.id)}
photo_clipboard.previous_photo_select = null;
photo_clipboard.on_photo_select =
function on_photo_select(event) function on_photo_select(event)
{ {
/* /*
@ -90,17 +103,17 @@ function on_photo_select(event)
*/ */
if (event.target.checked) if (event.target.checked)
{ {
action = _action_select; action = photo_clipboard._action_select;
} }
else else
{ {
action = _action_unselect; action = photo_clipboard._action_unselect;
} }
if (event.shiftKey && previous_photo_select) if (event.shiftKey && photo_clipboard.previous_photo_select)
{ {
var current_photo_div = event.target.parentElement; var current_photo_div = event.target.parentElement;
var previous_photo_div = previous_photo_select.target.parentElement; var previous_photo_div = photo_clipboard.previous_photo_select.target.parentElement;
var photo_divs = Array.from(current_photo_div.parentElement.children); var photo_divs = Array.from(current_photo_div.parentElement.children);
var current_index = photo_divs.indexOf(current_photo_div); var current_index = photo_divs.indexOf(current_photo_div);
@ -127,54 +140,63 @@ function on_photo_select(event)
var photo_div = event.target.parentElement; var photo_div = event.target.parentElement;
action(photo_div); action(photo_div);
} }
previous_photo_select = event; photo_clipboard.previous_photo_select = event;
save_photo_clipboard(); photo_clipboard.save_clipboard();
} }
photo_clipboard.select_photo =
function select_photo(photo_div) function select_photo(photo_div)
{ {
photo_div.getElementsByClassName("photo_card_selector_checkbox")[0].checked = true; photo_div.getElementsByClassName("photo_card_selector_checkbox")[0].checked = true;
_action_select(photo_div); photo_clipboard._action_select(photo_div);
save_photo_clipboard(); photo_clipboard.save_clipboard();
} }
photo_clipboard.unselect_photo =
function unselect_photo(photo_div) function unselect_photo(photo_div)
{ {
photo_div.getElementsByClassName("photo_card_selector_checkbox")[0].checked = false; photo_div.getElementsByClassName("photo_card_selector_checkbox")[0].checked = false;
_action_unselect(photo_div) photo_clipboard._action_unselect(photo_div)
save_photo_clipboard(); photo_clipboard.save_clipboard();
} }
photo_clipboard.select_all_photos =
function select_all_photos() function select_all_photos()
{ {
var photo_divs = Array.from(document.getElementsByClassName("photo_card")); var photo_divs = Array.from(document.getElementsByClassName("photo_card"));
photo_divs.forEach(_action_select); photo_divs.forEach(photo_clipboard._action_select);
apply_check_all(); photo_clipboard.apply_check_all();
save_photo_clipboard(); photo_clipboard.save_clipboard();
} }
photo_clipboard.unselect_all_photos =
function unselect_all_photos() function unselect_all_photos()
{ {
var photo_divs = Array.from(document.getElementsByClassName("photo_card")); var photo_divs = Array.from(document.getElementsByClassName("photo_card"));
photo_divs.forEach(_action_unselect); photo_divs.forEach(photo_clipboard._action_unselect);
apply_check_all() photo_clipboard.apply_check_all()
previous_photo_select = null; photo_clipboard.previous_photo_select = null;
save_photo_clipboard(); photo_clipboard.save_clipboard();
} }
// Tray management ///////////////////////////////////////////////////////////////////////////////// // Tray management /////////////////////////////////////////////////////////////////////////////////
photo_clipboard.clipboard_tray_collapse =
function clipboard_tray_collapse() function clipboard_tray_collapse()
{ {
var tray_body = document.getElementById("clipboard_tray_body"); var tray_body = document.getElementById("clipboard_tray_body");
tray_body.classList.add("hidden"); tray_body.classList.add("hidden");
} }
photo_clipboard.clipboard_tray_uncollapse =
function clipboard_tray_uncollapse() function clipboard_tray_uncollapse()
{ {
var tray_body = document.getElementById("clipboard_tray_body"); var tray_body = document.getElementById("clipboard_tray_body");
tray_body.classList.remove("hidden"); tray_body.classList.remove("hidden");
update_clipboard_tray(); photo_clipboard.update_clipboard_tray();
} }
photo_clipboard.clipboard_tray_collapse_toggle =
function clipboard_tray_collapse_toggle() function clipboard_tray_collapse_toggle()
{ {
/* /*
@ -186,16 +208,17 @@ function clipboard_tray_collapse_toggle()
return; return;
} }
if (tray_body.classList.contains("hidden") && photo_clipboard.size > 0) if (tray_body.classList.contains("hidden") && photo_clipboard.clipboard.size > 0)
{ {
clipboard_tray_uncollapse(); photo_clipboard.clipboard_tray_uncollapse();
} }
else else
{ {
clipboard_tray_collapse(); photo_clipboard.clipboard_tray_collapse();
} }
} }
photo_clipboard.on_tray_delete_button =
function on_tray_delete_button(event) function on_tray_delete_button(event)
{ {
/* /*
@ -203,10 +226,11 @@ function on_tray_delete_button(event)
*/ */
var clipboard_line = event.target.parentElement; var clipboard_line = event.target.parentElement;
var photo_id = clipboard_line.dataset.id; var photo_id = clipboard_line.dataset.id;
photo_clipboard.delete(photo_id); photo_clipboard.clipboard.delete(photo_id);
save_photo_clipboard(); photo_clipboard.save_clipboard();
} }
photo_clipboard.update_clipboard_tray =
function update_clipboard_tray() function update_clipboard_tray()
{ {
/* /*
@ -218,16 +242,16 @@ function update_clipboard_tray()
return; return;
} }
if (photo_clipboard.size == 0) if (photo_clipboard.clipboard.size == 0)
{ {
clipboard_tray_collapse(); photo_clipboard.clipboard_tray_collapse();
} }
var tray_lines = document.getElementById("clipboard_tray_lines"); var tray_lines = document.getElementById("clipboard_tray_lines");
if (!clipboard_tray.classList.contains("hidden")) if (!clipboard_tray.classList.contains("hidden"))
{ {
common.delete_all_children(tray_lines); common.delete_all_children(tray_lines);
var photo_ids = Array.from(photo_clipboard); var photo_ids = Array.from(photo_clipboard.clipboard);
photo_ids.sort(); photo_ids.sort();
for (var i = 0; i < photo_ids.length; i += 1) for (var i = 0; i < photo_ids.length; i += 1)
{ {
@ -238,7 +262,7 @@ function update_clipboard_tray()
var clipboard_line_delete_button = document.createElement("button"); var clipboard_line_delete_button = document.createElement("button");
clipboard_line_delete_button.classList.add("remove_tag_button_perm"); clipboard_line_delete_button.classList.add("remove_tag_button_perm");
clipboard_line_delete_button.classList.add("red_button"); clipboard_line_delete_button.classList.add("red_button");
clipboard_line_delete_button.onclick = on_tray_delete_button; clipboard_line_delete_button.onclick = photo_clipboard.on_tray_delete_button;
var clipboard_line_link = document.createElement("a"); var clipboard_line_link = document.createElement("a");
clipboard_line_link.target = "_blank"; clipboard_line_link.target = "_blank";
@ -254,44 +278,50 @@ function update_clipboard_tray()
// Page and event management /////////////////////////////////////////////////////////////////////// // Page and event management ///////////////////////////////////////////////////////////////////////
photo_clipboard.open_full_clipboard_tab =
function open_full_clipboard_tab() function open_full_clipboard_tab()
{ {
url = "/clipboard"; var url = "/clipboard";
window.open(url, "full_clipboard"); window.open(url, "full_clipboard");
} }
photo_clipboard.update_clipboard_count =
function update_clipboard_count() function update_clipboard_count()
{ {
var elements = document.getElementsByClassName("clipboard_count"); var elements = document.getElementsByClassName("clipboard_count");
for (var index = 0; index < elements.length; index += 1) for (var index = 0; index < elements.length; index += 1)
{ {
elements[index].innerText = photo_clipboard.size; elements[index].innerText = photo_clipboard.clipboard.size;
} }
} }
photo_clipboard.on_storage_event =
function on_storage_event() function on_storage_event()
{ {
/* /*
Receive storage events from other tabs and update our state to match. Receive storage events from other tabs and update our state to match.
*/ */
load_photo_clipboard(); photo_clipboard.load_clipboard();
update_pagestate(); photo_clipboard.update_pagestate();
} }
photo_clipboard.update_pagestate =
function update_pagestate() function update_pagestate()
{ {
update_clipboard_count(); photo_clipboard.update_clipboard_count();
update_clipboard_tray(); photo_clipboard.update_clipboard_tray();
apply_check_all(); photo_clipboard.apply_check_all();
} }
photo_clipboard.on_pageload =
function on_pageload() function on_pageload()
{ {
window.addEventListener("storage", on_storage_event, false); window.addEventListener("storage", photo_clipboard.on_storage_event, false);
register_hotkey("a", 1, 0, 0, select_all_photos, "Select all photos."); register_hotkey("a", 1, 0, 0, photo_clipboard.select_all_photos, "Select all photos.");
register_hotkey("d", 1, 0, 0, unselect_all_photos, "Deselect all photos."); register_hotkey("d", 1, 0, 0, photo_clipboard.unselect_all_photos, "Deselect all photos.");
register_hotkey("c", 0, 0, 0, clipboard_tray_collapse_toggle, "Toggle clipboard tray."); register_hotkey("c", 0, 0, 0, photo_clipboard.clipboard_tray_collapse_toggle, "Toggle clipboard tray.");
register_hotkey("c", 0, 1, 0, open_full_clipboard_tab, "Open full clipboard page."); register_hotkey("c", 0, 1, 0, photo_clipboard.open_full_clipboard_tab, "Open full clipboard page.");
load_photo_clipboard(); photo_clipboard.load_clipboard();
update_pagestate(); photo_clipboard.update_pagestate();
} }
document.addEventListener("DOMContentLoaded", on_pageload); document.addEventListener("DOMContentLoaded", photo_clipboard.on_pageload);

28
frontends/etiquette_flask/templates/clipboard.html
View file

@ -85,7 +85,7 @@ body
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="left"> <div id="left">
<span>The clipboard contains <span class="clipboard_count">0</span> items.</span> <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> <button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button>
<div id="photo_card_holder"> <div id="photo_card_holder">
</div> </div>
</div> </div>
@ -135,7 +135,7 @@ common.bind_box_to_button(remove_box, remove_button);
function recalculate_needed() function recalculate_needed()
{ {
needed = new Set(); needed = new Set();
photo_clipboard.forEach(function(photo_id) photo_clipboard.clipboard.forEach(function(photo_id)
{ {
if (!(photo_id in divs)) if (!(photo_id in divs))
{ {
@ -149,7 +149,7 @@ function refresh_divs()
for (var photo_id in divs) for (var photo_id in divs)
{ {
var photo_div = divs[photo_id]; var photo_div = divs[photo_id];
var should_keep = photo_clipboard.has(photo_id); var should_keep = photo_clipboard.clipboard.has(photo_id);
var on_page = holder.contains(photo_div); var on_page = holder.contains(photo_div);
if (on_page && !should_keep) if (on_page && !should_keep)
{ {
@ -187,7 +187,7 @@ function request_more_divs()
needed.delete(photo_id) needed.delete(photo_id)
holder.appendChild(photo_div); holder.appendChild(photo_div);
} }
apply_check_all(); photo_clipboard.apply_check_all();
} }
common.post(url, data, callback); common.post(url, data, callback);
} }
@ -199,8 +199,8 @@ function myhook()
refresh_divs(); refresh_divs();
} }
on_clipboard_load_hooks.push(myhook); photo_clipboard.on_load_hooks.push(myhook);
on_clipboard_save_hooks.push(myhook); photo_clipboard.on_save_hooks.push(myhook);
function submit_add_tag(callback) function submit_add_tag(callback)
@ -225,10 +225,10 @@ function submit_remove_tag(callback)
} }
function submit_add_remove_tag(action, tagname, callback) function submit_add_remove_tag(action, tagname, callback)
{ {
if (photo_clipboard.size == 0) if (photo_clipboard.clipboard.size == 0)
{return;} {return;}
var url = "/batch/photos/" + action + "_tag"; var url = "/batch/photos/" + action + "_tag";
var photo_ids = Array.from(photo_clipboard).join(","); var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
var data = new FormData(); var data = new FormData();
data.append("photo_ids", photo_ids); data.append("photo_ids", photo_ids);
data.append("tagname", tagname); data.append("tagname", tagname);
@ -266,11 +266,11 @@ function submit_refresh_metadata(callback)
if (refresh_in_progress) if (refresh_in_progress)
{return;} {return;}
if (photo_clipboard.size == 0) if (photo_clipboard.clipboard.size == 0)
{return;} {return;}
var url = "/batch/photos/refresh_metadata"; var url = "/batch/photos/refresh_metadata";
var photo_ids = Array.from(photo_clipboard).join(","); var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
var data = new FormData(); var data = new FormData();
data.append("photo_ids", photo_ids); data.append("photo_ids", photo_ids);
refresh_in_progress = true; refresh_in_progress = true;
@ -313,24 +313,24 @@ function searchhidden_callback(response)
} }
function submit_set_searchhidden(callback) function submit_set_searchhidden(callback)
{ {
if (photo_clipboard.size == 0) if (photo_clipboard.clipboard.size == 0)
{return;} {return;}
var url = "/batch/photos/set_searchhidden"; var url = "/batch/photos/set_searchhidden";
var data = new FormData(); var data = new FormData();
var photo_ids = Array.from(photo_clipboard).join(","); var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
data.append("photo_ids", photo_ids); data.append("photo_ids", photo_ids);
common.post(url, data, callback); common.post(url, data, callback);
} }
function submit_unset_searchhidden(callback) function submit_unset_searchhidden(callback)
{ {
if (photo_clipboard.size == 0) if (photo_clipboard.clipboard.size == 0)
{return;} {return;}
var url = "/batch/photos/unset_searchhidden"; var url = "/batch/photos/unset_searchhidden";
var data = new FormData(); var data = new FormData();
var photo_ids = Array.from(photo_clipboard).join(","); var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
data.append("photo_ids", photo_ids); data.append("photo_ids", photo_ids);
common.post(url, data, callback); common.post(url, data, callback);

4
frontends/etiquette_flask/templates/clipboard_tray.html
View file

@ -3,13 +3,13 @@
<button <button
id="clipboard_tray_expandbutton" id="clipboard_tray_expandbutton"
class="yellow_button" class="yellow_button"
onclick="clipboard_tray_collapse_toggle()" onclick="photo_clipboard.clipboard_tray_collapse_toggle()"
>Clipboard: <span class="clipboard_count">0</span> items</button> >Clipboard: <span class="clipboard_count">0</span> items</button>
<div id="clipboard_tray_body" class="hidden"> <div id="clipboard_tray_body" class="hidden">
<div id="clipboard_tray_toolbox"> <div id="clipboard_tray_toolbox">
<span id="clipboard_tray_toolbox_firstline"> <span id="clipboard_tray_toolbox_firstline">
<a target="_blank" href="/clipboard">Full clipboard</a> <a target="_blank" href="/clipboard">Full clipboard</a>
<button id="clear_clipboard_button" class="red_button" onclick="clear_photo_clipboard()">Clear</button> <button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear</button>
</span> </span>
<!-- More elements can be added here by the page. --> <!-- More elements can be added here by the page. -->
</div> </div>

2
frontends/etiquette_flask/templates/photo.html
View file

@ -203,7 +203,7 @@
</ul> </ul>
<div> <div>
<label class="photo_card" data-id="{{photo.id}}"><input type="checkbox" class="photo_card_selector_checkbox" onclick="on_photo_select(event)"/>Clipboard</label> <label class="photo_card" data-id="{{photo.id}}"><input type="checkbox" class="photo_card_selector_checkbox" onclick="photo_clipboard.on_photo_select(event)"/>Clipboard</label>
</div> </div>
<!-- CONTAINING ALBUMS --> <!-- CONTAINING ALBUMS -->

4
frontends/etiquette_flask/templates/photo_card.html
View file

@ -18,7 +18,7 @@
{% if view == "list" %} {% if view == "list" %}
<div class="photo_card photo_card_list" data-id="{{photo.id}}"> <div class="photo_card photo_card_list" data-id="{{photo.id}}">
<input type="checkbox" class="photo_card_selector_checkbox" onclick="on_photo_select(event)"/> <input type="checkbox" class="photo_card_selector_checkbox" onclick="photo_clipboard.on_photo_select(event)"/>
<span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span> <span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span>
<a class="photo_card_metadata" target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a> <a class="photo_card_metadata" target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a>
</div> </div>
@ -72,7 +72,7 @@
<a target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a> <a target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a>
</span> </span>
<input type="checkbox" class="photo_card_selector_checkbox" onclick="on_photo_select(event)"/> <input type="checkbox" class="photo_card_selector_checkbox" onclick="photo_clipboard.on_photo_select(event)"/>
</div> </div>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}