creativetimofficial / argon-design-system-angular

MIT License
248 stars 294 forks source link

Update Versions #3

Closed lbs-rodrigo closed 3 years ago

lbs-rodrigo commented 5 years ago

Hi, I update news versions of Angular and ajust app.module.ts but no have access to create a pull request.

lbs-rodrigo commented 5 years ago

Os arquivos que alterei são

package.json

{ "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();
}

}

src/app/app.module.ts

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 { }

chelaruc commented 5 years ago

Hi, @lbs-rodrigo. Thank you for using our product. What changes have you made?

lbs-rodrigo commented 5 years ago

Hi @chelaruc the changes mentioned above.