Commit fa71fa98 authored by Shane Eckenrode's avatar Shane Eckenrode

Add responsive directive

parent 0fdd15b7
Pipeline #85018 passed with stages
in 3 minutes and 58 seconds
export { ResponsiveModule } from './lib/responsive.module';
export { ResponsiveService } from './lib/responsive.service'; export { ResponsiveService } from './lib/responsive.service';
export { ScreenSize } from './lib/screen-size.model'; export { ScreenSize } from './lib/screen-size.model';
import { CommonModule } from '@angular/common';
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Observable, Subject } from 'rxjs';
import { ResponsiveModule } from './responsive.module';
import { ResponsiveService } from './responsive.service';
import { ScreenSize } from './screen-size.model';
const o = new Subject<ScreenSize>();
class ResponsiveServiceStub {
currentScreenSize$: Observable<ScreenSize> = o.asObservable();
}
@Component({
selector: 'ut-test-comp',
template: `
<button utResponsive></button>
`
})
class TestComponent {}
describe('ResponsiveDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let classes: any;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CommonModule, ResponsiveModule],
declarations: [TestComponent],
providers: [{ provide: ResponsiveService, useClass: ResponsiveServiceStub }],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
classes = fixture.debugElement.query(By.css('button')).classes;
});
describe('when screen size is DESKTOP', () => {
beforeEach(() => {
o.next(ScreenSize.DESKTOP);
fixture.detectChanges();
});
it('should only have desktop class', () => {
expect(classes.desktop).toBeTruthy();
expect(classes.tablet).toBeFalsy();
expect(classes.mobile).toBeFalsy();
});
});
describe('when screen size is TABLET_SM', () => {
beforeEach(() => {
o.next(ScreenSize.TABLET_SM);
fixture.detectChanges();
});
it('should have tablet-sm class', () => {
expect(classes.desktop).toBeFalsy();
expect(classes.tablet).toBeFalsy();
expect(classes['tablet-sm']).toBeTruthy();
expect(classes.mobile).toBeFalsy();
});
});
describe('when screen size is TABLET', () => {
beforeEach(() => {
o.next(ScreenSize.TABLET);
fixture.detectChanges();
});
it('should have tablet class', () => {
expect(classes.desktop).toBeFalsy();
expect(classes.tablet).toBeTruthy();
expect(classes['tablet-sm']).toBeFalsy();
expect(classes.mobile).toBeFalsy();
});
});
describe('when screen size is MOBILE', () => {
beforeEach(() => {
o.next(ScreenSize.MOBILE);
fixture.detectChanges();
});
it('should only have mobile class', () => {
expect(classes.desktop).toBeFalsy();
expect(classes.tablet).toBeFalsy();
expect(classes.mobile).toBeTruthy();
});
});
});
import { Directive, HostBinding, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { ResponsiveService } from './responsive.service';
import { ScreenSize } from './screen-size.model';
@Directive({
selector: '[utResponsive]'
})
export class ResponsiveDirective implements OnInit, OnDestroy {
@HostBinding('class.desktop')
public isDesktop = false;
@HostBinding('class.tablet')
public isTablet = false;
@HostBinding('class.tablet-sm')
public isSmallTablet = false;
@HostBinding('class.mobile')
public isMobile = false;
private destroyed$ = new Subject<any>();
constructor(private responsiveService: ResponsiveService) {}
ngOnInit(): void {
this.responsiveService.currentScreenSize$
.pipe(
filter(size => !!size),
takeUntil(this.destroyed$)
)
.subscribe((size: ScreenSize) => {
switch (size) {
case ScreenSize.DESKTOP:
this.isDesktop = true;
this.isTablet = false;
this.isSmallTablet = false;
this.isMobile = false;
break;
case ScreenSize.TABLET:
this.isDesktop = false;
this.isTablet = true;
this.isSmallTablet = false;
this.isMobile = false;
break;
case ScreenSize.TABLET_SM:
this.isDesktop = false;
this.isTablet = false;
this.isSmallTablet = true;
this.isMobile = false;
break;
case ScreenSize.MOBILE:
this.isDesktop = false;
this.isTablet = false;
this.isSmallTablet = false;
this.isMobile = true;
break;
}
});
}
public ngOnDestroy(): void {
this.destroyed$.next();
this.destroyed$.complete();
}
}
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ResponsiveDirective } from './responsive.directive';
@NgModule({
imports: [CommonModule],
declarations: [ResponsiveDirective],
exports: [ResponsiveDirective]
})
export class ResponsiveModule {}
Markdown is supported
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