Contact Us

9/F Peninsula Centre, 67 Mody Road, Tsimshtsui East, Kln., Hong Kong

+852 2313 0666

+852 2313 0656

SHTEC

SHTEC is a member company of

General Terms & Conditions of Service Disclaimer Privacy Policy

.global-search-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgb(238 238 238 / 0.01); display: flex; justify-content: center; align-items: flex-start; z-index: 9999; opacity: 0; transition: background 0.16s ease, opacity 0.22s ease; } .global-search-overlay-on { opacity: 1 !important; background: rgb(238 238 238 / 0.75); transition: background 0.16s ease, opacity 0.22s ease; } .overlay-content { margin-top: 6rem; background: white; border-radius: 8px; max-width: 900px; width: 90%; text-align: center; margin-bottom: 5rem; } /* Button styles */ #trigger-btn { padding: 12px 24px; background: #42b883; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } #trigger-btn:hover { background: #359a6a; } /* Close button */ .close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } import { ref, watch, computed, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'; import { useFetch, useWindowSize, onKeyStroke, useFocusWithin } from '@vueuse/core'; // const { useFetch } = VueUse; export default { components: { }, props: { 'skipSearchIfNoKeyWord': { type: Boolean, default: true }, 'searchPageUrl': { type: String, default: '' } }, directives: { }, setup({ skipSearchIfNoKeyWord, searchPageUrl }) { const isOverlayVisible = ref(false); const isOverlayVisibleDeferred = ref(false); const globalsearchoverlayDOM = ref(null); const globalsearchboxdomref = ref(null); const globalsearchitemsdomref = ref(null); const globalsearchcatsdomref = ref(null); const globalsearchsuggdomref = ref(null); const uicontrol = ref({ q: '' }); let firstFocusableElement; let lastFocusableElement; const focusWithinModalF = function (e) { //console.log('aaa'); if (!lastFocusableElement || !lastFocusableElement) { return false; } //console.log('bbb'); if (e.key === 'Tab') { if (e.shiftKey) { // Shift + Tab if (document.activeElement === firstFocusableElement) { lastFocusableElement.focus(); e.preventDefault(); } } else { // Tab if (document.activeElement === lastFocusableElement) { firstFocusableElement.focus(); e.preventDefault(); } } } else if (e.key === 'Escape') { e.preventDefault(); closeGlobalSearchOverlayF(); } }; const refreshFocusTrapF = () => { // globalsearchoverlayDOM.value const focusableElements = globalsearchoverlayDOM.value.querySelectorAll( 'a[href]:not([tabindex="-1"]), button, textarea, input, select, [tabindex]:not([tabindex="-1"])' ); firstFocusableElement = focusableElements[0]; lastFocusableElement = focusableElements[focusableElements.length - 1]; }; const focusPreviousDomElementF = () => { const focusableElements = Array.from(globalsearchoverlayDOM.value.querySelectorAll( 'a[href]:not([tabindex="-1"]), button, textarea, input, select, [tabindex]:not([tabindex="-1"])' )); const currentFocusedElement = document.activeElement; const currentIndex = focusableElements.indexOf(currentFocusedElement); if (currentIndex > 0 && currentIndex < focusableElements.length) { focusableElements[currentIndex - 1].focus(); } else if (currentIndex === 0) { // Optionally, focus the first element if at the end focusableElements[focusableElements.length - 1].focus(); } }; const focusNextDomElementF = () => { const focusableElements = Array.from(globalsearchoverlayDOM.value.querySelectorAll( 'a[href]:not([tabindex="-1"]), button, textarea, input, select, [tabindex]:not([tabindex="-1"])' )); const currentFocusedElement = document.activeElement; const currentIndex = focusableElements.indexOf(currentFocusedElement); if (currentIndex !== -1 && currentIndex < focusableElements.length - 1) { focusableElements[currentIndex + 1].focus(); } else if (currentIndex === focusableElements.length - 1) { // Optionally, focus the first element if at the end focusableElements[0].focus(); } }; const searchOverlayTriggerOpenF = async () => { //console.log('searchOverlayTriggerOpenF event received'); window.document.body.classList.toggle('overflow-hidden', true); isOverlayVisible.value = true; await nextTick(); setTimeout(function () { if (globalsearchboxdomref.value) { refreshFocusTrapF(); globalsearchboxdomref.value.focus(); } isOverlayVisibleDeferred.value = true; }, 100); if (globalsearchoverlayDOM.value) { globalsearchoverlayDOM.value.setAttribute('tabindex', '0'); refreshFocusTrapF(); firstFocusableElement.focus(); /// Attach: tab-trapping globalsearchoverlayDOM.value.addEventListener('keydown', focusWithinModalF); } }; const closeGlobalSearchOverlayF = () => { globalsearchoverlayDOM.value?.setAttribute('tabindex', '-1'); /// Detach: tab-trapping globalsearchoverlayDOM.value?.removeEventListener('keydown', focusWithinModalF); window.document.body.classList.toggle('overflow-hidden', false); isOverlayVisible.value = isOverlayVisibleDeferred.value = false; }; onMounted(() => { /// Attach: receive regular JS event from outside of Vue window.addEventListener('search-overlay-trigger-open', searchOverlayTriggerOpenF); }); onBeforeUnmount(() => { /// Detach: receive regular JS event from outside of Vue window.removeEventListener('search-overlay-trigger-open', searchOverlayTriggerOpenF); }); const lastAbortH = ref(null); const scopeTotal = ref(0); const isInitializing = ref(true); const isLoading = ref(false); const facetCountDir = ref(null); const quicksearchitems = ref(null); const suggestions = ref(null); const queryoflastresult = ref(''); const facetCountDir_top4 = computed(() => { return _.chain(facetCountDir.value).first(4).value(); }); const facetCountDir_excepttop4 = computed(() => { return _.chain(facetCountDir.value).rest(4).value(); }); const refreshSearchResultF = async (routeQuery) => { var nv = routeQuery; if (skipSearchIfNoKeyWord && (nv.q === undefined || nv.q.trim() === '')) { //pdts.value = []; scopeTotal.value = 0; //firstRankInView.value = 0; //lastRankInView.value = 0; //currentPageNo.value = 0; //totalPageCount.value = 0; //selectedPageNo.value = 1; //hasSearchCriteria.value = false; isInitializing.value = false; isLoading.value = false; return; } if (lastAbortH.value) { if (lastAbortH.value.canAbort && lastAbortH.value.canAbort.value) { lastAbortH.value.abort(); } } const keywordsSplit = (nv.q || '').replace(/\s+$/, '').split(' '); const lastKeywordsSplit = (keywordsSplit.length > 1) ? keywordsSplit[keywordsSplit.length - 1] : '*'; const reqUrl = ref('/en/api/v1/site/IndexJson')// const reqData = ref({ q: nv.q || '', tids: nv.t ? [].concat(nv.t) : [], si: parseInt(nv.si || 0, 10), c: parseInt(nv.c || 10, 10), src: 'kb', }); const reqUrlCombined = ref(reqUrl.value);// + '?' + new URLSearchParams(reqData.value)) try { isLoading.value = true; const { isFetching, error, data, abort, canAbort } = await useFetch(reqUrlCombined, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(reqData.value) }, { refetch: true, timeout: 60000 }).json(); lastAbortH.value = { abort: abort, canAbort: canAbort }; if (error?.value) { hasConnectivityError.value = true; setTimeout(function () { hasConnectivityError.value = false }, 5000); return; } if (data && data.value && data.value.success && data.value.payload && data.value.payload.items) { //pdts.value = [].concat(data.value.payload.pdts); quicksearchitems.value = _.chain([].concat(data.value.payload.items)).first(5).value(); scopeTotal.value = data.value.payload.scopetotal; //firstRankInView.value = parseInt(reqData.value.si, 10) + 1; //lastRankInView.value = ((parseInt(reqData.value.si, 10) + parseInt(reqData.value.c, 10)) >= scopeTotal.value) ? scopeTotal.value : (parseInt(reqData.value.si, 10) + parseInt(reqData.value.c, 10)); //currentPageNo.value = Math.floor(parseInt(reqData.value.si, 10) / parseInt(reqData.value.c, 10)) + 1 //totalPageCount.value = Math.ceil(scopeTotal.value / parseInt(reqData.value.c, 10)); //selectedPageNo.value = currentPageNo.value; //hasSearchCriteria.value = reqData.value.q?.length > 0 || reqData.value.tids?.length > 0; queryoflastresult.value = nv.q; } if (data && data.value && data.value.success && data.value.payload && data.value.payload.facets && data.value.payload.facets.length > 0) { // 0: {dimension: "cati", u: 'URL, l: 'LABEL', c: 'COUNT', dataumbid: 'DATAUMBID' } facetCountDir.value = _.chain(data.value.payload.facets) .filter(function (itm) { return itm.dim === 'cati' }) .map(function (itm) { return { catid: parseInt(itm.dataumbid, 10), label: itm.l, url: itm.u, scopecount: parseInt(itm.c, 10) }; }) //.first(5) .value(); } else { facetCountDir.value = []; } if (data && data.value && data.value.success && data.value.payload && data.value.payload.su) { suggestions.value = [].concat(_.map(data.value.payload.su, function (x) { return x.text; })); } //console.log('facetCountDir.value=', facetCountDir.value); } finally { isInitializing.value = false; isLoading.value = false; isMoreFacetsVisible.value = false; await nextTick(); refreshFocusTrapF(); } }; const refreshSearchResultFdebounced = _.debounce(function (nv) { return refreshSearchResultF(nv); }, 380); watch(uicontrol, (nv, ov) => { //debouncedRouteChangeF(nv); refreshSearchResultFdebounced(nv); //lastuicontrolvalue = JSON.parse(JSON.stringify(nv)); }, { immediate: true, deep: true }); const isMoreFacetsVisible = ref(false); const expandMoreFacetsF = (e) => { isMoreFacetsVisible.value = !isMoreFacetsVisible.value; focusPreviousDomElementF(); setTimeout(function () { focusNextDomElementF(); }, 20); }; const isShowMoreSearchResultsButton = computed(() => { return scopeTotal.value > 10; }); const formattedSuggestions = computed(() => { if (suggestions.value && suggestions.value.length) { const qTrimmed = uicontrol.value.q?.replace(/\s+$/, ''); const qLastKeyword = _.chain(qTrimmed?.split(/[ ]/)).last().value(); // const __result = _.chain(suggestions.value).first(6).map(function (x) { const __r = (scopeTotal.value > 0) ? ((qTrimmed !== '') ? (qLastKeyword !== '' && qTrimmed.toLowerCase().indexOf(qLastKeyword.toLowerCase()) > -1 && x.toLowerCase().indexOf(qLastKeyword.toLowerCase()) > -1) ? qTrimmed.substr(0, qTrimmed.toLowerCase().lastIndexOf(qLastKeyword.toLowerCase())) // fusepended : (qTrimmed + ' ') // appended : '' ) : ''; return { literal: __r + x, pre: __r, suggn: x }; }).value(); return __result; } return []; }); // When clicked on any suggestion, immediately empty the suggestion candidates so the suggestion panel disappears OR const formattedSuggestionClickedF = function (w00t) { //console.log('formattedSuggestionClickedF', w00t); if (w00t) { //suggestions.value = []; if (globalsearchboxdomref.value) { globalsearchboxdomref.value.focus(); } uicontrol.value.q = w00t; } }; //@change="searchboxHandleInputF" const searchboxHandleInputF = () => { }; const searchboxHandleEscKeyUpF = (evt) => { }; const searchboxHandleDownKeyUpF = () => { if (facetCountDir.value && facetCountDir.value.length || quicksearchitems.value && quicksearchitems.value.length || suggestions.value && suggestions.value.length) { focusNextDomElementF(); } }; const catsLiHandleUpKeyDownF = (e) => { focusPreviousDomElementF(); }; const catsLiHandleDownKeyDownF = (e) => { focusNextDomElementF(); }; const catsLiHandleLeftKeyDownF = (e) => { focusPreviousDomElementF(); }; const catsLiHandleRightKeyDownF = (e) => { focusNextDomElementF(); }; const catsLiHandleEnterKeyPressF = (e) => { const aEle = e.target?.querySelector('a'); if (aEle) { aEle.click(); e.preventDefault(); } }; const quicksearchLiHandleUpKeyDownF = (e) => { focusPreviousDomElementF(); }; const quicksearchLiHandleDownKeyDownF = (e) => { //COMMENT: do not cycle to cross btn //focusNextDomElementF(); if (e.target.nextElementSibling) { e.target.nextElementSibling.focus(); } }; const quicksearchLiHandleLeftKeyDownF = (e) => { if (globalsearchboxdomref.value) { const _gsbdilen = globalsearchboxdomref.value.value.length; globalsearchboxdomref.value.setSelectionRange(0, _gsbdilen); globalsearchboxdomref.value.focus(); } }; const quicksearchMoreResultsLiHandleEnterKeyPressF = (e) => { if (searchPageUrl) { top.location = searchPageUrl + '?q=' + uicontrol.value.q; e.preventDefault(); } }; //@keyup.up="suggestionLiHandleUpKeyDownF" const suggestionLiHandleUpKeyDownF = (e) => { if (e.target.previousElementSibling) { e.target.previousElementSibling.focus(); } else if (globalsearchboxdomref.value) { globalsearchboxdomref.value.focus(); } }; //@keyup.down="suggestionLiHandleDownKeyDownF" const suggestionLiHandleDownKeyDownF = (e) => { if (e.target.nextElementSibling) { e.target.nextElementSibling.focus(); } }; //@keyup.left="suggestionLiHandleLeftKeyDownF" const suggestionLiHandleLeftKeyDownF = (e) => { globalsearchboxdomref.value?.focus(); }; //@keyup.backspace="suggestionLiHandleBackspaceKeyDownF" const suggestionLiHandleBackspaceKeyDownF = (e) => { //debouncedSuggestionPanelOpenCloseF(false); globalsearchboxdomref.value?.focus(); }; const closeSuggestionClickedF = () => { //suggestionPanelCloseLock.value = true; //debouncedSuggestionPanelOpenCloseF(false); globalsearchboxdomref.value?.focus(); }; const toggleSuggestionClickedF = () => { globalsearchboxdomref.value?.focus(); }; const quicksearchLiHandleEnterKeyPressF = (e) => { const aEle = e.target?.querySelector('a'); if (aEle) { aEle.click(); e.preventDefault(); } }; return { isInitializing, isLoading, //showOverlayF, //closeOverlayF, globalsearchoverlayDOM, globalsearchboxdomref, globalsearchitemsdomref, globalsearchcatsdomref, globalsearchsuggdomref, queryoflastresult, uicontrol, scopeTotal, facetCountDir, facetCountDir_top4, facetCountDir_excepttop4, isMoreFacetsVisible, searchboxHandleInputF, searchboxHandleEscKeyUpF, searchboxHandleDownKeyUpF, suggestionLiHandleUpKeyDownF, suggestionLiHandleDownKeyDownF, suggestionLiHandleLeftKeyDownF, suggestionLiHandleBackspaceKeyDownF, catsLiHandleUpKeyDownF, catsLiHandleDownKeyDownF, catsLiHandleLeftKeyDownF, catsLiHandleRightKeyDownF, catsLiHandleEnterKeyPressF, quicksearchLiHandleUpKeyDownF, quicksearchLiHandleDownKeyDownF, quicksearchLiHandleLeftKeyDownF, quicksearchLiHandleEnterKeyPressF, quicksearchMoreResultsLiHandleEnterKeyPressF, expandMoreFacetsF, toggleSuggestionClickedF, isOverlayVisible, isOverlayVisibleDeferred, closeGlobalSearchOverlayF, quicksearchitems, formattedSuggestions, formattedSuggestionClickedF, isShowMoreSearchResultsButton, }; } }

Learn more about electric car charging etiquette! It turns out that charging has its own rules?

Tips for seniors on blood sugar control and exercise! How to effectively manage health and body indicators?

Essential for restaurant openings! Boost service efficiency and elevate dining quality.

Precautions for installing charging devices

The rise of electric vehicles: environmentally friendly, economical and convenient

Three heart-protecting secrets to help you protect your heart health

Contact Us

Follow Us

SHTEC