db-lgtv-focus-engine/tool/dialog/index.js

the Best TV focus engine

const Dialog = {
  install: function (engine) {
    let dialog = document.createElement('div')
    let style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
    .db-dialog-shadow {
      height: 100vh;
      width: 100vw;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .db-dialog-shadow-box {
      width: 3.9375rem;
      height: 2.14583rem;
      background: #3d3d3d;
      border-radius: 0.05208rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .db-dialog-shadow-box-title {
      font-size: 0.20833rem;
        font-weight: 400;
        color: #ffffff;
    }
    .db-dialog-shadow-box-content {
      margin-top: 0.20833rem;
        font-size: 0.16667rem;
        font-weight: 400;
        color: rgba(238, 238, 238, 0.8);
    }
    .db-dialog-shadow-box-btns {
      width: 90%;
      display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 0.20833rem;
    }
    .db-dialog-shadow-box-btns-item {
          width: 1.39583rem;
          height: 0.41667rem;
          background: rgba(255, 255, 255, 0.1);
          box-shadow: 0 0.02604rem 0.02604rem 0 rgb(0 0 0 / 25%);
          border-radius: 0.26042rem;
          border-width: 0;
          font-size: 0.16667rem;
          font-weight: 400;
          color: rgba(238, 238, 238, 0.6);
          line-height: 0.23438rem;
          display: flex;
          justify-content: center;
          align-items: center;
    }
    .db-dialog-shadow-box-btns-item[db-focus] {
            color: #000000;
            background: #ffffff;
    }`
    engine.$dialog = function (option) {
      dialog.innerHTML = `
    <div class="db-dialog-shadow">
      <div class="db-dialog-shadow-box">
        <div class="db-dialog-shadow-box-title">${option.title}</div>
        <div class="db-dialog-shadow-box-content">${option.content}</div>
        <div class="db-dialog-shadow-box-btns"></div>
      </div>
    </div>
    `
      let btns = dialog.getElementsByClassName('db-dialog-shadow-box-btns')[0]
      option.buttons.map(_i => {
        let tmp = document.createElement('div')
        tmp.innerHTML = `<div class="db-dialog-shadow-box-btns-item ${_i.class}" db-leaf>${_i.label}</div>`
        let btn = tmp.children[0]
        let old = _i.callback
        _i.callback = () => {
          document.body.removeChild(dialog)
          document.body.removeChild(style)
          this.leaf_pool.forEach(leaf => {
            leaf.unfreeze()
          })
          old()
        }
        btn.addEventListener('ok', _i.callback || (() => {}))
        _i.el = btn
        return btn
      }).forEach(el => {
        btns.appendChild(el)
      })
      this.leaf_pool.forEach(leaf => {
        leaf.freeze()
      })
      setTimeout(() => {
        let default_btn = (option.buttons.find(_i => _i.default) || option.buttons[0])
        if (!default_btn) return
        let leaf = this.findLeafByDom(default_btn.el)
        if (!leaf) return
        leaf.focus()
      })
      document.body.appendChild(dialog)
      document.body.appendChild(style)
    }
  }
}

export default Dialog