blob: 3e3ed6360a78c2ed61efe91fa02bda8444c8436e [file] [log] [blame]
{"version":3,"file":"covalent-core-media.js","sources":["../../../src/platform/core/media/services/media.service.ts","../../../src/platform/core/media/directives/media-toggle.directive.ts","../../../../src/platform/core/media/media.module.ts"],"sourcesContent":["import { Injectable, NgZone } from '@angular/core';\nimport { Observable, BehaviorSubject, Subscription, fromEvent } from 'rxjs';\n\n@Injectable()\nexport class TdMediaService {\n private _resizing: boolean = false;\n private _globalSubscription: Subscription;\n private _queryMap: Map<string, string> = new Map<string, string>();\n private _querySources: { [key: string]: BehaviorSubject<boolean> } = {};\n private _queryObservables: { [key: string]: Observable<boolean> } = {};\n\n constructor(private _ngZone: NgZone) {\n this._queryMap.set('xs', '(max-width: 599px)');\n this._queryMap.set('gt-xs', '(min-width: 600px)');\n this._queryMap.set('sm', '(min-width: 600px) and (max-width: 959px)');\n this._queryMap.set('gt-sm', '(min-width: 960px)');\n this._queryMap.set('md', '(min-width: 960px) and (max-width: 1279px)');\n this._queryMap.set('gt-md', '(min-width: 1280px)');\n this._queryMap.set('lg', '(min-width: 1280px) and (max-width: 1919px)');\n this._queryMap.set('gt-lg', '(min-width: 1920px)');\n this._queryMap.set('xl', '(min-width: 1920px)');\n this._queryMap.set('landscape', '(orientation: landscape)');\n this._queryMap.set('portrait', '(orientation: portrait)');\n this._queryMap.set('print', 'print');\n\n this._resizing = false;\n // we make sure that the resize checking happend outside of Angular since it happens often\n this._globalSubscription = this._ngZone.runOutsideAngular(() => {\n return fromEvent(window, 'resize').subscribe(() => {\n // way to prevent the resize event from triggering the match media if there is already one event running already.\n if (!this._resizing) {\n this._resizing = true;\n setTimeout(() => {\n this._onResize();\n this._resizing = false;\n }, 100);\n }\n });\n });\n }\n\n /**\n * Deregisters a query so its stops being notified or used.\n */\n deregisterQuery(query: string): void {\n if (this._queryMap.get(query.toLowerCase())) {\n query = this._queryMap.get(query.toLowerCase());\n }\n this._querySources[query].unsubscribe();\n delete this._querySources[query];\n delete this._queryObservables[query];\n }\n\n /**\n * Used to evaluate whether a given media query is true or false given the current device's screen / window size.\n */\n public query(query: string): boolean {\n if (this._queryMap.get(query.toLowerCase())) {\n query = this._queryMap.get(query.toLowerCase());\n }\n return this._ngZone.run(() => {\n return matchMedia(query).matches;\n });\n }\n\n /**\n * Registers a media query and returns an [Observable] that will re-evaluate and\n * return if the given media query matches on window resize.\n * Note: don't forget to unsubscribe from [Observable] when finished watching.\n */\n public registerQuery(query: string): Observable<boolean> {\n if (this._queryMap.get(query.toLowerCase())) {\n query = this._queryMap.get(query.toLowerCase());\n }\n if (!this._querySources[query]) {\n this._querySources[query] = new BehaviorSubject<boolean>(matchMedia(query).matches);\n this._queryObservables[query] = this._querySources[query].asObservable();\n }\n return this._queryObservables[query];\n }\n\n /**\n * Trigger a match media event on all subscribed observables.\n */\n public broadcast(): void {\n this._onResize();\n }\n\n private _onResize(): void {\n for (const query of Object.keys(this._querySources)) {\n this._ngZone.run(() => {\n this._matchMediaTrigger(query);\n });\n }\n }\n\n private _matchMediaTrigger(query: string): void {\n this._querySources[query].next(matchMedia(query).matches);\n }\n}\n","import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';\nimport { Renderer2 } from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { TdMediaService } from '../services/media.service';\n\n@Directive({\n selector: '[tdMediaToggle]',\n})\nexport class TdMediaToggleDirective implements OnInit, OnDestroy {\n private _subscription: Subscription;\n\n private _query: string;\n private _matches: boolean = false;\n private _attributes: { [key: string]: string } = {};\n private _styles: { [key: string]: string } = {};\n private _classes: string[] = [];\n\n /**\n * tdMediaToggle: string\n * Media query used to evaluate screen/window size.\n * Toggles attributes, classes and styles if media query is matched.\n */\n @Input('tdMediaToggle')\n set query(query: string) {\n if (!query) {\n throw new Error('Query needed for [tdMediaToggle] directive.');\n }\n this._query = query;\n }\n\n /**\n * mediaAttributes: {[key: string]: string}\n * Attributes to be toggled when media query matches.\n */\n @Input('mediaAttributes')\n set attributes(attributes: any) {\n this._attributes = attributes;\n }\n\n /**\n * mediaClasses: string[]\n * CSS Classes to be toggled when media query matches.\n */\n @Input('mediaClasses')\n set classes(classes: string[]) {\n this._classes = classes;\n }\n\n /**\n * mediaStyles: {[key: string]: string}\n * CSS Styles to be toggled when media query matches.\n */\n @Input('mediaStyles')\n set styles(styles: any) {\n this._styles = styles;\n }\n\n constructor(private _renderer: Renderer2, private _elementRef: ElementRef, private _mediaService: TdMediaService) {}\n\n ngOnInit(): void {\n this._mediaChange(this._mediaService.query(this._query));\n this._subscription = this._mediaService.registerQuery(this._query).subscribe((matches: boolean) => {\n this._mediaChange(matches);\n });\n }\n\n ngOnDestroy(): void {\n if (this._subscription) {\n this._subscription.unsubscribe();\n }\n }\n\n private _mediaChange(matches: boolean): void {\n this._matches = matches;\n this._changeAttributes();\n this._changeClasses();\n this._changeStyles();\n }\n\n private _changeAttributes(): void {\n for (const attr in this._attributes) {\n if (this._matches) {\n this._renderer.setAttribute(this._elementRef.nativeElement, attr, this._attributes[attr]);\n } else {\n this._renderer.removeAttribute(this._elementRef.nativeElement, attr);\n }\n }\n }\n\n private _changeClasses(): void {\n this._classes.forEach((className: string) => {\n if (this._matches) {\n this._renderer.addClass(this._elementRef.nativeElement, className);\n } else {\n this._renderer.removeClass(this._elementRef.nativeElement, className);\n }\n });\n }\n\n private _changeStyles(): void {\n for (const style in this._styles) {\n if (this._matches) {\n this._renderer.setStyle(this._elementRef.nativeElement, style, this._styles[style]);\n } else {\n this._renderer.removeStyle(this._elementRef.nativeElement, style);\n }\n }\n }\n}\n","import { Type } from '@angular/core';\nimport { NgModule } from '@angular/core';\n\nimport { TdMediaToggleDirective } from './directives/media-toggle.directive';\nimport { TdMediaService } from './services/media.service';\n\nconst TD_MEDIA: Type<any>[] = [TdMediaToggleDirective];\n\n@NgModule({\n declarations: [TD_MEDIA],\n exports: [TD_MEDIA],\n providers: [TdMediaService],\n})\nexport class CovalentMediaModule {}\n"],"names":[],"mappings":"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"}