Add change modify key event to document.

README.md

Add an event to document that detects when the Shift, Meta (Command), Alt (Option) and Control keys are pressed and released.

If you want to use it in IE, you need to use PollyFill of Object.assign.

I've only tested it with Chrome. Please comment if it doesn't work in other browsers.

changeModifyKey.js

(function(){
  const modifyKeys = {
    'ShiftLeft': false,
    'MetaLeft': false,
    'AltLeft': false,
    'ControlLeft': false,
    'ShiftRight': false,
    'MetaRight': false,
    'AltRight': false,
    'ControlRight': false,
  }

  const name = 'changeModifyKey'

  function buildEventDetail(event){
    return {
      key: event.key,
      code: event.code,
      state: Object.assign({}, modifyKeys, {
        Shift: modifyKeys.ShiftLeft||modifyKeys.ShiftRight,
        Meta: modifyKeys.MetaLeft||modifyKeys.MetaRight,
        Alt: modifyKeys.AltLeft||modifyKeys.AltRight,
        Control: modifyKeys.ControlLeft||modifyKeys.ControlRight
      })
    }
  }

  document.addEventListener('keydown', function(e){
    if(modifyKeys[e.code] === false){
      modifyKeys[e.code] = true
      const event = new CustomEvent(name, {
        detail: buildEventDetail(e)
      })
      this.dispatchEvent(event)
    }
  })

  document.addEventListener('keyup', function(e){
    if(modifyKeys[e.code] === true){
      modifyKeys[e.code] = false
      const event = new CustomEvent(name, {
        detail: buildEventDetail(e)
      })
      this.dispatchEvent(event)
    }
  })
})()

client.js

import 'changeModifyKey.js'

  document.addEventListener('changeModifyKey', e => {
    if(e.detail.key == 'Shift'){
      if(e.detail.state.Shift){
        // Here's what to do when the SHIFT key is pressed.
      } else {
        // Here's what to do when the SHIFT key is released.
      }
    }
  })