@knora/search
Version:
Knora ui module: search
98 lines • 14 kB
JavaScript
import * as tslib_1 from "tslib";
import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { Component, ElementRef, Input, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
/**
* The search-panel contains the kui-fulltext-search and the kui-extended-search components.
*/
let SearchPanelComponent = class SearchPanelComponent {
constructor(_overlay, _viewContainerRef) {
this._overlay = _overlay;
this._viewContainerRef = _viewContainerRef;
/**
* @param {string} route Route to navigate after search. This route path should contain a component for search results.
*/
this.route = '/search';
/**
*@param {boolean} [projectfilter] If true it shows the selection of projects to filter by one of them
*/
this.projectfilter = false;
/**
* @param {boolean} [advanced] Adds the extended / advanced search to the panel
*/
this.advanced = false;
/**
* @param {boolean} [expert] Adds the expert search / gravsearch editor to the panel
*/
this.expert = false;
}
openPanelWithBackdrop(type) {
this.showAdvanced = (type === 'advanced');
const config = new OverlayConfig({
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
// backdropClass: 'cdk-overlay-dark-backdrop',
positionStrategy: this.getOverlayPosition(),
scrollStrategy: this._overlay.scrollStrategies.block()
});
this.overlayRef = this._overlay.create(config);
this.overlayRef.attach(new TemplatePortal(this.searchMenu, this._viewContainerRef));
this.overlayRef.backdropClick().subscribe(() => {
this.overlayRef.detach();
});
}
getOverlayPosition() {
const positions = [
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
];
const overlayPosition = this._overlay.position().flexibleConnectedTo(this.searchPanel).withPositions(positions).withLockedPosition(false);
return overlayPosition;
}
closeMenu() {
this.overlayRef.detach();
}
};
SearchPanelComponent.ctorParameters = () => [
{ type: Overlay },
{ type: ViewContainerRef }
];
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], SearchPanelComponent.prototype, "route", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], SearchPanelComponent.prototype, "projectfilter", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], SearchPanelComponent.prototype, "filterbyproject", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], SearchPanelComponent.prototype, "advanced", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], SearchPanelComponent.prototype, "expert", void 0);
tslib_1.__decorate([
ViewChild('fullSearchPanel', { static: false }),
tslib_1.__metadata("design:type", ElementRef)
], SearchPanelComponent.prototype, "searchPanel", void 0);
tslib_1.__decorate([
ViewChild('searchMenu', { static: false }),
tslib_1.__metadata("design:type", TemplateRef)
], SearchPanelComponent.prototype, "searchMenu", void 0);
SearchPanelComponent = tslib_1.__decorate([
Component({
selector: 'kui-search-panel',
template: "<div class=\"kui-search-panel\" #fullSearchPanel cdkOverlayOrigin>\n\n <!-- DESKTOP VERSION -->\n <kui-fulltext-search class=\"kui-fulltext-search\" [route]=\"route\" [projectfilter]=\"projectfilter\"\n [filterbyproject]=\"filterbyproject\">\n </kui-fulltext-search>\n\n <!-- advanced search button: if advanced === true -->\n <button mat-button *ngIf=\"advanced && !expert\" color=\"primary\"\n (click)=\"openPanelWithBackdrop('advanced')\">advanced</button>\n\n <!-- expert search button: if expert === true -->\n <button mat-button *ngIf=\"!advanced && expert\" color=\"primary\"\n (click)=\"openPanelWithBackdrop('expert')\">expert</button>\n\n <!-- button to select advanced or expert search: if advanced AND expert === true; open menu to select -->\n <button mat-button *ngIf=\"advanced && expert\" [matMenuTriggerFor]=\"selectSearch\">\n <mat-icon>filter_list</mat-icon>\n </button>\n <mat-menu #selectSearch=\"matMenu\">\n <button mat-menu-item (click)=\"openPanelWithBackdrop('advanced')\">\n <span>Advanced search</span>\n </button>\n <button mat-menu-item (click)=\"openPanelWithBackdrop('expert')\">\n <span>Expert search</span>\n </button>\n </mat-menu>\n\n</div>\n\n<!-- full-text search menu -->\n<ng-template #searchMenu>\n <div class=\"kui-search-menu with-extended-search\" [class.with-project-filter]=\"projectfilter\">\n <div class=\"kui-menu-header\">\n <span class=\"kui-menu-title\">\n <h4 *ngIf=\"showAdvanced\">Advanced search</h4>\n <h4 *ngIf=\"!showAdvanced\">Expert search</h4>\n </span>\n <span class=\"fill-remaining-space\"></span>\n <span class=\"kui-menu-close\">\n <button mat-icon-button (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </div>\n <div class=\"kui-menu-content\">\n <kui-extended-search *ngIf=\"showAdvanced\" [route]=\"route\" (toggleExtendedSearchForm)=\"closeMenu()\">\n </kui-extended-search>\n <kui-expert-search *ngIf=\"!showAdvanced\" [route]=\"route\" (toggleExpertSearchForm)=\"closeMenu()\">\n </kui-expert-search>\n </div>\n </div>\n</ng-template>\n",
styles: [".advanced-btn{margin-left:10px}.kui-search-panel{display:-webkit-box;display:flex;position:relative;z-index:100}.extended-search-box{margin:12px}@media (max-width:576px){.kui-fulltext-search{height:100%;width:100%!important}}"]
}),
tslib_1.__metadata("design:paramtypes", [Overlay,
ViewContainerRef])
], SearchPanelComponent);
export { SearchPanelComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Brbm9yYS9zZWFyY2gvIiwic291cmNlcyI6WyJsaWIvc2VhcmNoLXBhbmVsL3NlYXJjaC1wYW5lbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3BILE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2Rzs7R0FFRztBQU1ILElBQWEsb0JBQW9CLEdBQWpDLE1BQWEsb0JBQW9CO0lBcUM3QixZQUFxQixRQUFpQixFQUMxQixpQkFBbUM7UUFEMUIsYUFBUSxHQUFSLFFBQVEsQ0FBUztRQUMxQixzQkFBaUIsR0FBakIsaUJBQWlCLENBQWtCO1FBckMvQzs7V0FFRztRQUNNLFVBQUssR0FBVyxTQUFTLENBQUM7UUFFbkM7O1dBRUc7UUFDTSxrQkFBYSxHQUFhLEtBQUssQ0FBQztRQU96Qzs7V0FFRztRQUNNLGFBQVEsR0FBYSxLQUFLLENBQUM7UUFFcEM7O1dBRUc7UUFDTSxXQUFNLEdBQWEsS0FBSyxDQUFDO0lBY21CLENBQUM7SUFFdEQscUJBQXFCLENBQUMsSUFBWTtRQUU5QixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsSUFBSSxLQUFLLFVBQVUsQ0FBQyxDQUFDO1FBRTFDLE1BQU0sTUFBTSxHQUFHLElBQUksYUFBYSxDQUFDO1lBQzdCLFdBQVcsRUFBRSxJQUFJO1lBQ2pCLGFBQWEsRUFBRSxrQ0FBa0M7WUFDakQsOENBQThDO1lBQzlDLGdCQUFnQixFQUFFLElBQUksQ0FBQyxrQkFBa0IsRUFBRTtZQUMzQyxjQUFjLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxLQUFLLEVBQUU7U0FDekQsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMvQyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxJQUFJLGNBQWMsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUM7UUFDcEYsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQzNDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDN0IsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2QsTUFBTSxTQUFTLEdBQUc7WUFDZCxJQUFJLHNCQUFzQixDQUFDLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsQ0FBQztZQUMzRyxJQUFJLHNCQUFzQixDQUFDLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsQ0FBQztTQUM5RyxDQUFDO1FBRUYsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxDQUFDLGtCQUFrQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRTFJLE9BQU8sZUFBZSxDQUFDO0lBQzNCLENBQUM7SUFFRCxTQUFTO1FBQ0wsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUM3QixDQUFDO0NBQ0osQ0FBQTs7WUFwQ2tDLE9BQU87WUFDUCxnQkFBZ0I7O0FBbEN0QztJQUFSLEtBQUssRUFBRTs7bURBQTJCO0FBSzFCO0lBQVIsS0FBSyxFQUFFOzsyREFBaUM7QUFLaEM7SUFBUixLQUFLLEVBQUU7OzZEQUEwQjtBQUt6QjtJQUFSLEtBQUssRUFBRTs7c0RBQTRCO0FBSzNCO0lBQVIsS0FBSyxFQUFFOztvREFBMEI7QUFFZTtJQUFoRCxTQUFTLENBQUMsaUJBQWlCLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLENBQUM7c0NBQWMsVUFBVTt5REFBQztBQUU3QjtJQUEzQyxTQUFTLENBQUMsWUFBWSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxDQUFDO3NDQUFhLFdBQVc7d0RBQU07QUE1QmhFLG9CQUFvQjtJQUxoQyxTQUFTLENBQUM7UUFDUCxRQUFRLEVBQUUsa0JBQWtCO1FBQzVCLGsyRUFBNEM7O0tBRS9DLENBQUM7NkNBc0NpQyxPQUFPO1FBQ1AsZ0JBQWdCO0dBdEN0QyxvQkFBb0IsQ0F5RWhDO1NBekVZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIsIE92ZXJsYXksIE92ZXJsYXlDb25maWcsIE92ZXJsYXlSZWYsIFBvc2l0aW9uU3RyYXRlZ3kgfSBmcm9tICdAYW5ndWxhci9jZGsvb3ZlcmxheSc7XG5pbXBvcnQgeyBUZW1wbGF0ZVBvcnRhbCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9wb3J0YWwnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZCwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIFRoZSBzZWFyY2gtcGFuZWwgY29udGFpbnMgdGhlIGt1aS1mdWxsdGV4dC1zZWFyY2ggYW5kIHRoZSBrdWktZXh0ZW5kZWQtc2VhcmNoIGNvbXBvbmVudHMuXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna3VpLXNlYXJjaC1wYW5lbCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NlYXJjaC1wYW5lbC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2VhcmNoLXBhbmVsLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoUGFuZWxDb21wb25lbnQge1xuICAgIC8qKlxuICAgICAqIEBwYXJhbSAge3N0cmluZ30gcm91dGUgUm91dGUgdG8gbmF2aWdhdGUgYWZ0ZXIgc2VhcmNoLiBUaGlzIHJvdXRlIHBhdGggc2hvdWxkIGNvbnRhaW4gYSBjb21wb25lbnQgZm9yIHNlYXJjaCByZXN1bHRzLlxuICAgICAqL1xuICAgIEBJbnB1dCgpIHJvdXRlOiBzdHJpbmcgPSAnL3NlYXJjaCc7XG5cbiAgICAvKipcbiAgICAgKkBwYXJhbSAge2Jvb2xlYW59IFtwcm9qZWN0ZmlsdGVyXSBJZiB0cnVlIGl0IHNob3dzIHRoZSBzZWxlY3Rpb24gb2YgcHJvamVjdHMgdG8gZmlsdGVyIGJ5IG9uZSBvZiB0aGVtXG4gICAgICovXG4gICAgQElucHV0KCkgcHJvamVjdGZpbHRlcj86IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKlxuICAgICAqIEBwYXJhbSAge3N0cmluZ30gW2ZpbHRlcmJ5cHJvamVjdF0gSWYgeW91ciBmdWxsLXRleHQgc2VhcmNoIHNob3VsZCBiZSBmaWx0ZXJlZCBieSBvbmUgcHJvamVjdCwgeW91IGNhbiBkZWZpbmUgaXQgd2l0aCBwcm9qZWN0IGlyaSBpbiB0aGUgcGFyYW1ldGVyIGZpbHRlcmJ5cHJvamVjdC5cbiAgICAgKi9cbiAgICBASW5wdXQoKSBmaWx0ZXJieXByb2plY3Q/OiBzdHJpbmc7XG5cbiAgICAvKipcbiAgICAgKiBAcGFyYW0gIHtib29sZWFufSBbYWR2YW5jZWRdIEFkZHMgdGhlIGV4dGVuZGVkIC8gYWR2YW5jZWQgc2VhcmNoIHRvIHRoZSBwYW5lbFxuICAgICAqL1xuICAgIEBJbnB1dCgpIGFkdmFuY2VkPzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgLyoqXG4gICAgICogQHBhcmFtICB7Ym9vbGVhbn0gW2V4cGVydF0gQWRkcyB0aGUgZXhwZXJ0IHNlYXJjaCAvIGdyYXZzZWFyY2ggZWRpdG9yIHRvIHRoZSBwYW5lbFxuICAgICAqL1xuICAgIEBJbnB1dCgpIGV4cGVydD86IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIEBWaWV3Q2hpbGQoJ2Z1bGxTZWFyY2hQYW5lbCcsIHsgc3RhdGljOiBmYWxzZSB9KSBzZWFyY2hQYW5lbDogRWxlbWVudFJlZjtcblxuICAgIEBWaWV3Q2hpbGQoJ3NlYXJjaE1lbnUnLCB7IHN0YXRpYzogZmFsc2UgfSkgc2VhcmNoTWVudTogVGVtcGxhdGVSZWY8YW55PjtcbiAgICAvLyAgICBAVmlld0NoaWxkKCdleHBlcnRTZWFyY2hNZW51Jywge3N0YXRpYzpmYWxzZX0pIGV4cGVydE1lbnU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgICAvLyBvdmVybGF5IHJlZmVyZW5jZVxuICAgIG92ZXJsYXlSZWY6IE92ZXJsYXlSZWY7XG5cbiAgICAvLyBzaG93IGFkdmFuY2VkIG9yIGV4cGVydCBzZWFyY2hcbiAgICBzaG93QWR2YW5jZWQ6IGJvb2xlYW47XG5cbiAgICBjb25zdHJ1Y3RvciAocHJpdmF0ZSBfb3ZlcmxheTogT3ZlcmxheSxcbiAgICAgICAgcHJpdmF0ZSBfdmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZiwgKSB7IH1cblxuICAgIG9wZW5QYW5lbFdpdGhCYWNrZHJvcCh0eXBlOiBzdHJpbmcpIHtcblxuICAgICAgICB0aGlzLnNob3dBZHZhbmNlZCA9ICh0eXBlID09PSAnYWR2YW5jZWQnKTtcblxuICAgICAgICBjb25zdCBjb25maWcgPSBuZXcgT3ZlcmxheUNvbmZpZyh7XG4gICAgICAgICAgICBoYXNCYWNrZHJvcDogdHJ1ZSxcbiAgICAgICAgICAgIGJhY2tkcm9wQ2xhc3M6ICdjZGstb3ZlcmxheS10cmFuc3BhcmVudC1iYWNrZHJvcCcsXG4gICAgICAgICAgICAvLyBiYWNrZHJvcENsYXNzOiAnY2RrLW92ZXJsYXktZGFyay1iYWNrZHJvcCcsXG4gICAgICAgICAgICBwb3NpdGlvblN0cmF0ZWd5OiB0aGlzLmdldE92ZXJsYXlQb3NpdGlvbigpLFxuICAgICAgICAgICAgc2Nyb2xsU3RyYXRlZ3k6IHRoaXMuX292ZXJsYXkuc2Nyb2xsU3RyYXRlZ2llcy5ibG9jaygpXG4gICAgICAgIH0pO1xuXG4gICAgICAgIHRoaXMub3ZlcmxheVJlZiA9IHRoaXMuX292ZXJsYXkuY3JlYXRlKGNvbmZpZyk7XG4gICAgICAgIHRoaXMub3ZlcmxheVJlZi5hdHRhY2gobmV3IFRlbXBsYXRlUG9ydGFsKHRoaXMuc2VhcmNoTWVudSwgdGhpcy5fdmlld0NvbnRhaW5lclJlZikpO1xuICAgICAgICB0aGlzLm92ZXJsYXlSZWYuYmFja2Ryb3BDbGljaygpLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLm92ZXJsYXlSZWYuZGV0YWNoKCk7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIGdldE92ZXJsYXlQb3NpdGlvbigpOiBQb3NpdGlvblN0cmF0ZWd5IHtcbiAgICAgICAgY29uc3QgcG9zaXRpb25zID0gW1xuICAgICAgICAgICAgbmV3IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIoeyBvcmlnaW5YOiAnc3RhcnQnLCBvcmlnaW5ZOiAnYm90dG9tJyB9LCB7IG92ZXJsYXlYOiAnc3RhcnQnLCBvdmVybGF5WTogJ3RvcCcgfSksXG4gICAgICAgICAgICBuZXcgQ29ubmVjdGlvblBvc2l0aW9uUGFpcih7IG9yaWdpblg6ICdzdGFydCcsIG9yaWdpblk6ICd0b3AnIH0sIHsgb3ZlcmxheVg6ICdzdGFydCcsIG92ZXJsYXlZOiAnYm90dG9tJyB9KVxuICAgICAgICBdO1xuXG4gICAgICAgIGNvbnN0IG92ZXJsYXlQb3NpdGlvbiA9IHRoaXMuX292ZXJsYXkucG9zaXRpb24oKS5mbGV4aWJsZUNvbm5lY3RlZFRvKHRoaXMuc2VhcmNoUGFuZWwpLndpdGhQb3NpdGlvbnMocG9zaXRpb25zKS53aXRoTG9ja2VkUG9zaXRpb24oZmFsc2UpO1xuXG4gICAgICAgIHJldHVybiBvdmVybGF5UG9zaXRpb247XG4gICAgfVxuXG4gICAgY2xvc2VNZW51KCk6IHZvaWQge1xuICAgICAgICB0aGlzLm92ZXJsYXlSZWYuZGV0YWNoKCk7XG4gICAgfVxufVxuIl19