zoomed number

js/filter.css

@@ -126,6 +126,22 @@
 
 }
 
+.cg_popup .zoomed_number {
+    position: absolute;
+    top: 40%;
+    left: 30px;
+    color: white;
+    padding: 10px;
+    z-index: 110000;
+    background-color: rgba(128, 128, 128, 0.5);
+    /*text-align: center;*/
+}
+
+.cg_popup .zoomed.highlighted .zoomed_image {
+    border: 3px solid green;
+    padding: 2px;
+}
+
 .cg_popup .buttons button {
     margin: 5px 0 5px 0;
     padding: 4px;

js/popup.js

@@ -43,6 +43,10 @@ class State {
         if (value) item.classList.remove('hidden')
         else item.classList.add('hidden')
     }
+    static highlighted(item, value) {
+        if (value) item.classList.add('highlighted')
+        else item.classList.remove('highlighted')
+    }
 
     static render(popup) {
         const state = popup.state
@@ -53,6 +57,12 @@ class State {
         State.visible(popup.text_edit, state==State.TEXT)
         State.visible(popup.send_button, true /*!app.ui.settings.getSettingValue("ImageFilter.ClickSends")*/)
 
+        if (state==State.ZOOMED) {
+            const img_index = popup.zoomed_image_holder.image_index
+            State.highlighted(popup.zoomed, popup.picked.has(`${img_index}`))
+            popup.zoomed_number.innerHTML = `${img_index+1}/${popup.n_images}`
+        }
+
         if (document.getElementById('maskEditor') && state!=State.MASK) {
             document.getElementById('maskEditor').style.display = 'none'
         }
@@ -70,6 +80,7 @@ class Popup extends HTMLSpanElement {
         this.overlaygrid        = create('span', 'grid overlaygrid', this)
         this.zoomed             = create('span', 'zoomed', this)
         this.zoomed_image       = create('img', 'zoomed_image', this.zoomed)
+        this.zoomed_number      = create('span', 'zoomed_number', this.zoomed)
         this.text_edit          = create('textarea', 'text_edit', this)
         this.title_bar          = create('span', 'title', this)
         this.buttons            = create('span', 'buttons', this)
@@ -322,10 +333,15 @@ class Popup extends HTMLSpanElement {
                 used_keypress = true
             }
         } else if (this.state==State.ZOOMED) {
-            if (e.key==' ' || e.key=='ArrowUp') {
+            if (e.key==' ') {
                 this.state = State.FILTER
                 this.zoomed_image_holder = null
                 used_keypress = true
+            } else if (e.key=='ArrowUp') {
+                const fake_event = { target:this.zoomed_image_holder}
+                this.on_click(fake_event)
+            } else if (e.key=='ArrowDown') {
+                // select or unselect    
             } else if (e.key=='ArrowRight') {
                 this.zoomed_image_holder = this.zoomed_image_holder.nextSibling || this.zoomed_image_holder.parentNode.firstChild
                 used_keypress = true