@worksafevictoria/wcl7.5 1.1.0 → 1.1.2

package/src/components/SubComponents/GoogleSearch/index.vue

@@ -1,405 +0,0 @@
-<template>
-  <div class="wcl-search">
-    <div class="gcse-search"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  mounted() {
-    // console.log('Component mounted')
-    this.setupCustomeStyle()
-
-    // Introduce a delay before setting up addEventListener
-    setTimeout(() => {
-      this.setupCustomAttr()
-      this.handleSearchResultLinkTitle()
-    }, 2000) // Adjust the delay time as needed
-  },
-
-  beforeDestroy() {
-    // Remove event listeners before the component is destroyed
-    const targetNode = document.querySelector('input[name="search"]')
-    const buttonNode = document.querySelector('button.gsc-search-button')
-
-    if (targetNode) {
-      // Add keyup.enter event listener
-      targetNode.removeEventListener('keyup', this.handleKeyUp)
-      buttonNode.removeEventListener('click', this.handleKeyUp)
-    }
-    const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
-    paginationNodes.forEach((paginationNode) => {
-      paginationNode.removeEventListener('click', this.handleSearchResultTitle)
-    })
-  },
-
-  methods: {
-    // Method to customize google search style
-    setupCustomeStyle() {
-      const script = document.createElement('script')
-      script.async = true
-      script.src = 'https://cse.google.com/cse.js?cx=53b1506aa03c64160'
-      document.head.appendChild(script)
-
-      // Create a new style element
-      const style = document.createElement('style')
-      style.id = 'searchStyle' // Assign an ID to the style element
-      // The CSS we are going to inject
-      const cssVar = 'table.gssb_c {display: none !important;}'
-      // Inject the style element into the head
-      document.head.appendChild(style)
-      // Set the text content of the style element to the CSS text
-      style.textContent = cssVar
-    },
-
-    // Method to add google search input attributes
-    setupCustomAttr() {
-      console.log('setupCustomInputAttr ...')
-
-      const targetNode = document.querySelector('input[name="search"]')
-      const buttonNode = document.querySelector('button.gsc-search-button')
-
-      if (targetNode) {
-        // Add keyup.enter event listener
-        targetNode.addEventListener('keyup', this.handleKeyUp)
-        buttonNode.addEventListener('click', this.handleKeyUp)
-      }
-
-      this.setupPaginationEvent()
-    },
-
-    setupPaginationEvent() {
-      console.log('setupPaginationEvent ....')
-      // Introduce a delay before setting up addEventListener on pagination
-      setTimeout(() => {
-        this.handleSearchResultLinkTitle()
-        const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
-        console.log('paginationNodes length ..', paginationNodes.length)
-
-        if (paginationNodes && paginationNodes.length > 0) {
-          console.log('FOUND PAGINATION ....', paginationNodes)
-
-          // Loop through each element and add a click event listener
-          paginationNodes.forEach((paginationNode) => {
-            // Check if the click event listener has already been added
-            if (!paginationNode.clickEventListenerAdded) {
-              // Add a click event listener
-              paginationNode.addEventListener(
-                'click',
-                this.handleSearchResultTitle
-              )
-              // Mark that the click event listener has been added
-              paginationNode.clickEventListenerAdded = true
-              console.log('Adding a click event listener')
-            }
-          })
-        }
-      }, 2000) // Adjust the delay time as needed
-    },
-
-    // Method to trim text after '|'
-    handleSearchResultTitle() {
-      //alert('handleSearchResultTitle ....')
-      this.setupPaginationEvent()
-    },
-
-    handleSearchResultLinkTitle() {
-      //alert('handleSearchResultLinkTitle ....')
-      // Get all targetNodes with class "a.gs-title"
-      var targetNodes = document.querySelectorAll('a.gs-title')
-      console.log('search list title targetNodes :- ', targetNodes)
-
-      // Loop through each element and hide the text after the "|"
-      targetNodes.forEach(function(element) {
-        // Get the text content
-        var text = element.textContent || element.innerText
-
-        // Find the index of the "|" symbol
-        var pipeIndex = text.indexOf('|')
-        console.log('text :- ', text)
-        // If the "|" symbol is found, update the text content to display only the part before "|"
-        if (pipeIndex !== -1) {
-          element.textContent = text.substring(0, pipeIndex).trim()
-        }
-      })
-    },
-
-    handleKeyUp(event) {
-      if (event.key === 'Enter' || event.type === 'click') {
-        let keyword = event.key
-          ? event.target.value
-          : document.querySelector('input[name="search"]').value
-
-        // console.log('Enter key pressed. Value:', keyword)
-
-        // Check if the URL does not contain "/search"
-        if (keyword && !window.location.href.includes('/search')) {
-          let origin = window.location.origin
-          let hash = window.location.hash
-          let pathname = 'search'
-          let URL = origin + '/' + pathname + hash
-          // console.log('URL does not contains "/search" ...', URL)
-          window.location.assign(URL)
-        }
-
-        this.setupPaginationEvent
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import '../../../includes/scss/all';
-
-.wcl-search {
-  :deep(form.gsc-search-box) {
-    position: relative;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -ms-flex-align: stretch;
-    align-items: stretch;
-    width: 100%;
-  }
-  :deep(.gsib_a) {
-    padding: 0 !important;
-    height: 56px;
-  }
-  :deep(.gsib_b) {
-    position: absolute;
-    right: 5px;
-    top: 15px;
-  }
-  :deep(.gcsc-more-maybe-branding-root) {
-    display: none;
-  }
-  :deep(table.gsc-input) {
-    position: relative;
-  }
-  :deep(td.gsc-input) {
-    border: none;
-    padding: 0;
-    width: 100%;
-  }
-  :deep(.gsc-input-box) {
-    border: none;
-  }
-  :deep(input.gsc-input) {
-    border-radius: 8px 0px 0px 8px;
-    border: 1px solid $gray !important;
-    border-right: 0 !important;
-    background: none !important;
-    color: #495057;
-    height: 56px !important;
-    position: relative;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    padding: 0.375rem 0.75rem !important;
-
-    @media screen and (max-width: 320px) {
-      width: 220px;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-  :deep(.gsc-search-button) {
-    display: -ms-flexbox;
-    display: flex;
-    margin-left: 0px;
-    height: 56px;
-    margin-top: 0px;
-  }
-  :deep(button.gsc-search-button) {
-    background: $orange;
-    border: none;
-    border-radius: 0px 8px 8px 0px;
-    color: $black;
-    display: flex;
-    align-items: center;
-    height: 56px !important;
-    font-size: 16px;
-    font-weight: 700;
-    padding-right: 32px;
-    padding-left: 32px;
-
-    &:before {
-      content: 'Search';
-    }
-    @media screen and (max-width: 767px) {
-      margin-top: 6px;
-    }
-    @media screen and (max-width: 320px) {
-      padding-right: 16px;
-      padding-left: 16px;
-    }
-
-    svg {
-      fill: black;
-      height: 18px;
-      width: 18px;
-      margin-left: 10px;
-    }
-
-    :focus {
-      box-shadow: 0px;
-    }
-  }
-
-  :deep(.gsst_a .gscb_a) {
-    color: #191919;
-  }
-  :deep(.gsc-result-info) {
-    color: #191919;
-    font-size: 16px;
-    font-weight: 400;
-  }
-  :deep(.gsc-above-wrapper-area) {
-    padding: 20px 0;
-    border-bottom: none;
-  }
-  /* search list start */
-  :deep(.gsc-url-top) {
-    display: none;
-  }
-  :deep(.gsc-table-result) {
-    line-height: 1.6;
-    padding: 0 5px;
-    font-size: 16px;
-    font-weight: 400;
-    width: 80%;
-    b {
-      color: #191919;
-      font-size: 16px;
-      font-weight: normal;
-    }
-  }
-  :deep(.gsc-resultsRoot.gsc-tabData) {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 15px;
-    padding-right: 15px;
-
-    &:hover {
-      border: none;
-    }
-  }
-  :deep(.gs-bidi-start-align.gs-snippet) {
-    color: #191919 !important;
-    line-height: 24px;
-  }
-  :deep(.gsc-thumbnail-inside) {
-    position: relative;
-    padding: 0;
-
-    &::after {
-      content: ' ';
-      position: absolute;
-      height: 16px;
-      width: 11px;
-      top: 5px;
-      right: 16px;
-      background-repeat: no-repeat;
-      background-image: url(../../../assets/icons/chev-right.svg);
-      background-size: 100%;
-    }
-    div.gs-title {
-      width: 90%;
-      margin-bottom: 12px;
-      overflow: visible;
-    }
-    a.gs-title {
-      color: #191919 !important;
-      font-weight: 700;
-      line-height: 24px;
-      font-size: 20px;
-      border: 3px solid transparent;
-      padding-left: 5px;
-      padding-right: 5px;
-      text-decoration: underline;
-
-      &:hover {
-        border: 3px solid #da47ff;
-        color: #006bff !important;
-        b {
-          color: #006bff !important;
-        }
-      }
-
-      b {
-        color: #191919 !important;
-        font-size: 20px;
-      }
-    }
-  }
-  :deep(.gsc-orderby-label) {
-    font-size: 16px;
-    font-weight: 700;
-    color: #191919;
-  }
-  :deep(.gsc-selected-option-container) {
-    background-color: white;
-    border-radius: 10px;
-    margin-top: 0px;
-    padding-top: 6px;
-    margin-right: 0;
-    margin-left: 4px;
-    padding-left: 20px;
-    padding-bottom: 6px;
-    height: 40px;
-    .gsc-selected-option {
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      margin-right: 20px;
-    }
-  }
-  :deep(.gsc-control-cse .gsc-option-selector) {
-    margin-top: 0;
-    margin-right: 10px;
-  }
-  :deep(.gsc-expansionArea > .gsc-webResult.gsc-result) {
-    border: 0;
-    flex: 0 0 100%;
-    max-width: 100%;
-    padding: 0;
-    &:first-child {
-      border-top: 1px solid #bababa;
-    }
-    > div {
-      border-bottom: 1px solid #bababa;
-      padding: 32px 0;
-    }
-  }
-
-  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-current-page) {
-    background-color: lightgrey;
-  }
-  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-page) {
-    border: 1px solid grey;
-    color: #333333;
-    padding: 10px 12px;
-    border-radius: 5px;
-    font-size: 16px;
-    font-weight: 400;
-  }
-  :deep(.gsc-results .gsc-cursor-box) {
-    margin-top: 50px;
-  }
-
-  /* search list end */
-  @include mq('xs') {
-    .not-extra-small-screen {
-      display: none;
-    }
-  }
-}
-@media screen and (max-width: 767px) {
-  :deep(.gssb_c) {
-    width: 85% !important;
-  }
-}
-</style>