ShouBo/web/src/views/accessibility.vue

<template>
  <header
    v-if="ariaSettings.isCompActive"
    class="accessibility"
  >
    <template
      v-if="ariaSettings.isCursorCrosshair"
    >
      <div
        class="crosshair-h aria-control-target aria-inverse-theme"
        :style="{top: crosshairPosition.y + 'px'}"
      />
      <div
        class="crosshair-v aria-control-target aria-inverse-theme"
        :style="{left: crosshairPosition.x + 'px'}"
      />
    </template>
    <div
      v-if="ariaSettings.isMagnifying"
      class="mignify-area"
    >
      <div class="text-wrapper">
        <p>
          {{ elemType + ((elemType && elemDisc) ? ': ' : '') + elemDisc }}
        </p>
      </div>
      <button
        tabindex="0"
        aria-description="Close"
        type="button"
        @click="onClickMagnifier"
      >
        <img
          :src="assetUrls.closeMagnifyArea"
          alt="close magnify area"
        >
      </button>
    </div>

    <menu
      v-show="ariaSettings.menuMode === 'old'"
      class="old-mode-menu"
    >
      <li>
        <button
          tabindex="0"
          aria-description="Reset"
          type="button"
          @click="onClickReset"
        >
          <img
            :src="assetUrls.reset"
            alt="reset"
          >
          <span>Reset</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Sound"
          type="button"
          @click="onClickMute"
        >
          <img
            :src="ariaSettings.isMuted ? assetUrls.muteActive : assetUrls.mute"
            alt="mute"
          >
          <span>Mute</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Speech Rate"
          type="button"
          @click="onClickSpeechRate"
        >
          <img
            :src="(ariaSettings.speechRateLevel === 3) ? assetUrls.speechRate : assetUrls.speechRateActive"
            alt="speech rate"
          >
          <span>speech <br> rate</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Screen Reader"
          type="button"
          @click="onClickScreenReaderMode"
        >
          <img
            :src="(ariaSettings.readMode === 'point') ? assetUrls.screenReaderMode : assetUrls.screenReaderModeActive"
            alt="screen reader"
          >
          <span>screen <br> reader</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Color Modification"
          type="button"
          @click="onClickColorModification"
        >
          <img
            :src="assetUrls.colorTheme"
            alt="color modification"
          >
          <span>color <br> modification</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Zoom In"
          type="button"
          @click="onClickZoomIn"
        >
          <img
            :src="assetUrls.zoomIn"
            alt="zoom in"
          >
          <span>zoom in</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Zoom Out"
          type="button"
          @click="onClickZoomOut"
        >
          <img
            :src="assetUrls.zoomOut"
            alt="zoom out"
          >
          <span>zoom out</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Cursor Style"
          type="button"
          @click="onClickCursorStyle"
        >
          <img
            :src="assetUrls.cursorStyle"
            alt="cursor style"
          >
          <span>cursor <br> style</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Cross Cursor"
          type="button"
          @click="onClickCrossCursor"
        >
          <img
            :src="assetUrls.crossCursor"
            alt="cross cursor"
          >
          <span>cross <br> cursor</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Magnifier"
          type="button"
          @click="onClickMagnifier"
        >
          <img
            :src="assetUrls.magnifier"
            alt="magnifier"
          >
          <span>magnifier</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Help"
          type="button"
          @click="onClickHelp"
        >
          <img
            :src="assetUrls.help"
            alt="help"
          >
          <span>help</span>
        </button>
      </li>
      <li>
        <a
          tabindex="0"
          aria-label="Button"
          aria-description="Download Shortcut"
          ref="shortcutBtnRef"
          :href="shortcutFileText"
          download="CapitalMuseum.url"
          @click="onClickDownloadShortcut"
        >
          <img
            :src="assetUrls.shotcut"
            alt="shotcut"
          >
          <span style="margin-top: 3px;">shortcut</span>
        </a>
      </li>
      <li>
        <button
          class="special-color"
          tabindex="0"
          aria-description="Screen Reading Accessibility"
          type="button"
          @click="onClickScreenReaderAreaEntry"
        >
          <img
            :src="assetUrls.screenReaderAreaEntry"
            alt="screen reading accessibility"
          >
          <span>Screen Reading <br> Accessibility</span>
        </button>
      </li>
      <li>
        <button
          tabindex="0"
          aria-description="Quit"
          type="button"
          @click="onClickQuit"
        >
          <img
            :src="assetUrls.quit"
            alt="quit"
          >
          <span>quit</span>
        </button>
      </li>
    </menu>

    <menu
      v-show="ariaSettings.menuMode === 'blind'"
      class="blind-mode-menu"
    >
      <div class="blind-mode-title">
        <h5 tabindex="0">Intelligent blind guide</h5>
        <div class="splitter-line" />
        <h5 tabindex="0">Regional guidelines</h5>
      </div>
      <li
        class="text-button"
      >
        <button
          tabindex="0"
          aria-description="Navigation area. Please use the shortcut key to select the area."
          @mousedown="onMouseDownNavigationArea"
          @click="onClickNavigationArea"
          type="button"
        >
          <div class="button-name">
            Navigation
            <br>
            area ({{navigationAreaNum}})
          </div>
          <div class="button-shortcut">
            Alt+1
          </div>
        </button>
      </li>
      <li
        class="text-button"
      >
        <button
          tabindex="0"
          aria-description="Window area. Please use the shortcut key to select the area."
          @mousedown="onMouseDownWindowArea"
          @click="onClickWindowArea"
          type="button"
        >
          <div class="button-name">
            Window
            <br>
            area ({{viewportAreaNum}})
          </div>
          <div class="button-shortcut">
            Alt+2
          </div>
        </button>
      </li>
      <li
        class="text-button"
      >
        <button
          tabindex="0"
          aria-description="Interaction area. Please use the shortcut key to select the area."
          @mousedown="onMouseDownInteractionArea"
          @click="onClickInteractionArea"
          type="button"
        >
          <div class="button-name">
            Interaction
            <br>
            area ({{interactionAreaNum}})
          </div>
          <div class="button-shortcut">
            Alt+3
          </div>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          tabindex="0"
          aria-description="Mute"
          type="button"
          @click="onClickMute"
        >
          <img
            :src="ariaSettings.isMuted ? assetUrls.muteActive : assetUrls.mute"
            alt="mute"
          >
          <span>Mute</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          tabindex="0"
          aria-description="Help"
          type="button"
          @click="onClickHelp"
        >
          <img
            :src="assetUrls.help"
            alt="help"
          >
          <span>Help</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          tabindex="0"
          aria-description="Magnifier"
          type="button"
          @click="onClickMagnifier"
        >
          <img
            :src="assetUrls.magnifier"
            alt="magnifier"
          >
          <span>Magnifier</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          class="special-color"
          tabindex="0"
          aria-description="Elerly services"
          type="button"
          @click="onClickElderlyServicesAreaEntry"
        >
          <img
            :src="assetUrls.elderlyServicesAreaEntry"
            alt="elderly services"
          >
          <span>Elderly services</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          tabindex="0"
          aria-description="Quit"
          type="button"
          @click="onClickQuit"
        >
          <img
            :src="assetUrls.quit"
            alt="quit"
          >
          <span>Quit</span>
        </button>
      </li>
    </menu>
  </header>
</template>

<script>
import utils from "/src/utils.js"
import bigCursor from '/src/assets/images/accessibility/big-cursor.cur'
import "/src/assets/css/ariaGlobalStyle.less"
import assetUrls from '/src/assets/images/accessibility/index.js'
const config = require('/src/config.js')

const speechRateFactors = [
  0.75,
  1,
  1.25,
]

const themeList = [
  'default',
  'white',
  'blue',
  'yellow',
  'black',
]

const zoomFactors = [
  1,
  1.1,
  1.2,
  1.3,
  1.4,
  1.5,
  1.6,
  1.7,
  1.8,
  1.9,
  2,
]

const defaultAriaSettings = {
  isCompActive: false, //是否显示无障碍功能菜单
  menuMode: 'old', // 'old', 'blind'
  isMuted: false,
  speechRateLevel: 1,
  readMode: 'point', // 'point'指读, 'continue'连读
  themeIdx: 0,
  zoomLevel: 0,
  isBigCursor: false,
  isCursorCrosshair: false,
  isMagnifying: false,
}

export default {
  data() {
    return {
      assetUrls,
      ariaSettings: defaultAriaSettings,
      crosshairPosition: {
        x: -100,
        y: -100,
      },

      elemType: '',
      elemDisc: '',

      continueReadTimeoutId: null,
      continueReadTaskId: null,
      continueReadIteratorStoper: null,

      shortcutFileText: 'data:text/plain;charset=utf-8,' + encodeURIComponent(`
        [{000214A0-0000-0000-C000-000000000046}]
        Prop3=19,2
        [InternetShortcut]
        IDList=
        URL=${this.$homePageUrl}
      `),

      audioPlayer: null,

      navigationAreaNum: null,
      viewportAreaNum: null,
      interactionAreaNum: null,

      // 为了避免多余的朗读行为
      isJustMouseDown: false,
      domChangeLastTime: null,
      mutationObserver: null,
      requestReadLastTime: null,
      isJustWindowFocus: false,
    }
  },
  watch: {
    $route: {
      handler(v) {
        this.$nextTick(() => {
          this.navigationAreaNum = document.querySelectorAll('*[data-aria-navigation-area]').length
          this.viewportAreaNum = document.querySelectorAll('*[data-aria-viewport-area]').length
          this.interactionAreaNum = document.querySelectorAll('*[data-aria-interaction-area]').length
        })
      },
      immediate: true,
    },
    ariaSettings: {
      handler(v) {
        let storedSettings = localStorage.getItem('ariaSettings')
        if (storedSettings) {
          storedSettings = JSON.parse(storedSettings)
          if (utils.isSameObject(storedSettings, v)) {
            return
          }
        }
        localStorage.setItem('ariaSettings', JSON.stringify(v))
      },
      deep: true
    },
    'ariaSettings.isCompActive': {
      handler(v) {
        if (v) {
          document.body.classList.add('aria-active')
          document.documentElement.classList.add('aria-active')
          this.$emit('show')
          this.$eventBus.$emit('aria-show')
        } else {
          this.reset()
          for (const iterator of document.body.classList) {
            if (iterator === 'aria-active') {
              document.body.classList.remove(iterator)
            }
          }
          for (const iterator of document.documentElement.classList) {
            if (iterator === 'aria-active') {
              document.documentElement.classList.remove(iterator)
            }
          }
          this.$emit('hide')
          this.$eventBus.$emit('aria-hide')
        }
      },
      immediate: true,
    },
    'ariaSettings.readMode': {
      handler(v) {
        if (v === 'point') {
          this.continueReadTaskId = null
          document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
            passive: true,
          })
          document.addEventListener('mouseover', this.onMouseOverForPointRead, {
            passive: true,
          })
        } else if (v === 'continue') {
          document.removeEventListener('mouseover', this.onMouseOverForPointRead, {
            passive: true,
          })
          document.addEventListener('mouseover', this.onMouseOverForContinueRead, {
            passive: true,
          })
        }
      },
      immediate: true
    },
    'ariaSettings.themeIdx': {
      handler() {
        this.$eventBus.$emit('color-modification', this.ariaSettings.themeIdx)
        this.updateThemeClass()
      },
      immediate: true,
    },
    'ariaSettings.zoomLevel': {
      handler() {
        this.zoomPage()
      },
      immediate: true,
    },
    'ariaSettings.isBigCursor': {
      handler(v) {
        if (v) {
          const styleNode = document.createElement("style")
          styleNode.type = 'text/css'
          styleNode.id = 'aria-big-cursor-style-node'
          styleNode.innerHTML = `* {cursor: url(${bigCursor}), auto !important}`
          document.head.appendChild(styleNode)
        } else {
          const toRemove = document.getElementById('aria-big-cursor-style-node')
          if (toRemove) {
            document.head.removeChild(toRemove)
          }
        }
      },
      immediate: true,
    },
    'ariaSettings.isCursorCrosshair': {
      handler(v) {
        if (v) {
          document.addEventListener('mousemove', this.onMouseMoveForCrosshair, {
            passive: true,
          })
          this.$nextTick(() => {
            this.updateThemeClass()
          })
        } else {
          document.removeEventListener('mousemove', this.onMouseMoveForCrosshair, {
            passive: true,
          })
        }
      },
      immediate: true,
    },
    'ariaSettings.isMagnifying': {
      handler(v) {
        if (v) {
          document.body.classList.add('aria-magnifying')
          this.$eventBus.$emit('aria-show-magnify-area')
        } else {
          for (const iterator of document.body.classList) {
            if (iterator === 'aria-magnifying') {
              document.body.classList.remove(iterator)
              this.$eventBus.$emit('aria-hide-magnify-area')
            }
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    this.loadStoredSettings()
    // 在同一个域的多个页面间做同步
    window.addEventListener('storage', this.loadStoredSettings, {
      passive: true,
    })
    window.addEventListener('focus', this.onWindowFocus, {
      passive: true,
    })
    document.addEventListener('keydown', this.keyEventHandler, {
      passive: true,
    })
    document.addEventListener('focusin', this.onFocusIn, {
      passive: true,
    })
    document.addEventListener('mousedown', this.onMouseDown, {
      passive: true,
    })
    document.addEventListener('mouseover', this.onMouseOver, {
      passive: true,
    })
    document.addEventListener("visibilitychange", this.onPageVisibilityChange, {
      passive: true
    })

    this.$eventBus.$on('request-read', (text) => {
      console.log('无障碍组件收到request-read消息：', text);
      if (this.ariaSettings.isCompActive) {
        this.requestReadLastTime = Date.now()
        this.planToPlayAudio('', text)
      }
    })
    this.$eventBus.$on('request-magnify', (textObj) => {
      console.log('无障碍组件收到request-magnify消息：', textObj);
      if (this.ariaSettings.isCompActive) {
        this.elemType = textObj.elemType
        this.elemDisc = textObj.elemDisc
      }
    })
    this.$eventBus.$on('request-process-text-element', (rootElement) => {
      console.log('无障碍组件收到request-process-text-element消息：', rootElement);
      const tagNameList = [
        'span', 'em', 'i', 'small', 'b', 'strong', 'del', 'q', 'sub',
        'div', 'pre', 'p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
        'td', 'th',
      ]
      for (const tagName of tagNameList) {
        const elemList = rootElement.getElementsByTagName(tagName)
        for (const elemItem of elemList) {
          elemItem.setAttribute('tabindex', '0')
        }
      }
    })
    this.$eventBus.$on('request-process-image-element', (rootElement) => {
      console.log('无障碍组件收到request-process-image-element消息：', rootElement);
      const tagNameList = [
        'img',
      ]
      for (const tagName of tagNameList) {
        const elemList = rootElement.getElementsByTagName(tagName)
        for (const elemItem of elemList) {
          elemItem.setAttribute('tabindex', '0')
        }
      }
    })

    const config = { attributes: true, childList: true, subtree: true };
    const callback = (mutationsList, observer) => {
      this.domChangeLastTime = Date.now()
    };
    this.mutationObserver = new MutationObserver(callback);
    this.mutationObserver.observe(document.body, config);
  },
  mounted() {
  },
  destroyed() {
    window.removeEventListener('storage', this.loadStoredSettings, {
      passive: true,
    }),
    window.removeEventListener('focus', this.onWindowFocus, {
      passive: true,
    }),
    document.removeEventListener('keydown', this.keyEventHandler, {
      passive: true,
    })
    document.removeEventListener('focusin', this.onFocusIn, {
      passive: true,
    })
    document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
      passive: true,
    })
    document.removeEventListener('mouseover', this.onMouseOverForPointRead, {
      passive: true,
    })
    document.removeEventListener('mousedown', this.onMouseDown, {
      passive: true,
    })
    document.removeEventListener("visibilitychange", this.onPageVisibilityChange, {
      passive: true
    })

    this.$eventBus.$off('request-read')
    this.$eventBus.$off('request-magnify')
    this.$eventBus.$off('request-process-text-element')
    this.$eventBus.$off('request-process-image-element')
    
    this.mutationObserver.disconnect();
  },
  methods: {
    onWindowFocus() {
      this.isJustWindowFocus = true
      setTimeout(() => {
        this.isJustWindowFocus = false
      }, 0);
    },
    onPageVisibilityChange() {
      if (document.visibilityState === 'hidden') {
        if (this.audioPlayer && !this.audioPlayer.ended) {
          this.audioPlayer.pause()
        }
      }
    },
    onMouseDown() {
      this.isJustMouseDown = true
      setTimeout(() => {
        this.isJustMouseDown = false
      }, 0);
    },
    planToPlayAudio(taskId, text = '') {
      let XHR = new XMLHttpRequest()
      const that = this
      XHR.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
          const res = JSON.parse(this.response)
          if (that.audioPlayer && !that.audioPlayer.ended) {
            that.audioPlayer.pause()
          }
          that.audioPlayer = new Audio('http://192.168.0.245:8008' + res.msg)
          that.audioPlayer.muted = that.ariaSettings.isMuted
          that.audioPlayer.playbackRate = speechRateFactors[that.ariaSettings.speechRateLevel]
          that.audioPlayer.oncanplaythrough = () => {
            that.audioPlayer.play()
          }
          that.audioPlayer.onended = () => {
            that.$emit('audio-end', taskId)
          }
          that.audioPlayer.onerror = (e) => {
            console.error('audio error!', e)
            that.$emit('audio-error', taskId)
          }
          that.audioPlayer.onabort = () => {
            that.$emit('audio-abort', taskId)
          }
        }
      }
      XHR.open("POST", "http://192.168.0.245:8008/api/tts/toMp3")
      XHR.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
      XHR.send(JSON.stringify({
        content: text || this.elemType + (this.elemType ? ': ' : '') + this.elemDisc
      }))
    },
    keyEventHandler(e) {
      if (e.repeat) {
        return
      }
      if (e.key === "?" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickHelp()
        }
      } else if (e.key === "Q" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickQuit()
        }
      } else if (e.key === "!" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickReset()
        }
      } else if (e.key === "@" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickMute()
        }
      } else if (e.key === "#" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickSpeechRate()
        }
      } else if (e.key === "$" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickScreenReaderMode()
        }
      } else if (e.key === "%" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickColorModification()
        }
      } else if (e.key === "^" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickZoomIn()
        }
      } else if (e.key === "&" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickZoomOut()
        }
      } else if (e.key === "*" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickCursorStyle()
        }
      } else if (e.key === "(" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickCrossCursor()
        }
      } else if (e.key === ")" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          if (this.ariaSettings.menuMode === 'old') {
            this.onClickScreenReaderAreaEntry()
          } else if (this.ariaSettings.menuMode === 'blind') {
            this.onClickElderlyServicesAreaEntry()
          }
        }
      } else if (e.key === "D" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.$refs['shortcutBtnRef'].click()
        }
      } else if (e.key === "N" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickMagnifier()
        }
      } else if (e.key === "1" && e.altKey && !e.ctrlKey && !e.shiftKey) {
        this.onClickNavigationArea()
      } else if (e.key === "2" && e.altKey && !e.ctrlKey && !e.shiftKey) {
        this.onClickWindowArea()
      } else if (e.key === "3" && e.altKey && !e.ctrlKey && !e.shiftKey) {
        this.onClickInteractionArea()
      }
    },
    loadStoredSettings() {
      const settings = localStorage.getItem('ariaSettings')
      if (settings) {
        this.ariaSettings = JSON.parse(settings)
      }
    },
    zoomPage() {
      let styleNode = document.getElementById('aria-zoom-style-node')
      if (!styleNode) {
        styleNode = document.createElement("style")
        styleNode.type = 'text/css'
        styleNode.id = 'aria-zoom-style-node'
        document.head.appendChild(styleNode)
      }
      if (zoomFactors[this.ariaSettings.zoomLevel] === 1) {
        styleNode.innerHTML = ''
      } else {
        styleNode.innerHTML = `
          .aria-control-target {
            transform: scale(${zoomFactors[this.ariaSettings.zoomLevel]});
            transform-origin: left top;
          }
          .aria-no-zoom {
            transform: scale(${1 / zoomFactors[this.ariaSettings.zoomLevel]});
            transform-origin: left top;
          }
        `
      }
      document.documentElement.scrollLeft = (document.documentElement.scrollWidth - document.documentElement.clientWidth) / 2
    },
    updateThemeClass() {
      this.$nextTick(() => {
        const controlTargetNodeList = [...document.getElementsByClassName('aria-control-target')]
        for (const node of controlTargetNodeList) {
          for (const iterator of node.classList) {
            if (iterator.indexOf('aria-theme-') > -1) {
              node.classList.remove(iterator)
            }
          }
          node.classList.add(`aria-theme-${themeList[this.ariaSettings.themeIdx]}`)
        }
      })
    },
    onMouseMoveForCrosshair(e) {
      this.crosshairPosition.x = e.clientX
      this.crosshairPosition.y = e.clientY
    },
    onMouseOverForPointRead: utils.debounce(function(e) {
      if (!this.ariaSettings.isCompActive) {
        return
      }
      const curTime = Date.now()
      if (curTime - this.domChangeLastTime <= 500 + 100) {
        console.log('DOM刚改变，忽略hover。');
        return
      }
      if (curTime - this.requestReadLastTime <= 500 + 100) {
        console.log('刚被要求朗读，忽略hover。');
        return
      }
      const extractedText = utils.extractTextForMagnify(e)
      if (extractedText) {
        this.elemType = extractedText.elemType
        this.elemDisc = extractedText.elemDisc

        this.planToPlayAudio()
      }
    }, 500),
    onMouseOverForContinueRead(e) {
      if (!this.ariaSettings.isCompActive) {
        return
      }
      const curTime = Date.now()
      if (curTime - this.domChangeLastTime <= 100) {
        console.log('DOM刚改变，忽略hover。');
        return
      }
      if (curTime - this.requestReadLastTime <= 100) {
        console.log('刚被要求朗读，忽略hover。');
        return
      }
      const extractedText = utils.extractTextForMagnify(e)
      if (extractedText) {
        this.elemType = extractedText.elemType
        this.elemDisc = extractedText.elemDisc
        clearTimeout(this.continueReadTimeoutId)
        this.continueReadTimeoutId = setTimeout(() => {
          this.continueReadIteratorStoper && this.continueReadIteratorStoper()
          if (this.ariaSettings.readMode !== 'continue') {
            return
          }
          const continueReadTaskId = (new Date).getTime()
          this.continueReadTaskId = continueReadTaskId
          utils.iterateOnFocusableNode(e.target, (node) => {
            return new Promise((resolve, reject) => {
              this.continueReadIteratorStoper = reject
              this.$once('audio-end', (taskId) => {
                if (taskId === continueReadTaskId) {
                  resolve()
                }
              })
              this.$once('audio-error', (taskId) => {
                if (taskId === continueReadTaskId) {
                  resolve()
                }
              })
              this.$once('audio-abort', (taskId) => {
                if (taskId === continueReadTaskId) {
                  resolve()
                }
              })
            })
          })
        }, 1000)
      }
    },
    onFocusIn(e) {
      if (!this.ariaSettings.isCompActive) {
        return
      }
      // 如果刚刚切换到此浏览器此页面，虽然会导致上次离开前focus到的元素的再次focus，但不能重复朗读。
      if (this.isJustWindowFocus) {
        console.log('刚刚切换到此浏览器此页面，导致上次离开前focus到的元素的再次focus，忽略之。')
        return
      }
      // 如果是点击鼠标引起的focus
      if (this.isJustMouseDown) {
        if (
          document.activeElement.dataset.ariaNavigationArea !== undefined ||
          document.activeElement.dataset.ariaViewportArea !== undefined ||
          document.activeElement.dataset.ariaInteractionArea !== undefined
        ) {
          document.activeElement.blur()
        }
        console.log('刚按下鼠标，忽略focus。');
        return
      }
      const extractedText = utils.extractTextForMagnify(e, true)
      if (extractedText) {
        this.elemType = extractedText.elemType
        this.elemDisc = extractedText.elemDisc

        this.planToPlayAudio(this.continueReadTaskId)
      }
    },
    reset() {
      const copy = { ...defaultAriaSettings }
      copy.isCompActive = this.ariaSettings.isCompActive
      this.ariaSettings = copy
    },
    onClickReset() {
      this.$eventBus.$emit('request-read', "You've reset the feature settings")
      this.reset()
    },
    onClickMute() {
      this.ariaSettings.isMuted = !this.ariaSettings.isMuted
      if (this.ariaSettings.isMuted) {
        // this.$eventBus.$emit('request-read', "Sound off")
      } else {
        this.$eventBus.$emit('request-read', "Sound on")
      }
      if (this.audioPlayer) {
        this.audioPlayer.muted = this.ariaSettings.isMuted
      }
    },
    onClickSpeechRate() {
      this.ariaSettings.speechRateLevel++
      if (this.ariaSettings.speechRateLevel === speechRateFactors.length) {
        this.ariaSettings.speechRateLevel = 0
      }
      if (this.ariaSettings.speechRateLevel === 0) {
        this.$eventBus.$emit('request-read', "Speak slowly")
      } else if (this.ariaSettings.speechRateLevel === 1) {
        this.$eventBus.$emit('request-read', "Speak normally")
      } else if (this.ariaSettings.speechRateLevel === 2) {
        this.$eventBus.$emit('request-read', "Speak fast")
      }
      if (this.audioPlayer) {
        this.audioPlayer.playbackRate = speechRateFactors[this.ariaSettings.speechRateLevel]
      }
    },
    onClickScreenReaderMode() {
      if (this.ariaSettings.readMode === 'point') {
        this.$eventBus.$emit('request-read', "You've enabled continuous reading mode. Please move the mouse over on the text you need to read，it'll start reading the screen in 1 second. When reading the link, tap the Enter key to enter the corresponding page.")
        this.ariaSettings.readMode = 'continue'
      } else if (this.ariaSettings.readMode === 'continue') {
        this.$eventBus.$emit('request-read', "You've enabled read-only mode. Please move the mouse over on the text you need to read，Blind users can operate the keyboard directly.")
        this.ariaSettings.readMode = 'point'
      }
    },
    onClickColorModification() {
      this.ariaSettings.themeIdx++
      if (this.ariaSettings.themeIdx === themeList.length) {
        this.ariaSettings.themeIdx = 0
      }
      if (this.ariaSettings.themeIdx === 0) {
        this.$eventBus.$emit('request-read', "Ajust to standard color.")
      } else if (this.ariaSettings.themeIdx === 1) {
        this.$eventBus.$emit('request-read', "Adjust to black lettering on white background.")
      } else if (this.ariaSettings.themeIdx === 2) {
        this.$eventBus.$emit('request-read', "Adjust to yellow lettering on blue background.")
      } else if (this.ariaSettings.themeIdx === 3) {
        this.$eventBus.$emit('request-read', "Adjust to black lettering on yellow background.")
      } else if (this.ariaSettings.themeIdx === 4) {
        this.$eventBus.$emit('request-read', "Adjust to yellow lettering on black background.")
      }
    },
    onClickZoomIn() {
      if (this.ariaSettings.zoomLevel === zoomFactors.length - 1) {
        return
      }
      this.$eventBus.$emit('request-read', "Zooming in on page")
      this.ariaSettings.zoomLevel++
    },
    onClickZoomOut() {
      if (this.ariaSettings.zoomLevel === 0) {
        return
      }
      this.$eventBus.$emit('request-read', "Zooming out on page")
      this.ariaSettings.zoomLevel--
    },
    onClickCursorStyle() {
      this.ariaSettings.isBigCursor = !this.ariaSettings.isBigCursor
      if (this.ariaSettings.isBigCursor) {
        this.$eventBus.$emit('request-read', "You've enabled the large cursor")
      } else {
        this.$eventBus.$emit('request-read', "You've disabled the large cursor")
      }
    },
    onClickCrossCursor() {
      this.ariaSettings.isCursorCrosshair = !this.ariaSettings.isCursorCrosshair
      if (this.ariaSettings.isCursorCrosshair) {
        this.$eventBus.$emit('request-read', "You've enabled the cross cursor")
      } else {
        this.$eventBus.$emit('request-read', "You've disabled the cross cursor")
      }
    },
    onClickMagnifier() {
      this.ariaSettings.isMagnifying = !this.ariaSettings.isMagnifying
      if (this.ariaSettings.isMagnifying) {
        this.$eventBus.$emit('request-read', "You've enabled the magnifier")
      } else {
        this.$eventBus.$emit('request-read', "You've disabled the magnifier")
      }
    },
    onClickHelp() {
      window.open(config.publicPath + 'help.html')
    },
    onClickDownloadShortcut() {
      this.$eventBus.$emit('request-read', "You are downloading the shortcut. Double click the shortcut to reach the website.")
    },
    onClickElderlyServicesAreaEntry() {
      this.ariaSettings.menuMode = 'old'
      this.$eventBus.$emit('request-read', "You've switched to the elderly services mode.")
    },
    onClickScreenReaderAreaEntry() {
      this.ariaSettings.menuMode = 'blind'
      this.$eventBus.$emit('request-read', "You've switched to screen the reading accessibility mode.")
    },
    onMouseDownNavigationArea(e) {
      e.preventDefault()
    },
    onClickNavigationArea() {
      utils.getAndFocusNextNodeWithCustomAttribute('ariaNavigationArea')
    },
    onMouseDownWindowArea(e) {
      e.preventDefault()
    },
    onClickWindowArea() {
      utils.getAndFocusNextNodeWithCustomAttribute('ariaViewportArea')
    },
    onMouseDownInteractionArea(e) {
      e.preventDefault()
    },
    onClickInteractionArea() {
      utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractionArea')
    },
    onClickQuit() {
      this.ariaSettings.isCompActive = false
    },

    // 供外界调用
    requestToShowMenu() {
      !this.ariaSettings.isCompActive && (this.ariaSettings.isCompActive = true)
    },
    requestToHideMenu() {
      this.ariaSettings.isCompActive && (this.ariaSettings.isCompActive = false)
    },
    requestToSwitchMenuShowHide() {
      this.ariaSettings.isCompActive = !this.ariaSettings.isCompActive
    },
  }
}
</script>

<style lang="less" scoped>
@import '/src/assets/css/common.less';

li {
  list-style: none;
}
button {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  &:focus {
    outline: 3px solid red;
  }
}
a {
  color: inherit;
  text-decoration: none;
  &:focus {
    outline: 3px solid red;
  }
}

.accessibility {
  color: #fff;
  font-size: 16px;
  font-family: SourceHanSansCN-Bold-GBpc-EUC-H;
  line-height: 19px;
  background-color: #36584C;
  height: @accessibility-menu-height;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  .crosshair-h {
    position: fixed;
    width: 100%;
    height: 3px;
    background: blue;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
  }
  .crosshair-v {
    position: fixed;
    height: 100vh;
    width: 3px;
    background: blue;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
  }
  .mignify-area {
    position: fixed;
    height: @magnify-area-height;
    width: 100%;
    bottom: 0;
    background: #fff;
    z-index: 1;
    display: flex;
    .text-wrapper {
      height: @magnify-area-height;
      line-height: @magnify-area-height;
      width: 1px;
      flex: 1 0 auto;
      overflow: auto;
      text-align: center;
      white-space: break-spaces;
      p {
        vertical-align: middle;
        display: inline-block;
        color: #000;
        font-size: 72px;
        font-family: Source Han Sans CN;
        font-weight: 800;
        line-height: 86px;
      }
    }
    button {
      width: 199px;
      height: 100%;
      flex: 0 0 auto;
    }
  }

  .old-mode-menu {
    display: flex;
    justify-content: center;
    height: 100%;
    li {
      button, a {
        box-sizing: border-box;
        color: white;
        height: 100%;
        padding-top: 10px;
        width: @accessibility-menu-height;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:hover {
          background-color: #4D2128;
        }
        &.special-color:not(:hover) {
          background-color: #701c12;
        }
        img {
          width: 50px;
          height: 50px;
        }
        span {
          display: block;
          margin-top: 5px;
        }
      }
    }
  }
  .blind-mode-menu {
    display: flex;
    justify-content: center;
    height: 100%;
    .blind-mode-title {
      width: 231px;
      height: 80px;
      background: #753641;
      border-radius: 20px;
      border: 2px solid rgb(136, 67, 79);
      text-align: center;
      margin-top: 12px;
      margin-right: 30px;
      h5 {
        font-size: 18px;
        line-height: 36px;
      }
      .splitter-line {
        width: 208px;
        height: 0px;
        border: 1px solid rgb(136, 67, 79);
        margin: 0 auto;
      }
    }
    li.text-button:nth-of-type(3) {
      margin-right: 100px;
    }
    li.text-button {
      button {
        width: 125px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        &:hover {
          background-color: #4D2128;
        }
        .button-name {
          font-size: 14px;
          line-height: 21px;
          margin-bottom: 6px;
        }
        .button-shortcut {
          font-size: 16px;
        }
      }
    }
    li.image-button {
      button {
        color: white;
        height: 100%;
        padding-top: 10px;
        width: @accessibility-menu-height;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:hover {
          background-color: #4D2128;
        }
        &.special-color:not(:hover) {
          background-color: #701c12;
        }
        img {
          width: 50px;
          height: 50px;
        }
        span {
          display: block;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>