javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(platform): remove from critical path

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-18 23:06:56 +02:00
parent 861ce49363
commit 86a6cde4a1
23 changed files with 347 additions and 1001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
angular/src/providers/platform.ts
View File

@ -1,115 +1,121 @@
import { PlatformConfig } from '@ionic/core';
export type DocumentDirection = 'ltr' | 'rtl';
let dir: DocumentDirection = 'ltr';
let isRtl = false;
let lang = '';
export class Platform {
_element: HTMLIonPlatformElement;
private _platforms: PlatformConfig[];
private _readyPromise: Promise<any>;
private _readyResolve: any;
constructor() {
initialize(this);
this._readyPromise = new Promise(res => { this._readyResolve = res; } );
}
/**
* @returns {boolean} returns true/false based on platform.
* @description
* 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. |
* | electron | in Electron on a desktop device. |
*
* @param {string} platformName
*/
is(platformName: string): boolean {
return isImpl(this, platformName);
}
isAsync(platformName: string): Promise<boolean> {
return isAsyncImpl(this, platformName);
return this._platforms.some(p => p.name === platformName);
}
/**
* @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());
* }
* }
* ```
*/
platforms(): string[] {
return platformsImpl(this);
}
platformsAsync(): Promise<string[]> {
return platformsAsyncImpl(this);
return this._platforms.map(platform => platform.name);
}
/**
* Returns an object containing version information about all of the platforms.
*
* ```
* import { Platform } from 'ionic-angular';
*
* @Component({...})
* export MyPage {
* constructor(public platform: Platform) {
* // This will print an object containing
* // all of the platforms and their versions
* console.log(platform.versions());
* }
* }
* ```
*
* @returns {object} An object containing all of the platforms and their versions.
*/
versions(): PlatformConfig[] {
return versionsImpl(this);
return this._platforms.slice();
}
versionsAsync(): Promise<PlatformConfig[]> {
return versionsAsyncImpl(this);
}
ready(): Promise<any> {
return readyImpl(this);
ready(): Promise<string> {
return this._readyPromise;
}
get isRTL(): boolean {
return isRtl;
return document.dir === 'rtl';
}
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;
return readQueryParam(window.location.href, key);
}
isLandscape(): boolean {
@ -131,98 +137,15 @@ export class Platform {
width() {
return window.innerWidth;
}
}
export function isImpl(platform: Platform, platformName: string) {
if (platform._element && platform._element.is) {
return platform._element.is(platformName);
height(): number {
return window.innerHeight;
}
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();
function readQueryParam(url: string, key: string) {
key = key.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
const regex = new RegExp('[\\?&]' + key + '=([^&#]*)');
const results = regex.exec(url);
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
}