Use same key to trigger two different actions in a website - TamperMonkey - JavaScript

Question

I created a TamperMonkey script to fix some bugs and create shortcuts at the website I work as Safety Specialist.

One action is to open certain images with the keys W and E. These images appear small when the page loads, and when clicked, they pop out with zoom, so I can read what is on it.

The problem is, to close them again, I have to manually click an X button, which I already set to the TAB key.

It would be way easier if the same key that opens the image close it when pressed again.

This is the script I'm using so far.

   // ZOOM LEFT MEDIA - ASSIGNED TO *W* KEY
    (function(){
  document.addEventListener('keydown', function(e) {
  if (e.keyCode == 87 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(1) > img").click(); // this will trigger the click event and load the image in bigger size
  }
}, false);
})();


   // ZOOM RIGHT MEDIA - ASSIGNED TO *E* KEY
    (function(){
  document.addEventListener('keydown', function(e) {
  if (e.keyCode == 69 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(2) > img").click(); // this will trigger the click event and load the image in bigger size
  }
}, false);
})();

   // ZOOM OUT MEDIA - ASSIGNED TO *TAB* KEY
    (function(){
  document.addEventListener('keydown', function(e) {
 // pressed TAB
  if (e.keyCode == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  document.querySelector("#root > div._1qw_lOmwJT6xuZplKq1ilH > div._26T7BbVDhm0i411GqTgBgr > div > button").click(); // this will trigger zoomed in media to be closed
  }
}, false);
})();

I'm not a developer; I'm a Photographer working as CSA/Safety Specialist while the pandemic in my country is still bad.

Any help would be much appreciated!

Answer 1

If your code adds a class to zoom the image or directly changes style of the image, you can check for that and either trigger click on image or button instead.

Another method is to store zoomed images in a list and check against it to trigger appropriate click:

const trigger = (img) =>
{
  if (!img || trigger.list.get(img)) //is img was previously zoomed?
  {
    if (img)
      trigger.list.delete(img);
    else
      trigger.list.clear();

    if (img !== false) // if false it was called from onclick of the reset button
      document.querySelector("#root > div._1qw_lOmwJT6xuZplKq1ilH > div._26T7BbVDhm0i411GqTgBgr > div > button").click();    
  }
  else
  {
    trigger.list.set(img, 1); //store image in the map
    img.click();
  }
};
trigger.list = new Map();

// ZOOM LEFT MEDIA - ASSIGNED TO *W* KEY
(function() {
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 87 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      trigger(document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(1) > img"));//this will trigger the click event and load the image in bigger size
    }
  }, false);
})();


// ZOOM RIGHT MEDIA - ASSIGNED TO *E* KEY
(function() {
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 69 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      trigger(document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(2) > img")); // this will trigger the click event and load the image in bigger size
    }
  }, false);
})();

// ZOOM OUT MEDIA - ASSIGNED TO *TAB* KEY
(function() {
  document.addEventListener('keydown', function(e) {
    // pressed TAB
    if (e.keyCode == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      trigger(); // this will trigger zoomed in media to be closed
    }
  }, false);
})();

img {
  width: 100px;
}

<div id="root">
  <div class="_207u8cFhj1qJCuOVY3G3XU">
    <div class="_22c-iquDGgsWF7kWWz--mz">
      <div class="_2-Lr5G9MaWKGAeCMsEEoBi">
        <div>
        <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj" onClick="this.style.width = '200px'">
        </div>
        <div>
        <img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj" onClick="this.style.width = '200px'">
        </div>
      </div>
    </div>
  </div>
  <div class="_1qw_lOmwJT6xuZplKq1ilH">
    <div class="_26T7BbVDhm0i411GqTgBgr">
      <div>
        <button onclick="document.querySelectorAll('img').forEach(e=>e.style.width='100px');trigger(false)">reset</button>
      </div>
    </div>
  </div>
</div>