graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 3.82 kB
JavaScript
import{EventService,openInNewTab,ResourceSearchStorageService,SearchButton,SearchButtonConfig,ServiceProvider,SubscriptionList,UriUtil}from"../../../../../api/dist/ontotext-workbench-api";import{h}from"@stencil/core";import{TranslationService}from"../../services/translation.service";import{HtmlUtil}from"../../utils/html-util";import{OntoTooltipPlacement}from"../onto-tooltip/models/onto-tooltip-placement";import{ResourceSearchConstants}from"../../models/resource-search/resource-search-constants";export class OntoRdfSearch{constructor(){this.subscriptions=new SubscriptionList,this.eventService=ServiceProvider.get(EventService),this.resourceSearchStorageService=ServiceProvider.get(ResourceSearchStorageService),this.RDF_CONTEXT="rdfSearchContext",this.isOpen=!1,this.redirectUrl=UriUtil.RESOURCE_URL}handleClick(e){var t;this.isOpen&&((null===(t=this.rdfSearchRef)||void 0===t?void 0:t.contains(e.target))||(this.isOpen=!1))}connectedCallback(){this.onSuggestionSelected()}disconnectedCallback(){this.subscriptions.unsubscribeAll()}componentDidRender(){this.focusSearchInput()}componentDidLoad(){this.buttonConfig=this.createButtonConfig()}render(){return h("section",{key:"fb63b11874e6049ea060d7f8bf2b9ce00a2bc78c",ref:e=>this.rdfSearchRef=e,class:"onto-rdf-search",onKeyDown:this.onKeyDown(),"data-test":"onto-rdf-search-component"},h("section",{key:"1c7f6a7e9951011e1c62e2f24c912c8c2813c404",class:"search-area "+(this.isOpen?"visible":"invisible")},h("i",{key:"3d57cb755374b1dc86afc8617bc0ac6a9fa62c03",onClick:this.setIsOpen(!1),"tooltip-content":TranslationService.translate("rdf_search.tooltips.close_search_area"),"tooltip-placement":OntoTooltipPlacement.BOTTOM,"data-test":"onto-rdf-resource-search-close-btn",class:"fa-light fa-xmark-large close-btn"}),h("onto-search-resource-input",{key:"0509c9869e45d8afc086b773b2591639c47a51e2",buttonConfig:this.buttonConfig,preserveSearch:!0,isHidden:!this.isOpen,"data-test":"onto-rdf-resource-search-input",context:this.RDF_CONTEXT})),this.isOpen?"":h("onto-search-icon",{onClick:this.setIsOpen(!0)}))}setIsOpen(e){return()=>{this.isOpen=e,this.isOpen&&this.loadSelectedViewFromStorage()}}createButtonConfig(){return new SearchButtonConfig({isRadio:!0,buttons:[this.createSearchButton(ResourceSearchConstants.TABLE_VIEW,"rdf_search.buttons.table",()=>{this.redirectUrl=UriUtil.RESOURCE_URL,this.resourceSearchStorageService.setSelectedView(ResourceSearchConstants.TABLE_VIEW)},!0),this.createSearchButton(ResourceSearchConstants.VISUAL_VIEW,"rdf_search.buttons.visual",()=>{this.redirectUrl=UriUtil.GRAPHS_VISUALIZATIONS_URL,this.resourceSearchStorageService.setSelectedView(ResourceSearchConstants.VISUAL_VIEW)},!1)]})}createSearchButton(e,t,r,s){return new SearchButton({label:TranslationService.translate(t),id:e,callback:r,selected:s})}onSuggestionSelected(){this.subscriptions.add(this.eventService.subscribe(ResourceSearchConstants.SUGGESTION_SELECTED_EVENT,e=>{if(e.getContext()===this.RDF_CONTEXT){const t=e.getSuggestion().getOverrideToVisual()?UriUtil.GRAPHS_VISUALIZATIONS_URL:this.redirectUrl;openInNewTab(UriUtil.createAutocompleteRedirect(t,e.getSuggestion().getValue()))}}))}onKeyDown(){return e=>{"Escape"===e.key&&(this.isOpen=!1)}}focusSearchInput(){this.isOpen&&HtmlUtil.focusElement(`#${this.RDF_CONTEXT}`)}loadSelectedViewFromStorage(){const e=this.resourceSearchStorageService.getSelectedView();if(e){const t=this.buttonConfig.getButtons().find(t=>t.id===e);t&&(this.buttonConfig=this.buttonConfig.selectButton(t))}}static get is(){return"onto-rdf-search"}static get originalStyleUrls(){return{$:["onto-rdf-search.scss"]}}static get styleUrls(){return{$:["onto-rdf-search.css"]}}static get states(){return{isOpen:{},buttonConfig:{}}}static get listeners(){return[{name:"click",method:"handleClick",target:"window",capture:!1,passive:!1}]}}