UNPKG

ngx-magicsearch

Version:

Magic Search/Faceted Search Library for Angular 2.

3 lines (2 loc) 15.7 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms"],t):t(e["ngx-magicsearch"]={},e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n,i){"use strict";var r=function(){function e(e){this.differs=e,this.strings={remove:"Remove facet",cancel:"Clear search",prompt:"Select facets or enter text",text:"Text"},this.facets_param=[],this.textSearchEvent=new t.EventEmitter,this.searchUpdatedEvent=new t.EventEmitter,this.setFocusedEventEmitter=!1,this.promptString=this.strings.prompt,this.currentSearch=[],this.facetsObj=null,this.isMenuOpen=!1,this.hostEvent=null,this.differ=e.find({}).create(),this.searchInput=""}return e.prototype.ngOnInit=function(){this.initSearch()},e.prototype.ngOnChanges=function(){this.initSearch()},e.prototype.ngDoCheck=function(){this.differ.diff(this.facets_param)&&this.initSearch()},e.prototype.initSearch=function(){if("string"==typeof this.facets_param){var e=this.facets_param.replace(/__apos__/g,"'").replace(/__dquote__/g,'\\"').replace(/__bslash__/g,"\\");this.facetsObj=JSON.parse(e)}else this.facetsObj=this.facets_param.slice(0);this.facetsSave=this.copyFacets(this.facetsObj),this.currentSearch=[],this.initFacets()},e.prototype.initFacets=function(){var e=this,a=this,t=window.location.hash.split("?")[1]===undefined?"":"?"+window.location.hash.split("?")[1];if(t.length<1){for(var n=0;n<this.currentSearch.length;n++)0!==this.currentSearch[n].name.indexOf("text")&&(0<t.length&&(t+="&"),t+=this.currentSearch[n].name);this.facetsObj=this.copyFacets(this.facetsSave),this.currentSearch=[]}0===t.indexOf("?")&&(t=t.slice(1)),(1<(t=t.split("&")).length||0<t[0].length)&&setTimeout(function(){e.strings.prompt=""},.1),t.forEach(function(i,e){var r=i.split("=");r[1]=i.split("=").splice(1).join("="),a.facetsObj.forEach(function(n,e){n.name===r[0]&&(n.options===undefined?a.currentSearch.push({name:i,label:[n.label,r[1]]}):n.options.forEach(function(e,t){e.key===r[1]&&(a.currentSearch.push({name:i,label:[n.label,e.label]}),!0===n.singleton?a.deleteFacetEntirely(r):a.deleteFacetSelection(r))}))})}),this.textSearch!==undefined&&this.currentSearch.push({name:"text="+this.textSearch,label:[this.strings.text,this.textSearch]}),this.filteredObj=this.facetsObj},e.prototype.addFacets=function(e){var t=this;e.forEach(function(e){t.facetsObj.append(e)})},e.prototype.copyFacets=function(e){for(var t=[],n=0;n<e.length;n++){var i=Object.create(e[n]);if(e[n].options!==undefined){i.options=[];for(var r=0;r<e[n].options.length;r++)i.options.push(Object.create(e[n].options[r]))}t.push(i)}return t},e.prototype.deleteFacetSelection=function(r){var a=this;this.facetsObj.slice().forEach(function(e,t){if(e.name===r[0]){if(e.options===undefined)return;for(var n=0;n<e.options.length;n++){var i=e.options[n];i.key===r[1]&&a.facetsObj[t].options.splice(a.facetsObj[t].options.indexOf(i),1)}0===e.options.length&&a.facetsObj.splice(a.facetsObj.indexOf(e),1)}})},e.prototype.deleteFacetEntirely=function(n){var i=this;this.facetsObj.slice().forEach(function(e,t){e.name===n[0]&&i.facetsObj.splice(i.facetsObj.indexOf(e),1)})},e.prototype.filterFacets=function(e){var t,n,i,r=this,a=[];if(this.facetSelected===undefined){for(this.filteredObj=this.facetsObj,t=0;t<this.filteredObj.length;t++){var s=this.filteredObj[t];-1<(n=s.label.toLowerCase().indexOf(e))&&(i=[s.label.substring(0,n),s.label.substring(n,n+e.length),s.label.substring(n+e.length)],a.push({name:s.name,label:i,options:s.options}))}0<a.length?(this.showMenu(),setTimeout(function(){r.filteredObj=a},.1)):(this.textSearchEvent.emit(e),this.hideMenu())}else{if(this.filteredOptions=this.facetOptions,this.facetOptions===undefined)return;for(t=0;t<this.filteredOptions.length;t++){var o=this.filteredOptions[t];-1<(n=o.label.toLowerCase().indexOf(e))&&(i=[o.label.substring(0,n),o.label.substring(n,n+e.length),o.label.substring(n+e.length)],a.push({key:o.key,label:i}))}0<a.length&&(this.showMenu(),setTimeout(function(){r.filteredOptions=a},.1))}},e.prototype.isMatchLabel=function(e){return Array.isArray(e)},e.prototype.resetState=function(){this.updateUrl(""),this.searchInput="",this.filteredObj=this.facetsObj,this.facetSelected=undefined,this.facetOptions=undefined,this.filteredOptions=undefined,0===this.currentSearch.length&&(this.strings.prompt=this.promptString)},e.prototype.showMenu=function(){this.isMenuOpen=!0},e.prototype.hideMenu=function(){this.isMenuOpen=!1},e.prototype.updateUrl=function(e){var t=window.location.href;-1<t.indexOf("?")&&(t=t.split("?")[0]),0<e.length&&(t=t+"?"+e),window.history.pushState(e,"",t)},e.prototype.buildTermsArray=function(){var n=this,i=[];return this.currentSearch.forEach(function(e){var t=e.name.split("=");t[1]=e.name.split("=").splice(1).join("="),-1!==n.getIndexBy(i,"key",t[0])?i[n.getIndexBy(i,"key",t[0])].values.push(t[1]):i.push({key:t[0],values:[t[1]]})}),i},e.prototype.getIndexBy=function(e,t,n){for(var i=0;i<e.length;i++)if(e[i][t]===n)return i;return-1},e.prototype.handleKeyDown=function(e){9===(e.keyCode||e.charCode)&&e.preventDefault()},e.prototype.handleKeyUp=function(e){var t=this;if(!0!==e.metaKey){var n=this.searchInput,i=e.keyCode||e.charCode;if(9!==i){if(27===i){setTimeout(function(){t.hideMenu(),t.searchInput=""},.1),this.resetState();var r=this.textSearch;return r===undefined&&(r=""),void this.textSearchEvent.emit(n)}if(13===i){if(this.facetSelected&&this.facetSelected.options===undefined){var a=this.facetSelected;a.name=a.name+"="+n,a.label[1]=n,this.currentSearch.push(a),this.resetState(),this.emitQuery(),this.showMenu()}else{for(var s=0;s<this.currentSearch.length;s++)0===this.currentSearch[s].name.indexOf("text")&&this.currentSearch.splice(s,1);this.currentSearch.push({name:"text="+n,label:[this.strings.text,n]}),this.hideMenu(),this.searchInput="",this.textSearchEvent.emit(n),this.textSearch=n}this.filteredObj=this.facetsObj}else""===n?(this.filteredObj=this.facetsObj,this.textSearchEvent.emit(""),this.facetSelected&&this.facetSelected.options===undefined&&this.resetState()):this.filterFacets(n)}else{if(this.facetSelected===undefined){if(1!==this.filteredObj.length)return;this.facetClicked(0,this.filteredObj[0].name)}else{if(this.filteredOptions===undefined||1!==this.filteredOptions.length)return;this.optionClicked(0,this.filteredOptions[0].key),this.resetState()}setTimeout(function(){t.searchInput=""},.1)}}},e.prototype.handleKeyPress=function(e){var t=this,n=this.searchInput,i=e.which||e.keyCode||e.charCode;return 8!==i&&46!==i&&13!==i&&9!==i&&27!==i&&(n+=String.fromCharCode(i).toLowerCase())," "===n?(this.showMenu(),void setTimeout(function(){t.searchInput=""},.1)):""===n?(this.filteredObj=this.facetsObj,this.textSearchEvent.emit(""),void(this.facetSelected&&this.facetSelected.options===undefined&&this.resetState())):void(8!==i&&46!==i&&this.filterFacets(n))},e.prototype.enableTextEntry=function(){this.setFocusedEventEmitter=!0,this.showMenu()},e.prototype.facetClicked=function(e,t){var n=this;this.hideMenu();var i=this.filteredObj[e],r=i.label;Array.isArray(r)&&(r=r.join("")),this.facetSelected={name:i.name,label:[r,""]},i.options!==undefined&&(this.filteredOptions=this.facetOptions=i.options,this.showMenu()),setTimeout(function(){n.searchInput=""},.1),this.strings.prompt="",setTimeout(function(){n.setFocusedEventEmitter=!0},.1)},e.prototype.optionClicked=function(e,t){var n=this,i=this.facetSelected;i.name=i.name+"="+t,i.label[1]=this.filteredOptions[e].label,Array.isArray(i.label[1])&&(i.label[1]=i.label[1].join("")),this.currentSearch.push(i),this.resetState(),this.emitQuery(),setTimeout(function(){n.hideMenu()},.1)},e.prototype.addFilterManually=function(t,n){var e=this.filteredObj.findIndex(function(e){return e.name===t}),i=-1!==e?this.filteredObj[e].options.findIndex(function(e){return e.key===n}):-1;-1!==e&&-1!==i&&(this.facetClicked(e,t),this.optionClicked(i,n))},e.prototype.removeFilterManually=function(t,n){var e=this.currentSearch.findIndex(function(e){return e.name===t+"="+n});-1!==e&&this.removeFacet(e)},e.prototype.emitQuery=function(e){for(var n=this,t="",i=0;i<this.currentSearch.length;i++)0!==this.currentSearch[i].name.indexOf("text")&&(0<t.length&&(t+="&"),t+=this.currentSearch[i].name);if(e!==undefined&&0===e.indexOf("text"))this.textSearchEvent.emit(""),this.textSearch=undefined;else if(this.searchUpdatedEvent.emit(this.buildTermsArray()),this.updateUrl(t),0<this.currentSearch.length){var r=this.currentSearch[this.currentSearch.length-1].name.split("=");this.facetsSave.forEach(function(e,t){e.name===r[0]&&(!0===e.singleton?n.deleteFacetEntirely(r):n.deleteFacetSelection(r))})}},e.prototype.removeFacet=function(e){var t=this.currentSearch[e].name;this.currentSearch.splice(e,1),this.facetSelected===undefined?this.emitQuery(t):(this.resetState(),this.searchInput=""),0===this.currentSearch.length&&(this.strings.prompt=this.promptString),this.facetsObj=this.copyFacets(this.facetsSave),this.initFacets()},e.prototype.clearSearch=function(){0<this.currentSearch.length&&(this.currentSearch=[],this.facetsObj=this.copyFacets(this.facetsSave),this.resetState(),this.searchUpdatedEvent.emit(null),this.textSearchEvent.emit(""))},e.prototype.compareEvent=function(e){this.hostEvent!==e&&this.hideMenu()},e.prototype.trackEvent=function(e){this.hostEvent=e},e}();r.decorators=[{type:t.Component,args:[{selector:"ngx-magic-search",template:'<div class="magic-search">\n <div class="search-bar">\n <i class="fa fa-filter go"></i>\n <div class="search-main-area" (click)="enableTextEntry()">\n <span class="item-list" *ngIf="currentSearch">\n <span *ngFor="let facet of currentSearch; let i = index;" class="ngx-label radius secondary item">\n <span>{{ facet.label[0] }}:<b>{{ facet.label[1] }}</b></span>\n <a class="remove" (click)="removeFacet(i)" title="{{ strings.remove }}"><i class="fa fa-times"></i></a>\n </span>\n </span>\n <span class="search-selected ngx-label" *ngIf="facetSelected">\n {{ facetSelected.label[0] }}:\n </span>\n \x3c!-- For bootstrap, the dropdown attribute is moved from input up to div. --\x3e\n <div [ngClass]="{\'search-entry\': true, \'dropdown\': true, \'active\': isMenuOpen}">\n <input class="search-input" type="text" placeholder="{{ strings.prompt }}" autocomplete="off" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (keypress)="handleKeyPress($event)" [(ngModel)]="searchInput" ngxMagicSearch="setFocusedEventEmitter"\n />\n <div class="dropdown-content" *ngIf="filteredObj.length > 0">\n <div class="arrow-up"></div>\n <ul class="ngx-dropdown-menu">\n <ng-template [ngIf]="!facetSelected">\n <li *ngFor="let facet of filteredObj; let i = index;">\n <a (click)="facetClicked(i, facet.name)" *ngIf="!isMatchLabel(facet.label)">{{ facet.label }}</a>\n <a (click)="facetClicked(i, facet.name)" *ngIf="isMatchLabel(facet.label)">\n {{ facet.label[0] }}<span class="match">{{ facet.label[1] }}</span>{{ facet.label[2] }}\n </a>\n </li>\n </ng-template>\n <ng-template [ngIf]="facetSelected">\n <li *ngFor="let option of filteredOptions; let i = index;">\n <a (click)="optionClicked(i, option.key)" *ngIf="!isMatchLabel(option.label)">\n {{ option.label }}\n </a>\n <a (click)="optionClicked(i, option.key)" *ngIf="isMatchLabel(option.label)">\n {{ option.label[0] }}<span class="match">{{ option.label[1] }}</span>{{ option.label[2] }}\n </a>\n </li>\n </ng-template>\n </ul>\n </div>\n </div>\n </div>\n <a (click)="clearSearch()" *ngIf="currentSearch.length > 0" title="{{ strings.cancel }}">\n <i class="fa fa-times cancel"></i>\n </a>\n </div>\n</div>',styles:[".dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;min-width:160px;z-index:1;margin-top:4px}.dropdown.active .dropdown-content{display:block}.ngx-dropdown-menu{z-index:1000;min-width:160px;padding:5px 0;margin:0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border-radius:3px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.ngx-dropdown-menu li:hover{cursor:pointer;background-color:#eaeaea}.arrow-up{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #fff;margin-left:5px}.ngx-dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.ngx-label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}@-moz-document url-prefix(){.item-list .item,.search-selected{top:-.4rem}}.search-bar{font-size:14px;position:relative;border:1px solid #ccc;background-color:#fff;height:auto}.search-bar i.fa-filter{color:#6a737b;position:absolute;top:.75rem;left:.65rem;font-size:18px}.search-bar .search-main-area{position:relative;margin-left:2.75rem;margin-right:2.75rem;cursor:text;text-align:left}.search-bar .item-list{position:relative;margin-top:9px;float:left}.search-bar .item-list .item{color:#333;background-color:#e6e7e8;margin-right:.5rem;display:inline-block;padding:6px;font-size:.8rem}.search-bar .item-list .item a{color:#fff}.search-bar .item-list .item a.remove:hover{cursor:pointer}.search-bar .search-selected{position:relative;padding-left:0;padding-right:0;background-color:#fff;color:#444}.search-bar .search-entry{width:18.5rem}.search-bar .search-input{width:100%;border:0;-webkit-box-shadow:none;box-shadow:none;margin:6px 0;background-color:#fff;color:#444;height:28px}.search-bar .search-input:focus{-webkit-box-shadow:none;box-shadow:none;background-color:#fff}.search-bar .match{font-weight:700}.search-bar i.cancel{color:#6a737b;position:absolute;top:.75rem;right:.65rem;font-size:18px}.search-bar i.cancel:hover{color:#8b0000;cursor:pointer}"]}]}],r.ctorParameters=function(){return[{type:t.KeyValueDiffers}]},r.propDecorators={strings:[{type:t.Input,args:["strings"]}],facets_param:[{type:t.Input,args:["facets_param"]}],textSearchEvent:[{type:t.Output}],searchUpdatedEvent:[{type:t.Output}],compareEvent:[{type:t.HostListener,args:["document:click",["$event"]]}],trackEvent:[{type:t.HostListener,args:["click",["$event"]]}]};var a=function(){function e(e){this.platformId=e}return e.prototype.invokeElementMethod=function(e,t){n.isPlatformBrowser(this.platformId)&&e.nativeElement[t]()},e}();a.decorators=[{type:t.Injectable}],a.ctorParameters=function(){return[{type:Object,decorators:[{type:t.Inject,args:[t.PLATFORM_ID]}]}]};var s=function(){function e(e,t){this.el=e,this.renderer=t}return e.prototype.ngOnChanges=function(){this.focusEvent&&this.renderer.invokeElementMethod(this.el.nativeElement,"focus")},e}();s.decorators=[{type:t.Directive,args:[{selector:"[ngxMagicSearch]"}]}],s.ctorParameters=function(){return[{type:t.ElementRef},{type:a}]},s.propDecorators={focusEvent:[{type:t.Input}]};var o=function(){};o.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,i.FormsModule],providers:[a],declarations:[r,s],exports:[r,s]}]}],o.ctorParameters=function(){return[]},e.NgxMagicSearchModule=o,e.ɵc=s,e.ɵb=r,e.ɵa=a,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-magicsearch.umd.min.js.map