feature(platform): implement a web component that provides access to a small subset of platform information

packages/angular/src/index.ts

@@ -24,6 +24,7 @@ export { MenuController } from './providers/menu-controller';
 export { ModalController, ModalProxy } from './providers/modal-controller';
 export { NavController } from './providers/nav-controller';
 export { NavParams } from './providers/nav-params';
+export { Platform } from './providers/platform';
 export { PopoverController, PopoverProxy } from './providers/popover-controller';
 export { ToastController, ToastProxy } from './providers/toast-controller';
 

packages/angular/src/module.ts

@@ -27,6 +27,7 @@ import { Events } from './providers/events';
 import { LoadingController } from './providers/loading-controller';
 import { MenuController } from './providers/menu-controller';
 import { ModalController } from './providers/modal-controller';
+import { Platform } from './providers/platform';
 import { PopoverController } from './providers/popover-controller';
 import { ToastController } from './providers/toast-controller';
 
@@ -76,6 +77,7 @@ export class IonicAngularModule {
         LoadingController,
         MenuController,
         ModalController,
+        Platform,
         PopoverController,
         ToastController
       ]

packages/angular/src/providers/app.ts

@@ -19,13 +19,31 @@ export class App {
     return getRootNavsImpl(this);
   }
 
+  getRootNavsAsync(): Promise<PublicNav[]> {
+    return getRootNavsAsyncImpl(this);
+  }
+
   getTopNavs(rootNavId?: number): PublicNav[] {
     return getTopNavsImpl(this, rootNavId);
   }
 
+  getTopNavsAsync(rootNavId?: number): Promise<PublicNav[]> {
+    return getTopNavsAsyncImpl(this, rootNavId);
+  }
+
   getNavByIdOrName(nameOrId: number | string): PublicNav {
     return getNavByIdOrNameImpl(this, nameOrId);
   }
+
+  getNavByIdOrNameAsync(nameOrId: number | string): Promise<PublicNav> {
+    return getNavByIdOrNameAsyncImpl(this, nameOrId);
+  }
+
+  registerBackButtonAction(fn: Function, priority = 0): Promise<() => void> {
+    return this._element.componentOnReady().then(() => {
+      return this._element.registerBackButtonAction(fn, priority);
+    });
+  }
 }
 
 export function isScrollingImpl(app: App) {
@@ -42,6 +60,12 @@ export function getRootNavsImpl(app: App) {
   return [];
 }
 
+export function getRootNavsAsyncImpl(app: App) {
+  return app._element.componentOnReady().then(() => {
+    return app._element.getRootNavs();
+  });
+}
+
 export function getTopNavsImpl(app: App, rootNavId?: number): PublicNav[] {
   if (app._element && app._element.getTopNavs) {
     return app._element.getTopNavs(rootNavId);
@@ -49,9 +73,21 @@ export function getTopNavsImpl(app: App, rootNavId?: number): PublicNav[] {
   return [];
 }
 
+export function getTopNavsAsyncImpl(app: App, rootNavId?: number): Promise<PublicNav[]> {
+  return app._element.componentOnReady().then(() => {
+    return app._element.getTopNavs(rootNavId);
+  });
+}
+
 export function getNavByIdOrNameImpl(app: App, nameOrId: number | string): PublicNav {
   if (app._element && app._element.getNavByIdOrName) {
     return app._element.getNavByIdOrName(nameOrId);
   }
   return null;
+}
+
+export function getNavByIdOrNameAsyncImpl(app: App, nameOrId: number | string): Promise<PublicNav> {
+  return app._element.componentOnReady().then(() => {
+    return app._element.getNavByIdOrName(nameOrId);
+  });
 }

packages/angular/src/providers/platform.ts

@@ -0,0 +1,228 @@
+
+import { PlatformConfig } from '@ionic/core';
+
+export type DocumentDirection = 'ltr' | 'rtl';
+
+let dir: DocumentDirection = 'ltr';
+let isRtl = false;
+let lang: string = '';
+
+export class Platform {
+
+  _element: HTMLIonPlatformElement;
+  constructor() {
+    initialize(this);
+  }
+
+  is(platformName: string): boolean {
+    return isImpl(this, platformName);
+  }
+
+  isAsync(platformName: string): Promise<boolean> {
+    return isAsyncImpl(this, platformName);
+  }
+
+  platforms(): string[] {
+    return platformsImpl(this);
+  }
+
+  platformsAsync(): Promise<string[]> {
+    return platformsAsyncImpl(this);
+  }
+
+  versions(): PlatformConfig[] {
+    return versionsImpl(this);
+  }
+
+  versionsAsync(): Promise<PlatformConfig[]> {
+    return versionsAsyncImpl(this);
+  }
+
+  ready(): Promise<any> {
+    return readyImpl(this);
+  }
+
+  get isRTL(): boolean {
+    return isRtl;
+  }
+
+  setDir(_dir: DocumentDirection, updateDocument: boolean) {
+    dir = _dir;
+    isRtl = dir === 'rtl';
+
+    if (updateDocument !== false) {
+      document.documentElement.setAttribute('dir', dir);
+    }
+  }
+
+  /**
+   * Returns app's language direction.
+   * We recommend the app's `index.html` file already has the correct `dir`
+   * attribute value set, such as `<html dir="ltr">` or `<html dir="rtl">`.
+   * [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir)
+   * @returns {DocumentDirection}
+   */
+  dir(): DocumentDirection {
+    return dir;
+  }
+
+  /**
+   * Set the app's language and optionally the country code, which will update
+   * the `lang` attribute on the app's root `<html>` element.
+   * We recommend the app's `index.html` file already has the correct `lang`
+   * attribute value set, such as `<html lang="en">`. This method is useful if
+   * the language needs to be dynamically changed per user/session.
+   * [W3C: Declaring language in HTML](http://www.w3.org/International/questions/qa-html-language-declarations)
+   * @param {string} language  Examples: `en-US`, `en-GB`, `ar`, `de`, `zh`, `es-MX`
+   * @param {boolean} updateDocument  Specifies whether the `lang` attribute of `<html>` should be updated
+   */
+  setLang(language: string, updateDocument: boolean) {
+    lang = language;
+    if (updateDocument !== false) {
+      document.documentElement.setAttribute('lang', language);
+    }
+  }
+
+  /**
+   * Returns app's language and optional country code.
+   * We recommend the app's `index.html` file already has the correct `lang`
+   * attribute value set, such as `<html lang="en">`.
+   * [W3C: Declaring language in HTML](http://www.w3.org/International/questions/qa-html-language-declarations)
+   * @returns {string}
+   */
+  lang(): string {
+    return lang;
+  }
+
+  /**
+   * Get the query string parameter
+   */
+  getQueryParam(key: string): string {
+    return getQueryParamImpl(this, key);
+  }
+
+  /**
+   * Get the query string parameter
+   */
+  getQueryParamAsync(key: string): Promise<string> {
+    return getQueryParamAsyncImpl(this, key);
+  }
+
+  height(): number {
+    return window.innerHeight;
+  }
+
+  isLandscape(): boolean {
+    return !this.isPortrait();
+  }
+
+  isPortrait(): boolean {
+    return window.matchMedia('(orientation: portrait)').matches;
+  }
+
+  testUserAgent(expression: string): boolean {
+    return navigator.userAgent.indexOf(expression) >= 0;
+  }
+
+  url() {
+    return window.location.href;
+  }
+
+  width() {
+    return window.innerWidth;
+  }
+}
+
+export function isImpl(platform: Platform, platformName: string) {
+  if (platform._element && platform._element.is) {
+    return platform._element.is(platformName);
+  }
+  return false;
+}
+
+export function isAsyncImpl(platform: Platform, platformName: string) {
+  return getHydratedPlatform(platform).then(() => {
+    return platform._element.is(platformName);
+  });
+}
+
+export function platformsImpl(platform: Platform): string[] {
+  if (platform._element && platform._element.platforms) {
+    return platform._element.platforms();
+  }
+  return [];
+}
+
+export function platformsAsyncImpl(platform: Platform): Promise<string[]> {
+  return getHydratedPlatform(platform).then(() => {
+    return platform._element.platforms();
+  });
+}
+
+export function versionsImpl(platform: Platform): PlatformConfig[] {
+  if (platform._element && platform._element.versions) {
+    return platform._element.versions();
+  }
+  return [];
+}
+
+export function versionsAsyncImpl(platform: Platform): Promise<PlatformConfig[]> {
+  return getHydratedPlatform(platform).then(() => {
+    return platform._element.versions();
+  });
+}
+
+export function readyImpl(platform: Platform) {
+  return getHydratedPlatform(platform).then(() => {
+    return platform._element.ready();
+  });
+}
+
+export function getQueryParamImpl(platform: Platform, key: string): string {
+  if (platform._element && platform._element.getQueryParam) {
+    return platform._element.getQueryParam(key);
+  }
+  return null;
+}
+
+export function getQueryParamAsyncImpl(platform: Platform, key: string) {
+  return getHydratedPlatform(platform).then(() => {
+    return platform._element.getQueryParam(key);
+  });
+}
+
+
+
+
+export function initialize(platform: Platform) {
+  // first see if there is an ion-app, if there is, platform will eventually show up
+  // if not, add platform to the document.body
+  const ionApp = document.querySelector('ion-app');
+  if (ionApp) {
+    return ionApp.componentOnReady(() => {
+      platform._element = ionApp.querySelector('ion-platform');
+    });
+  }
+
+  // okay, there isn't an ion-app, so add <ion-platform> to the document.body
+  let platformElement = document.querySelector('ion-platform');
+  if (!platformElement) {
+    platformElement = document.createElement('ion-platform');
+    document.body.appendChild(platformElement);
+  }
+  platform._element = platformElement;
+}
+
+export function getHydratedPlatform(platform: Platform): Promise<HTMLIonPlatformElement> {
+  if (!platform._element) {
+    const ionApp = document.querySelector('ion-app');
+    return (ionApp as any).componentOnReady(() => {
+      const platformEl = ionApp.querySelector('ion-platform');
+      return platformEl.componentOnReady().then(() => {
+        platform._element = platformEl;
+        return platformEl;
+      });
+    });
+  }
+  return platform._element.componentOnReady();
+}

packages/angular/src/router/outlet.ts

@@ -137,7 +137,7 @@ export class RouterOutlet implements OnDestroy, OnInit, RouterDelegate {
 }
 
 export function activateRoute(navElement: HTMLIonNavElement,
-  component: Type<any>, data: any = {}, cfr: ComponentFactoryResolver, injector: Injector, isTopLevel: boolean): Promise<void> {
+  component: Type<any>, data: any = {}, cfr: ComponentFactoryResolver, injector: Injector, isTopLevel: boolean): Promise<any> {
 
   return getIonApp().then((ionApp) => {
     if (!ionApp) {

packages/core/src/components.d.ts

@@ -2072,6 +2072,36 @@ declare global {
 }
 
 
+import {
+  Platform as IonPlatform
+} from './components/platform/platform';
+
+declare global {
+  interface HTMLIonPlatformElement extends IonPlatform, HTMLStencilElement {
+  }
+  var HTMLIonPlatformElement: {
+    prototype: HTMLIonPlatformElement;
+    new (): HTMLIonPlatformElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-platform": HTMLIonPlatformElement;
+  }
+  interface ElementTagNameMap {
+    "ion-platform": HTMLIonPlatformElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-platform": JSXElements.IonPlatformAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonPlatformAttributes extends HTMLAttributes {
+      
+    }
+  }
+}
+
+
 import {
   PopoverController as IonPopoverController
 } from './components/popover-controller/popover-controller';

packages/core/src/components/app/app.tsx

@@ -2,10 +2,10 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State }
 import { Config, NavEvent, OverlayController, PublicNav, PublicViewController } from '../../index';
 
 import { getOrAppendElement } from '../../utils/helpers';
-import { isCordova } from '../../global/platform-utils';
 
 const rootNavs = new Map<number, HTMLIonNavElement>();
 const ACTIVE_SCROLLING_TIME = 100;
+let backButtonActions: BackButtonAction[] = [];
 
 @Component({
   tag: 'ion-app',
@@ -143,8 +143,51 @@ export class App {
     return null;
   }
 
+
+  /**
+   * The back button event is triggered when the user presses the native
+   * platform's back button, also referred to as the "hardware" back button.
+   * This event is only used within Cordova apps running on Android and
+   * Windows platforms. This event is not fired on iOS since iOS doesn't come
+   * with a hardware back button in the same sense an Android or Windows device
+   * does.
+   *
+   * Registering a hardware back button action and setting a priority allows
+   * apps to control which action should be called when the hardware back
+   * button is pressed. This method decides which of the registered back button
+   * actions has the highest priority and should be called.
+   *
+   * @param {Function} fn Called when the back button is pressed,
+   * if this registered action has the highest priority.
+   * @param {number} priority Set the priority for this action. Only the highest priority will execute. Defaults to `0`.
+   * @returns {Function} A function that, when called, will unregister
+   * the back button action.
+   */
+  @Method()
+  registerBackButtonAction(fn: Function, priority = 0): () => void {
+    const newAction = {
+      fn,
+      priority
+    };
+    backButtonActions.push(newAction);
+
+    return () => {
+      backButtonActions = backButtonActions.filter(bbAction => bbAction !== newAction);
+    };
+  }
+
   @Listen('document:backbutton')
   hardwareBackButtonPressed() {
+    // okay cool, we need to execute the user's custom method if they have one
+    const actionToExecute = backButtonActions.reduce((previous, current) => {
+      if (current.priority >= previous.priority) {
+        return current;
+      }
+      return previous;
+    });
+    actionToExecute && actionToExecute.fn && actionToExecute.fn();
+
+    // okay great, we've done the user action, now do the default actions
     // check if menu exists and is open
     return checkIfMenuIsOpen().then((done: boolean) => {
       if (!done) {
@@ -199,9 +242,9 @@ export class App {
   render() {
     const isDevice = true;
     return [
-      isCordova() && <ion-cordova-platform/>,
       isDevice && <ion-tap-click />,
       isDevice && <ion-status-tap />,
+      <ion-platform />,
       <slot></slot>
     ];
   }
@@ -347,3 +390,8 @@ export interface ExitAppEvent extends CustomEvent {
 
 export interface ExitAppEventDetail {
 }
+
+export interface BackButtonAction {
+  fn: Function;
+  priority: number;
+}

packages/core/src/components/app/readme.md

@@ -47,6 +47,21 @@ Returns whether the application is enabled or not
 Boolean if the app is actively scrolling or not.
 
 
+#### registerBackButtonAction()
+
+The back button event is triggered when the user presses the native
+platform's back button, also referred to as the "hardware" back button.
+This event is only used within Cordova apps running on Android and
+Windows platforms. This event is not fired on iOS since iOS doesn't come
+with a hardware back button in the same sense an Android or Windows device
+does.
+
+Registering a hardware back button action and setting a priority allows
+apps to control which action should be called when the hardware back
+button is pressed. This method decides which of the registered back button
+actions has the highest priority and should be called.
+
+
 #### setExternalNavPromise()
 
 Updates the Promise set by an external navigation system

packages/core/src/components/platform/platform.tsx

@@ -0,0 +1,133 @@
+import { Component, Element, Method, Prop } from '@stencil/core';
+
+import { PlatformConfig } from '../../index';
+import { isCordova } from '../../global/platform-utils';
+
+@Component({
+  tag: 'ion-platform',
+})
+export class Platform {
+
+  @Prop({ context: 'platforms' }) _platforms: PlatformConfig[];
+  @Prop({ context: 'readQueryParam'}) readQueryParam: (url: string, key: string) => string;
+  @Element() el: HTMLElement;
+
+  /**
+   * Depending on the platform the user is on, `is(platformName)` will
+   * return `true` or `false`. Note that the same app can return `true`
+   * for more than one platform name. For example, an app running from
+   * an iPad would return `true` for the platform names: `mobile`,
+   * `ios`, `ipad`, and `tablet`. Additionally, if the app was running
+   * from Cordova then `cordova` would be true, and if it was running
+   * from a web browser on the iPad then `mobileweb` would be `true`.
+   *
+   * *
+   * ```
+   * import { Platform } from 'ionic-angular';
+   *
+   * @Component({...})
+   * export MyPage {
+   *   constructor(public platform: Platform) {
+   *     if (this.platform.is('ios')) {
+   *       // This will only print when on iOS
+   *       console.log('I am an iOS device!');
+   *     }
+   *   }
+   * }
+   * ```
+   *
+   * | Platform Name   | Description                        |
+   * |-----------------|------------------------------------|
+   * | android         | on a device running Android.       |
+   * | cordova         | on a device running Cordova.       |
+   * | core            | on a desktop device.               |
+   * | ios             | on a device running iOS.           |
+   * | ipad            | on an iPad device.                 |
+   * | iphone          | on an iPhone device.               |
+   * | mobile          | on a mobile device.                |
+   * | mobileweb       | in a browser on a mobile device.   |
+   * | phablet         | on a phablet device.               |
+   * | tablet          | on a tablet device.                |
+   * | windows         | on a device running Windows.       |
+   *
+   * @param {string} platformName
+   */
+  @Method()
+  is(platformName: string): boolean {
+    for (const platform of this._platforms) {
+      if (platform.name === platformName) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * @returns {array} the array of platforms
+   * @description
+   * Depending on what device you are on, `platforms` can return multiple values.
+   * Each possible value is a hierarchy of platforms. For example, on an iPhone,
+   * it would return `mobile`, `ios`, and `iphone`.
+   *
+   * ```
+   * import { Platform } from 'ionic-angular';
+   *
+   * @Component({...})
+   * export MyPage {
+   *   constructor(public platform: Platform) {
+   *     // This will print an array of the current platforms
+   *     console.log(this.platform.platforms());
+   *   }
+   * }
+   * ```
+   */
+  @Method()
+  platforms() {
+    return this._platforms.map(platform => platform.name);
+  }
+
+  @Method()
+  versions() {
+    return this._platforms;
+  }
+
+  /**
+   * Returns whether the device is in landscape orientation
+   */
+  @Method()
+  isLandscape(): boolean {
+    return !this.isPortrait();
+  }
+
+  /**
+   * Returns whether the device is in portration orientation
+   */
+  @Method()
+  isPortrait(): boolean {
+    return window.matchMedia('(orientation: portrait)').matches;
+  }
+
+  @Method()
+  ready() {
+    // revisit this later on
+    if (isCordova()) {
+      const cordovaPlatform = this.el.querySelector('ion-cordova-plaform') as any;
+      return cordovaPlatform.componentOnReady().then(() => {
+        return cordovaPlatform.ready();
+      });
+    }
+    return Promise.resolve();
+  }
+
+  @Method()
+  getQueryParam(param: string): string {
+    return this.readQueryParam(window.location.href, param);
+  }
+
+  render() {
+    return [
+      <ion-cordova-platform/>
+    ];
+  }
+
+}

packages/core/src/components/platform/readme.md

@@ -0,0 +1,50 @@
+# ion-platform
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Methods
+
+#### getQueryParam()
+
+
+#### is()
+
+Depending on the platform the user is on, `is(platformName)` will
+return `true` or `false`. Note that the same app can return `true`
+for more than one platform name. For example, an app running from
+an iPad would return `true` for the platform names: `mobile`,
+`ios`, `ipad`, and `tablet`. Additionally, if the app was running
+from Cordova then `cordova` would be true, and if it was running
+from a web browser on the iPad then `mobileweb` would be `true`.
+
+*
+```
+import { Platform } from 'ionic-angular';
+
+
+#### isLandscape()
+
+Returns whether the device is in landscape orientation
+
+
+#### isPortrait()
+
+Returns whether the device is in portration orientation
+
+
+#### platforms()
+
+
+#### ready()
+
+
+#### versions()
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/core/src/components/platform/test/basic/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Platform Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body onload="initialize()">
+  <ion-app>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Platform - basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <h2>The Platforms are:</h2>
+        <ul class="platform-name-list"></ul>
+
+        <h2>The Platforms versions are:</h2>
+        <ul class="platform-version-list"></ul>
+
+        <h2>The orientation is <span class="orientation"></span></h2>
+
+        <h2>The ready event has fired: <span class="ready"></span></h2>
+      </ion-content>
+
+    </ion-page>
+  </ion-app>
+
+  <script>
+    async function initialize() {
+      const app = document.querySelector('ion-app');
+      await app.componentOnReady();
+      const platform = document.querySelector('ion-platform');
+      await platform.componentOnReady();
+
+      const platforms = platform.platforms();
+      const platformListElement = document.querySelector('.platform-name-list');
+      platforms.forEach(platform => {
+        const element = document.createElement('li');
+        element.textContent = platform;
+        platformListElement.appendChild(element);
+      });
+
+      const platformVersionList = document.querySelector('.platform-version-list');
+      const versions = platform.versions();
+      versions.forEach(version => {
+        const element = document.createElement('li');
+        element.textContent = JSON.stringify(version);
+        platformVersionList.appendChild(element);
+      });
+
+      const orientationText = platform.isPortrait() ? 'portrait' : 'landscape';
+      document.querySelector('.orientation').textContent = orientationText;
+
+
+      const readyElement = document.querySelector('.ready');
+      readyElement.textContent = 'No';
+
+      // use artificial timeout to see the visual
+      setTimeout(() => {
+        platform.ready().then(() => {
+          readyElement.textContent = 'Yes';
+        });
+      }, 1000);
+
+    }
+  </script>
+</body>
+
+</html>

packages/core/src/global/config-controller.ts

@@ -1,5 +1,5 @@
 import { Config } from '../index';
-import { PlatformConfig, queryParam } from './platform-configs';
+import { PlatformConfig, readQueryParam } from './platform-configs';
 import { isDef } from '../utils/helpers';
 
 export function createConfigController(configObj: any, platforms: PlatformConfig[]): Config {
@@ -7,7 +7,7 @@ export function createConfigController(configObj: any, platforms: PlatformConfig
 
   function get(key: string, fallback?: any): any {
 
-    const queryValue = queryParam(window.location.href, `ionic${key}`);
+    const queryValue = readQueryParam(window.location.href, `ionic${key}`);
     if (isDef(queryValue)) {
       return configObj[key] = (queryValue === 'true' ? true : queryValue === 'false' ? false : queryValue);
     }

packages/core/src/global/ionic-global.ts

@@ -1,6 +1,6 @@
 import 'ionicons';
 import { createConfigController } from './config-controller';
-import { PLATFORM_CONFIGS, detectPlatforms } from './platform-configs';
+import { PLATFORM_CONFIGS, detectPlatforms, readQueryParam } from './platform-configs';
 import { createDomControllerClient } from './dom-controller';
 
 
@@ -15,11 +15,19 @@ if (!Context.dom) {
   Context.dom = createDomControllerClient(window, now);
 }
 
+if (!Context.platforms) {
+  Context.platforms = detectPlatforms(window.location.href, window.navigator.userAgent, PLATFORM_CONFIGS, 'core');
+}
+
+if (!Context.readQueryParam) {
+  Context.readQueryParam = readQueryParam;
+}
+
 // create the Ionic.config from raw config object (if it exists)
 // and convert Ionic.config into a ConfigApi that has a get() fn
 Ionic.config = Context.config = createConfigController(
   Ionic.config,
-  detectPlatforms(window.location.href, window.navigator.userAgent, PLATFORM_CONFIGS, 'core')
+  Context.platforms
 );
 
 

packages/core/src/global/platform-configs.ts

@@ -1,10 +1,21 @@
-import { isCordova } from './platform-utils';
+import { isCordova, isElectron,  } from './platform-utils';
 
-const IPAD = 'ipad';
-const IPHONE = 'iphone';
-const IOS = 'ios';
-const WINDOWS_PHONE = ['windows phone'];
+import {
+  ANDROID,
+  CORDOVA,
+  CORE,
+  ELECTRON,
+  IOS,
+  IPAD,
+  IPHONE,
+  MOBILE,
+  PHABLET,
+  TABLET,
+  WINDOWS_PHONE,
+} from './platform-utils';
 
+const width = window.innerWidth;
+const height = window.innerHeight;
 
 // order from most specifc to least specific
 export const PLATFORM_CONFIGS: PlatformConfig[] = [
@@ -30,21 +41,59 @@ export const PLATFORM_CONFIGS: PlatformConfig[] = [
   },
 
   {
-    name: 'android',
+    name: ANDROID,
     settings: {
       activator: 'ripple',
       mode: 'md',
     },
-    isMatch: (url, userAgent) => isPlatformMatch(url, userAgent, 'android', ['android', 'silk'], WINDOWS_PHONE)
+    isMatch: (url, userAgent) => isPlatformMatch(url, userAgent, ANDROID, [ANDROID, 'silk'], WINDOWS_PHONE)
   },
 
   {
-    name: 'core',
+    name: CORE,
     settings: {
       mode: 'md'
     }
   },
 
+  {
+    name: PHABLET,
+    isMatch: () => {
+      const smallest = Math.min(width, height);
+      const largest = Math.max(width, height);
+      return (smallest > 390 && smallest < 520) &&
+        (largest > 620 && largest < 800);
+    }
+  },
+
+  {
+    name: MOBILE
+  },
+
+  {
+    name: TABLET,
+    isMatch: () => {
+      const smallest = Math.min(width, height);
+      const largest = Math.max(width, height);
+      return (smallest > 460 && smallest < 820) &&
+        (largest > 780 && largest < 1400);
+    }
+  },
+
+  {
+    name: CORDOVA,
+    isMatch: () => {
+      return isCordova();
+    }
+  },
+
+  {
+    name: ELECTRON,
+    isMatch: () => {
+      return isElectron();
+    }
+  }
+
 ];
 
 export function detectPlatforms(url: string, userAgent: string, platforms: PlatformConfig[], defaultPlatform: string) {
@@ -59,7 +108,7 @@ export function detectPlatforms(url: string, userAgent: string, platforms: Platf
 }
 
 export function isPlatformMatch(url: string, userAgent: string, platformName: string, userAgentAtLeastHas: string[], userAgentMustNotHave: string[]) {
-  const queryValue = queryParam(url, 'ionicplatform');
+  const queryValue = readQueryParam(url, 'ionicplatform');
   if (queryValue) {
     return queryValue === platformName;
   }
@@ -83,7 +132,7 @@ export function isPlatformMatch(url: string, userAgent: string, platformName: st
 }
 
 
-export function queryParam(url: string, key: string) {
+export function readQueryParam(url: string, key: string) {
   key = key.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
   const regex = new RegExp('[\\?&]' + key + '=([^&#]*)');
   const results = regex.exec(url);

packages/core/src/global/platform-utils.ts

@@ -1,5 +1,35 @@
 
 export function isCordova(): boolean {
   const win = window as any;
-  return !!(win['cordova'] || win['PhoneGap'] || win['phonegap'] || win['Capacitor']);
+  return !!(win[CORDOVA] || win[PHONEGAP_CAMELCASE] || win[PHONEGAP] || win[CAPACITOR]);
 }
+
+export function isElectron(): boolean {
+  return testUserAgent(getUserAgent(), ELECTRON);
+}
+
+export function getUserAgent(): string {
+  return window.navigator.userAgent;
+}
+
+export function testUserAgent(userAgent: string, expression: string): boolean {
+  return userAgent ? userAgent.indexOf(expression) >= 0 : false;
+}
+
+export const ANDROID = 'android';
+export const CORDOVA = 'cordova';
+export const CORE = 'core';
+export const ELECTRON = 'electron';
+export const IOS = 'ios';
+export const IPAD = 'ipad';
+export const IPHONE = 'iphone';
+export const MOBILE = 'mobile';
+export const MOBILE_WEB = 'mobileweb';
+export const PHABLET = 'phablet';
+export const TABLET = 'tablet';
+export const WINDOWS_PHONE = ['windows phone'];
+
+export const PHONEGAP = 'phonegap';
+export const PHONEGAP_CAMELCASE = 'PhoneGap';
+export const CAPACITOR = 'Capacitor';
+

packages/core/src/global/test/query-param.spec.ts

@@ -1,19 +1,26 @@
-import { queryParam } from '../platform-configs';
+import { readQueryParam } from '../platform-configs';
 
-describe('QueryParam', () => {
+describe('readQueryParam', () => {
   it('should read the url for a queryParam', () => {
-    const qp = queryParam('?boolean=false', 'boolean');
+    const qp = readQueryParam('?boolean=false', 'boolean');
     expect(qp).toBeDefined();
     expect(qp).toEqual('false');
   });
 
   it('should get the value of  queryParam', () => {
-    const qp = queryParam('?keyValue=b', 'keyValue');
+    const qp = readQueryParam('?keyValue=b', 'keyValue');
     expect(qp).toEqual('b');
   });
 
-  it('should show nullfor a queryParam this is not passed', () => {
-    const qp = queryParam('', 'ionicanimate');
+  it('should show null for a queryParam this is not passed', () => {
+    const qp = readQueryParam('', 'ionicanimate');
     expect(qp).toBeNull();
   });
+
+  it('should get some params', () => {
+    const url = 'http://www.google.com/blah?taco=yum&burrito=yesplease&enchillada=dope';
+    expect(readQueryParam(url, 'taco')).toEqual('yum');
+    expect(readQueryParam(url, 'burrito')).toEqual('yesplease');
+    expect(readQueryParam(url, 'enchillada')).toEqual('dope');
+  });
 });

packages/core/src/index.d.ts

@@ -110,6 +110,8 @@ export { ToastController } from './components/toast-controller/toast-controller'
 export { Toggle } from './components/toggle/toggle';
 export { Toolbar } from './components/toolbar/toolbar';
 
+export { PlatformConfig } from './global/platform-configs';
+
 // export all of the component declarations that are dynamically created
 export * from './components';
 

packages/core/stencil.config.js

@@ -46,7 +46,7 @@ exports.config = {
     { components: ['ion-toggle'] },
     { components: ['ion-toast', 'ion-toast-controller'] },
     { components: ['ion-tap-click', 'ion-status-tap'] },
-    { components: ['ion-cordova-platform'] },
+    { components: ['ion-platform', 'ion-cordova-platform'] },
     { components: ['ion-nav-pop'] },
   ],
   plugins: [