javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ssr): fix angular global window and document references

Browse Source
This commit is contained in:
Adam Bradley
2019-02-25 16:43:41 -06:00
committed by GitHub
parent ceaef7eed2
commit f44c17e03b
19 changed files with 200 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
core/src/components/segment/test/custom/index.html
View File

@ -140,34 +140,6 @@
</body>
<script>
var segment = document.getElementById('browserSegment');
var results = document.getElementById('browserResults');
checkUrl();
segment.addEventListener('ionChange', function () {
checkUrl();
});
function checkUrl() {
var url = window.location.href;
if (url.search('#bookmarks') > -1) {
setResults('bookmarks');
} else if (url.search('#reading') > -1) {
setResults('reading');
} else if (url.search('#links') > -1) {
setResults('links');
}
}
function setResults(value) {
results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
segment.value = value;
}
</script>
<style>
body {
margin: 0;

4
core/src/global/ionic-global.ts
View File

@ -6,7 +6,7 @@ import { Config, configFromSession, configFromURL, saveConfig } from './config';
declare const Context: any;
const win = Context['window'] ? Context['window'] : typeof (window as any) !== 'undefined' ? window : {} as Window;
const win = typeof (window as any) !== 'undefined' ? window : {} as Window;
const Ionic = (win as any)['Ionic'] = (win as any)['Ionic'] || {};
@ -36,7 +36,7 @@ if (config.getBoolean('persistConfig')) {
// first see if the mode was set as an attribute on <html>
// which could have been set by the user, or by prerendering
// otherwise get the mode via config settings, and fallback to md
const documentElement = win.document ? win.document.documentElement : null;
const documentElement = (win as any).document ? win.document.documentElement : null;
const mode = config.get('mode', (documentElement && documentElement.getAttribute('mode')) || (isPlatform(win, 'ios') ? 'ios' : 'md'));
Ionic.mode = Context.mode = mode;
config.set('mode', mode);

185
core/src/utils/platform.ts
View File

@ -1,4 +1,88 @@
export type Platforms = keyof typeof PLATFORMS_MAP;
export const getPlatforms = (win: any) => setupPlatforms(win);
export const isPlatform = (win: Window, platform: Platforms) =>
getPlatforms(win).includes(platform);
export const setupPlatforms = (win: any) => {
win.Ionic = win.Ionic || {};
let platforms: string[] | undefined | null = win.Ionic.platforms;
if (platforms == null) {
platforms = win.Ionic.platforms = detectPlatforms(win);
platforms.forEach(p => win.document.documentElement.classList.add(`plt-${p}`));
}
return platforms;
};
const isMobileWeb = (win: Window): boolean =>
isMobile(win) && !isHybrid(win);
const detectPlatforms = (win: Window): string[] =>
Object.keys(PLATFORMS_MAP).filter(p => (PLATFORMS_MAP as any)[p](win));
const isIpad = (win: Window) =>
testUserAgent(win, /iPad/i);
const isIphone = (win: Window) =>
testUserAgent(win, /iPhone/i);
const isIOS = (win: Window) =>
testUserAgent(win, /iPad|iPhone|iPod/i);
const isAndroid = (win: Window) =>
testUserAgent(win, /android|sink/i);
const isPhablet = (win: Window) => {
const width = win.innerWidth;
const height = win.innerHeight;
const smallest = Math.min(width, height);
const largest = Math.max(width, height);
return (smallest > 390 && smallest < 520) &&
(largest > 620 && largest < 800);
};
const isTablet = (win: Window) => {
const width = win.innerWidth;
const height = win.innerHeight;
const smallest = Math.min(width, height);
const largest = Math.max(width, height);
return (smallest > 460 && smallest < 820) &&
(largest > 780 && largest < 1400);
};
const isMobile = (win: Window) =>
matchMedia(win, '(any-pointer:coarse)');
const isDesktop = (win: Window) =>
!isMobile(win);
const isHybrid = (win: Window) =>
isCordova(win) || isCapacitorNative(win);
const isCordova = (win: any): boolean =>
!!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
const isCapacitorNative = (win: any): boolean => {
const capacitor = win['Capacitor'];
return !!(capacitor && capacitor.isNative);
};
const isElectron = (win: Window): boolean =>
testUserAgent(win, /electron/);
const isPWA = (win: Window): boolean =>
(win as any).matchMedia ? (win.matchMedia('(display-mode: standalone)').matches || (win.navigator as any).standalone) : false;
export const testUserAgent = (win: Window, expr: RegExp) =>
(win as any).navigator && (win.navigator as any).userAgent ? expr.test(win.navigator.userAgent) : false;
const matchMedia = (win: any, query: string): boolean =>
(win as any).matchMedia ? win.matchMedia(query).matches : false;
export const PLATFORMS_MAP = {
'ipad': isIpad,
'iphone': isIphone,
@ -15,104 +99,3 @@ export const PLATFORMS_MAP = {
'desktop': isDesktop,
'hybrid': isHybrid
};
export type Platforms = keyof typeof PLATFORMS_MAP;
export function getPlatforms(win: any) {
return setupPlatforms(win);
}
export function isPlatform(win: Window, platform: Platforms) {
return getPlatforms(win).includes(platform);
}
export function setupPlatforms(win: any) {
win.Ionic = win.Ionic || {};
let platforms: string[] | undefined | null = win.Ionic.platforms;
if (platforms == null) {
platforms = win.Ionic.platforms = detectPlatforms(win);
platforms.forEach(p => win.document.documentElement.classList.add(`plt-${p}`));
}
return platforms;
}
function isMobileWeb(win: Window): boolean {
return isMobile(win) && !isHybrid(win);
}
function detectPlatforms(win: Window): string[] {
return Object.keys(PLATFORMS_MAP).filter(p => (PLATFORMS_MAP as any)[p](win));
}
function isIpad(win: Window) {
return testUserAgent(win, /iPad/i);
}
function isIphone(win: Window) {
return testUserAgent(win, /iPhone/i);
}
function isIOS(win: Window) {
return testUserAgent(win, /iPad|iPhone|iPod/i);
}
function isAndroid(win: Window) {
return testUserAgent(win, /android|sink/i);
}
function isPhablet(win: Window) {
const width = win.innerWidth;
const height = win.innerHeight;
const smallest = Math.min(width, height);
const largest = Math.max(width, height);
return (smallest > 390 && smallest < 520) &&
(largest > 620 && largest < 800);
}
function isTablet(win: Window) {
const width = win.innerWidth;
const height = win.innerHeight;
const smallest = Math.min(width, height);
const largest = Math.max(width, height);
return (smallest > 460 && smallest < 820) &&
(largest > 780 && largest < 1400);
}
function isMobile(win: Window) {
return matchMedia(win, '(any-pointer:coarse)');
}
function isDesktop(win: Window) {
return !isMobile(win);
}
function isHybrid(win: Window) {
return isCordova(win) || isCapacitorNative(win);
}
function isCordova(win: any): boolean {
return !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
}
function isCapacitorNative(win: any): boolean {
const capacitor = win['Capacitor'];
return !!(capacitor && capacitor.isNative);
}
function isElectron(win: Window): boolean {
return testUserAgent(win, /electron/);
}
function isPWA(win: Window): boolean {
return win.matchMedia('(display-mode: standalone)').matches || (win.navigator as any).standalone;
}
export function testUserAgent(win: Window, expr: RegExp) {
return expr.test(win.navigator.userAgent);
}
function matchMedia(win: any, query: string): boolean {
return win.matchMedia ? win.matchMedia(query).matches : false;
}