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

Let apply_check_all search for the checkboxes, not the photo cards.

Browse source
This commit is contained in:
voussoir 2020-09-09 20:09:41 -07:00
parent 7762a8ff07
commit 4569e7848c
2 changed files with 39 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
frontends/etiquette_flask/static/js/photo_clipboard.js
View file

@ -55,14 +55,37 @@ function save_clipboard()
// Card management ///////////////////////////////////////////////////////////////////////////////// // Card management /////////////////////////////////////////////////////////////////////////////////
photo_clipboard.apply_check = photo_clipboard.apply_check =
function apply_check(photo_card) function apply_check(checkbox)
{ {
/* /*
Given a photo card div, set its checkbox to the correct value based on Check the checkbox if this photo ID is on the clipboard.
whether the clipboard contains this card's ID.
There are two valid scenarios:
1. The checkbox is a child of a photo_card div, and that div has data-id
containing the photo id. That div will receive the CSS class
photo_card_selected or photo_card_unselected.
This is the most common usage.
2. The checkbox has its own data-photo-id, and the parent element will be
ignored. This is used only if the checkbox needs to be displayed outside
of a photo card, such as on the /photo/id page where it makes no sense
to put a photo card of the photo you're already looking at.
*/ */
let checkbox = photo_card.getElementsByClassName("photo_card_selector_checkbox")[0]; let photo_id;
checkbox.checked = photo_clipboard.clipboard.has(photo_card.dataset.id); let photo_card;
if (checkbox.dataset.photoId)
{
photo_id = checkbox.dataset.photoId;
}
else
{
photo_card = checkbox.parentElement;
photo_id = photo_card.dataset.id;
}
checkbox.checked = photo_clipboard.clipboard.has(photo_id);
if (! photo_card)
{
return;
}
if (checkbox.checked) if (checkbox.checked)
{ {
photo_card.classList.remove("photo_card_unselected"); photo_card.classList.remove("photo_card_unselected");
@ -82,8 +105,11 @@ function apply_check_all()
Run through all the photo cards on the page and set their checkbox to the Run through all the photo cards on the page and set their checkbox to the
correct value. correct value.
*/ */
let photo_divs = Array.from(document.getElementsByClassName("photo_card")); let checkboxes = document.getElementsByClassName("photo_card_selector_checkbox");
photo_divs.forEach(photo_clipboard.apply_check); for (let checkbox of checkboxes)
{
photo_clipboard.apply_check(checkbox);
}
} }
photo_clipboard._action_select = photo_clipboard._action_select =

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

@ -195,7 +195,12 @@
<li><a href="{{photo|file_link}}?download=true&original_filename=true">Download as original filename</a></li> <li><a href="{{photo|file_link}}?download=true&original_filename=true">Download as original filename</a></li>
<li><a href="{{photo|file_link}}?download=true">Download as {{photo.id}}.{{photo.extension}}</a></li> <li><a href="{{photo|file_link}}?download=true">Download as {{photo.id}}.{{photo.extension}}</a></li>
<li><button id="refresh_metadata_button" class="green_button button_with_spinner" onclick="return refresh_metadata_form();">refresh</button></li> <li><button id="refresh_metadata_button" class="green_button button_with_spinner" onclick="return refresh_metadata_form();">refresh</button></li>
<li><label class="photo_card" data-id="{{photo.id}}"><input type="checkbox" class="photo_card_selector_checkbox" onclick="return photo_clipboard.on_photo_select(event);"/>Clipboard</label></li> <li>
<label>
<input type="checkbox" class="photo_card_selector_checkbox" data-photo-id="{{photo.id}}" onchange="return photo_clipboard.on_photo_select(event);"
/>Clipboard
</label>
</li>
</ul> </ul>