Outline currently selected image #774
Conversation
This new logic adds an outline to the currently selected image, whether from the image history or the current image batch.
| @@ -237,6 +237,13 @@ function toggleShowLoadSpinners() { | |||
| } | |||
|
|
|||
| function clickImageInBatch(div) { | |||
| // Remove 'image-block-selected' from all image-blocks in the batch | |||
| document.querySelectorAll('#current_image_batch .image-block-selected').forEach(function (block) { | |||
There was a problem hiding this comment.
Please use standard foreach not functional forEach.
ie, foreach (let block of document.queryetc)
There was a problem hiding this comment.
Also this should probably be current_image_batch querySelectorAll, not document query that then only matches within current_image_batch
| @@ -237,6 +237,13 @@ function toggleShowLoadSpinners() { | |||
| } | |||
|
|
|||
| function clickImageInBatch(div) { | |||
| // Remove 'image-block-selected' from all image-blocks in the batch | |||
There was a problem hiding this comment.
these comments are redundant
| @@ -245,6 +252,7 @@ function clickImageInBatch(div) { | |||
| setCurrentImage(div.dataset.src, div.dataset.metadata, div.dataset.batch_id ?? '', imgElem && imgElem.dataset.previewGrow == 'true', false, true, div.dataset.is_placeholder == 'true'); | |||
| } | |||
|
|
|||
|
|
|||
| @@ -369,8 +377,7 @@ function shiftToNextImagePreview(next = true, expand = false) { | |||
| let newIndex = index + (next ? 1 : -1); | |||
| if (newIndex < 0) { | |||
| newIndex = divs.length - 1; | |||
| } | |||
| else if (newIndex >= divs.length) { | |||
| } else if (newIndex >= divs.length) { | |||
| @@ -802,6 +816,26 @@ function setCurrentImage(src, metadata = '', batchId = '', previewGrow = false, | |||
| curImg.appendChild(img); | |||
| curImg.appendChild(extrasWrapper); | |||
| } | |||
|
|
|||
| // Only remove selection from image history if we're not selecting a history image | |||
| if (batchId !== 'history') { | |||
…ry elements by Id in currentimagehandler.js
| outline-offset: -2px; | ||
| z-index: 2; | ||
| } | ||
| .image-block-selected { |
| newIndex = 0; | ||
| } | ||
| let newImg = imgs[newIndex]; | ||
| let block = findParentOfClass(newImg, 'image-block'); | ||
| for (let block of getRequiredElementById('current_image_batch').querySelectorAll('.image-block-selected')) { |
There was a problem hiding this comment.
I think setting the selection here is redundant if setCurrentImage is going to replace it right after anyway?
| @@ -139,6 +139,10 @@ function describeImage(image) { | |||
| function selectImageInHistory(image, div) { | |||
| lastHistoryImage = image.data.src; | |||
| lastHistoryImageDiv = div; | |||
| for (let selected of document.querySelectorAll('.browser-list-entry.image-block-selected, .browser-details-list-entry.image-block-selected, .image-block.image-block-selected, .model-block.image-block-selected')) { | |||
There was a problem hiding this comment.
Same as other comment, this will be overwritten by setCurrentImage?
EDIT: Oh, it's... skipped if batchId == history. But then... if you arrow key through history, it'll just be selected wrongly I think?
Having it centrally maintained in setCurrentImage is probably ideal
There was a problem hiding this comment.
I didn't know you could arrow key through history. Perhaps this needed more time in the oven (and fewer merge conflicts). Will try to edit asap. Thanks for the detailed feedback.
This new logic adds an outline to the currently selected image, whether from the image history or the current image batch.
More specifically, I have modified three files with the following code:
There's also a few line breaks removed before some "else"s, which I left as they were. I can easily go back and reinsert the line breaks if desired.
Attached example images to showcase what this looks like with the default dark theme.