@dereekb/browser 13.4.1 → 13.5.0
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.js +17 -8
- package/index.esm.js +17 -8
- package/package.json +3 -3
- package/src/lib/service.d.ts +4 -0
- package/src/lib/type.d.ts +3 -1
- package/src/lib/vh100.d.ts +7 -4
- package/src/lib/window.d.ts +2 -0
package/index.cjs.js
CHANGED
|
@@ -5,7 +5,9 @@ var rxjs$1 = require('@dereekb/rxjs');
|
|
|
5
5
|
var rxjs = require('rxjs');
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Creates a new BrowserObjectURLRef.
|
|
9
|
+
*
|
|
10
|
+
* @returns A new BrowserObjectURLRef instance that manages browser object URL lifecycle
|
|
9
11
|
*/ function browserObjectUrlRef() {
|
|
10
12
|
var browserUrl;
|
|
11
13
|
/**
|
|
@@ -209,7 +211,7 @@ function _ts_generator(thisArg, body) {
|
|
|
209
211
|
/**
|
|
210
212
|
* Observable that emits the loading promise. Subscribing triggers the initial load if not already started.
|
|
211
213
|
*/ _define_property(this, "loading$", this._loading.pipe(rxjs$1.tapFirst(function() {
|
|
212
|
-
|
|
214
|
+
void _this.loadService();
|
|
213
215
|
}), rxjs$1.filterMaybe(), rxjs.shareReplay(1)));
|
|
214
216
|
/**
|
|
215
217
|
* Observable that emits the resolved service instance once loading completes. Replays the last value to new subscribers.
|
|
@@ -240,6 +242,8 @@ function _ts_generator(thisArg, body) {
|
|
|
240
242
|
* Returns a promise that resolves with the loaded service instance.
|
|
241
243
|
*
|
|
242
244
|
* Triggers loading if not already started.
|
|
245
|
+
*
|
|
246
|
+
* @returns Promise that resolves with the loaded service instance
|
|
243
247
|
*/ key: "getService",
|
|
244
248
|
value: function getService() {
|
|
245
249
|
return rxjs.firstValueFrom(this.service$);
|
|
@@ -350,6 +354,8 @@ function _ts_generator(thisArg, body) {
|
|
|
350
354
|
/**
|
|
351
355
|
* Hook called before completing the service load. Subclasses can override to perform
|
|
352
356
|
* additional async setup before the service reference is read from `window`.
|
|
357
|
+
*
|
|
358
|
+
* @returns Promise that resolves when pre-load setup is complete
|
|
353
359
|
*/ key: "_prepareCompleteLoadingService",
|
|
354
360
|
value: function _prepareCompleteLoadingService() {
|
|
355
361
|
return Promise.resolve();
|
|
@@ -373,7 +379,6 @@ function _ts_generator(thisArg, body) {
|
|
|
373
379
|
}
|
|
374
380
|
();
|
|
375
381
|
|
|
376
|
-
// https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9
|
|
377
382
|
/**
|
|
378
383
|
* Default CSS custom property name used to store the viewport height value.
|
|
379
384
|
*/ var DEFAULT_VH100_VARIABLE_NAME = 'vh100';
|
|
@@ -383,7 +388,7 @@ function _ts_generator(thisArg, body) {
|
|
|
383
388
|
* This is a workaround for the iOS Safari 100vh bug where `100vh` includes the browser chrome,
|
|
384
389
|
* causing layout overflow. The returned function can be called to refresh the property value.
|
|
385
390
|
*
|
|
386
|
-
* @param
|
|
391
|
+
* @param cssTokenName - Name of the CSS custom property (without the `--` prefix)
|
|
387
392
|
* @returns A zero-argument function that updates the CSS property to the current inner height
|
|
388
393
|
*
|
|
389
394
|
* @example
|
|
@@ -392,8 +397,8 @@ function _ts_generator(thisArg, body) {
|
|
|
392
397
|
* refresh(); // sets --vh100 to e.g. "812px"
|
|
393
398
|
* ```
|
|
394
399
|
*/ function refreshVh100Function() {
|
|
395
|
-
var
|
|
396
|
-
var cssProperty = "--".concat(
|
|
400
|
+
var cssTokenName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_VH100_VARIABLE_NAME;
|
|
401
|
+
var cssProperty = "--".concat(cssTokenName);
|
|
397
402
|
return function() {
|
|
398
403
|
var doc = document.documentElement;
|
|
399
404
|
doc.style.setProperty(cssProperty, "".concat(window.innerHeight, "px"));
|
|
@@ -401,8 +406,10 @@ function _ts_generator(thisArg, body) {
|
|
|
401
406
|
}
|
|
402
407
|
/**
|
|
403
408
|
* Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
|
|
404
|
-
|
|
405
|
-
|
|
409
|
+
*
|
|
410
|
+
* @param cssTokenName - Name of the CSS custom property to update; defaults to `vh100`
|
|
411
|
+
*/ function watchWindowAndUpdateVh100StyleProperty(cssTokenName) {
|
|
412
|
+
var refreshPropertyValue = refreshVh100Function(cssTokenName);
|
|
406
413
|
window.addEventListener('resize', refreshPropertyValue);
|
|
407
414
|
window.addEventListener('orientationchange', refreshPropertyValue);
|
|
408
415
|
refreshPropertyValue();
|
|
@@ -411,6 +418,8 @@ function _ts_generator(thisArg, body) {
|
|
|
411
418
|
// MARK: Window Location Utiltiies
|
|
412
419
|
/**
|
|
413
420
|
* Whether or not the current host is localhost. Useful for determining local dev environments.
|
|
421
|
+
*
|
|
422
|
+
* @returns True if the current hostname is `localhost`
|
|
414
423
|
*/ function isLocalhost() {
|
|
415
424
|
return window.location.hostname === 'localhost';
|
|
416
425
|
}
|
package/index.esm.js
CHANGED
|
@@ -3,7 +3,9 @@ import { tapFirst, filterMaybe } from '@dereekb/rxjs';
|
|
|
3
3
|
import { BehaviorSubject, shareReplay, switchMap, from, firstValueFrom } from 'rxjs';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Creates a new BrowserObjectURLRef.
|
|
7
|
+
*
|
|
8
|
+
* @returns A new BrowserObjectURLRef instance that manages browser object URL lifecycle
|
|
7
9
|
*/ function browserObjectUrlRef() {
|
|
8
10
|
var browserUrl;
|
|
9
11
|
/**
|
|
@@ -207,7 +209,7 @@ function _ts_generator(thisArg, body) {
|
|
|
207
209
|
/**
|
|
208
210
|
* Observable that emits the loading promise. Subscribing triggers the initial load if not already started.
|
|
209
211
|
*/ _define_property(this, "loading$", this._loading.pipe(tapFirst(function() {
|
|
210
|
-
|
|
212
|
+
void _this.loadService();
|
|
211
213
|
}), filterMaybe(), shareReplay(1)));
|
|
212
214
|
/**
|
|
213
215
|
* Observable that emits the resolved service instance once loading completes. Replays the last value to new subscribers.
|
|
@@ -238,6 +240,8 @@ function _ts_generator(thisArg, body) {
|
|
|
238
240
|
* Returns a promise that resolves with the loaded service instance.
|
|
239
241
|
*
|
|
240
242
|
* Triggers loading if not already started.
|
|
243
|
+
*
|
|
244
|
+
* @returns Promise that resolves with the loaded service instance
|
|
241
245
|
*/ key: "getService",
|
|
242
246
|
value: function getService() {
|
|
243
247
|
return firstValueFrom(this.service$);
|
|
@@ -348,6 +352,8 @@ function _ts_generator(thisArg, body) {
|
|
|
348
352
|
/**
|
|
349
353
|
* Hook called before completing the service load. Subclasses can override to perform
|
|
350
354
|
* additional async setup before the service reference is read from `window`.
|
|
355
|
+
*
|
|
356
|
+
* @returns Promise that resolves when pre-load setup is complete
|
|
351
357
|
*/ key: "_prepareCompleteLoadingService",
|
|
352
358
|
value: function _prepareCompleteLoadingService() {
|
|
353
359
|
return Promise.resolve();
|
|
@@ -371,7 +377,6 @@ function _ts_generator(thisArg, body) {
|
|
|
371
377
|
}
|
|
372
378
|
();
|
|
373
379
|
|
|
374
|
-
// https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9
|
|
375
380
|
/**
|
|
376
381
|
* Default CSS custom property name used to store the viewport height value.
|
|
377
382
|
*/ var DEFAULT_VH100_VARIABLE_NAME = 'vh100';
|
|
@@ -381,7 +386,7 @@ function _ts_generator(thisArg, body) {
|
|
|
381
386
|
* This is a workaround for the iOS Safari 100vh bug where `100vh` includes the browser chrome,
|
|
382
387
|
* causing layout overflow. The returned function can be called to refresh the property value.
|
|
383
388
|
*
|
|
384
|
-
* @param
|
|
389
|
+
* @param cssTokenName - Name of the CSS custom property (without the `--` prefix)
|
|
385
390
|
* @returns A zero-argument function that updates the CSS property to the current inner height
|
|
386
391
|
*
|
|
387
392
|
* @example
|
|
@@ -390,8 +395,8 @@ function _ts_generator(thisArg, body) {
|
|
|
390
395
|
* refresh(); // sets --vh100 to e.g. "812px"
|
|
391
396
|
* ```
|
|
392
397
|
*/ function refreshVh100Function() {
|
|
393
|
-
var
|
|
394
|
-
var cssProperty = "--".concat(
|
|
398
|
+
var cssTokenName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_VH100_VARIABLE_NAME;
|
|
399
|
+
var cssProperty = "--".concat(cssTokenName);
|
|
395
400
|
return function() {
|
|
396
401
|
var doc = document.documentElement;
|
|
397
402
|
doc.style.setProperty(cssProperty, "".concat(window.innerHeight, "px"));
|
|
@@ -399,8 +404,10 @@ function _ts_generator(thisArg, body) {
|
|
|
399
404
|
}
|
|
400
405
|
/**
|
|
401
406
|
* Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
|
|
402
|
-
|
|
403
|
-
|
|
407
|
+
*
|
|
408
|
+
* @param cssTokenName - Name of the CSS custom property to update; defaults to `vh100`
|
|
409
|
+
*/ function watchWindowAndUpdateVh100StyleProperty(cssTokenName) {
|
|
410
|
+
var refreshPropertyValue = refreshVh100Function(cssTokenName);
|
|
404
411
|
window.addEventListener('resize', refreshPropertyValue);
|
|
405
412
|
window.addEventListener('orientationchange', refreshPropertyValue);
|
|
406
413
|
refreshPropertyValue();
|
|
@@ -409,6 +416,8 @@ function _ts_generator(thisArg, body) {
|
|
|
409
416
|
// MARK: Window Location Utiltiies
|
|
410
417
|
/**
|
|
411
418
|
* Whether or not the current host is localhost. Useful for determining local dev environments.
|
|
419
|
+
*
|
|
420
|
+
* @returns True if the current hostname is `localhost`
|
|
412
421
|
*/ function isLocalhost() {
|
|
413
422
|
return window.location.hostname === 'localhost';
|
|
414
423
|
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dereekb/browser",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.5.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@dereekb/util": "13.
|
|
6
|
-
"@dereekb/rxjs": "13.
|
|
5
|
+
"@dereekb/util": "13.5.0",
|
|
6
|
+
"@dereekb/rxjs": "13.5.0",
|
|
7
7
|
"rxjs": "^7.8.0"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {},
|
package/src/lib/service.d.ts
CHANGED
|
@@ -48,6 +48,8 @@ export declare abstract class AbstractAsyncWindowLoadedService<T> implements Des
|
|
|
48
48
|
* Returns a promise that resolves with the loaded service instance.
|
|
49
49
|
*
|
|
50
50
|
* Triggers loading if not already started.
|
|
51
|
+
*
|
|
52
|
+
* @returns Promise that resolves with the loaded service instance
|
|
51
53
|
*/
|
|
52
54
|
getService(): Promise<T>;
|
|
53
55
|
/**
|
|
@@ -71,6 +73,8 @@ export declare abstract class AbstractAsyncWindowLoadedService<T> implements Des
|
|
|
71
73
|
/**
|
|
72
74
|
* Hook called before completing the service load. Subclasses can override to perform
|
|
73
75
|
* additional async setup before the service reference is read from `window`.
|
|
76
|
+
*
|
|
77
|
+
* @returns Promise that resolves when pre-load setup is complete
|
|
74
78
|
*/
|
|
75
79
|
protected _prepareCompleteLoadingService(): Promise<unknown>;
|
|
76
80
|
/**
|
package/src/lib/type.d.ts
CHANGED
|
@@ -23,6 +23,8 @@ export interface BrowserObjectURLRef extends Destroyable {
|
|
|
23
23
|
createBrowserUrl(input?: Maybe<Blob | MediaSource>): Maybe<BrowserObjectURL>;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* Creates a new BrowserObjectURLRef.
|
|
27
|
+
*
|
|
28
|
+
* @returns A new BrowserObjectURLRef instance that manages browser object URL lifecycle
|
|
27
29
|
*/
|
|
28
30
|
export declare function browserObjectUrlRef(): BrowserObjectURLRef;
|
package/src/lib/vh100.d.ts
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
+
import { type CssTokenName } from '@dereekb/util';
|
|
1
2
|
/**
|
|
2
3
|
* Default CSS custom property name used to store the viewport height value.
|
|
3
4
|
*/
|
|
4
|
-
export declare const DEFAULT_VH100_VARIABLE_NAME
|
|
5
|
+
export declare const DEFAULT_VH100_VARIABLE_NAME: CssTokenName;
|
|
5
6
|
/**
|
|
6
7
|
* Creates a function that sets a CSS custom property on `document.documentElement` to the current `window.innerHeight` in pixels.
|
|
7
8
|
*
|
|
8
9
|
* This is a workaround for the iOS Safari 100vh bug where `100vh` includes the browser chrome,
|
|
9
10
|
* causing layout overflow. The returned function can be called to refresh the property value.
|
|
10
11
|
*
|
|
11
|
-
* @param
|
|
12
|
+
* @param cssTokenName - Name of the CSS custom property (without the `--` prefix)
|
|
12
13
|
* @returns A zero-argument function that updates the CSS property to the current inner height
|
|
13
14
|
*
|
|
14
15
|
* @example
|
|
@@ -17,8 +18,10 @@ export declare const DEFAULT_VH100_VARIABLE_NAME = "vh100";
|
|
|
17
18
|
* refresh(); // sets --vh100 to e.g. "812px"
|
|
18
19
|
* ```
|
|
19
20
|
*/
|
|
20
|
-
export declare function refreshVh100Function(
|
|
21
|
+
export declare function refreshVh100Function(cssTokenName?: CssTokenName): () => void;
|
|
21
22
|
/**
|
|
22
23
|
* Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
|
|
24
|
+
*
|
|
25
|
+
* @param cssTokenName - Name of the CSS custom property to update; defaults to `vh100`
|
|
23
26
|
*/
|
|
24
|
-
export declare function watchWindowAndUpdateVh100StyleProperty(
|
|
27
|
+
export declare function watchWindowAndUpdateVh100StyleProperty(cssTokenName?: CssTokenName): void;
|