Merge branch 'master' into develop

Author: marcjulian

CHANGELOG.md

@@ -1,3 +1,132 @@
+<a name="0.8.21"></a>
+## [0.8.21](https://github.com/fivethree-team/component-library/compare/v0.8.20...v0.8.21) (2019-07-20)
+
+
+### Bug Fixes
+
+* **FivGallery:** Fix circular dependency in FivGallery and FivGalleryImage ([e1dec01](https://github.com/fivethree-team/component-library/commit/e1dec01))
+
+
+### Features
+
+* **back-button:** add example page and modal to test the back button functionality ([afcfc88](https://github.com/fivethree-team/component-library/commit/afcfc88))
+
+
+
+<a name="0.8.20"></a>
+## [0.8.20](https://github.com/fivethree-team/component-library/compare/v0.8.19...v0.8.20) (2019-07-17)
+
+
+### Bug Fixes
+
+* **back-button:** fix android backbutton blurring out of window when goBack ([5920790](https://github.com/fivethree-team/component-library/commit/5920790))
+
+
+
+<a name="0.8.19"></a>
+## [0.8.19](https://github.com/fivethree-team/component-library/compare/v0.8.18...v0.8.19) (2019-07-10)
+
+
+### Features
+
+* **Gallery:** Slide out image when pulled image is not the initial image ([25d95a3](https://github.com/fivethree-team/component-library/commit/25d95a3))
+
+
+
+<a name="0.8.18"></a>
+## [0.8.18](https://github.com/fivethree-team/component-library/compare/v0.8.15...v0.8.18) (2019-07-10)
+
+
+### Bug Fixes
+
+* **FivLazyImage:** export FivLazyImage from [@fivethree](https://github.com/fivethree)/core ([c88b500](https://github.com/fivethree-team/component-library/commit/c88b500))
+* **gallery:** fix will close output not emitting on pull down ([5600335](https://github.com/fivethree-team/component-library/commit/5600335))
+
+
+### Features
+
+* **FivLazyImage:** added inViewport boolean to directive ([cf62cb6](https://github.com/fivethree-team/component-library/commit/cf62cb6))
+
+
+
+<a name="0.8.17"></a>
+## [0.8.17](https://github.com/fivethree-team/component-library/compare/v0.8.15...v0.8.17) (2019-07-10)
+
+
+### Bug Fixes
+
+* **gallery:** fix will close output not emitting on pull down ([5600335](https://github.com/fivethree-team/component-library/commit/5600335))
+
+
+### Features
+
+* **FivLazyImage:** added inViewport boolean to directive ([cf62cb6](https://github.com/fivethree-team/component-library/commit/cf62cb6))
+
+
+
+<a name="0.8.16"></a>
+## [0.8.16](https://github.com/fivethree-team/component-library/compare/v0.8.15...v0.8.16) (2019-07-10)
+
+
+### Bug Fixes
+
+* **gallery:** fix will close output not emitting on pull down ([5600335](https://github.com/fivethree-team/component-library/commit/5600335))
+
+
+
+<a name="0.8.15"></a>
+## [0.8.15](https://github.com/fivethree-team/component-library/compare/v0.8.14...v0.8.15) (2019-07-10)
+
+
+### Bug Fixes
+
+* **gallery:** fix a bug that crashed the gallery while pulling down before the gallery has fully been loaded, configuration options ([f0aa619](https://github.com/fivethree-team/component-library/commit/f0aa619))
+
+
+
+<a name="0.8.14"></a>
+## [0.8.14](https://github.com/fivethree-team/component-library/compare/v0.8.13...v0.8.14) (2019-07-09)
+
+
+### Features
+
+* **gallery:** ambient backdrop color input ([fe199a8](https://github.com/fivethree-team/component-library/commit/fe199a8))
+
+
+
+<a name="0.8.13"></a>
+## [0.8.13](https://github.com/fivethree-team/component-library/compare/v0.8.12...v0.8.13) (2019-07-06)
+
+
+### Features
+
+* **fivLazyImage:** add virtual input to lazy image ([fed25ad](https://github.com/fivethree-team/component-library/commit/fed25ad))
+
+
+
+<a name="0.8.12"></a>
+## [0.8.12](https://github.com/fivethree-team/component-library/compare/v0.8.11...v0.8.12) (2019-06-24)
+
+
+### Bug Fixes
+
+* **pull:** mark all touch event handlers as passive ([9c94409](https://github.com/fivethree-team/component-library/commit/9c94409))
+
+
+
+<a name="0.8.11"></a>
+## [0.8.11](https://github.com/fivethree-team/component-library/compare/v0.8.9...v0.8.11) (2019-06-24)
+
+
+### Bug Fixes
+
+* **dialog:** fix horizontal middle position animations ([4083f45](https://github.com/fivethree-team/component-library/commit/4083f45))
+* **refresher:** add content min-height ([4680e25](https://github.com/fivethree-team/component-library/commit/4680e25))
+* **refresher:** make touchmove listeners passive ([d10a227](https://github.com/fivethree-team/component-library/commit/d10a227))
+* **tests:** enable tests ([72c0f4b](https://github.com/fivethree-team/component-library/commit/72c0f4b))
+
+
+
 <a name="0.8.10"></a>
 ## [0.8.10](https://github.com/fivethree-team/component-library/compare/v0.8.9...v0.8.10) (2019-06-10)
 

config.xml

@@ -82,5 +82,5 @@
     <plugin name="cordova-plugin-ionic-webview" spec="2.0.0" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" />
     <engine name="android" spec="8.0.0" />
-    <engine name="ios" spec="5.0.0" />
+    <engine name="ios" spec="5.0.1" />
 </widget>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fivethree",
-  "version": "0.8.10",
+  "version": "0.8.21",
   "author": "Fivethree Team",
   "homepage": "https://fivethree.io/",
   "description": "Fivethree Web Components",

projects/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fivethree/core",
-  "version": "0.8.10",
+  "version": "0.8.21",
   "description": "Fivethree Core Components",
   "keywords": [
     "fivethree",

projects/core/src/lib/back-button/back-button.module.ts

@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FivBackButton } from './back-button.component';
-import { FivRoutingStateService } from './routing-state.service';
 import { FivIconModule } from '../icon/icon.module';
 import { IonicModule } from '@ionic/angular';
 
 @NgModule({
   declarations: [FivBackButton],
   imports: [CommonModule, FivIconModule, IonicModule],
   exports: [FivBackButton],
-  providers: [FivRoutingStateService]
+  providers: []
 })
 export class FivBackButtonModule {}

projects/core/src/lib/back-button/routing-state.service.ts

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
-import { filter } from 'rxjs/operators';
+import { filter, tap, takeWhile } from 'rxjs/operators';
 import { NavController, Platform } from '@ionic/angular';
+import { Navigateable } from '../interfaces';
+import { fromEvent, zip, race, from } from 'rxjs';
 
 export interface RoutingStateConfig {
   clearOn: string[];
@@ -12,7 +14,7 @@ export interface RoutingStateConfig {
   providedIn: 'root'
 })
 export class FivRoutingStateService {
-  private history: string[] = [];
+  private history: (string | Navigateable)[] = [];
   private config: RoutingStateConfig;
 
   constructor(
@@ -32,7 +34,7 @@ export class FivRoutingStateService {
           this.pop();
         }
         // add url to history
-        this.history = [...this.history, urlAfterRedirects];
+        this.history.push(urlAfterRedirects);
         if (this.config && this.config.clearOn) {
           const clear = this.config.clearOn.some(s => s === urlAfterRedirects);
           if (clear) {
@@ -42,27 +44,40 @@ export class FivRoutingStateService {
       });
   }
 
+  registerNavigateable(target: Navigateable) {
+    if (isNavigateable(target)) {
+      this.history.push(target);
+    }
+  }
+
   handleAndroidBackButton() {
-    this.platform.backButton.subscribeWithPriority(9999, () => {
-      if (this.getHistory().length <= 1) {
-        // close the app because we are at root level
-        navigator['app'].exitApp();
-      } else {
-        // go back
+    this.platform.backButton
+      .pipe(filter(() => !isNavigateable(this.getCurrentUrl())))
+      .subscribe(event => {
         this.goBack();
-      }
-    });
+      });
+
+    this.platform.backButton
+      .pipe(filter(() => isNavigateable(this.getCurrentUrl())))
+      .subscribe(event => {
+        event.register(99999, () => {
+          this.goBack('/');
+        });
+      });
   }
 
-  public getHistory(): string[] {
+  public getHistory(): (string | Navigateable)[] {
     return this.history;
   }
 
-  public getPreviousUrl(defaultHref = '/'): string {
-    return this.history[this.history.length - 2] || defaultHref;
+  public getPreviousUrl(defaultHref = '/'): string | Navigateable {
+    if (this.history.length > 2) {
+      return this.history[this.history.length - 2];
+    }
+    return defaultHref;
   }
 
-  public pop(): string {
+  public pop(): string | Navigateable {
     return this.history.pop();
   }
 
@@ -84,11 +99,40 @@ export class FivRoutingStateService {
     }
   }
 
-  public getCurrentUrl(): string {
+  public getCurrentUrl(): string | Navigateable {
     return this.history[this.history.length - 1];
   }
 
   goBack(defaultHref = '/') {
-    this.navCtrl.navigateBack(this.getPreviousUrl(defaultHref));
+    if (this.getHistory().length <= 1) {
+      // close the app because we are at root level
+      return navigator['app'].exitApp();
+    }
+    const current = this.getCurrentUrl();
+    if (typeof current !== 'string' && isNavigateable(current)) {
+      current.dismiss();
+      return this.pop();
+    }
+
+    const previous = this.getPreviousUrl(defaultHref);
+    if (typeof previous === 'string') {
+      return this.navCtrl.navigateBack(previous);
+    }
+    if (isNavigateable(previous)) {
+      return this.navCtrl.navigateBack(this.getLatestUrl(defaultHref));
+    }
+  }
+
+  getLatestUrl(defaultHref: string): string {
+    const urls = this.history.filter(e => !!(typeof e === 'string'));
+    const latest = urls[urls.length - 1];
+    if (urls.length > 0 && latest && typeof latest === 'string') {
+      return latest;
+    }
+    return defaultHref;
   }
 }
+
+export function isNavigateable(object: any): boolean {
+  return !!object && object.dismiss !== undefined;
+}

projects/core/src/lib/dialog/dialog.component.html

@@ -4,7 +4,7 @@
     [@fade]="{value: dialogState, params: { opacity: 0, inDuration: '120ms' }}" (click)="backdropClick()" class="backdrop">
 </ion-content>
   <div #dialog [@fade]="{value: dialogState, params: { opacity: 0, inDuration: '120ms' }}"
-  [@slide]="{value: dialogState, params: {top: outPosition, inDuration: inDuration + 'ms',outDuration: outDuration + 'ms', toPosition: toPosition, translate: translate}}"
+  [@slide]="{value: dialogState, params: {top: outPosition, inDuration: inDuration + 'ms',outDuration: outDuration + 'ms', toPosition: toPosition, translate: translate,translateX: horizontalAlign === 'middle' ? 'translateX(-50%)' :  '' }}"
   (@slide.done)="animationDone($event)" class="dialog" [ngClass]="[verticalAlign, horizontalAlign, shape]">
     <ng-container>
       <ng-container *ngTemplateOutlet="card"></ng-container>

projects/core/src/lib/dialog/dialog.component.ts

@@ -28,60 +28,60 @@ export type Content<T> = TemplateRef<T> | Type<T>;
   animations: [
     trigger('slide', [
       transition('out => top', [
-        style({ top: '0', transform: 'translateY(-100%)' }),
+        style({ top: '0', transform: 'translateY(-100%) {{translateX}}' }),
         animate('220ms ease-out')
       ]),
       transition('out => center', [
         style({
           top: '50%',
-          transform: 'translateY(-50%) scale(0)',
+          transform: 'translateY(-50%) {{translateX}} scale(0)',
           opacity: 0
         }),
         animate(
           '220ms ease-out',
           style({
             top: '50%',
-            transform: 'translateY(-50%) scale(1)',
+            transform: 'translateY(-50%) {{translateX}} scale(1)',
             opacity: 1
           })
         )
       ]),
       transition('out => bottom', [
-        style({ bottom: '0', transform: 'translateY(100%)' }),
+        style({ bottom: '0', transform: 'translateY(100%) {{translateX}}' }),
         animate('220ms ease-out')
       ]),
       transition('top => out', [
-        style({ top: '0', transform: 'translateY(0)' }),
+        style({ top: '0', transform: '*' }),
         animate(
           '140ms ease-in',
-          style({ top: '0', transform: 'translateY(-100%)' })
+          style({ top: '0', transform: 'translateY(-100%) {{translateX}}' })
         )
       ]),
       transition('center => out', [
         style({
           top: '50%',
-          transform: 'translateY(-50%) scale(1)',
+          transform: '*',
           opacity: 1
         }),
         animate(
           '140ms ease-in',
           style({
             top: '50%',
-            transform: 'translateY(-50%) scale(0)',
+            transform: 'translateY(-50%) {{translateX}} scale(0)',
             opacity: 0
           })
         )
       ]),
       transition('bottom => out', [
-        style({ bottom: '0', transform: 'translateY(0)' }),
+        style({ bottom: '0', transform: '*' }),
         animate(
           '140ms ease-in',
-          style({ bottom: '0', transform: 'translateY(100%)' })
+          style({ bottom: '0', transform: 'translateY(100%) {{translateX}}' })
         )
       ]),
-      state('bottom', style({ bottom: '0', transform: 'translateY(0)' })),
-      state('top', style({ top: '0', transform: 'translateY(0)' })),
-      state('center', style({ top: '50%', transform: 'translateY(-50%)' }))
+      // state('bottom', style({ bottom: '0', transform: '*' })),
+      // state('top', style({ top: '0', transform: '*' })),
+      // state('center', style({ top: '50%', transform: 'translateY(-50%) {{translateX}}' }))
     ]),
     trigger('fade', [
       transition(
@@ -131,13 +131,13 @@ export class FivDialog implements OnInit {
   dialogState: 'top' | 'center' | 'bottom' | 'out' = 'out';
   currentPullProgress: number;
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   constructor(
     private renderer: Renderer2,
     private domCtrl: DomController,
     private animation: AnimationBuilder
-  ) {}
+  ) { }
 
   open() {
     this.overlay.show(this.priority);