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

the Best TV focus engine

const Loading = {
  install: function (engine) {
    let loading, shadow
    if (engine.options.LOADING) {
      loading = engine.options.LOADING
    } else {
      loading = document.createElement('div')
      loading.className = 'db-loading'
    }
    shadow = document.createElement('div')
    shadow.className = 'db-loading-shadow'
    if (engine.options.SHADOW) {
      shadow.style.background = typeof (engine.options.SHADOW) === 'string' ? engine.options.SHADOW : '#22272B'
    } else {
      shadow.style.background = 'transparent'
    }
    shadow.appendChild(loading)
    let style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
  .db-loading-shadow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .db-loading {
    width: 0.8rem;
    height: 0.8rem;
    background: url("https://jt.dangbei.net/lg/series/images/loading.png");
    background-size: 100% 100%;
    animation: load-effect 2s infinite linear;
  }
  
  @keyframes load-effect {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }`
    document.body.appendChild(shadow)
    document.body.appendChild(style)
    shadow.style.display = 'none'
    window['焦点框架-loading-加载中'] = false
    window['焦点框架-loading-加载栈'] = 0
    engine.$startLoading = ({
      LOADING,
      SHADOW = true
    } = {
      SHADOW: true
    }) => {
      window['焦点框架-loading-加载栈']++
      if (window['焦点框架-loading-加载栈'] === 1) {
        shadow.style.display = 'flex'
        if (LOADING) {
          loading = LOADING
        }
        if (SHADOW) {
          if (typeof (SHADOW) === 'string') shadow.style.background = SHADOW
          else shadow.style.background = '#22272B'
        } else {
          shadow.style.background = 'transparent'
        }
        window['焦点框架-loading-加载中'] = true
      }
    }
    engine.$endLoading = () => {
      window['焦点框架-loading-加载栈']--
      if (window['焦点框架-loading-加载栈'] <= 0) {
        window['焦点框架-loading-加载栈'] = 0
        shadow.style.display = 'none'
        window['焦点框架-loading-加载中'] = false
      }
    }
  }
}

export default Loading