File
Constructor
constructor(configService: ConfigService, router: Router, ga: GoogleAnalyticsService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| configService |
ConfigService
|
No
|
| router |
Router
|
No
|
| ga |
GoogleAnalyticsService
|
No
|
|
|
copyrightYear
|
Default value : new Date().getFullYear()
|
|
|
|
faEnvelope
|
Default value : faEnvelope
|
|
|
|
faFacebookSquare
|
Default value : faFacebookSquare
|
|
|
|
faGithub
|
Default value : faGithub
|
|
|
|
faGlobe
|
Default value : faGlobe
|
|
|
|
faPhone
|
Default value : faPhone
|
|
|
|
faTwitterSquare
|
Default value : faTwitterSquare
|
|
|
|
Public
ga
|
Type : GoogleAnalyticsService
|
|
|
|
masterSheetLink
|
Type : string
|
Default value : ''
|
|
|
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { faFacebookSquare, faGithub, faTwitterSquare } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
import { faGlobe, faPhone } from '@fortawesome/free-solid-svg-icons';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
import { ConfigService } from '../../app-config.service';
import { GaAction, GaCategory } from '../../models/ga.model';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {
faGlobe = faGlobe;
faGithub = faGithub;
faPhone = faPhone;
faEnvelope = faEnvelope;
faFacebookSquare = faFacebookSquare;
faTwitterSquare = faTwitterSquare;
copyrightYear = new Date().getFullYear();
masterSheetLink = '';
constructor(
public configService: ConfigService,
private readonly router: Router,
public ga: GoogleAnalyticsService,
) {
this.configService.config$.subscribe((config) => {
this.masterSheetLink = config['masterSheetLink'] as string;
});
}
openDocs() {
this.router.navigate(['/docs']);
this.ga.event(GaAction.NAV, GaCategory.FOOTER, 'Open Docs');
}
openFaq() {
this.router.navigate(['/docs/faq']);
this.ga.event(GaAction.NAV, GaCategory.FOOTER, 'Open FAQ');
}
openData() {
window.open(this.masterSheetLink, '_blank');
this.ga.event(GaAction.NAV, GaCategory.FOOTER, 'Open Master Tables');
}
}
<div class="mt-5 pt-5 pb-5 footer">
<div class="container">
<div class="row">
<div class="col-lg-4 col-xs-12 about-company">
<h3>ASCT+B Reporter</h3>
<p class="pr-5 text-white-50">
A state of the art visualization tool to envision large datasets developed by CNS, Indiana University.
</p>
<p class="social-media">
<a href="https://www.facebook.com/cnscenter" target="_blank" rel="noopener"
><fa-icon [icon]="faFacebookSquare" class="mr-1"></fa-icon
></a>
<a href="https://twitter.com/cnscenter" target="_blank" rel="noopener"
><fa-icon [icon]="faTwitterSquare"></fa-icon
></a>
</p>
</div>
<div class="col-lg-2 col-xs-12 help">
<h4 class="mt-lg-0 mt-sm-3 h5"><strong>Help</strong></h4>
<ul class="m-0 p-0">
<li>• <a (click)="openDocs()">Documentation</a></li>
<li>• <a (click)="openFaq()">FAQ</a></li>
<li>
•
<a (click)="openData()" target="_blank" rel="noopener">Master Data Tables</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-xs-12 links">
<h4 class="mt-lg-0 mt-sm-3 h5"><strong>Links</strong></h4>
<ul class="m-0 p-0">
<li>
•
<a href="https://www.indiana.edu" target="_blank" rel="noopener">Indiana University</a>
</li>
<li>
•
<a href="https://cns.iu.edu" target="_blank" rel="noopener">CI for Network Science Center</a>
</li>
<li>
•
<a href="https://github.com/hubmapconsortium" target="_blank" rel="noopener">HuBMAP Consortium</a>
</li>
<li>
•
<a href="https://hubmapconsortium.org/policies/" target="_blank" rel="noopener">Policy</a>
</li>
<li>
•
<a
href="https://hubmapconsortium.org/wp-content/uploads/2020/06/DUA_FINAL_2020_02_03_for_Signature.pdf"
target="_blank"
rel="noopener"
>Terms & Conditions</a
>
</li>
</ul>
</div>
<div class="col-lg-3 col-xs-12 location">
<h4 class="mt-lg-0 mt-sm-3 h5"><strong>Location</strong></h4>
<p>700 N. Woodlawn Ave. Luddy Hall, Suite 4018 Bloomington, IN 47408</p>
<p class="mb-0 mt-2"><fa-icon [icon]="faPhone" class="mr-2"></fa-icon> (812) 856 7034</p>
<p>
<fa-icon [icon]="faEnvelope" class="mr-2"></fa-icon>
infoccf@indiana.edu
</p>
</div>
</div>
<div class="row mt-5">
<div class="col copyright">
<p class="">
<small class="text-white-50">© {{ copyrightYear }}. All Rights Reserved. MIT License.</small>
</p>
</div>
</div>
</div>
</div>
a {
cursor: pointer;
}
.footer {
background: #262626;
color: white;
.links,
.help {
ul {
list-style-type: none;
}
li a {
text-decoration: none;
color: white;
transition: color 0.2s;
&:hover {
text-decoration: none;
color: #4180cb;
}
}
}
.about-company {
fa-icon {
font-size: 2rem;
}
a {
color: rgb(249, 249, 249);
transition: color 0.2s;
&:hover {
color: #4180cb;
}
}
}
.location {
i {
font-size: 1.125rem;
}
}
.copyright p {
border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
}
}
.social-media {
a {
padding-left: 0.2rem;
}
}
Legend
Html element with directive