Contact Us

* Required fields

# Any of Email or Tel is required

Name

Title

Tel

Subject

Message

Verification code

By submitting this form, you agree and consent to your personal data which you provide to the Shun Hing Technology Co., Ltd. in this form being handled in accordance with our Privacy Policy.

How to contact us

ADDRESS

9/F., Blk B, Peninsula Centre, 67 Mody Road, Tsimshatsui East, Kowloon, Hong Kong SAR.

TEL

(852) 2313 0666

FAX

(852) 2313 0656

OFFICE HOURS

Monday to Friday - 9:00 am to 7:00 pm
Saturday - 10:00 am to 4:00 pm
Closed on Sunday and Public Holidays

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, }; } }

Contact Us

We sincerely invite you to contact us

Contact Us

How to contact us

ADDRESS

TEL

FAX

OFFICE HOURS

Contact Us

Follow Us

SHTEC