compdfkit_web_viewer/packages/webview/src/components/SearchContainer/SearchHeader.vue

<template>
  <div id="findbar" class="findbar">
    <div id="findbarInputContainer" class="findbar-input-container">
      <div class="input-container">
        <input type="text" autocomplete="off" :placeholder="$t('leftPanel.searchPdf')" v-model="searchValue">
        <EmptyInput id="emptyInput" class="empty-input" :class="!searchValue && 'hidden'" @click="clearSearchResults" />
      </div>
      <div class="button-container">
        <Button
          img="icon-previous-left"
          id="findPrevious"
          class="toolbarButton"
          :class="!searchResults.length && 'disabled'"
          :title="$t('leftPanel.previousPhrase')"
          @click="previousButton"
        ><ArrowPrev />
        </Button>
        <Button
          img="icon-next-right"
          id="findNext"
          class="toolbarButton"
          :class="!searchResults.length && 'disabled'"
          :title="$t('leftPanel.nextPhrase')"
          @click="nextButton"
        ><ArrowNext />
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import debounce from 'lodash.debounce'
  import { ref, watch, computed, toRaw } from "vue"
  import core from '@/core'
  import { useDocumentStore } from '@/stores/modules/document'
  import { useViewerStore } from '@/stores/modules/viewer'

  const waitTime = 200
  const isSearching = ref(false)
  const searchValue = ref('')
  const useDocument = useDocumentStore()
  const useViewer  = useViewerStore()
  const searchResults = ref([])
  const rawActiveIndex = ref(0)

  const previousButton = () => {
    const reseults = searchResults.value
    const activeIndex = rawActiveIndex.value
    if (reseults.length > 0) {
      const prevIndex = activeIndex <= 0 ? reseults.length - 1 : activeIndex - 1
      core.setActiveSearchResult(toRaw(reseults[prevIndex]), prevIndex)
      rawActiveIndex.value = prevIndex
    }
  }

  const nextButton = () => {
    const reseults = searchResults.value
    const activeIndex = rawActiveIndex.value
    if (reseults.length > 0) {
      const nextIndex = activeIndex === reseults.length - 1 ? 0 : activeIndex + 1
      core.setActiveSearchResult(toRaw(reseults[nextIndex]), nextIndex)
      rawActiveIndex.value = nextIndex
    }
  }

  const clearSearchResults = () => {
    isSearching.value = false
    searchValue.value = ''
    useDocument.setSearchResults([])
    core.clearSearchResults()
    searchResults.value = []
  }
  const debouncedSearch = debounce(async (searchValue) => {
    if (searchValue && searchValue.length > 0) {
      isSearching.value = true
      const results = await core.search(searchValue)
      useDocument.setSearchResults(results)
      searchResults.value = results
    } else {
      clearSearchResults()
    }
  }, waitTime)
  const textInputChange = (searchValue) => {
    debouncedSearch(searchValue)
  }
  watch(searchValue, () => {
    textInputChange(searchValue.value)

    rawActiveIndex.value = 0
  })

  const activeTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
  const isLeftPanelOpen = computed(() => useViewer.isElementOpen('leftPanel'))
  watch([activeTab, isLeftPanelOpen], () => {
    if (activeTab.value !== 'SEARCH' || !isLeftPanelOpen.value) {
      core.clearSearchResults()
      searchValue.value = ''
      rawActiveIndex.value = 0
    }
  })
</script>

<style lang="scss">
  .findbar {
    padding: 8px 0 8px 8px;
    .findbar-input-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .input-container {
      position: relative;
      flex-grow: 1;
      display: flex;
      width: 180px;
      padding: 0 8px;
      border-radius: 1px;
      border: 1px solid var(--c-findbar-input-border);
      background-color: var(--c-findbar-input-bg);
    }
    input {
      flex-grow: 1;
      width: 0;
      height: 30px;
      outline: none;
      padding: 5px 20px 5px 0px;
      box-shadow: none;
      border: none;
      background-color: var(--c-findbar-input-bg);
      color: var(--c-findbar-text);
    }
    .empty-input {
      position: absolute;
      right: 4px;
      top: 7px;
      cursor: pointer;
    }
    .toolbarLabel {
      font-size: 14px;
      line-height: 30px;
      color: var(--c-findbar-text);
      white-space: nowrap;
    }
    .button-container {
      display: flex;
      align-items: center;
      button {
        margin-left: 8px;
        padding: 0;
        color: var(--c-findbar-text);
      }
    }
  }
</style>