diff --git a/.gitignore b/.gitignore index 8f4c558..ca51a75 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,7 @@ expamples/package-lock.json *.iml # misc +/.angular/cache *.js *.map *.d.ts diff --git a/examples/src/polyfills.ts b/examples/src/polyfills.ts index aa665d6..28a238f 100644 --- a/examples/src/polyfills.ts +++ b/examples/src/polyfills.ts @@ -55,8 +55,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - +import "zone.js"; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS diff --git a/examples/src/test.ts b/examples/src/test.ts index 1631789..3e4e30c 100644 --- a/examples/src/test.ts +++ b/examples/src/test.ts @@ -1,11 +1,11 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; +import "zone.js/testing"; +import { getTestBed } from "@angular/core/testing"; import { BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; + platformBrowserDynamicTesting, +} from "@angular/platform-browser-dynamic/testing"; declare const require: any; @@ -15,6 +15,6 @@ getTestBed().initTestEnvironment( platformBrowserDynamicTesting() ); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = require.context("./", true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); diff --git a/ng-package.json b/ng-package.json index 26426e5..4c24239 100644 --- a/ng-package.json +++ b/ng-package.json @@ -1,8 +1,6 @@ { - "$schema": "./node_modules/ng-packagr/ng-package.schema.json", - "name": "ngx-responsive", - "version": "9.0.0", - "lib": { - "entryFile": "src/index.ts" - } -} \ No newline at end of file + "$schema": "./node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "src/public_api.ts" + } +} diff --git a/package.json b/package.json index 4fae5ba..34fa92c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,6 @@ { - "$schema": "./node_modules/ng-packagr/package.schema.json", "name": "ngx-responsive", - "version": "9.0.3", + "version": "9.0.5", "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9", "scripts": { "start": "ng serve --aot", @@ -13,12 +12,6 @@ "lint": "ng lint", "e2e": "ng e2e" }, - "ngPackage": { - "lib": { - "entryFile": "src/index.ts" - } - }, - "typings": "./index.d.ts", "repository": { "type": "git", "url": "git+https://github.com/ManuCutillas/ngx-responsive.git" @@ -70,38 +63,33 @@ }, "homepage": "https://github.com/ManuCutillas/ngx-responsive", "private": false, - "peerDependencies": { - "@angular/common": "^9.1.6", - "@angular/core": "^9.1.6" - }, + "peerDependencies": {}, "devDependencies": { - "@angular/animations": "^9.1.6", - "@angular/cli": "^9.0.1", - "@angular/common": "^9.1.6", - "@angular/compiler": "^9.1.6", - "@angular/compiler-cli": "^9.1.6", - "@angular/core": "^9.1.6", - "@angular/language-service": "^9.1.6", - "@angular/platform-browser": "^9.1.6", - "@angular/platform-browser-dynamic": "^9.1.6", - "@angular/platform-server": "^9.1.6", + "@angular-devkit/build-angular": "^16.2.13", + "@angular/animations": "^16.2.12", + "@angular/cli": "^16.2.13", + "@angular/common": "^16.2.12", + "@angular/compiler": "^16.2.12", + "@angular/compiler-cli": "^16.2.12", + "@angular/core": "^16.2.12", + "@angular/language-service": "^16.2.12", + "@angular/platform-browser": "^16.2.12", + "@angular/platform-browser-dynamic": "^16.2.12", + "@angular/platform-server": "^16.2.12", "@compodoc/compodoc": "1.1.11", - "@nguniversal/express-engine": "^9.1.1", - "@nguniversal/module-map-ngfactory-loader": "^8.2.6", + "@nguniversal/express-engine": "^16.2.0", "@types/node": "~8.9.4", - "copyfiles": "^2.2.0", + "copyfiles": "^2.4.1", "cpr": "^3.0.1", - "del-cli": "^3.0.0", - "codelyzer": "^5.2.2", - "ng-packagr": "^9.1.3", - "onchange": "^7.0.2", - "protractor": "~5.4.4", - "source-map-explorer": "^2.4.2", - "ts-loader": "^6.2.1", - "tsickle": "^0.38.1", - "ts-node": "~8.10.1", - "tslint": "~6.1.2", - "typescript": "~3.8.3", - "zone.js": "~0.10.3" + "del-cli": "^5.0.0", + "ng-packagr": "^16.2.3", + "onchange": "^7.1.0", + "protractor": "~7.0.0", + "source-map-explorer": "^2.5.2", + "ts-loader": "^9.3.1", + "ts-node": "~10.9.1", + "tslint": "~6.1.3", + "typescript": "~4.9.5", + "zone.js": "~0.13.3" } -} +} \ No newline at end of file diff --git a/src/@core/providers/responsive-base/responsive-base.ts b/src/@core/providers/responsive-base/responsive-base.ts index 88bf990..21f7368 100644 --- a/src/@core/providers/responsive-base/responsive-base.ts +++ b/src/@core/providers/responsive-base/responsive-base.ts @@ -5,193 +5,213 @@ * @license MIT */ import { - EventEmitter, - TemplateRef, - ViewContainerRef, - OnInit, - OnDestroy, - ChangeDetectorRef, -} from '@angular/core'; -import { Subscription } from 'rxjs'; -import { IResponsiveSubscriptions } from '../../interfaces'; -import { ResponsiveState } from '../responsive-state/responsive-state'; -import { PlatformService } from '../platform-service/platform.service'; - + EventEmitter, + TemplateRef, + ViewContainerRef, + OnInit, + OnDestroy, + ChangeDetectorRef, + Injectable, +} from "@angular/core"; +import { Subscription } from "rxjs"; +import { IResponsiveSubscriptions } from "../../interfaces"; +import { ResponsiveState } from "../responsive-state/responsive-state"; +import { PlatformService } from "../platform-service/platform.service"; + +@Injectable() export abstract class RESPONSIVE_BASE implements OnInit, OnDestroy { - - private _noRepeat = 0; - private _sizes_grid_state: any; - private _others_grid_state: string[]; - private _directive: string; - - private _subscription_Bootstrap: Subscription; - private _subscription_Browser: Subscription; - private _subscription_Pixel_Ratio: Subscription; - private _subscription_Device: Subscription; - private _subscription_Orientation: Subscription; - private _subscription_Standard: Subscription; - private _subscription_IE_Version: Subscription; - private _subscription_custom_sizes: Subscription; - - protected _showWhenTrue: boolean; - - private set_active_subscriptions: IResponsiveSubscriptions = { - bootstrap: false, - browser: false, - device: false, - pixelratio: false, - orientation: false, - standard: false, - ie: false, - sizes: false - }; - private _isEnabledForPlatform: boolean; - - constructor( - private templateRef: TemplateRef, - private viewContainer: ViewContainerRef, - private _responsiveState: ResponsiveState, - private cd: ChangeDetectorRef, - private platformService: PlatformService - ) { - this._isEnabledForPlatform = this.platformService.isEnabledForPlatform(); + private _noRepeat = 0; + private _sizes_grid_state: any; + private _others_grid_state: string[]; + private _directive: string; + + private _subscription_Bootstrap: Subscription; + private _subscription_Browser: Subscription; + private _subscription_Pixel_Ratio: Subscription; + private _subscription_Device: Subscription; + private _subscription_Orientation: Subscription; + private _subscription_Standard: Subscription; + private _subscription_IE_Version: Subscription; + private _subscription_custom_sizes: Subscription; + + protected _showWhenTrue: boolean; + + private set_active_subscriptions: IResponsiveSubscriptions = { + bootstrap: false, + browser: false, + device: false, + pixelratio: false, + orientation: false, + standard: false, + ie: false, + sizes: false, + }; + private _isEnabledForPlatform: boolean; + + constructor( + private templateRef: TemplateRef, + private viewContainer: ViewContainerRef, + private _responsiveState: ResponsiveState, + private cd: ChangeDetectorRef, + private platformService: PlatformService + ) { + this._isEnabledForPlatform = this.platformService.isEnabledForPlatform(); + } + + protected eventChanges: EventEmitter = new EventEmitter(); + protected setGrid(grid_state: any, directive: string): void { + switch (directive) { + case "bootstrap": + this.set_active_subscriptions.bootstrap = true; + break; + case "device": + this.set_active_subscriptions.device = true; + break; + case "standard": + this.set_active_subscriptions.standard = true; + break; + case "orientation": + this.set_active_subscriptions.orientation = true; + break; + case "browser": + this.set_active_subscriptions.browser = true; + break; + case "pixelratio": + this.set_active_subscriptions.pixelratio = true; + break; + case "ie": + this.set_active_subscriptions.ie = true; + break; + case "sizes": + this.set_active_subscriptions.sizes = true; + break; } - protected eventChanges: EventEmitter = new EventEmitter(); - protected setGrid(grid_state: any, directive: string): void { - switch (directive) { - case 'bootstrap': - this.set_active_subscriptions.bootstrap = true; - break; - case 'device': - this.set_active_subscriptions.device = true; - break; - case 'standard': - this.set_active_subscriptions.standard = true; - break; - case 'orientation': - this.set_active_subscriptions.orientation = true; - break; - case 'browser': - this.set_active_subscriptions.browser = true; - break; - case 'pixelratio': - this.set_active_subscriptions.pixelratio = true; - break; - case 'ie': - this.set_active_subscriptions.ie = true; - break; - case 'sizes': - this.set_active_subscriptions.sizes = true; - break; - } - - if (directive === 'sizes') { - this._sizes_grid_state = grid_state; - } else { - this._others_grid_state = (Array.isArray(grid_state) ? grid_state : [grid_state]); - } - this._directive = directive; + if (directive === "sizes") { + this._sizes_grid_state = grid_state; + } else { + this._others_grid_state = ( + (Array.isArray(grid_state) ? grid_state : [grid_state]) + ); } - - public ngOnInit() { - if (this._isEnabledForPlatform) { - if (this.set_active_subscriptions.bootstrap) { - this._subscription_Bootstrap = this._responsiveState.elemento$.subscribe(this.updateView.bind(this)); - } - - - if (this.set_active_subscriptions.browser) { - this._subscription_Browser = this._responsiveState.browser$.subscribe(this.updateView.bind(this)); - } - if (this.set_active_subscriptions.device) { - this._subscription_Device = this._responsiveState.device$.subscribe(this.updateView.bind(this)); - } - - if (this.set_active_subscriptions.pixelratio) { - this._subscription_Pixel_Ratio = this._responsiveState.pixel$.subscribe(this.updateView.bind(this)); - } - - if (this.set_active_subscriptions.orientation) { - this._subscription_Orientation = this._responsiveState.orientation$.subscribe(this.updateView.bind(this)); - } - - if (this.set_active_subscriptions.standard) { - this._subscription_Standard = this._responsiveState.standard$.subscribe(this.updateView.bind(this)); - } - - if (this.set_active_subscriptions.ie) { - this._subscription_IE_Version = this._responsiveState.ieVersion$.subscribe(this.updateView.bind(this)); - } - - if (this.set_active_subscriptions.sizes) { - this._subscription_custom_sizes = this._responsiveState.ancho$.subscribe(this.updateView.bind(this)); - } - } + this._directive = directive; + } + + public ngOnInit() { + if (this._isEnabledForPlatform) { + if (this.set_active_subscriptions.bootstrap) { + this._subscription_Bootstrap = + this._responsiveState.elemento$.subscribe(this.updateView.bind(this)); + } + + if (this.set_active_subscriptions.browser) { + this._subscription_Browser = this._responsiveState.browser$.subscribe( + this.updateView.bind(this) + ); + } + if (this.set_active_subscriptions.device) { + this._subscription_Device = this._responsiveState.device$.subscribe( + this.updateView.bind(this) + ); + } + + if (this.set_active_subscriptions.pixelratio) { + this._subscription_Pixel_Ratio = this._responsiveState.pixel$.subscribe( + this.updateView.bind(this) + ); + } + + if (this.set_active_subscriptions.orientation) { + this._subscription_Orientation = + this._responsiveState.orientation$.subscribe( + this.updateView.bind(this) + ); + } + + if (this.set_active_subscriptions.standard) { + this._subscription_Standard = this._responsiveState.standard$.subscribe( + this.updateView.bind(this) + ); + } + + if (this.set_active_subscriptions.ie) { + this._subscription_IE_Version = + this._responsiveState.ieVersion$.subscribe( + this.updateView.bind(this) + ); + } + + if (this.set_active_subscriptions.sizes) { + this._subscription_custom_sizes = + this._responsiveState.ancho$.subscribe(this.updateView.bind(this)); + } } + } - public ngOnDestroy() { - if (this._isEnabledForPlatform) { - if (this.set_active_subscriptions.bootstrap) { - this._subscription_Bootstrap.unsubscribe(); - } + public ngOnDestroy() { + if (this._isEnabledForPlatform) { + if (this.set_active_subscriptions.bootstrap) { + this._subscription_Bootstrap.unsubscribe(); + } - if (this.set_active_subscriptions.browser) { - this._subscription_Browser.unsubscribe(); - } + if (this.set_active_subscriptions.browser) { + this._subscription_Browser.unsubscribe(); + } - if (this.set_active_subscriptions.device) { - this._subscription_Device.unsubscribe(); - } + if (this.set_active_subscriptions.device) { + this._subscription_Device.unsubscribe(); + } - if (this.set_active_subscriptions.pixelratio) { - this._subscription_Pixel_Ratio.unsubscribe(); - } + if (this.set_active_subscriptions.pixelratio) { + this._subscription_Pixel_Ratio.unsubscribe(); + } - if (this.set_active_subscriptions.orientation) { - this._subscription_Orientation.unsubscribe(); - } + if (this.set_active_subscriptions.orientation) { + this._subscription_Orientation.unsubscribe(); + } - if (this.set_active_subscriptions.standard) { - this._subscription_Standard.unsubscribe(); - } + if (this.set_active_subscriptions.standard) { + this._subscription_Standard.unsubscribe(); + } - if (this.set_active_subscriptions.ie) { - this._subscription_IE_Version.unsubscribe(); - } + if (this.set_active_subscriptions.ie) { + this._subscription_IE_Version.unsubscribe(); + } - if (this.set_active_subscriptions.sizes) { - this._subscription_custom_sizes.unsubscribe(); - } - } + if (this.set_active_subscriptions.sizes) { + this._subscription_custom_sizes.unsubscribe(); + } } - - private showHide(show: boolean): void { - if (this._isEnabledForPlatform) { - if (show) { - if (this._noRepeat === 0) { - this._noRepeat = 1; - this.eventChanges.emit(true); - this.viewContainer.createEmbeddedView(this.templateRef); - this.cd.markForCheck(); - } - } else { - this._noRepeat = 0; - this.eventChanges.emit(false); - this.viewContainer.clear(); - this.cd.markForCheck(); - } + } + + private showHide(show: boolean): void { + if (this._isEnabledForPlatform) { + if (show) { + if (this._noRepeat === 0) { + this._noRepeat = 1; + this.eventChanges.emit(true); + this.viewContainer.createEmbeddedView(this.templateRef); + this.cd.markForCheck(); } + } else { + this._noRepeat = 0; + this.eventChanges.emit(false); + this.viewContainer.clear(); + this.cd.markForCheck(); + } } - - private updateView(value: any): void { - const showBoolean = this._directive === 'sizes' ? - ( - (typeof this._sizes_grid_state.min === 'undefined' || value >= this._sizes_grid_state.min) && - (typeof this._sizes_grid_state.max === 'undefined' || value <= this._sizes_grid_state.max) - ) : - !!this._others_grid_state && this._others_grid_state.indexOf(value) !== -1; - - this.showHide(this._showWhenTrue ? showBoolean : !showBoolean); - } + } + + private updateView(value: any): void { + const showBoolean = + this._directive === "sizes" + ? (typeof this._sizes_grid_state.min === "undefined" || + value >= this._sizes_grid_state.min) && + (typeof this._sizes_grid_state.max === "undefined" || + value <= this._sizes_grid_state.max) + : !!this._others_grid_state && + this._others_grid_state.indexOf(value) !== -1; + + this.showHide(this._showWhenTrue ? showBoolean : !showBoolean); + } } diff --git a/src/@core/providers/responsive-state/responsive-state.ts b/src/@core/providers/responsive-state/responsive-state.ts index 09a1268..d3a518a 100644 --- a/src/@core/providers/responsive-state/responsive-state.ts +++ b/src/@core/providers/responsive-state/responsive-state.ts @@ -4,655 +4,736 @@ * * @license MIT */ -import { Injectable } from '@angular/core'; -import { Observable, BehaviorSubject, combineLatest } from 'rxjs'; -import { fromEvent } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; -import { defaultIfEmpty } from 'rxjs/operators'; -import { map } from 'rxjs/operators'; -import { startWith } from 'rxjs/operators'; - -import { ResponsiveWindowDirective } from '../../../@directives'; +import { Injectable } from "@angular/core"; +import { Observable, BehaviorSubject, combineLatest } from "rxjs"; +import { fromEvent } from "rxjs"; +import { debounceTime } from "rxjs/operators"; +import { defaultIfEmpty } from "rxjs/operators"; +import { map } from "rxjs/operators"; +import { startWith } from "rxjs/operators"; + +import { ResponsiveWindowDirective } from "../../../@directives"; import { - REG_TABLETS, REG_MOBILES, REG_SMARTS_TV, REG_BROWSERS, REG_SORT_NAMES, - REG_GAME_DEVICES, REG_BOTS, REG_OS, REG_WINDOWS_OS_VERSION, REG_LINUX_OS, - USER_AGENT, REG_IE_VERSIONS, TABLET, WINDOWS_OS, LINUX_OS, MOBILE, - IE_VERSIONS -} from '../../constants'; + REG_TABLETS, + REG_MOBILES, + REG_SMARTS_TV, + REG_BROWSERS, + REG_SORT_NAMES, + REG_GAME_DEVICES, + REG_BOTS, + REG_OS, + REG_WINDOWS_OS_VERSION, + REG_LINUX_OS, + USER_AGENT, + REG_IE_VERSIONS, + TABLET, + WINDOWS_OS, + LINUX_OS, + MOBILE, + IE_VERSIONS, +} from "../../constants"; import { - TLinuxOS, TWindowsOS, TTablet, TMobile, - TosSystems, TSmartTv, TGameDevices -} from '../../types'; -import { ResponsiveConfig } from '../responsive-config/responsive-config'; -import { PlatformService } from '../platform-service/platform.service'; + TLinuxOS, + TWindowsOS, + TTablet, + TMobile, + TosSystems, + TSmartTv, + TGameDevices, +} from "../../types"; +import { ResponsiveConfig } from "../responsive-config/responsive-config"; +import { PlatformService } from "../platform-service/platform.service"; @Injectable() export class ResponsiveState { - - public _windows: Object = {}; - public _window: any = null; - - public elemento$: Observable; - public ancho$: Observable; - public browser$: Observable; - public pixel$: Observable; - public device$: Observable; - public orientation$: Observable; - public standard$: Observable; - public ieVersion$: Observable; - public userAgent$: Observable; - - private _screenWidth: number = null; - private _screenHeight: number = null; - private _userAgent: any = null; - private isEnabledForPlatform: boolean = null; - - private _forceRefresh$: BehaviorSubject = new BehaviorSubject(null); - - constructor( - platformService: PlatformService, - private _responsiveConfig: ResponsiveConfig, + public _windows: Object = {}; + public _window: any = null; + + public elemento$: Observable; + public ancho$: Observable; + public browser$: Observable; + public pixel$: Observable; + public device$: Observable; + public orientation$: Observable; + public standard$: Observable; + public ieVersion$: Observable; + public userAgent$: Observable; + + private _screenWidth: number = null; + private _screenHeight: number = null; + private _userAgent: any = null; + private isEnabledForPlatform: boolean = null; + + private _forceRefresh$: BehaviorSubject = new BehaviorSubject( + null + ); + + constructor( + platformService: PlatformService, + private _responsiveConfig: ResponsiveConfig + ) { + this.isEnabledForPlatform = platformService.isEnabledForPlatform(); + this._window = this.isEnabledForPlatform ? window : null; + this._screenWidth = this.isEnabledForPlatform + ? this._window.screen.width + : 0; + this._screenHeight = this.isEnabledForPlatform + ? this._window.screen.height + : 0; + this._userAgent = this.isEnabledForPlatform + ? this._window.navigator.userAgent.toLowerCase() + : null; + + if (this.isEnabledForPlatform) { + const _resize$ = combineLatest( + fromEvent(this._window, "resize").pipe( + debounceTime(this._responsiveConfig.config.debounceTime), + defaultIfEmpty(undefined), + startWith(this.getWidth("window")) + ), + this._forceRefresh$ + ).pipe(debounceTime(this._responsiveConfig.config.debounceTime)); + + const _pixelRatio$ = fromEvent(this._window, "onload").pipe( + defaultIfEmpty(undefined), + startWith(this.getDevicePixelRatio()) + ); + + const _device$ = fromEvent(this._window, "onload").pipe( + defaultIfEmpty(undefined), + startWith(this.getUserAgent()) + ); + + const _userAgent$ = fromEvent(this._window, "onload").pipe( + defaultIfEmpty(undefined), + startWith(this.userAgentData()) + ); + + const _orientation$ = fromEvent(this._window, "orientationchange").pipe( + defaultIfEmpty(undefined), + startWith(this.getOrientation()) + ); + + this.elemento$ = _resize$.pipe(map(this.sizeOperations.bind(this))); + this.ancho$ = _resize$.pipe(map(this.sizeObserver.bind(this))); + this.browser$ = _device$.pipe(map(this.browserName.bind(this))); + this.pixel$ = _pixelRatio$.pipe(map(this.pixelRatio.bind(this))); + this.device$ = _device$.pipe(map(this.deviceDetection.bind(this))); + this.orientation$ = _orientation$.pipe( + map(this.orientationDevice.bind(this)) + ); + this.standard$ = _device$.pipe(map(this.standardDevices.bind(this))); + this.ieVersion$ = _device$.pipe(map(this.ieVersionDetect.bind(this))); + this.userAgent$ = _userAgent$.pipe(map(this.userAgentData.bind(this))); + } + } + + public forceRefresh() { + this._forceRefresh$.next(null); + } + + /** + * @name registerWindow + * @param rw + * @param _window + */ + public registerWindow(rw: ResponsiveWindowDirective, _window = null) { + if (rw.name && !this._windows[rw.name]) { + this._windows[rw.name] = rw; + if (_window !== null) { + _window.dispatchEvent(new Event("resize")); + } + } + } + + /** + * @name unregisterWindow + * @param rw + * @param _window + */ + public unregisterWindow(rw: ResponsiveWindowDirective, _window = null) { + for (const rwn in this._windows) { + if (this._windows[rwn] === rw) { + delete this._windows[rwn]; + } + } + if (_window !== null) { + _window.dispatchEvent(new Event("resize")); + } + } + + /** + * @name getWidth + * @param windowName + */ + public getWidth(windowName: string = null): any { + if (this._windows !== null && this.isEnabledForPlatform) { + if (windowName && this._windows[windowName]) { + return this._windows[windowName].getWidth(); + } else { + return this._window.innerWidth; + } + } + return 0; + } + + /** + * @name getDevicePixelRatio + */ + public getDevicePixelRatio(): any { + let ratio = 1; + if (this.isEnabledForPlatform) { + if ( + typeof this._window.screen.systemXDPI !== "undefined" && + typeof this._window.screen.logicalXDPI !== "undefined" && + this._window.screen.systemXDPI > this._window.screen.logicalXDPI + ) { + ratio = + this._window.screen.systemXDPI / this._window.screen.logicalXDPI; + } else if (typeof this._window.devicePixelRatio !== "undefined") { + ratio = this._window.devicePixelRatio; + } + } + return ratio; + } + + /** + * @name getOrientation + */ + public getOrientation(): any { + return this.isEnabledForPlatform ? window.orientation : null; + } + + /** + * @name sizeObserver + */ + public sizeObserver(): any { + return this._windows !== null && this.isEnabledForPlatform + ? this.getWidth("window") + : 0; + } + + /** + * @name sizeOperations + */ + public sizeOperations(): any { + let _sizes = null; + const _breackpoints = this._responsiveConfig.config.breakPoints; + if ( + this._windows !== null && + this.isEnabledForPlatform && + _breackpoints !== null ) { - this.isEnabledForPlatform = platformService.isEnabledForPlatform(); - this._window = (this.isEnabledForPlatform) ? window : null; - this._screenWidth = (this.isEnabledForPlatform) ? this._window.screen.width : 0; - this._screenHeight = (this.isEnabledForPlatform) ? this._window.screen.height : 0; - this._userAgent = (this.isEnabledForPlatform) ? this._window.navigator.userAgent.toLowerCase() : null; - - if(this.isEnabledForPlatform) { - - const _resize$ = combineLatest( - fromEvent(this._window, 'resize').pipe( - debounceTime(this._responsiveConfig.config.debounceTime), - defaultIfEmpty(), - startWith(this.getWidth('window')) - ), - this._forceRefresh$ - ).pipe( - debounceTime(this._responsiveConfig.config.debounceTime) - ); - - const _pixelRatio$ = fromEvent(this._window, 'onload') - .pipe( - defaultIfEmpty(), - startWith(this.getDevicePixelRatio()) - ); - - const _device$ = fromEvent(this._window, 'onload') - .pipe( - defaultIfEmpty(), - startWith(this.getUserAgent()) - ); - - const _userAgent$ = fromEvent(this._window, 'onload') - .pipe( - defaultIfEmpty(), - startWith(this.userAgentData()) - ); - - const _orientation$ = fromEvent(this._window, 'orientationchange') - .pipe( - defaultIfEmpty(), - startWith(this.getOrientation()) - ); - - this.elemento$ = _resize$.pipe(map(this.sizeOperations.bind(this))); - this.ancho$ = _resize$.pipe(map(this.sizeObserver.bind(this))); - this.browser$ = _device$.pipe(map(this.browserName.bind(this))); - this.pixel$ = _pixelRatio$.pipe(map(this.pixelRatio.bind(this))); - this.device$ = _device$.pipe(map(this.deviceDetection.bind(this))); - this.orientation$ = _orientation$.pipe(map(this.orientationDevice.bind(this))); - this.standard$ = _device$.pipe(map(this.standardDevices.bind(this))); - this.ieVersion$ = _device$.pipe(map(this.ieVersionDetect.bind(this))); - this.userAgent$ = _userAgent$.pipe(map(this.userAgentData.bind(this))); - } - } - - public forceRefresh(){ - this._forceRefresh$.next(null); - } - - /** - * @name registerWindow - * @param rw - * @param _window - */ - public registerWindow(rw: ResponsiveWindowDirective, _window = null) { - if (rw.name && !this._windows[rw.name]) { - this._windows[rw.name] = rw; - if (_window !== null) { - _window.dispatchEvent(new Event('resize')); - } - } - } - - /** - * @name unregisterWindow - * @param rw - * @param _window - */ - public unregisterWindow(rw: ResponsiveWindowDirective, _window = null) { - for (const rwn in this._windows) { - if (this._windows[rwn] === rw) { - delete (this._windows[rwn]); - } - } - if (_window !== null) { - _window.dispatchEvent(new Event('resize')); - } - } - - /** - * @name getWidth - * @param windowName - */ - public getWidth(windowName: string = null): any { - if (this._windows !== null && this.isEnabledForPlatform) { - if (windowName && this._windows[windowName]) { - return this._windows[windowName].getWidth(); - } else { - return this._window.innerWidth; - } - } - return 0; - } - - /** - * @name getDevicePixelRatio - */ - public getDevicePixelRatio(): any { - let ratio = 1; - if (this.isEnabledForPlatform) { - if (typeof this._window.screen.systemXDPI !== 'undefined' && - typeof this._window.screen.logicalXDPI !== 'undefined' && - this._window.screen.systemXDPI > this._window.screen.logicalXDPI) { - ratio = this._window.screen.systemXDPI / this._window.screen.logicalXDPI; - } else if (typeof this._window.devicePixelRatio !== 'undefined') { - ratio = this._window.devicePixelRatio; - } - } - return ratio; - } - - /** - * @name getOrientation - */ - public getOrientation(): any { - return (this.isEnabledForPlatform) ? window.orientation : null; - } - - /** - * @name sizeObserver - */ - public sizeObserver(): any { - return (this._windows !== null && this.isEnabledForPlatform) ? this.getWidth('window') : 0; - } - - /** - * @name sizeOperations - */ - public sizeOperations(): any { - let _sizes = null; - const _breackpoints = this._responsiveConfig.config.breakPoints; - if (this._windows !== null && this.isEnabledForPlatform && _breackpoints !== null) { - const _width = this.getWidth('window'); - if (_breackpoints.xl.min <= _width) { - _sizes = 'xl'; - } else if (_breackpoints.lg.max >= _width && _breackpoints.lg.min <= _width) { - _sizes = 'lg'; - } else if (_breackpoints.md.max >= _width && _breackpoints.md.min <= _width) { - _sizes = 'md'; - } else if (_breackpoints.sm.max >= _width && _breackpoints.sm.min <= _width) { - _sizes = 'sm'; - } else if (_breackpoints.xs.max >= _width) { - _sizes = 'xs'; - } - } - return _sizes; - } - - /** - * @name sizeOperations - */ - public pixelRatio(): any { - let _pixelRatio = null; - if (this.isEnabledForPlatform && this._screenWidth !== 0 && this._screenHeight !== 0) { - if (this.testIs4k()) { - _pixelRatio = '4k'; - } else if (this.getDevicePixelRatio() > 1) { - _pixelRatio = 'retina'; - } else if (this.getDevicePixelRatio() === 1) { - _pixelRatio = '1x'; - } - } - return _pixelRatio; - } - - /** - * @name testIs4k - * @param screenHeight - * @param screenWidth - */ - public testIs4k(): boolean { - return (this._screenHeight !== 0 && this._screenWidth !== 0) ? - ((this._screenHeight < this._screenWidth) ? (this._screenWidth > 3839) : (this._screenHeight > 3839)) : false; - } - - /** - * @name orientationDevice - */ - public orientationDevice(): any { - let _orientationDevice = null; - if (this.isEnabledForPlatform) { - if (this.isMobile() || this.isTablet()) { - if (this._window.innerHeight > this._window.innerWidth) { - _orientationDevice = 'portrait'; - } else { - _orientationDevice = 'landscape'; - } - } else if (this.isSMART() || this.isDesktop()) { - _orientationDevice = 'landscape'; - } - } - return _orientationDevice; - } - - /** - * @name getUserAgent - */ - public getUserAgent(): any { - return (this.isEnabledForPlatform) ? this._window.navigator.userAgent.toLowerCase() : null; - } - - /** - * @name userAgentData - */ - public userAgentData(): any { - if (this._window === null) { - return USER_AGENT; - } - const DEFAULT_USER_AGENT_VALUE = ''; - const _ieVersionState = (this.ieVersionDetect() !== null); - const _isGameDevice = this.isGameDevice(); - const _isSMART = this.isSMART(); - const _isDesktop = this.isDesktop(); - const _isTablet = this.isTablet(); - const _isMobile = this.isMobile(); - const _isWindows = this.isWindows(); - const _isLinux = this.isLinux(); - return { - device: this.deviceDetection(), - browser: this.browserName(), - pixelratio: this.pixelRatio(), - ie_version: { - name: (_ieVersionState) ? this.ieVersionDetect() : DEFAULT_USER_AGENT_VALUE, - state: _ieVersionState - }, - game_device: { - name: (_isGameDevice) ? this.gameDevices() : DEFAULT_USER_AGENT_VALUE, - state: _isGameDevice - }, - smart_tv: { - name: (_isSMART) ? this.smartTv() : DEFAULT_USER_AGENT_VALUE, - state: _isSMART - }, - desktop: { - name: (_isDesktop) ? this.desktop() : DEFAULT_USER_AGENT_VALUE, - state: _isDesktop - }, - tablet: { - name: (_isTablet) ? this.tablet() : DEFAULT_USER_AGENT_VALUE, - state: _isTablet - }, - mobile: { - name: (_isMobile) ? this.mobile() : DEFAULT_USER_AGENT_VALUE, - state: _isMobile - }, - window_os: { - name: (_isWindows) ? this.windows() : DEFAULT_USER_AGENT_VALUE, - state: _isWindows - }, - linux_os: { - name: (_isLinux) ? this.linux() : DEFAULT_USER_AGENT_VALUE, - state: _isLinux - }, - bot: this.isBot() - }; - } - - /** - * @name deviceDetection - */ - public deviceDetection(): any { - if (this.isEnabledForPlatform) { - if (this.isMobile()) { - return 'mobile'; - } else if (this.isTablet()) { - return 'tablet'; - } else if (this.isSMART()) { - return 'smarttv'; - } else if (this.isDesktop()) { - return 'desktop'; - } - } - return null; - } - - /** - * @name standardDevices - */ - public standardDevices(): any { - if (this.isEnabledForPlatform) { - if (REG_MOBILES.IPHONE.REG.test(this._userAgent)) { - return 'iphone'; - } else if (REG_TABLETS.IPAD.REG.test(this._userAgent)) { - return 'ipad'; - } else if (this.isMobile() && REG_MOBILES.ANDROID.REG.test(this._userAgent)) { - return 'android mobile'; - } else if (this.isTablet() && REG_MOBILES.ANDROID.REG.test(this._userAgent)) { - return 'android tablet'; - } else if (REG_MOBILES.WINDOWS_PHONE.REG.test(this._userAgent)) { - return 'windows phone'; - } - } - return null; - } - - /** - * @name ieVersionDetect - */ - public ieVersionDetect(): any { - if (this.isEnabledForPlatform) { - const _userAgent = this.getUserAgent(); - const msie = _userAgent.indexOf('msie '); - let _ieVersion = null; - if (REG_IE_VERSIONS.MS_MSIE.REG.test(_userAgent)) { - _ieVersion = parseInt(_userAgent.substring(msie + 5, _userAgent.indexOf('.', msie)), 10); - if (_ieVersion === 7) { - return IE_VERSIONS.IE_7; - } else if (_ieVersion == 8) { - return IE_VERSIONS.IE_8; - } else if (_ieVersion == 9) { - return IE_VERSIONS.IE_9; - } else if (_ieVersion == 10) { - return IE_VERSIONS.IE_10; - } - } - // let trident = this._userAgent.indexOf('trident/') - if (REG_IE_VERSIONS.MS_TRIDENT.REG.test(_userAgent)) { - let _rv = _userAgent.indexOf('rv:'); - _ieVersion = parseInt(_userAgent.substring(_rv + 3, _userAgent.indexOf('.', _rv)), 10); - if (_ieVersion == 11) { - return IE_VERSIONS.IE_11; - } - } - - // let edge = this._userAgent.indexOf('Edg/') - if (REG_IE_VERSIONS.MS_EDGE.REG.test(_userAgent)) { - return IE_VERSIONS.IE_12; - } - } - return null; - } - - /** - * @name browserName - */ - public browserName(): any { - let _browserName = null; - if (this.isEnabledForPlatform) { - if (REG_SORT_NAMES.WEBKIT.REG.test(this._userAgent) && REG_SORT_NAMES.CHROME.REG.test(this._userAgent) - && !REG_BROWSERS.IE.REG.test(this._userAgent)) { - _browserName = REG_BROWSERS.CHROME.VALUE; - } else if (REG_SORT_NAMES.MOZILLA.REG.test(this._userAgent) && - REG_BROWSERS.FIREFOX.REG.test(this._userAgent)) { - _browserName = REG_BROWSERS.FIREFOX.VALUE; - } else if (REG_BROWSERS.IE.REG.test(this._userAgent)) { - _browserName = REG_BROWSERS.IE.VALUE; - } else if (REG_SORT_NAMES.SAFARI.REG.test(this._userAgent) && - REG_SORT_NAMES.APPLE_WEBKIT.REG.test(this._userAgent) && !REG_SORT_NAMES.CHROME.REG.test(this._userAgent)) { - _browserName = REG_BROWSERS.SAFARI.VALUE; - } else if (REG_BROWSERS.OPERA.REG.test(this._userAgent)) { - _browserName = REG_BROWSERS.OPERA.VALUE; - } else if (REG_BROWSERS.SILK.REG.test(this._userAgent)) { - _browserName = REG_BROWSERS.SILK.VALUE; - } else if (REG_BROWSERS.YANDEX.REG.test(this._userAgent)) { - _browserName = REG_BROWSERS.YANDEX.VALUE; - } else { - _browserName = REG_BROWSERS.NA.VALUE; - } - } - return _browserName; - } - - /** - * @name gameDevices - */ - public gameDevices(): TGameDevices { - let _gameDevice = null; - if (this._userAgent !== null) { - for (let _reg in REG_GAME_DEVICES) { - if (REG_GAME_DEVICES[_reg].REG.test(this._userAgent)) { - _gameDevice = REG_GAME_DEVICES[_reg].VALUE; - } - } - } - return _gameDevice; - } - - /** - * @name smartTv - */ - public smartTv(): TSmartTv { - let _smartTv = null; - if (this._userAgent !== null) { - if (REG_SMARTS_TV.CHROMECAST.REG.test(this._userAgent)) { - _smartTv = REG_SMARTS_TV.CHROMECAST.VALUE; - } else if (REG_SMARTS_TV.APPLE_TV.REG.test(this._userAgent)) { - _smartTv = REG_SMARTS_TV.APPLE_TV.VALUE; - } else if (REG_SMARTS_TV.GOOGLE_TV.REG.test(this._userAgent)) { - _smartTv = REG_SMARTS_TV.GOOGLE_TV.VALUE; - } else if (REG_SMARTS_TV.XBOX_ONE.REG.test(this._userAgent)) { - _smartTv = REG_SMARTS_TV.XBOX_ONE.VALUE; - } else if (REG_SMARTS_TV.PS4.REG.test(this._userAgent)) { - _smartTv = REG_SMARTS_TV.PS4.VALUE; - } else if (REG_SMARTS_TV.GENERIC_TV.REG.test(this._userAgent)) { - _smartTv = REG_SMARTS_TV.GENERIC_TV.VALUE; - } - } - return _smartTv; - } - - /** - * @name desktop - */ - public desktop(): TosSystems { - let _desktop = null; - if (this._userAgent !== null) { - if (REG_OS.WINDOWS.REG.test(this._userAgent)) { - _desktop = REG_OS.WINDOWS.VALUE; - } else if (REG_OS.MAC_OS.REG.test(this._userAgent)) { - _desktop = REG_OS.MAC_OS.VALUE; - } else if (REG_OS.LINUX.REG.test(this._userAgent)) { - _desktop = REG_OS.LINUX.VALUE; - } else if (REG_OS.FIREFOX_OS.REG.test(this._userAgent)) { - _desktop = REG_OS.FIREFOX_OS.VALUE; - } else if (REG_OS.FIREFOX_OS.REG.test(this._userAgent)) { - _desktop = REG_OS.CHROME_OS.VALUE; - } - } - return _desktop; - } - - /** - * @name tablet - */ - public tablet(): TTablet { - let _tablet = null; - if (this._userAgent !== null) { - if (REG_TABLETS.IPAD.REG.test(this._userAgent)) { - _tablet = TABLET.IPAD; - } else if (REG_TABLETS.TABLET.REG.test(this._userAgent) && REG_MOBILES.ANDROID.REG.test(this._userAgent)) { - _tablet = TABLET.ANDROID; - } else if (REG_TABLETS.KINDLE.REG.test(this._userAgent)) { - _tablet = TABLET.KINDLE; - } else if (REG_TABLETS.TABLET.REG.test(this._userAgent)) { - _tablet = TABLET.GENERIC_TABLET; - } - } - return _tablet; - } - - /** - * @name mobile - */ - public mobile(): TMobile { - let _mobile = null; - if (this._userAgent !== null) { - for (let _reg in REG_MOBILES) { - if (REG_MOBILES[_reg].REG.test(this._userAgent)) { - _mobile = REG_MOBILES[_reg].VALUE; - } - } - if (_mobile === null && this.isMobile()) { - _mobile = MOBILE.GENERIC_MOBILE; - } - } - return _mobile; - } - - /** - * @name windows - */ - public windows(): TWindowsOS { - let _windows = null; - if (this._userAgent !== null) { - for (let _reg in REG_WINDOWS_OS_VERSION) { - if (REG_WINDOWS_OS_VERSION[_reg].REG.test(this._userAgent)) { - _windows = REG_WINDOWS_OS_VERSION[_reg].VALUE; - } - } - if (_windows === null && this.isDesktop() && this.isWindows()) { - _windows = WINDOWS_OS.GENERIC_WINDOWS; - } - } - return _windows; - } - - /** - * @name linux - */ - public linux(): TLinuxOS { - let _linux: TLinuxOS = null; - if (this._userAgent !== null) { - for (let _reg in REG_LINUX_OS) { - if (REG_LINUX_OS[_reg].REG.test(this._userAgent)) { - _linux = REG_LINUX_OS[_reg].VALUE; - } - } - if (_linux === null && this.isDesktop() && this.isLinux()) { - _linux = LINUX_OS.GENERIC_LINUX; - } - } - return _linux; - } - - /** - * @name isMobile - */ - public isMobile(): boolean { - let _result = false; - if (this._userAgent !== null) { - let _userAgent = this._userAgent; - _result = (REG_MOBILES.GENERIC_REG_1.REG.test(_userAgent) && this.isTablet() === false || - REG_MOBILES.GENERIC_REG_2.REG.test(_userAgent.substr(0, 4)) && this.isTablet() === false); - } - return _result; - } - - /** - * @name isTablet - */ - public isTablet(): boolean { - let _result = false; - if (this._userAgent !== null) { - _result = (REG_TABLETS.IPAD.REG.test(this._userAgent) || - REG_TABLETS.KINDLE.REG.test(this._userAgent) || - REG_TABLETS.TABLET.REG.test(this._userAgent)); + const _width = this.getWidth("window"); + if (_breackpoints.xl.min <= _width) { + _sizes = "xl"; + } else if ( + _breackpoints.lg.max >= _width && + _breackpoints.lg.min <= _width + ) { + _sizes = "lg"; + } else if ( + _breackpoints.md.max >= _width && + _breackpoints.md.min <= _width + ) { + _sizes = "md"; + } else if ( + _breackpoints.sm.max >= _width && + _breackpoints.sm.min <= _width + ) { + _sizes = "sm"; + } else if (_breackpoints.xs.max >= _width) { + _sizes = "xs"; + } + } + return _sizes; + } + + /** + * @name sizeOperations + */ + public pixelRatio(): any { + let _pixelRatio = null; + if ( + this.isEnabledForPlatform && + this._screenWidth !== 0 && + this._screenHeight !== 0 + ) { + if (this.testIs4k()) { + _pixelRatio = "4k"; + } else if (this.getDevicePixelRatio() > 1) { + _pixelRatio = "retina"; + } else if (this.getDevicePixelRatio() === 1) { + _pixelRatio = "1x"; + } + } + return _pixelRatio; + } + + /** + * @name testIs4k + * @param screenHeight + * @param screenWidth + */ + public testIs4k(): boolean { + return this._screenHeight !== 0 && this._screenWidth !== 0 + ? this._screenHeight < this._screenWidth + ? this._screenWidth > 3839 + : this._screenHeight > 3839 + : false; + } + + /** + * @name orientationDevice + */ + public orientationDevice(): any { + let _orientationDevice = null; + if (this.isEnabledForPlatform) { + if (this.isMobile() || this.isTablet()) { + if (this._window.innerHeight > this._window.innerWidth) { + _orientationDevice = "portrait"; + } else { + _orientationDevice = "landscape"; } - return _result; - } - - /** - * @name isSMART - */ - public isSMART(): boolean { - let _result = false; - if (this._userAgent !== null) { - _result = (REG_SMARTS_TV.GENERIC_TV.REG.test(this._userAgent) || - REG_SMARTS_TV.PS4.REG.test(this._userAgent) || - REG_SMARTS_TV.XBOX_ONE.REG.test(this._userAgent)); + } else if (this.isSMART() || this.isDesktop()) { + _orientationDevice = "landscape"; + } + } + return _orientationDevice; + } + + /** + * @name getUserAgent + */ + public getUserAgent(): any { + return this.isEnabledForPlatform + ? this._window.navigator.userAgent.toLowerCase() + : null; + } + + /** + * @name userAgentData + */ + public userAgentData(): any { + if (this._window === null) { + return USER_AGENT; + } + const DEFAULT_USER_AGENT_VALUE = ""; + const _ieVersionState = this.ieVersionDetect() !== null; + const _isGameDevice = this.isGameDevice(); + const _isSMART = this.isSMART(); + const _isDesktop = this.isDesktop(); + const _isTablet = this.isTablet(); + const _isMobile = this.isMobile(); + const _isWindows = this.isWindows(); + const _isLinux = this.isLinux(); + return { + device: this.deviceDetection(), + browser: this.browserName(), + pixelratio: this.pixelRatio(), + ie_version: { + name: _ieVersionState + ? this.ieVersionDetect() + : DEFAULT_USER_AGENT_VALUE, + state: _ieVersionState, + }, + game_device: { + name: _isGameDevice ? this.gameDevices() : DEFAULT_USER_AGENT_VALUE, + state: _isGameDevice, + }, + smart_tv: { + name: _isSMART ? this.smartTv() : DEFAULT_USER_AGENT_VALUE, + state: _isSMART, + }, + desktop: { + name: _isDesktop ? this.desktop() : DEFAULT_USER_AGENT_VALUE, + state: _isDesktop, + }, + tablet: { + name: _isTablet ? this.tablet() : DEFAULT_USER_AGENT_VALUE, + state: _isTablet, + }, + mobile: { + name: _isMobile ? this.mobile() : DEFAULT_USER_AGENT_VALUE, + state: _isMobile, + }, + window_os: { + name: _isWindows ? this.windows() : DEFAULT_USER_AGENT_VALUE, + state: _isWindows, + }, + linux_os: { + name: _isLinux ? this.linux() : DEFAULT_USER_AGENT_VALUE, + state: _isLinux, + }, + bot: this.isBot(), + }; + } + + /** + * @name deviceDetection + */ + public deviceDetection(): any { + if (this.isEnabledForPlatform) { + if (this.isMobile()) { + return "mobile"; + } else if (this.isTablet()) { + return "tablet"; + } else if (this.isSMART()) { + return "smarttv"; + } else if (this.isDesktop()) { + return "desktop"; + } + } + return null; + } + + /** + * @name standardDevices + */ + public standardDevices(): any { + if (this.isEnabledForPlatform) { + if (REG_MOBILES.IPHONE.REG.test(this._userAgent)) { + return "iphone"; + } else if (REG_TABLETS.IPAD.REG.test(this._userAgent)) { + return "ipad"; + } else if ( + this.isMobile() && + REG_MOBILES.ANDROID.REG.test(this._userAgent) + ) { + return "android mobile"; + } else if ( + this.isTablet() && + REG_MOBILES.ANDROID.REG.test(this._userAgent) + ) { + return "android tablet"; + } else if (REG_MOBILES.WINDOWS_PHONE.REG.test(this._userAgent)) { + return "windows phone"; + } + } + return null; + } + + /** + * @name ieVersionDetect + */ + public ieVersionDetect(): any { + if (this.isEnabledForPlatform) { + const _userAgent = this.getUserAgent(); + const msie = _userAgent.indexOf("msie "); + let _ieVersion = null; + if (REG_IE_VERSIONS.MS_MSIE.REG.test(_userAgent)) { + _ieVersion = parseInt( + _userAgent.substring(msie + 5, _userAgent.indexOf(".", msie)), + 10 + ); + if (_ieVersion === 7) { + return IE_VERSIONS.IE_7; + } else if (_ieVersion == 8) { + return IE_VERSIONS.IE_8; + } else if (_ieVersion == 9) { + return IE_VERSIONS.IE_9; + } else if (_ieVersion == 10) { + return IE_VERSIONS.IE_10; } - return _result; - } - - /** - * @name isDesktop - */ - public isDesktop(): boolean { - let _result = false; - if (this._userAgent !== null) { - _result = !(this.isMobile() || this.isTablet() || this.isSMART()); + } + // let trident = this._userAgent.indexOf('trident/') + if (REG_IE_VERSIONS.MS_TRIDENT.REG.test(_userAgent)) { + let _rv = _userAgent.indexOf("rv:"); + _ieVersion = parseInt( + _userAgent.substring(_rv + 3, _userAgent.indexOf(".", _rv)), + 10 + ); + if (_ieVersion == 11) { + return IE_VERSIONS.IE_11; } - return _result; - } - - /** - * @name isGameDevice - */ - public isGameDevice(): boolean { - let _result = false; - if (this._userAgent !== null) { - _result = (REG_GAME_DEVICES.PS4.REG.test(this._userAgent) || REG_GAME_DEVICES.PS3.REG.test(this._userAgent) - || REG_GAME_DEVICES.XBOX.REG.test(this._userAgent) || REG_GAME_DEVICES.XBOX_ONE.REG.test(this._userAgent) - || REG_GAME_DEVICES.WII.REG.test(this._userAgent) || REG_GAME_DEVICES.WII_U.REG.test(this._userAgent) - || REG_GAME_DEVICES.NINTENDO_3DS.REG.test(this._userAgent) || REG_GAME_DEVICES.PS_VITA.REG.test(this._userAgent) - || REG_GAME_DEVICES.PSP.REG.test(this._userAgent)); + } + + // let edge = this._userAgent.indexOf('Edg/') + if (REG_IE_VERSIONS.MS_EDGE.REG.test(_userAgent)) { + return IE_VERSIONS.IE_12; + } + } + return null; + } + + /** + * @name browserName + */ + public browserName(): any { + let _browserName = null; + if (this.isEnabledForPlatform) { + if ( + REG_SORT_NAMES.WEBKIT.REG.test(this._userAgent) && + REG_SORT_NAMES.CHROME.REG.test(this._userAgent) && + !REG_BROWSERS.IE.REG.test(this._userAgent) + ) { + _browserName = REG_BROWSERS.CHROME.VALUE; + } else if ( + REG_SORT_NAMES.MOZILLA.REG.test(this._userAgent) && + REG_BROWSERS.FIREFOX.REG.test(this._userAgent) + ) { + _browserName = REG_BROWSERS.FIREFOX.VALUE; + } else if (REG_BROWSERS.IE.REG.test(this._userAgent)) { + _browserName = REG_BROWSERS.IE.VALUE; + } else if ( + REG_SORT_NAMES.SAFARI.REG.test(this._userAgent) && + REG_SORT_NAMES.APPLE_WEBKIT.REG.test(this._userAgent) && + !REG_SORT_NAMES.CHROME.REG.test(this._userAgent) + ) { + _browserName = REG_BROWSERS.SAFARI.VALUE; + } else if (REG_BROWSERS.OPERA.REG.test(this._userAgent)) { + _browserName = REG_BROWSERS.OPERA.VALUE; + } else if (REG_BROWSERS.SILK.REG.test(this._userAgent)) { + _browserName = REG_BROWSERS.SILK.VALUE; + } else if (REG_BROWSERS.YANDEX.REG.test(this._userAgent)) { + _browserName = REG_BROWSERS.YANDEX.VALUE; + } else { + _browserName = REG_BROWSERS.NA.VALUE; + } + } + return _browserName; + } + + /** + * @name gameDevices + */ + public gameDevices(): TGameDevices { + let _gameDevice = null; + if (this._userAgent !== null) { + for (let _reg in REG_GAME_DEVICES) { + if (REG_GAME_DEVICES[_reg].REG.test(this._userAgent)) { + _gameDevice = REG_GAME_DEVICES[_reg].VALUE; } - return _result; - } - - /** - * @name isWindows - */ - public isWindows(): boolean { - let _result = false; - if (this._userAgent !== null) { - _result = (REG_OS.WINDOWS.REG.test(this._userAgent)); + } + } + return _gameDevice; + } + + /** + * @name smartTv + */ + public smartTv(): TSmartTv { + let _smartTv = null; + if (this._userAgent !== null) { + if (REG_SMARTS_TV.CHROMECAST.REG.test(this._userAgent)) { + _smartTv = REG_SMARTS_TV.CHROMECAST.VALUE; + } else if (REG_SMARTS_TV.APPLE_TV.REG.test(this._userAgent)) { + _smartTv = REG_SMARTS_TV.APPLE_TV.VALUE; + } else if (REG_SMARTS_TV.GOOGLE_TV.REG.test(this._userAgent)) { + _smartTv = REG_SMARTS_TV.GOOGLE_TV.VALUE; + } else if (REG_SMARTS_TV.XBOX_ONE.REG.test(this._userAgent)) { + _smartTv = REG_SMARTS_TV.XBOX_ONE.VALUE; + } else if (REG_SMARTS_TV.PS4.REG.test(this._userAgent)) { + _smartTv = REG_SMARTS_TV.PS4.VALUE; + } else if (REG_SMARTS_TV.GENERIC_TV.REG.test(this._userAgent)) { + _smartTv = REG_SMARTS_TV.GENERIC_TV.VALUE; + } + } + return _smartTv; + } + + /** + * @name desktop + */ + public desktop(): TosSystems { + let _desktop = null; + if (this._userAgent !== null) { + if (REG_OS.WINDOWS.REG.test(this._userAgent)) { + _desktop = REG_OS.WINDOWS.VALUE; + } else if (REG_OS.MAC_OS.REG.test(this._userAgent)) { + _desktop = REG_OS.MAC_OS.VALUE; + } else if (REG_OS.LINUX.REG.test(this._userAgent)) { + _desktop = REG_OS.LINUX.VALUE; + } else if (REG_OS.FIREFOX_OS.REG.test(this._userAgent)) { + _desktop = REG_OS.FIREFOX_OS.VALUE; + } else if (REG_OS.FIREFOX_OS.REG.test(this._userAgent)) { + _desktop = REG_OS.CHROME_OS.VALUE; + } + } + return _desktop; + } + + /** + * @name tablet + */ + public tablet(): TTablet { + let _tablet = null; + if (this._userAgent !== null) { + if (REG_TABLETS.IPAD.REG.test(this._userAgent)) { + _tablet = TABLET.IPAD; + } else if ( + REG_TABLETS.TABLET.REG.test(this._userAgent) && + REG_MOBILES.ANDROID.REG.test(this._userAgent) + ) { + _tablet = TABLET.ANDROID; + } else if (REG_TABLETS.KINDLE.REG.test(this._userAgent)) { + _tablet = TABLET.KINDLE; + } else if (REG_TABLETS.TABLET.REG.test(this._userAgent)) { + _tablet = TABLET.GENERIC_TABLET; + } + } + return _tablet; + } + + /** + * @name mobile + */ + public mobile(): TMobile { + let _mobile = null; + if (this._userAgent !== null) { + for (let _reg in REG_MOBILES) { + if (REG_MOBILES[_reg].REG.test(this._userAgent)) { + _mobile = REG_MOBILES[_reg].VALUE; } - return _result; - } - - /** - * @name isLinux - */ - public isLinux(): boolean { - let _result = false; - if (this._userAgent !== null) { - _result = (REG_OS.LINUX.REG.test(this._userAgent)); + } + if (_mobile === null && this.isMobile()) { + _mobile = MOBILE.GENERIC_MOBILE; + } + } + return _mobile; + } + + /** + * @name windows + */ + public windows(): TWindowsOS { + let _windows = null; + if (this._userAgent !== null) { + for (let _reg in REG_WINDOWS_OS_VERSION) { + if (REG_WINDOWS_OS_VERSION[_reg].REG.test(this._userAgent)) { + _windows = REG_WINDOWS_OS_VERSION[_reg].VALUE; } - return _result; - } - - /** - * @name isBot - */ - public isBot(): boolean { - let _result = false; - if (this._userAgent !== null) { - _result = (REG_BOTS.GENERIC_BOT.REG.test(this._userAgent)); + } + if (_windows === null && this.isDesktop() && this.isWindows()) { + _windows = WINDOWS_OS.GENERIC_WINDOWS; + } + } + return _windows; + } + + /** + * @name linux + */ + public linux(): TLinuxOS { + let _linux: TLinuxOS = null; + if (this._userAgent !== null) { + for (let _reg in REG_LINUX_OS) { + if (REG_LINUX_OS[_reg].REG.test(this._userAgent)) { + _linux = REG_LINUX_OS[_reg].VALUE; } - return _result; - } - + } + if (_linux === null && this.isDesktop() && this.isLinux()) { + _linux = LINUX_OS.GENERIC_LINUX; + } + } + return _linux; + } + + /** + * @name isMobile + */ + public isMobile(): boolean { + let _result = false; + if (this._userAgent !== null) { + let _userAgent = this._userAgent; + _result = + (REG_MOBILES.GENERIC_REG_1.REG.test(_userAgent) && + this.isTablet() === false) || + (REG_MOBILES.GENERIC_REG_2.REG.test(_userAgent.substr(0, 4)) && + this.isTablet() === false); + } + return _result; + } + + /** + * @name isTablet + */ + public isTablet(): boolean { + let _result = false; + if (this._userAgent !== null) { + _result = + REG_TABLETS.IPAD.REG.test(this._userAgent) || + REG_TABLETS.KINDLE.REG.test(this._userAgent) || + REG_TABLETS.TABLET.REG.test(this._userAgent); + } + return _result; + } + + /** + * @name isSMART + */ + public isSMART(): boolean { + let _result = false; + if (this._userAgent !== null) { + _result = + REG_SMARTS_TV.GENERIC_TV.REG.test(this._userAgent) || + REG_SMARTS_TV.PS4.REG.test(this._userAgent) || + REG_SMARTS_TV.XBOX_ONE.REG.test(this._userAgent); + } + return _result; + } + + /** + * @name isDesktop + */ + public isDesktop(): boolean { + let _result = false; + if (this._userAgent !== null) { + _result = !(this.isMobile() || this.isTablet() || this.isSMART()); + } + return _result; + } + + /** + * @name isGameDevice + */ + public isGameDevice(): boolean { + let _result = false; + if (this._userAgent !== null) { + _result = + REG_GAME_DEVICES.PS4.REG.test(this._userAgent) || + REG_GAME_DEVICES.PS3.REG.test(this._userAgent) || + REG_GAME_DEVICES.XBOX.REG.test(this._userAgent) || + REG_GAME_DEVICES.XBOX_ONE.REG.test(this._userAgent) || + REG_GAME_DEVICES.WII.REG.test(this._userAgent) || + REG_GAME_DEVICES.WII_U.REG.test(this._userAgent) || + REG_GAME_DEVICES.NINTENDO_3DS.REG.test(this._userAgent) || + REG_GAME_DEVICES.PS_VITA.REG.test(this._userAgent) || + REG_GAME_DEVICES.PSP.REG.test(this._userAgent); + } + return _result; + } + + /** + * @name isWindows + */ + public isWindows(): boolean { + let _result = false; + if (this._userAgent !== null) { + _result = REG_OS.WINDOWS.REG.test(this._userAgent); + } + return _result; + } + + /** + * @name isLinux + */ + public isLinux(): boolean { + let _result = false; + if (this._userAgent !== null) { + _result = REG_OS.LINUX.REG.test(this._userAgent); + } + return _result; + } + + /** + * @name isBot + */ + public isBot(): boolean { + let _result = false; + if (this._userAgent !== null) { + _result = REG_BOTS.GENERIC_BOT.REG.test(this._userAgent); + } + return _result; + } } diff --git a/src/index.ts b/src/public_api.ts old mode 100755 new mode 100644 similarity index 100% rename from src/index.ts rename to src/public_api.ts diff --git a/tsconfig.json b/tsconfig.json index cdc1835..983b243 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,34 +1,30 @@ { - "compilerOptions": { - "baseUrl": ".", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "strict": true, - "module": "commonjs", - "moduleResolution": "node", - "strictNullChecks": false, - "noImplicitAny": false, - "removeComments": true, - "rootDir": ".", - "sourceMap": true, - "inlineSources": true, - "target": "es5", - "skipLibCheck": true, - "lib": [ - "es2015", - "dom" - ], - "typeRoots": [ - "node_modules/@types/" - ] - }, - "exclude": [ - "node_modules", - "examples" + "compilerOptions": { + "baseUrl": ".", + "experimentalDecorators": true, + "strict": true, + "moduleResolution": "node", + "strictNullChecks": false, + "noImplicitAny": false, + "removeComments": true, + "rootDir": ".", + "sourceMap": true, + "inlineSources": true, + "target": "ES2022", + "skipLibCheck": true, + "lib": [ + "es2018", + "dom" ], - "angularCompilerOptions": { - "genDir": "./dist", - "skipMetadataEmit": false, - "skipTemplateCodegen": true - } -} \ No newline at end of file + "typeRoots": [ + "node_modules/@types/" + ], + "useDefineForClassFields": false + }, + "exclude": ["node_modules", "examples"], + "angularCompilerOptions": { + "genDir": "./dist", + "skipMetadataEmit": false, + "skipTemplateCodegen": true + } +} diff --git a/v4-0-1-to-v5-0-3.md b/v4-0-1-to-v5-0-3.md deleted file mode 100644 index 07619fa..0000000 --- a/v4-0-1-to-v5-0-3.md +++ /dev/null @@ -1,145 +0,0 @@ -### Breacking Changes in V5.0.3 - -- **New method to set the custom config**: - - - v4.0.1 - ``` - import { NgModule } from '@angular/core' - import { ResponsiveModule, ResponsiveConfig } from 'ngx-responsive' - ... - let config = { - breakPoints: { - xs: {max: 600}, - sm: {min: 601, max: 959}, - md: {min: 960, max: 1279}, - lg: {min: 1280, max: 1919}, - xl: {min: 1920} - }, - debounceTime: 100 // allow to debounce checking timer - }; - - export function ResponsiveDefinition(){ - return new ResponsiveConfig(config); - }; - ... - @NgModule({ - imports: [ - ResponsiveModule - ], - declarations: [ - AppComponent - ], - providers:[{ - provide: ResponsiveConfig, - useFactory: ResponsiveDefinition }] - }) - export class AppModule { } - ``` - - - v5.0.3 - ``` - import { NgModule } from '@angular/core' - import { ResponsiveModule } from 'ngx-responsive' - ... - const config = { - breakPoints: { - xs: {max: 600}, - sm: {min: 601, max: 959}, - md: {min: 960, max: 1279}, - lg: {min: 1280, max: 1919}, - xl: {min: 1920} - }, - debounceTime: 100 - }; - ... - @NgModule({ - imports: [ - BrowserModule, - ResponsiveModule.forRoot(config) - ], - declarations: [ - AppComponent - ], - providers:[] - }) - export class AppModule { } - ``` - -### New Features in V5.0.3: - -- **Reactive services that expose changes through observables**: - - BrowserInfoRx - - IeInfoRx - - DeviceInfoRx - - DeviceStandardInfoRx - - OrientationInfoRx - - ResponsiveSizeInfoRx - - UserAgentInfoRx - - **Example:** - We initialize the service and we subscribe to the event changes: - 1. Inject the service in the constructor: - - ``` - constructor( - public browserInfoRx: BrowserInfoRx - ) {} - - ``` - - 2. Connet to the reactive service: - - ``` - ngOnInit(): void { - this.browserInfoRx.connect(); - } - - ``` - 3. And subscribe to the events service: - - ``` - this.browserInfoRx.getBrowser.subscribe((data) => { - console.log('this.browserInfoRx.getBrowser ===>', data); - }, (err) => { - console.log('Error', err); - }); - - ``` - or : - - ``` - ngOnInit(): void { - this.browserInfoRx.connect().subscribe((data) => { - console.log('this.browserInfoRx.getBrowser ===>', data); - }, (err) => { - console.log('Error', err); - }); - } - - ``` - 4. And remove yours subscriptions: - - ``` - ngOnDestroy(): void { - this.browserInfoRx.disconnect(); - } - ``` - -### Methods to subscribe to the observables for each of the reactive services: - -- BrowserInfoRx -> getBrowser -> ```BrowserInfoRx.getBrowser ``` - -- IeInfoRx -> getIE -> ```IeInfoRx.getIE ``` - -- DeviceInfoRx -> getDevice -> ```DeviceInfoRx.getDevice ``` - -- DeviceStandardInfoRx -> getStandardDevice -> ```DeviceStandardInfoRx.getStandardDevice ``` - -- OrientationInfoRx -> getOrientation -> ```OrientationInfoRx.getOrientation ``` - -- ResponsiveSizeInfoRx -> getResponsiveSize -> ```ResponsiveSizeInfoRx.getResponsiveSize ``` - -- UserAgentInfoRx -> getUserAgent -> ```UserAgentInfoRx.getUserAgent ``` - - -