Closed lbs-rodrigo closed 3 years ago
Os arquivos que alterei são
{ "name": "argon-design-system-angular", "version": "1.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "8.2.0", "@angular/cdk": "8.1.3", "@angular/common": "8.2.0", "@angular/compiler": "8.2.0", "@angular/core": "8.2.2", "@angular/forms": "8.2.0", "@angular/material": "^6.4.7", "@angular/platform-browser": "~8.0.1", "@angular/platform-browser-dynamic": "8.0.3", "@angular/router": "~8.0.1", "@ng-bootstrap/ng-bootstrap": "5.1.0", "jw-bootstrap-switch-ng2": "2.0.5", "moment": "^2.24.0", "core-js": "^2.5.4", "ng2-nouislider": "1.7.13", "nouislider": "13.1.3", "popper.js": "1.14.7", "rxjs": "6.4.0", "rxjs-compat": "6.4.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "0.800.2", "@angular/cli": "~8.0.3", "@angular/compiler-cli": "8.2.0", "@angular/language-service": "~8.0.1", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "^5.0.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "^4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.4.5" } }
### src/app/app.component.ts import { Component, OnInit, Inject, Renderer, ElementRef, ViewChild, HostListener } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; import 'rxjs/add/operator/filter'; import { Title } from '@angular/platform-browser'; import { DOCUMENT, Location } from '@angular/common';
var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = 0;
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { private _router: Subscription;
constructor( private renderer : Renderer, private router: Router, @Inject(DOCUMENT,) private document: any, private element : ElementRef, public location: Location) {}
@HostListener('window:scroll', ['$event'])
hasScrolled() {
var st = window.pageYOffset;
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
var navbar = document.getElementsByTagName('nav')[0];
// If they scrolled down and are past the navbar, add class .headroom--unpinned.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
if (navbar.classList.contains('headroom--pinned')) {
navbar.classList.remove('headroom--pinned');
navbar.classList.add('headroom--unpinned');
}
// $('.navbar.headroom--pinned').removeClass('headroom--pinned').addClass('headroom--unpinned');
} else {
// Scroll Up
// $(window).height()
if(st + window.innerHeight < document.body.scrollHeight) {
// $('.navbar.headroom--unpinned').removeClass('headroom--unpinned').addClass('headroom--pinned');
if (navbar.classList.contains('headroom--unpinned')) {
navbar.classList.remove('headroom--unpinned');
navbar.classList.add('headroom--pinned');
}
}
}
lastScrollTop = st;
};
ngOnInit() {
var navbar : HTMLElement = this.element.nativeElement.children[0].children[0];
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
if (window.outerWidth > 991) {
window.document.children[0].scrollTop = 0;
}else{
window.document.activeElement.scrollTop = 0;
}
this.renderer.listenGlobal('window', 'scroll', (event) => {
const number = window.scrollY;
if (number > 150 || window.pageYOffset > 150) {
// add logic
navbar.classList.add('headroom--not-top');
} else {
// remove logic
navbar.classList.remove('headroom--not-top');
}
});
});
this.hasScrolled();
}
}
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { RouterModule } from '@angular/router'; import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component'; import { SignupComponent } from './signup/signup.component'; import { LandingComponent } from './landing/landing.component'; import { ProfileComponent } from './profile/profile.component'; import { HomeComponent } from './home/home.component'; import { NavbarComponent } from './shared/navbar/navbar.component'; import { FooterComponent } from './shared/footer/footer.component';
import { HomeModule } from './home/home.module'; import { LoginComponent } from './login/login.component';
@NgModule({ declarations: [ AppComponent, SignupComponent, LandingComponent, ProfileComponent, NavbarComponent, FooterComponent, LoginComponent ], imports: [ BrowserModule, NgbModule, FormsModule, RouterModule, AppRoutingModule, HomeModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Hi, @lbs-rodrigo. Thank you for using our product. What changes have you made?
Hi @chelaruc the changes mentioned above.
Hi, I update news versions of Angular and ajust app.module.ts but no have access to create a pull request.