Changes in the Readme.md file

ManuCutillas · Apr 1, 2018 · 897362c · 897362c
1 parent 27f8c72
commit 897362c
Show file tree

Hide file tree

Showing 85 changed files with 190 additions and 119 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,14 @@ Superset of **RESPONSIVE DIRECTIVES** to show or hide items according to the siz
   npm i ngx-responsive --save
 ```
 
+### New version with breaking changes: v5.0.x :
+
+**v4.0.1 to v5.0.3 < v5.0.x documentation:**
+
+-   [ngx-responsive v4.x.x to v5.x.x changes](/v4-0-1-to-v5-0-3.md)
+
+-   [ngx-responsive v4.0.1 latest code](https://github.com/ManuCutillas/ngx-responsive/tree/v4.0.1)
+
 ### If you use Angular 4 in your project use ng2-responsive.
 
 ```
@@ -24,13 +32,19 @@ Superset of **RESPONSIVE DIRECTIVES** to show or hide items according to the siz
  - Internet Explorer Versions Detect : IE 9 / IE 10 / IE 11 / IE +12
  - New standard devices: iPhone, iPad, Android Mobile, Android Tablet, Windows Phone.
  - Device orientation detect: portrait, landscape.
- - Pixel ratio detect : 1x / Retina / 4k.
- - Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, PixelRatioInfo. 
+ - Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, DeviceStandardInfo, BrowserInfo, IeInfo.
  - Directive: responsive - Detection of multiple functions at once.
- - Directives: DeviceStandardInfo, BrowserInfo, IeInfo.
  - Feature Responsive Directive - Boolean Events Emitter on change state:
  - Feature responsive-window : Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.
- - UserAgent information directive: Get te device, browser, os version and more from the user agent navigator in one event object. 
+ - UserAgent information directive: Get te device, browser, os version and more from the user agent navigator in one event object.
+ - **New Feature :** Reactive services that expose changes through observables:
+    - BrowserInfoRx
+    - IeInfoRx
+    - DeviceInfoRx
+    - DeviceStandardInfoRx
+    - OrientationInfoRx
+    - ResponsiveSizeInfoRx
+    - UserAgentInfoRx
 
 # How to start
 
@@ -62,33 +76,28 @@ Superset of **RESPONSIVE DIRECTIVES** to show or hide items according to the siz
 
     ```
      import { NgModule } from '@angular/core'
-     import { ResponsiveModule, ResponsiveConfig } from 'ngx-responsive'
+     import { ResponsiveModule } from 'ngx-responsive'
      ...
-     let config = {
+     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 // allow to debounce checking timer
-      };
-
-      export function ResponsiveDefinition(){ 
-              return new ResponsiveConfig(config);
+        debounceTime: 100
       };
      ...
     @NgModule({
         imports: [
-          ResponsiveModule
+          BrowserModule,
+          ResponsiveModule.forRoot(config)
         ],
         declarations: [
           AppComponent
         ],
-        providers:[{
-         provide: ResponsiveConfig, 
-         useFactory: ResponsiveDefinition }]
+        providers:[]
     })
     export class AppModule { }
     ```
@@ -318,17 +327,6 @@ Superset of **RESPONSIVE DIRECTIVES** to show or hide items according to the siz
             '
         })
         ```
-        * With pixel ratio detect:
-        ```
-          @Component({
-            selector: 'my-component',
-            template: '
-                <p *is1xPixel>I'll show you if I'm a 1x screen.</p>
-                <p *isRetina>I'll show you if I'm a retina screen.</p>
-                <p *is4k>I'll show you if I'm a 4k screen.</p>
-            '
-          })
-        ```
 
         * Get the userAgent info directive:
         - Get the device, browser, os version and more from the user agent navigator in one event object. 
@@ -383,9 +381,11 @@ Description of the object given by the `(info)` event of the directive `user-age
   bot: true | false
 }
 ```
-      
+
 # NEXT STEPS 
-- Refactor to more simple code and easy to maintain. Less specific directives.
+- Work in Unit-test and e2e.
+- Work in a documentation page.
+- ngx-responsive compatible with angular universal.
 - Work in demo page
 - Directive css classes:
 ```
@@ -395,13 +395,7 @@ Description of the object given by the `(info)` event of the directive `user-age
         }"></h1>
 
 ```
-- Webp images browser compatibility: 
-```
-<img *webp="{webp:image.webp, not:image.jpg", lazyload:true}  alt="awesome directive">
-```
-
 - animations show/hide in directives
-- Expose changes in directives like a service.
 
 # Contributors
  * ManuCutillas 
@@ -418,3 +412,5 @@ Description of the object given by the `(info)` event of the directive `user-age
 [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)
 
 
+
+
diff --git a/examples/src/app/app.component.ts b/examples/src/app/app.component.ts
@@ -34,7 +34,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public ngOnDestroy(): void {
     this._unsubscribe();
     this.ieInfoRx.disconnect();
-    this.browserInfoRx.connect();
+    this.browserInfoRx.disconnect();
     this.devicesInfoRx.disconnect();
     this.devicesStandardInfoRx.disconnect();
     this.orientationInfoRx.disconnect();

diff --git a/examples/src/app/app.module.ts b/examples/src/app/app.module.ts
@@ -1,10 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, InjectionToken } from '@angular/core';
-import { ResponsiveModule, ResponsiveConfig } from 'ngx-responsive';
+import { ResponsiveModule, IResponsiveConfig } from 'ngx-responsive';
 import { AppComponent } from './app.component';
 import { CommonModule } from '@angular/common';
 
-const config = {
+const config: IResponsiveConfig = {
   breakPoints: {
     xs: { max: 600 },
     sm: { min: 601, max: 959 },

diff --git a/src/@core/constants/browser-names.constants.ts b/src/@core/constants/browser-names.constants.ts
@@ -2,7 +2,6 @@
  * @name browser-names.constants
  * @description Core browser names constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { IBrowserNames } from '../interfaces';

diff --git a/src/@core/constants/game-devices.constants.ts b/src/@core/constants/game-devices.constants.ts
@@ -2,7 +2,6 @@
  * @name game-devices.constants
  * @description Core game-devices.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { IGameDevices } from '../interfaces';

diff --git a/src/@core/constants/generic-bots.constants.ts b/src/@core/constants/generic-bots.constants.ts
@@ -2,7 +2,6 @@
  * @name generic-bots.constants
  * @description Core generic-bots.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { IBot } from '../interfaces';

diff --git a/src/@core/constants/ie-versions.constants.ts b/src/@core/constants/ie-versions.constants.ts
@@ -2,7 +2,6 @@
  * @name ie-versions.constants
  * @description Core ie versions constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { IIEVersions } from '../interfaces';

diff --git a/src/@core/constants/index.ts b/src/@core/constants/index.ts
@@ -2,7 +2,6 @@
  * @name constants
  * @description Core constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 export * from './linux.constants';

diff --git a/src/@core/constants/linux.constants.ts b/src/@core/constants/linux.constants.ts
@@ -2,7 +2,6 @@
  * @name linux.constants
  * @description Core linux.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { ILinuxOS } from '../interfaces';

diff --git a/src/@core/constants/mobile.constants.ts b/src/@core/constants/mobile.constants.ts
@@ -1,10 +1,7 @@
-
-
 /**
  * @name mobile.constants
  * @description Core mobile.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { IMobile } from '../interfaces';

diff --git a/src/@core/constants/os-systems.constants.ts b/src/@core/constants/os-systems.constants.ts
@@ -2,7 +2,6 @@
  * @name os-sistems.constants
  * @description Core os-sistems.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { IOsSistems } from '../interfaces';

diff --git a/src/@core/constants/reg-expressions.constants.ts b/src/@core/constants/reg-expressions.constants.ts
@@ -2,7 +2,6 @@
  * @name reg-expressions.constants
  * @description Core reg-expressions.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/constants/smart-tv.constants.ts b/src/@core/constants/smart-tv.constants.ts
@@ -2,7 +2,6 @@
  * @name smart-tv.constants
  * @description Core smart-tv.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { ISmartTv } from '../interfaces';

diff --git a/src/@core/constants/tablet.constants.ts b/src/@core/constants/tablet.constants.ts
@@ -2,7 +2,6 @@
  * @name tablet.constants
  * @description Core tablet.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { ITablet } from '../interfaces';

diff --git a/src/@core/constants/user-agent.constants.ts b/src/@core/constants/user-agent.constants.ts
@@ -2,7 +2,6 @@
  * @name user-agent.constants
  * @description Core user agent in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/constants/windows.constants.ts b/src/@core/constants/windows.constants.ts
@@ -2,7 +2,6 @@
  * @name windows.constants
  * @description Core windows.constants in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { IWindowsOS } from '../interfaces';

diff --git a/src/@core/index.ts b/src/@core/index.ts
@@ -2,7 +2,6 @@
  * @name core
  * @description Core in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/bot.interfaces.ts b/src/@core/interfaces/bot.interfaces.ts
@@ -2,7 +2,6 @@
  * @name bot.interfaces
  * @description Core bot interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/browser-names.interfaces.ts b/src/@core/interfaces/browser-names.interfaces.ts
@@ -2,7 +2,6 @@
  * @name browser-names.interfaces
  * @description Browser names interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import {

diff --git a/src/@core/interfaces/game-devices.interfaces.ts b/src/@core/interfaces/game-devices.interfaces.ts
@@ -2,7 +2,6 @@
  * @name game-devices.interfaces
  * @description Game devices interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import {

diff --git a/src/@core/interfaces/ie-versions.interfaces.ts b/src/@core/interfaces/ie-versions.interfaces.ts
@@ -2,7 +2,6 @@
  * @name ie-versions.interfaces
  * @description IE versions interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import {

diff --git a/src/@core/interfaces/index.ts b/src/@core/interfaces/index.ts
@@ -2,7 +2,6 @@
  * @name interfaces
  * @description Core interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 export * from './linux.interfaces';

diff --git a/src/@core/interfaces/linux.interfaces.ts b/src/@core/interfaces/linux.interfaces.ts
@@ -2,7 +2,6 @@
  * @name linux.interfaces
  * @description Core linux interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/mobile.interfaces.ts b/src/@core/interfaces/mobile.interfaces.ts
@@ -2,7 +2,6 @@
  * @name mobile.interfaces
  * @description Core mobile interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/os-systems.interfaces.ts b/src/@core/interfaces/os-systems.interfaces.ts
@@ -2,7 +2,6 @@
  * @name os-systems.interfaces
  * @description Core os systems interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/responsive-config.interfaces.ts b/src/@core/interfaces/responsive-config.interfaces.ts
@@ -2,7 +2,6 @@
  * @name responsive-config.interfaces
  * @description Core responsive-config interface in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 export interface IResponsiveConfig {

diff --git a/src/@core/interfaces/smart-tv.interfaces.ts b/src/@core/interfaces/smart-tv.interfaces.ts
@@ -2,7 +2,6 @@
  * @name smart-tv.interfaces
  * @description Core mobile interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/tablet.interfaces.ts b/src/@core/interfaces/tablet.interfaces.ts
@@ -2,7 +2,6 @@
  * @name mobile.interfaces
  * @description Core mobile interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/user-agent.interfaces.ts b/src/@core/interfaces/user-agent.interfaces.ts
@@ -2,7 +2,6 @@
  * @name user-agent.interfaces
  * @description Core user agent interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/interfaces/windows.interfaces.ts b/src/@core/interfaces/windows.interfaces.ts
@@ -3,7 +3,6 @@
  * @name windows.interfaces
  * @description Core windows interfaces in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 

diff --git a/src/@core/providers/index.ts b/src/@core/providers/index.ts
@@ -2,7 +2,6 @@
  * @name providers
  * @description Core providers in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 export * from './responsive-config/index';

diff --git a/src/@core/providers/responsive-base/index.ts b/src/@core/providers/responsive-base/index.ts
@@ -2,7 +2,6 @@
  * @name responsive-base
  * @description Core responsive-bae provider in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 export * from './responsive-base';
diff --git a/src/@core/providers/responsive-base/responsive-base.ts b/src/@core/providers/responsive-base/responsive-base.ts
@@ -2,7 +2,6 @@
  * @name responsive-config
  * @description Core responsive-config provider in ngx-responsive
  *
- * @author Manu Cutillas
  * @license MIT
  */
 import { EventEmitter, TemplateRef, ViewContainerRef, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';