Displaying All Providers and All Authors separately in Susper Angular App
In Susper results are retrieved from a lots of providers and authors. Displaying all authors’ and providers’ list on result page make appearance of result section odd and more complex. In this blog, I will describe how we have separated the list of all providers and authors from main result page and displayed it on a lightbox.
Steps:
- Making a black overlay for lightbox:
First we of all to display the results on a lightbox,we to have a black overlay for this we need a div element and inside it we need a closing button.
Clicking on the black overlay should toggle status of light box therefore we have binded click event with showMore() method.
<div id="fade_analytics" class="black_overlay" (click)='showMore()'><a class="closeX" id="closeX">✖</a></div>
- Creating a white content to display all Providers or Authors:
Now we need a white block to display all Providers or all Authors so after creating a black overlay in background we need a white foreground.
Therefore I have implemented a div element and put all the chart elements inside the div element so that it will be displayed on a white foreground on a translucent black background.
<div id="light_analytics" class="white_content_analytics"> <div class="show_more"><h2 class="heading"><b>Analytics</b></h2><div id="filtersearch" *ngFor="let nav of navigation$|async; let i = index"><div class="card-container" id="relate" *ngIf="nav.displayname =='Provider' || nav.displayname =='Authors'"><h3 class="related-searches" *ngIf="i===currentelement"><b>Top {{nav.displayname}}<span *ngIf="nav.displayname.slice(-1)!=='s'">s</span></b></h3> <div style="display: block;cursor:pointer;cursor: hand;" *ngFor="let element of ((i != currentelement)? (nav.elements | slice:0:0) :nav.elements)"> </div></div></div></div>
The code to display All providers and All authors are contained inside the white block and the logic to display the each section is also implemented.
- Showing only 50 results on result page and implementing a button to open all providers or authors in light box:
Currently we are displaying the top five providers and authors and we provide a button to show more providers and authors which then displays 50 more results and then we display an interactive button that toggles display of all authors and providers on a lightbox. To display 5 and 50 results we use slice pipe in angular. The button Show All Providers/Authors is binded with showMore() function which toggles lightbox.
<div style="display: block;cursor:pointer;cursor: hand;" *ngFor="let element of ((i != selectedelement)? (nav.elements | slice:0:5) :(nav.elements | slice:0:50) )"> <a [routerLink]="['/search']" [queryParams]="changequerylook(element.modifier,element)" *ngIf="element.name" href="#" [style.color]="themeService.linkColor"> {{element.name}} <span class="badge badge-info">{{element.count}}</span> </a><a *ngIf="!element.name" style="color: black;cursor: default" href="#" [style.color]="themeService.linkColor"> Undefined Author <span class="badge badge-info">{{element.count}}</span></a></div> <button class="showMoreBtn" (click)="showMore()" *ngIf="selectedelement===i" [style.color]="themeService.linkColor">Show All {{nav.displayname}}<span *ngIf="nav.displayname.slice(-1)!=='s'">s</span></button>
- Implementing the logic to display all results on white content:
Now we need to implement the logic to toggle lightbox to display All Providers and All Authors. This logic is implemented mainly in showMore() function which toggles the lightbox containing the All Providers and All Authors
showMore() { this.selectedelement = -1; if (!this.showMoreAnalytics) { this.showMoreAnalytics = true; document.getElementById('light_analytics').style.display = 'block'; document.getElementById('fade_analytics').style.display = 'block'; } else { this.showMoreAnalytics = false; document.getElementById('light_analytics').style.display = 'none'; document.getElementById('fade_analytics').style.display = 'none';}}
Here we use showMoreAnalytics variable to check whether the user has asked to show all Providers or Authors. We also make selectedelement variable to -1 to hide the long list of 50 Providers or Authors when Lightbox displays all the Providers or Author. Finally we use document object in javascript and select the DOM elements by their id and set their display property this shows and hides the lightbox on result page.
Resources
1.YaCy Advanced Search Parameters
http://www.yacy-websuche.de/wiki/index.php/En:SearchParameters
2.W3School lightbox
https://www.w3schools.com/howto/howto_js_lightbox.asp
You must be logged in to post a comment.