@dereekb/browser 13.0.0 → 13.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.default.js +1 -0
- package/index.cjs.js +115 -111
- package/index.cjs.mjs +2 -0
- package/index.esm.js +115 -111
- package/package.json +11 -16
|
@@ -0,0 +1 @@
|
|
|
1
|
+
exports._default = require('./index.cjs.js').default;
|
package/index.cjs.js
CHANGED
|
@@ -8,27 +8,27 @@ var rxjs = require('rxjs');
|
|
|
8
8
|
* Creatse a new BrowserObjectURLRef.
|
|
9
9
|
*/
|
|
10
10
|
function browserObjectUrlRef() {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
let browserUrl;
|
|
12
|
+
/**
|
|
13
|
+
* Revokes the existing browser object URL, if one exists.
|
|
14
|
+
*/
|
|
15
|
+
function destroy() {
|
|
16
|
+
if (browserUrl) {
|
|
17
|
+
URL.revokeObjectURL(browserUrl);
|
|
18
|
+
}
|
|
18
19
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
function createBrowserUrl(input) {
|
|
21
|
+
destroy();
|
|
22
|
+
if (input) {
|
|
23
|
+
browserUrl = URL.createObjectURL(input);
|
|
24
|
+
}
|
|
25
|
+
return browserUrl;
|
|
24
26
|
}
|
|
25
|
-
return
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
createBrowserUrl: createBrowserUrl
|
|
31
|
-
};
|
|
27
|
+
return {
|
|
28
|
+
destroy,
|
|
29
|
+
getBrowserUrl: () => browserUrl,
|
|
30
|
+
createBrowserUrl: createBrowserUrl
|
|
31
|
+
};
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
/*eslint @typescript-eslint/no-explicit-any:"off"*/
|
|
@@ -37,115 +37,119 @@ function browserObjectUrlRef() {
|
|
|
37
37
|
* Used for loading services in the browser that are imported from other scripts, such as Facebook, Segment, Stripe, etc.
|
|
38
38
|
*/
|
|
39
39
|
class AbstractAsyncWindowLoadedService {
|
|
40
|
-
|
|
41
|
-
* @param windowKey
|
|
42
|
-
* @param callbackKey
|
|
43
|
-
*/
|
|
44
|
-
constructor(windowKey, callbackKey, serviceName, preload) {
|
|
45
|
-
this._loading = new rxjs.BehaviorSubject(undefined);
|
|
40
|
+
_loading = new rxjs.BehaviorSubject(undefined);
|
|
46
41
|
/**
|
|
47
42
|
* Key that is attached to the window for the object that is the service when finished loading.
|
|
48
43
|
*/
|
|
49
|
-
|
|
44
|
+
_windowKey;
|
|
50
45
|
/**
|
|
51
46
|
* Optional key attached to window that is a function that is executed when the setup is complete.
|
|
52
47
|
*/
|
|
53
|
-
|
|
48
|
+
_callbackKey;
|
|
54
49
|
/**
|
|
55
50
|
* Service name used in logging. Defaults to the windowKey.
|
|
56
51
|
*/
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
52
|
+
_serviceName;
|
|
53
|
+
loading$ = this._loading.pipe(rxjs$1.tapFirst(() => this.loadService()), rxjs$1.filterMaybe(), rxjs.shareReplay(1));
|
|
54
|
+
service$ = this.loading$.pipe(rxjs.switchMap((x) => rxjs.from(x)), rxjs.shareReplay(1));
|
|
55
|
+
/**
|
|
56
|
+
* @param windowKey
|
|
57
|
+
* @param callbackKey
|
|
58
|
+
*/
|
|
59
|
+
constructor(windowKey, callbackKey, serviceName, preload) {
|
|
60
|
+
this._windowKey = windowKey;
|
|
61
|
+
this._callbackKey = callbackKey;
|
|
62
|
+
this._serviceName = serviceName ?? windowKey;
|
|
63
|
+
if (util.stringToBoolean(preload)) {
|
|
64
|
+
// Begin loading the service immediately.
|
|
65
|
+
setTimeout(() => this.loadService().catch());
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
destroy() {
|
|
69
|
+
this._loading.complete();
|
|
70
|
+
}
|
|
71
|
+
getService() {
|
|
72
|
+
return rxjs.firstValueFrom(this.service$);
|
|
73
|
+
}
|
|
74
|
+
// MARK: Loading
|
|
75
|
+
loadService() {
|
|
76
|
+
if (!this._loading.value) {
|
|
77
|
+
const loadingPromise = new Promise((resolve, reject) => {
|
|
78
|
+
let loadTry = 0;
|
|
79
|
+
const rejectWithError = () => {
|
|
80
|
+
reject(new Error(`Service "${this._serviceName}" failed loading with windowKey "${this._windowKey}"`));
|
|
81
|
+
};
|
|
82
|
+
const tryLoad = () => {
|
|
83
|
+
const windowRef = window;
|
|
84
|
+
// Loaded before the promise.
|
|
85
|
+
if (windowRef[this._windowKey]) {
|
|
86
|
+
// Not yet finished loading async. Intercept the function.
|
|
87
|
+
// console.log('Window key.');
|
|
88
|
+
return resolve(this.completeLoadingService());
|
|
89
|
+
}
|
|
90
|
+
else if (this._callbackKey && windowRef[this._callbackKey]) {
|
|
91
|
+
// console.log('Callback key.');
|
|
92
|
+
windowRef[this._callbackKey] = () => resolve(this.completeLoadingService());
|
|
93
|
+
}
|
|
94
|
+
else if (loadTry < 10) {
|
|
95
|
+
loadTry += 1;
|
|
96
|
+
// console.log('Try reload...');
|
|
97
|
+
setTimeout(() => tryLoad(), 1000);
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
const retry = this._onLoadServiceFailure();
|
|
101
|
+
if (retry) {
|
|
102
|
+
retry.then((x) => resolve(x)).catch(() => rejectWithError());
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
rejectWithError();
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
tryLoad();
|
|
110
|
+
});
|
|
111
|
+
this._loading.next(loadingPromise);
|
|
112
|
+
}
|
|
113
|
+
return this._loading.value;
|
|
114
|
+
}
|
|
115
|
+
_onLoadServiceFailure() {
|
|
116
|
+
// override in parent if needed.
|
|
117
|
+
}
|
|
118
|
+
async completeLoadingService() {
|
|
119
|
+
await this._prepareCompleteLoadingService();
|
|
120
|
+
const service = window[this._windowKey];
|
|
121
|
+
if (!service) {
|
|
122
|
+
throw new Error(`Service "${this._serviceName}" could not complete loading.`);
|
|
123
|
+
}
|
|
124
|
+
// Init the API
|
|
125
|
+
const initializedService = await this._initService(service);
|
|
126
|
+
return initializedService ?? service;
|
|
66
127
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
this._loading.complete();
|
|
70
|
-
}
|
|
71
|
-
getService() {
|
|
72
|
-
return rxjs.firstValueFrom(this.service$);
|
|
73
|
-
}
|
|
74
|
-
// MARK: Loading
|
|
75
|
-
loadService() {
|
|
76
|
-
if (!this._loading.value) {
|
|
77
|
-
const loadingPromise = new Promise((resolve, reject) => {
|
|
78
|
-
let loadTry = 0;
|
|
79
|
-
const rejectWithError = () => {
|
|
80
|
-
reject(new Error(`Service "${this._serviceName}" failed loading with windowKey "${this._windowKey}"`));
|
|
81
|
-
};
|
|
82
|
-
const tryLoad = () => {
|
|
83
|
-
const windowRef = window;
|
|
84
|
-
// Loaded before the promise.
|
|
85
|
-
if (windowRef[this._windowKey]) {
|
|
86
|
-
// Not yet finished loading async. Intercept the function.
|
|
87
|
-
// console.log('Window key.');
|
|
88
|
-
return resolve(this.completeLoadingService());
|
|
89
|
-
} else if (this._callbackKey && windowRef[this._callbackKey]) {
|
|
90
|
-
// console.log('Callback key.');
|
|
91
|
-
windowRef[this._callbackKey] = () => resolve(this.completeLoadingService());
|
|
92
|
-
} else if (loadTry < 10) {
|
|
93
|
-
loadTry += 1;
|
|
94
|
-
// console.log('Try reload...');
|
|
95
|
-
setTimeout(() => tryLoad(), 1000);
|
|
96
|
-
} else {
|
|
97
|
-
const retry = this._onLoadServiceFailure();
|
|
98
|
-
if (retry) {
|
|
99
|
-
retry.then(x => resolve(x)).catch(() => rejectWithError());
|
|
100
|
-
} else {
|
|
101
|
-
rejectWithError();
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
};
|
|
105
|
-
tryLoad();
|
|
106
|
-
});
|
|
107
|
-
this._loading.next(loadingPromise);
|
|
128
|
+
_prepareCompleteLoadingService() {
|
|
129
|
+
return Promise.resolve();
|
|
108
130
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
_onLoadServiceFailure() {
|
|
112
|
-
// override in parent if needed.
|
|
113
|
-
}
|
|
114
|
-
async completeLoadingService() {
|
|
115
|
-
await this._prepareCompleteLoadingService();
|
|
116
|
-
const service = window[this._windowKey];
|
|
117
|
-
if (!service) {
|
|
118
|
-
throw new Error(`Service "${this._serviceName}" could not complete loading.`);
|
|
131
|
+
_initService(service) {
|
|
132
|
+
return Promise.resolve(service);
|
|
119
133
|
}
|
|
120
|
-
// Init the API
|
|
121
|
-
const initializedService = await this._initService(service);
|
|
122
|
-
return initializedService ?? service;
|
|
123
|
-
}
|
|
124
|
-
_prepareCompleteLoadingService() {
|
|
125
|
-
return Promise.resolve();
|
|
126
|
-
}
|
|
127
|
-
_initService(service) {
|
|
128
|
-
return Promise.resolve(service);
|
|
129
|
-
}
|
|
130
134
|
}
|
|
131
135
|
|
|
132
136
|
// https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9
|
|
133
137
|
const DEFAULT_VH100_VARIABLE_NAME = 'vh100';
|
|
134
138
|
function refreshVh100Function(cssVariableName = DEFAULT_VH100_VARIABLE_NAME) {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
139
|
+
const cssProperty = `--${cssVariableName}`;
|
|
140
|
+
return () => {
|
|
141
|
+
const doc = document.documentElement;
|
|
142
|
+
doc.style.setProperty(cssProperty, `${window.innerHeight}px`);
|
|
143
|
+
};
|
|
140
144
|
}
|
|
141
145
|
/**
|
|
142
146
|
* Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
|
|
143
147
|
*/
|
|
144
148
|
function watchWindowAndUpdateVh100StyleProperty(cssVariableName) {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
+
const refreshPropertyValue = refreshVh100Function(cssVariableName);
|
|
150
|
+
window.addEventListener('resize', refreshPropertyValue);
|
|
151
|
+
window.addEventListener('orientationchange', refreshPropertyValue);
|
|
152
|
+
refreshPropertyValue();
|
|
149
153
|
}
|
|
150
154
|
|
|
151
155
|
// MARK: Window Location Utiltiies
|
|
@@ -153,17 +157,17 @@ function watchWindowAndUpdateVh100StyleProperty(cssVariableName) {
|
|
|
153
157
|
* Whether or not the current host is localhost. Useful for determining local dev environments.
|
|
154
158
|
*/
|
|
155
159
|
function isLocalhost() {
|
|
156
|
-
|
|
160
|
+
return window.location.hostname === 'localhost';
|
|
157
161
|
}
|
|
158
162
|
function makeWindowPath(path) {
|
|
159
|
-
|
|
163
|
+
return `${getBaseWindowUrl()}${path}`;
|
|
160
164
|
}
|
|
161
165
|
function getBaseWindowUrl() {
|
|
162
|
-
|
|
163
|
-
|
|
166
|
+
const port = window.location.port ? ':' + window.location.port : '';
|
|
167
|
+
return `${window.location.protocol}//${window.location.hostname}${port}`;
|
|
164
168
|
}
|
|
165
169
|
function getWindowPathNameWithQuery() {
|
|
166
|
-
|
|
170
|
+
return window.location.pathname + window.location.search;
|
|
167
171
|
}
|
|
168
172
|
|
|
169
173
|
exports.AbstractAsyncWindowLoadedService = AbstractAsyncWindowLoadedService;
|
package/index.cjs.mjs
ADDED
package/index.esm.js
CHANGED
|
@@ -6,27 +6,27 @@ import { BehaviorSubject, shareReplay, switchMap, from, firstValueFrom } from 'r
|
|
|
6
6
|
* Creatse a new BrowserObjectURLRef.
|
|
7
7
|
*/
|
|
8
8
|
function browserObjectUrlRef() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
let browserUrl;
|
|
10
|
+
/**
|
|
11
|
+
* Revokes the existing browser object URL, if one exists.
|
|
12
|
+
*/
|
|
13
|
+
function destroy() {
|
|
14
|
+
if (browserUrl) {
|
|
15
|
+
URL.revokeObjectURL(browserUrl);
|
|
16
|
+
}
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
function createBrowserUrl(input) {
|
|
19
|
+
destroy();
|
|
20
|
+
if (input) {
|
|
21
|
+
browserUrl = URL.createObjectURL(input);
|
|
22
|
+
}
|
|
23
|
+
return browserUrl;
|
|
22
24
|
}
|
|
23
|
-
return
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
createBrowserUrl: createBrowserUrl
|
|
29
|
-
};
|
|
25
|
+
return {
|
|
26
|
+
destroy,
|
|
27
|
+
getBrowserUrl: () => browserUrl,
|
|
28
|
+
createBrowserUrl: createBrowserUrl
|
|
29
|
+
};
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
/*eslint @typescript-eslint/no-explicit-any:"off"*/
|
|
@@ -35,115 +35,119 @@ function browserObjectUrlRef() {
|
|
|
35
35
|
* Used for loading services in the browser that are imported from other scripts, such as Facebook, Segment, Stripe, etc.
|
|
36
36
|
*/
|
|
37
37
|
class AbstractAsyncWindowLoadedService {
|
|
38
|
-
|
|
39
|
-
* @param windowKey
|
|
40
|
-
* @param callbackKey
|
|
41
|
-
*/
|
|
42
|
-
constructor(windowKey, callbackKey, serviceName, preload) {
|
|
43
|
-
this._loading = new BehaviorSubject(undefined);
|
|
38
|
+
_loading = new BehaviorSubject(undefined);
|
|
44
39
|
/**
|
|
45
40
|
* Key that is attached to the window for the object that is the service when finished loading.
|
|
46
41
|
*/
|
|
47
|
-
|
|
42
|
+
_windowKey;
|
|
48
43
|
/**
|
|
49
44
|
* Optional key attached to window that is a function that is executed when the setup is complete.
|
|
50
45
|
*/
|
|
51
|
-
|
|
46
|
+
_callbackKey;
|
|
52
47
|
/**
|
|
53
48
|
* Service name used in logging. Defaults to the windowKey.
|
|
54
49
|
*/
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
50
|
+
_serviceName;
|
|
51
|
+
loading$ = this._loading.pipe(tapFirst(() => this.loadService()), filterMaybe(), shareReplay(1));
|
|
52
|
+
service$ = this.loading$.pipe(switchMap((x) => from(x)), shareReplay(1));
|
|
53
|
+
/**
|
|
54
|
+
* @param windowKey
|
|
55
|
+
* @param callbackKey
|
|
56
|
+
*/
|
|
57
|
+
constructor(windowKey, callbackKey, serviceName, preload) {
|
|
58
|
+
this._windowKey = windowKey;
|
|
59
|
+
this._callbackKey = callbackKey;
|
|
60
|
+
this._serviceName = serviceName ?? windowKey;
|
|
61
|
+
if (stringToBoolean(preload)) {
|
|
62
|
+
// Begin loading the service immediately.
|
|
63
|
+
setTimeout(() => this.loadService().catch());
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
destroy() {
|
|
67
|
+
this._loading.complete();
|
|
68
|
+
}
|
|
69
|
+
getService() {
|
|
70
|
+
return firstValueFrom(this.service$);
|
|
71
|
+
}
|
|
72
|
+
// MARK: Loading
|
|
73
|
+
loadService() {
|
|
74
|
+
if (!this._loading.value) {
|
|
75
|
+
const loadingPromise = new Promise((resolve, reject) => {
|
|
76
|
+
let loadTry = 0;
|
|
77
|
+
const rejectWithError = () => {
|
|
78
|
+
reject(new Error(`Service "${this._serviceName}" failed loading with windowKey "${this._windowKey}"`));
|
|
79
|
+
};
|
|
80
|
+
const tryLoad = () => {
|
|
81
|
+
const windowRef = window;
|
|
82
|
+
// Loaded before the promise.
|
|
83
|
+
if (windowRef[this._windowKey]) {
|
|
84
|
+
// Not yet finished loading async. Intercept the function.
|
|
85
|
+
// console.log('Window key.');
|
|
86
|
+
return resolve(this.completeLoadingService());
|
|
87
|
+
}
|
|
88
|
+
else if (this._callbackKey && windowRef[this._callbackKey]) {
|
|
89
|
+
// console.log('Callback key.');
|
|
90
|
+
windowRef[this._callbackKey] = () => resolve(this.completeLoadingService());
|
|
91
|
+
}
|
|
92
|
+
else if (loadTry < 10) {
|
|
93
|
+
loadTry += 1;
|
|
94
|
+
// console.log('Try reload...');
|
|
95
|
+
setTimeout(() => tryLoad(), 1000);
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
const retry = this._onLoadServiceFailure();
|
|
99
|
+
if (retry) {
|
|
100
|
+
retry.then((x) => resolve(x)).catch(() => rejectWithError());
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
rejectWithError();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
tryLoad();
|
|
108
|
+
});
|
|
109
|
+
this._loading.next(loadingPromise);
|
|
110
|
+
}
|
|
111
|
+
return this._loading.value;
|
|
112
|
+
}
|
|
113
|
+
_onLoadServiceFailure() {
|
|
114
|
+
// override in parent if needed.
|
|
115
|
+
}
|
|
116
|
+
async completeLoadingService() {
|
|
117
|
+
await this._prepareCompleteLoadingService();
|
|
118
|
+
const service = window[this._windowKey];
|
|
119
|
+
if (!service) {
|
|
120
|
+
throw new Error(`Service "${this._serviceName}" could not complete loading.`);
|
|
121
|
+
}
|
|
122
|
+
// Init the API
|
|
123
|
+
const initializedService = await this._initService(service);
|
|
124
|
+
return initializedService ?? service;
|
|
64
125
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
this._loading.complete();
|
|
68
|
-
}
|
|
69
|
-
getService() {
|
|
70
|
-
return firstValueFrom(this.service$);
|
|
71
|
-
}
|
|
72
|
-
// MARK: Loading
|
|
73
|
-
loadService() {
|
|
74
|
-
if (!this._loading.value) {
|
|
75
|
-
const loadingPromise = new Promise((resolve, reject) => {
|
|
76
|
-
let loadTry = 0;
|
|
77
|
-
const rejectWithError = () => {
|
|
78
|
-
reject(new Error(`Service "${this._serviceName}" failed loading with windowKey "${this._windowKey}"`));
|
|
79
|
-
};
|
|
80
|
-
const tryLoad = () => {
|
|
81
|
-
const windowRef = window;
|
|
82
|
-
// Loaded before the promise.
|
|
83
|
-
if (windowRef[this._windowKey]) {
|
|
84
|
-
// Not yet finished loading async. Intercept the function.
|
|
85
|
-
// console.log('Window key.');
|
|
86
|
-
return resolve(this.completeLoadingService());
|
|
87
|
-
} else if (this._callbackKey && windowRef[this._callbackKey]) {
|
|
88
|
-
// console.log('Callback key.');
|
|
89
|
-
windowRef[this._callbackKey] = () => resolve(this.completeLoadingService());
|
|
90
|
-
} else if (loadTry < 10) {
|
|
91
|
-
loadTry += 1;
|
|
92
|
-
// console.log('Try reload...');
|
|
93
|
-
setTimeout(() => tryLoad(), 1000);
|
|
94
|
-
} else {
|
|
95
|
-
const retry = this._onLoadServiceFailure();
|
|
96
|
-
if (retry) {
|
|
97
|
-
retry.then(x => resolve(x)).catch(() => rejectWithError());
|
|
98
|
-
} else {
|
|
99
|
-
rejectWithError();
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
};
|
|
103
|
-
tryLoad();
|
|
104
|
-
});
|
|
105
|
-
this._loading.next(loadingPromise);
|
|
126
|
+
_prepareCompleteLoadingService() {
|
|
127
|
+
return Promise.resolve();
|
|
106
128
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
_onLoadServiceFailure() {
|
|
110
|
-
// override in parent if needed.
|
|
111
|
-
}
|
|
112
|
-
async completeLoadingService() {
|
|
113
|
-
await this._prepareCompleteLoadingService();
|
|
114
|
-
const service = window[this._windowKey];
|
|
115
|
-
if (!service) {
|
|
116
|
-
throw new Error(`Service "${this._serviceName}" could not complete loading.`);
|
|
129
|
+
_initService(service) {
|
|
130
|
+
return Promise.resolve(service);
|
|
117
131
|
}
|
|
118
|
-
// Init the API
|
|
119
|
-
const initializedService = await this._initService(service);
|
|
120
|
-
return initializedService ?? service;
|
|
121
|
-
}
|
|
122
|
-
_prepareCompleteLoadingService() {
|
|
123
|
-
return Promise.resolve();
|
|
124
|
-
}
|
|
125
|
-
_initService(service) {
|
|
126
|
-
return Promise.resolve(service);
|
|
127
|
-
}
|
|
128
132
|
}
|
|
129
133
|
|
|
130
134
|
// https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9
|
|
131
135
|
const DEFAULT_VH100_VARIABLE_NAME = 'vh100';
|
|
132
136
|
function refreshVh100Function(cssVariableName = DEFAULT_VH100_VARIABLE_NAME) {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
137
|
+
const cssProperty = `--${cssVariableName}`;
|
|
138
|
+
return () => {
|
|
139
|
+
const doc = document.documentElement;
|
|
140
|
+
doc.style.setProperty(cssProperty, `${window.innerHeight}px`);
|
|
141
|
+
};
|
|
138
142
|
}
|
|
139
143
|
/**
|
|
140
144
|
* Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
|
|
141
145
|
*/
|
|
142
146
|
function watchWindowAndUpdateVh100StyleProperty(cssVariableName) {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
+
const refreshPropertyValue = refreshVh100Function(cssVariableName);
|
|
148
|
+
window.addEventListener('resize', refreshPropertyValue);
|
|
149
|
+
window.addEventListener('orientationchange', refreshPropertyValue);
|
|
150
|
+
refreshPropertyValue();
|
|
147
151
|
}
|
|
148
152
|
|
|
149
153
|
// MARK: Window Location Utiltiies
|
|
@@ -151,17 +155,17 @@ function watchWindowAndUpdateVh100StyleProperty(cssVariableName) {
|
|
|
151
155
|
* Whether or not the current host is localhost. Useful for determining local dev environments.
|
|
152
156
|
*/
|
|
153
157
|
function isLocalhost() {
|
|
154
|
-
|
|
158
|
+
return window.location.hostname === 'localhost';
|
|
155
159
|
}
|
|
156
160
|
function makeWindowPath(path) {
|
|
157
|
-
|
|
161
|
+
return `${getBaseWindowUrl()}${path}`;
|
|
158
162
|
}
|
|
159
163
|
function getBaseWindowUrl() {
|
|
160
|
-
|
|
161
|
-
|
|
164
|
+
const port = window.location.port ? ':' + window.location.port : '';
|
|
165
|
+
return `${window.location.protocol}//${window.location.hostname}${port}`;
|
|
162
166
|
}
|
|
163
167
|
function getWindowPathNameWithQuery() {
|
|
164
|
-
|
|
168
|
+
return window.location.pathname + window.location.search;
|
|
165
169
|
}
|
|
166
170
|
|
|
167
171
|
export { AbstractAsyncWindowLoadedService, DEFAULT_VH100_VARIABLE_NAME, browserObjectUrlRef, getBaseWindowUrl, getWindowPathNameWithQuery, isLocalhost, makeWindowPath, refreshVh100Function, watchWindowAndUpdateVh100StyleProperty };
|
package/package.json
CHANGED
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dereekb/browser",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.2",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@dereekb/util": "13.0.2",
|
|
6
|
+
"@dereekb/rxjs": "13.0.2",
|
|
7
|
+
"rxjs": "^7.8.0"
|
|
8
|
+
},
|
|
9
|
+
"dependencies": {},
|
|
4
10
|
"exports": {
|
|
11
|
+
"./package.json": "./package.json",
|
|
5
12
|
".": {
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
"browser": {
|
|
11
|
-
"require": "./index.cjs.js",
|
|
12
|
-
"import": "./index.esm.js"
|
|
13
|
-
},
|
|
13
|
+
"module": "./index.esm.js",
|
|
14
|
+
"types": "./index.d.ts",
|
|
15
|
+
"import": "./index.cjs.mjs",
|
|
14
16
|
"default": "./index.cjs.js"
|
|
15
17
|
}
|
|
16
18
|
},
|
|
17
|
-
"peerDependencies": {
|
|
18
|
-
"@dereekb/util": "13.0.0",
|
|
19
|
-
"@dereekb/rxjs": "13.0.0",
|
|
20
|
-
"rxjs": "^7.8.0",
|
|
21
|
-
"core-js": "^3.0.0"
|
|
22
|
-
},
|
|
23
|
-
"dependencies": {},
|
|
24
19
|
"module": "./index.esm.js",
|
|
25
20
|
"main": "./index.cjs.js",
|
|
26
21
|
"types": "./index.d.ts"
|