Skip to content
Snippets Groups Projects
Commit bac8e7ec authored by BOUHADDOUZA's avatar BOUHADDOUZA Committed by Delphine
Browse files

[US TRTL-147] : Add scrollTop component

[US TRTL-147] : code review
parent 8622dcfd
No related branches found
No related tags found
1 merge request!1Feature/design/1
<div class="scroll-to-top" [ngClass]="{ 'show-scrollTop': windowScrolled }">
<button mat-mini-fab (click)="scrollToTop()">
<mat-icon>expand_less</mat-icon>
</button>
</div>
@import '../../../../sass/variables/colors';
.scroll-to-top {
position: fixed;
bottom: 12%;
right: 1%;
opacity: 0;
transition: all .3s ease-in-out;
}
.show-scrollTop {
opacity: 1;
transition: all .3s ease-in-out;
}
.mat-mini-fab {
background-color: var(--vitamui-primary);
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatIconModule } from '@angular/material';
import { ScrollTopComponent } from './scroll-top.component';
describe('ScrollTopComponent', () => {
let component: ScrollTopComponent;
let fixture: ComponentFixture<ScrollTopComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ScrollTopComponent],
imports: [MatIconModule]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ScrollTopComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { DOCUMENT } from '@angular/common';
import { Component, HostListener, Inject, OnInit } from '@angular/core';
@Component({
selector: 'vitamui-common-scroll-top',
templateUrl: './scroll-top.component.html',
styleUrls: ['./scroll-top.component.scss'],
})
export class ScrollTopComponent implements OnInit {
windowScrolled: boolean;
constructor(@Inject(DOCUMENT) private document) {}
ngOnInit() {}
@HostListener('window:scroll')
onWindowScroll() {
if (
window.pageYOffset ||
this.document.documentElement.scrollTop ||
this.document.body.scrollTop > 100
) {
this.windowScrolled = true;
} else if (
(this.windowScrolled && window.pageYOffset) ||
this.document.documentElement.scrollTop ||
this.document.body.scrollTop < 10
) {
this.windowScrolled = false;
}
}
scrollToTop() {
(function smoothScroll() {
const currentScroll =
document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothScroll);
window.scrollTo(0, currentScroll - currentScroll / 8);
}
})();
}
}
/*
* Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
* and the signatories of the "VITAM - Accord du Contributeur" agreement.
*
* contact@programmevitam.fr
*
* This software is a computer program whose purpose is to implement
* implement a digital archiving front-office system for the secure and
* efficient high volumetry VITAM solution.
*
* This software is governed by the CeCILL-C license under French law and
* abiding by the rules of distribution of free software. You can use,
* modify and/ or redistribute the software under the terms of the CeCILL-C
* license as circulated by CEA, CNRS and INRIA at the following URL
* "http://www.cecill.info".
*
* As a counterpart to the access to the source code and rights to copy,
* modify and redistribute granted by the license, users are provided only
* with a limited warranty and the software's author, the holder of the
* economic rights, and the successive licensors have only limited
* liability.
*
* In this respect, the user's attention is drawn to the risks associated
* with loading, using, modifying and/or developing or reproducing the
* software by the user in light of its specific status of free software,
* that may mean that it is complicated to manipulate, and that also
* therefore means that it is reserved for developers and experienced
* professionals having in-depth computer knowledge. Users are therefore
* encouraged to load and test the software's suitability as regards their
* requirements in conditions enabling the security of their systems and/or
* data to be ensured and, more generally, to use and operate it in the
* same conditions as regards security.
*
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule, MatIconModule } from '@angular/material';
import { ScrollTopComponent } from './scroll-top.component';
@NgModule({
declarations: [ScrollTopComponent],
imports: [CommonModule, MatButtonModule, MatIconModule],
exports: [ScrollTopComponent],
})
export class ScrollTopModule {}
......@@ -57,6 +57,7 @@ import { FooterModule } from './components/footer/footer.module';
import { NavbarModule } from './components/navbar/navbar.module';
import { OrderByButtonModule } from './components/order-by-button/order-by-button.module';
import { OrderDropdownModule } from './components/order-dropdown/order-dropdown.module';
import { ScrollTopModule } from './components/scroll-top/scroll-top.module';
import { SearchBarModule } from './components/search-bar/search-bar.module';
import { SlideToggleModule } from './components/slide-toggle/slide-toggle.module';
import { StepperModule } from './components/stepper/stepper.module';
......@@ -133,6 +134,7 @@ export function startupServiceFactory(startupService: StartupService) {
TooltipModule,
CountryModule,
VitamUIAutocompleteModule,
ScrollTopModule,
FooterModule
],
declarations: [
......@@ -181,6 +183,7 @@ export function startupServiceFactory(startupService: StartupService) {
TruncatePipe,
CountryModule,
VitamUIAutocompleteModule,
ScrollTopModule,
FooterModule
],
providers: [
......
......@@ -2,9 +2,9 @@
</div>
<div class="body">
</div>
<div class="footer" >
<vitamui-common-footer></vitamui-common-footer>
</div>
<div class="footer">
</div>
\ No newline at end of file
......@@ -51,7 +51,7 @@ import { NewPortalComponent } from './new-portal.component';
ReactiveFormsModule,
RouterModule,
ApplicationSelectContentModule,
VitamUICommonModule,
VitamUICommonModule
],
declarations: [NewPortalComponent]
})
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment