visbug-lib/app/components/hotkey-map/hotkeys.element.js

<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href

import $        from 'blingblingjs'
import hotkeys  from 'hotkeys-js'

import { GuidesHotkeys }        from './guides.element'
import { InspectorHotkeys }     from './inspector.element'
import { AccessibilityHotkeys } from './accessibility.element'
import { MoveHotkeys }          from './move.element'
import { MarginHotkeys }        from './margin.element'
import { PaddingHotkeys }       from './padding.element'
import { AlignHotkeys }         from './align.element'
import { HueshiftHotkeys }      from './hueshift.element'
import { BoxshadowHotkeys }     from './boxshadow.element'
import { PositionHotkeys }      from './position.element'
import { FontHotkeys }          from './font.element'
import { TextHotkeys }          from './text.element'
import { SearchHotkeys }        from './search.element'

export class Hotkeys extends HTMLElement {

  constructor() {
    super()

    this.tool_map = {
      guides:         document.createElement('hotkeys-guides'),
      inspector:      document.createElement('hotkeys-inspector'),
      accessibility:  document.createElement('hotkeys-accessibility'),
      move:           document.createElement('hotkeys-move'),
      margin:         document.createElement('hotkeys-margin'),
      padding:        document.createElement('hotkeys-padding'),
      align:          document.createElement('hotkeys-align'),
      hueshift:       document.createElement('hotkeys-hueshift'),
      boxshadow:      document.createElement('hotkeys-boxshadow'),
      position:       document.createElement('hotkeys-position'),
      font:           document.createElement('hotkeys-font'),
      text:           document.createElement('hotkeys-text'),
      search:         document.createElement('hotkeys-search'),
    }

    Object.values(this.tool_map).forEach(tool =>
      this.appendChild(tool))
  }

  connectedCallback() {
    hotkeys('shift+/', e =>
      this.cur_tool
        ? this.hideTool()
        : this.showTool())

    hotkeys('esc', e => this.hideTool())
  }

  disconnectedCallback() {}

  hideTool() {
    if (!this.cur_tool) return
    this.cur_tool.hide()
    this.cur_tool = null
  }

  showTool() {
    this.cur_tool = this.tool_map[
      $('vis-bug')[0].activeTool]
    this.cur_tool.show()
  }
}

customElements.define('visbug-hotkeys', Hotkeys)