@meshconnect/web-link-sdk 2.0.1 → 2.0.4
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/Link.d.ts +2 -2
- package/Link.js +161 -145
- package/README.md +120 -127
- package/cjs/Link.js +165 -149
- package/cjs/index.js +21 -21
- package/cjs/utils/event-types.js +31 -31
- package/cjs/utils/popup.js +39 -39
- package/cjs/utils/sdk-specs.js +8 -0
- package/cjs/utils/style.js +18 -18
- package/cjs/utils/types.js +2 -2
- package/cjs/utils/version.js +4 -0
- package/index.d.ts +3 -3
- package/index.js +3 -3
- package/package.json +6 -6
- package/utils/event-types.d.ts +152 -152
- package/utils/event-types.js +27 -27
- package/utils/popup.d.ts +3 -3
- package/utils/popup.js +34 -34
- package/utils/sdk-specs.d.ts +4 -0
- package/utils/sdk-specs.js +5 -0
- package/utils/style.d.ts +3 -3
- package/utils/style.js +13 -13
- package/utils/types.d.ts +103 -108
- package/utils/types.js +1 -1
- package/utils/version.d.ts +1 -0
- package/utils/version.js +1 -0
package/utils/event-types.d.ts
CHANGED
|
@@ -1,152 +1,152 @@
|
|
|
1
|
-
import { LinkPayload, TransferFinishedPayload } from './types';
|
|
2
|
-
export type LinkEventType = IntegrationConnected | IntegrationConnectionError | TransferCompleted | IntegrationSelected | CredentialsEntered | TransferStarted | TransferPreviewed | TransferPreviewError | TransferExecutionError | PageLoaded | IntegrationMfaRequired | IntegrationMfaEntered | IntegrationOAuthStarted | IntegrationAccountSelectionRequired | TransferAssetSelected | TransferNetworkSelected | TransferAmountEntered | TransferMfaRequired | TransferMfaEntered | TransferKycRequired | DoneEvent | CloseEvent;
|
|
3
|
-
declare const LINK_EVENT_TYPE_KEYS: readonly ["integrationConnected", "integrationConnectionError", "integrationMfaRequired", "integrationMfaEntered", "integrationOAuthStarted", "integrationAccountSelectionRequired", "transferCompleted", "integrationSelected", "credentialsEntered", "transferStarted", "transferPreviewed", "transferPreviewError", "transferExecutionError", "pageLoaded", "transferAssetSelected", "transferNetworkSelected", "transferAmountEntered", "transferMfaRequired", "transferMfaEntered", "transferKycRequired", "done", "close"];
|
|
4
|
-
export type LinkEventTypeKeys = (typeof LINK_EVENT_TYPE_KEYS)[number];
|
|
5
|
-
export declare function isLinkEventTypeKey(key: string): key is LinkEventTypeKeys;
|
|
6
|
-
interface LinkEventBase {
|
|
7
|
-
type: LinkEventTypeKeys;
|
|
8
|
-
}
|
|
9
|
-
export interface PageLoaded {
|
|
10
|
-
type: 'pageLoaded';
|
|
11
|
-
}
|
|
12
|
-
export interface IntegrationConnected extends LinkEventBase {
|
|
13
|
-
type: 'integrationConnected';
|
|
14
|
-
payload: LinkPayload;
|
|
15
|
-
}
|
|
16
|
-
export interface IntegrationConnectionError extends LinkEventBase {
|
|
17
|
-
type: 'integrationConnectionError';
|
|
18
|
-
payload: {
|
|
19
|
-
errorMessage: string;
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
export interface TransferCompleted extends LinkEventBase {
|
|
23
|
-
type: 'transferCompleted';
|
|
24
|
-
payload: TransferFinishedPayload;
|
|
25
|
-
}
|
|
26
|
-
export interface IntegrationSelected extends LinkEventBase {
|
|
27
|
-
type: 'integrationSelected';
|
|
28
|
-
payload: {
|
|
29
|
-
integrationType: string;
|
|
30
|
-
integrationName: string;
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
export interface CredentialsEntered extends LinkEventBase {
|
|
34
|
-
type: 'credentialsEntered';
|
|
35
|
-
}
|
|
36
|
-
export interface TransferStarted extends LinkEventBase {
|
|
37
|
-
type: 'transferStarted';
|
|
38
|
-
}
|
|
39
|
-
export interface TransferPreviewed extends LinkEventBase {
|
|
40
|
-
type: 'transferPreviewed';
|
|
41
|
-
payload: {
|
|
42
|
-
amount: number;
|
|
43
|
-
symbol: string;
|
|
44
|
-
toAddress: string;
|
|
45
|
-
networkId: string;
|
|
46
|
-
previewId: string;
|
|
47
|
-
networkName?: string;
|
|
48
|
-
amountInFiat?: number;
|
|
49
|
-
estimatedNetworkGasFee?: {
|
|
50
|
-
fee?: number;
|
|
51
|
-
feeCurrency?: string;
|
|
52
|
-
feeInFiat?: number;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
export interface TransferPreviewError extends LinkEventBase {
|
|
57
|
-
type: 'transferPreviewError';
|
|
58
|
-
payload: {
|
|
59
|
-
errorMessage: string;
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
export interface TransferExecutionError extends LinkEventBase {
|
|
63
|
-
type: 'transferExecutionError';
|
|
64
|
-
payload: {
|
|
65
|
-
errorMessage: string;
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
export interface IntegrationMfaRequired extends LinkEventBase {
|
|
69
|
-
type: 'integrationMfaRequired';
|
|
70
|
-
}
|
|
71
|
-
export interface IntegrationMfaEntered extends LinkEventBase {
|
|
72
|
-
type: 'integrationMfaEntered';
|
|
73
|
-
}
|
|
74
|
-
export interface IntegrationOAuthStarted extends LinkEventBase {
|
|
75
|
-
type: 'integrationOAuthStarted';
|
|
76
|
-
}
|
|
77
|
-
export interface IntegrationAccountSelectionRequired extends LinkEventBase {
|
|
78
|
-
type: 'integrationAccountSelectionRequired';
|
|
79
|
-
}
|
|
80
|
-
export interface TransferAssetSelected extends LinkEventBase {
|
|
81
|
-
type: 'transferAssetSelected';
|
|
82
|
-
payload: {
|
|
83
|
-
symbol: string;
|
|
84
|
-
};
|
|
85
|
-
}
|
|
86
|
-
export interface TransferNetworkSelected extends LinkEventBase {
|
|
87
|
-
type: 'transferNetworkSelected';
|
|
88
|
-
payload: {
|
|
89
|
-
id: string;
|
|
90
|
-
name: string;
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
export interface TransferAmountEntered extends LinkEventBase {
|
|
94
|
-
type: 'transferAmountEntered';
|
|
95
|
-
}
|
|
96
|
-
export interface TransferMfaRequired extends LinkEventBase {
|
|
97
|
-
type: 'transferMfaRequired';
|
|
98
|
-
}
|
|
99
|
-
export interface TransferMfaEntered extends LinkEventBase {
|
|
100
|
-
type: 'transferMfaEntered';
|
|
101
|
-
}
|
|
102
|
-
export interface TransferKycRequired extends LinkEventBase {
|
|
103
|
-
type: 'transferKycRequired';
|
|
104
|
-
}
|
|
105
|
-
export interface DoneEvent extends LinkEventBase {
|
|
106
|
-
type: 'done';
|
|
107
|
-
payload: SessionSymmary;
|
|
108
|
-
}
|
|
109
|
-
export interface CloseEvent extends LinkEventBase {
|
|
110
|
-
type: 'close';
|
|
111
|
-
payload: SessionSymmary;
|
|
112
|
-
}
|
|
113
|
-
export interface SessionSymmary {
|
|
114
|
-
/**
|
|
115
|
-
* Current page of application. Possible values:
|
|
116
|
-
* `startPage`
|
|
117
|
-
* `integrationsCatalogPage`
|
|
118
|
-
* `integrationLoginPage`
|
|
119
|
-
* `integrationMfaPage`
|
|
120
|
-
* `integrationAccountSelectPage`
|
|
121
|
-
* `integrationConnectedPage`
|
|
122
|
-
* `errorPage`
|
|
123
|
-
* `transferKycPage`
|
|
124
|
-
* `transferHoldingSelectionPage`
|
|
125
|
-
* `transferNetworkSelectionPage`
|
|
126
|
-
* `transferAmountSelectionPage`
|
|
127
|
-
* `transferPreviewPage`
|
|
128
|
-
* `transferMfaPage`
|
|
129
|
-
* `transferFundingPage`
|
|
130
|
-
* `transferExecutedPage`
|
|
131
|
-
* `termsAndConditionPage`
|
|
132
|
-
*
|
|
133
|
-
* This list may change in future.
|
|
134
|
-
*/
|
|
135
|
-
page: string;
|
|
136
|
-
/** Selected integration */
|
|
137
|
-
selectedIntegration?: {
|
|
138
|
-
id?: string;
|
|
139
|
-
name?: string;
|
|
140
|
-
};
|
|
141
|
-
/** Transfer information */
|
|
142
|
-
transfer?: {
|
|
143
|
-
previewId?: string;
|
|
144
|
-
symbol?: string;
|
|
145
|
-
amount?: number;
|
|
146
|
-
amountInFiat?: number;
|
|
147
|
-
transactionId?: string;
|
|
148
|
-
networkId?: string;
|
|
149
|
-
};
|
|
150
|
-
errorMessage?: string;
|
|
151
|
-
}
|
|
152
|
-
export {};
|
|
1
|
+
import { LinkPayload, TransferFinishedPayload } from './types';
|
|
2
|
+
export type LinkEventType = IntegrationConnected | IntegrationConnectionError | TransferCompleted | IntegrationSelected | CredentialsEntered | TransferStarted | TransferPreviewed | TransferPreviewError | TransferExecutionError | PageLoaded | IntegrationMfaRequired | IntegrationMfaEntered | IntegrationOAuthStarted | IntegrationAccountSelectionRequired | TransferAssetSelected | TransferNetworkSelected | TransferAmountEntered | TransferMfaRequired | TransferMfaEntered | TransferKycRequired | DoneEvent | CloseEvent;
|
|
3
|
+
declare const LINK_EVENT_TYPE_KEYS: readonly ["integrationConnected", "integrationConnectionError", "integrationMfaRequired", "integrationMfaEntered", "integrationOAuthStarted", "integrationAccountSelectionRequired", "transferCompleted", "integrationSelected", "credentialsEntered", "transferStarted", "transferPreviewed", "transferPreviewError", "transferExecutionError", "pageLoaded", "transferAssetSelected", "transferNetworkSelected", "transferAmountEntered", "transferMfaRequired", "transferMfaEntered", "transferKycRequired", "done", "close"];
|
|
4
|
+
export type LinkEventTypeKeys = (typeof LINK_EVENT_TYPE_KEYS)[number];
|
|
5
|
+
export declare function isLinkEventTypeKey(key: string): key is LinkEventTypeKeys;
|
|
6
|
+
interface LinkEventBase {
|
|
7
|
+
type: LinkEventTypeKeys;
|
|
8
|
+
}
|
|
9
|
+
export interface PageLoaded {
|
|
10
|
+
type: 'pageLoaded';
|
|
11
|
+
}
|
|
12
|
+
export interface IntegrationConnected extends LinkEventBase {
|
|
13
|
+
type: 'integrationConnected';
|
|
14
|
+
payload: LinkPayload;
|
|
15
|
+
}
|
|
16
|
+
export interface IntegrationConnectionError extends LinkEventBase {
|
|
17
|
+
type: 'integrationConnectionError';
|
|
18
|
+
payload: {
|
|
19
|
+
errorMessage: string;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
export interface TransferCompleted extends LinkEventBase {
|
|
23
|
+
type: 'transferCompleted';
|
|
24
|
+
payload: TransferFinishedPayload;
|
|
25
|
+
}
|
|
26
|
+
export interface IntegrationSelected extends LinkEventBase {
|
|
27
|
+
type: 'integrationSelected';
|
|
28
|
+
payload: {
|
|
29
|
+
integrationType: string;
|
|
30
|
+
integrationName: string;
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
export interface CredentialsEntered extends LinkEventBase {
|
|
34
|
+
type: 'credentialsEntered';
|
|
35
|
+
}
|
|
36
|
+
export interface TransferStarted extends LinkEventBase {
|
|
37
|
+
type: 'transferStarted';
|
|
38
|
+
}
|
|
39
|
+
export interface TransferPreviewed extends LinkEventBase {
|
|
40
|
+
type: 'transferPreviewed';
|
|
41
|
+
payload: {
|
|
42
|
+
amount: number;
|
|
43
|
+
symbol: string;
|
|
44
|
+
toAddress: string;
|
|
45
|
+
networkId: string;
|
|
46
|
+
previewId: string;
|
|
47
|
+
networkName?: string;
|
|
48
|
+
amountInFiat?: number;
|
|
49
|
+
estimatedNetworkGasFee?: {
|
|
50
|
+
fee?: number;
|
|
51
|
+
feeCurrency?: string;
|
|
52
|
+
feeInFiat?: number;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
export interface TransferPreviewError extends LinkEventBase {
|
|
57
|
+
type: 'transferPreviewError';
|
|
58
|
+
payload: {
|
|
59
|
+
errorMessage: string;
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
export interface TransferExecutionError extends LinkEventBase {
|
|
63
|
+
type: 'transferExecutionError';
|
|
64
|
+
payload: {
|
|
65
|
+
errorMessage: string;
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
export interface IntegrationMfaRequired extends LinkEventBase {
|
|
69
|
+
type: 'integrationMfaRequired';
|
|
70
|
+
}
|
|
71
|
+
export interface IntegrationMfaEntered extends LinkEventBase {
|
|
72
|
+
type: 'integrationMfaEntered';
|
|
73
|
+
}
|
|
74
|
+
export interface IntegrationOAuthStarted extends LinkEventBase {
|
|
75
|
+
type: 'integrationOAuthStarted';
|
|
76
|
+
}
|
|
77
|
+
export interface IntegrationAccountSelectionRequired extends LinkEventBase {
|
|
78
|
+
type: 'integrationAccountSelectionRequired';
|
|
79
|
+
}
|
|
80
|
+
export interface TransferAssetSelected extends LinkEventBase {
|
|
81
|
+
type: 'transferAssetSelected';
|
|
82
|
+
payload: {
|
|
83
|
+
symbol: string;
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
export interface TransferNetworkSelected extends LinkEventBase {
|
|
87
|
+
type: 'transferNetworkSelected';
|
|
88
|
+
payload: {
|
|
89
|
+
id: string;
|
|
90
|
+
name: string;
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
export interface TransferAmountEntered extends LinkEventBase {
|
|
94
|
+
type: 'transferAmountEntered';
|
|
95
|
+
}
|
|
96
|
+
export interface TransferMfaRequired extends LinkEventBase {
|
|
97
|
+
type: 'transferMfaRequired';
|
|
98
|
+
}
|
|
99
|
+
export interface TransferMfaEntered extends LinkEventBase {
|
|
100
|
+
type: 'transferMfaEntered';
|
|
101
|
+
}
|
|
102
|
+
export interface TransferKycRequired extends LinkEventBase {
|
|
103
|
+
type: 'transferKycRequired';
|
|
104
|
+
}
|
|
105
|
+
export interface DoneEvent extends LinkEventBase {
|
|
106
|
+
type: 'done';
|
|
107
|
+
payload: SessionSymmary;
|
|
108
|
+
}
|
|
109
|
+
export interface CloseEvent extends LinkEventBase {
|
|
110
|
+
type: 'close';
|
|
111
|
+
payload: SessionSymmary;
|
|
112
|
+
}
|
|
113
|
+
export interface SessionSymmary {
|
|
114
|
+
/**
|
|
115
|
+
* Current page of application. Possible values:
|
|
116
|
+
* `startPage`
|
|
117
|
+
* `integrationsCatalogPage`
|
|
118
|
+
* `integrationLoginPage`
|
|
119
|
+
* `integrationMfaPage`
|
|
120
|
+
* `integrationAccountSelectPage`
|
|
121
|
+
* `integrationConnectedPage`
|
|
122
|
+
* `errorPage`
|
|
123
|
+
* `transferKycPage`
|
|
124
|
+
* `transferHoldingSelectionPage`
|
|
125
|
+
* `transferNetworkSelectionPage`
|
|
126
|
+
* `transferAmountSelectionPage`
|
|
127
|
+
* `transferPreviewPage`
|
|
128
|
+
* `transferMfaPage`
|
|
129
|
+
* `transferFundingPage`
|
|
130
|
+
* `transferExecutedPage`
|
|
131
|
+
* `termsAndConditionPage`
|
|
132
|
+
*
|
|
133
|
+
* This list may change in future.
|
|
134
|
+
*/
|
|
135
|
+
page: string;
|
|
136
|
+
/** Selected integration */
|
|
137
|
+
selectedIntegration?: {
|
|
138
|
+
id?: string;
|
|
139
|
+
name?: string;
|
|
140
|
+
};
|
|
141
|
+
/** Transfer information */
|
|
142
|
+
transfer?: {
|
|
143
|
+
previewId?: string;
|
|
144
|
+
symbol?: string;
|
|
145
|
+
amount?: number;
|
|
146
|
+
amountInFiat?: number;
|
|
147
|
+
transactionId?: string;
|
|
148
|
+
networkId?: string;
|
|
149
|
+
};
|
|
150
|
+
errorMessage?: string;
|
|
151
|
+
}
|
|
152
|
+
export {};
|
package/utils/event-types.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
var LINK_EVENT_TYPE_KEYS = [
|
|
2
|
-
'integrationConnected',
|
|
3
|
-
'integrationConnectionError',
|
|
4
|
-
'integrationMfaRequired',
|
|
5
|
-
'integrationMfaEntered',
|
|
6
|
-
'integrationOAuthStarted',
|
|
7
|
-
'integrationAccountSelectionRequired',
|
|
8
|
-
'transferCompleted',
|
|
9
|
-
'integrationSelected',
|
|
10
|
-
'credentialsEntered',
|
|
11
|
-
'transferStarted',
|
|
12
|
-
'transferPreviewed',
|
|
13
|
-
'transferPreviewError',
|
|
14
|
-
'transferExecutionError',
|
|
15
|
-
'pageLoaded',
|
|
16
|
-
'transferAssetSelected',
|
|
17
|
-
'transferNetworkSelected',
|
|
18
|
-
'transferAmountEntered',
|
|
19
|
-
'transferMfaRequired',
|
|
20
|
-
'transferMfaEntered',
|
|
21
|
-
'transferKycRequired',
|
|
22
|
-
'done',
|
|
23
|
-
'close'
|
|
24
|
-
];
|
|
25
|
-
export function isLinkEventTypeKey(key) {
|
|
26
|
-
return LINK_EVENT_TYPE_KEYS.includes(key);
|
|
27
|
-
}
|
|
1
|
+
var LINK_EVENT_TYPE_KEYS = [
|
|
2
|
+
'integrationConnected',
|
|
3
|
+
'integrationConnectionError',
|
|
4
|
+
'integrationMfaRequired',
|
|
5
|
+
'integrationMfaEntered',
|
|
6
|
+
'integrationOAuthStarted',
|
|
7
|
+
'integrationAccountSelectionRequired',
|
|
8
|
+
'transferCompleted',
|
|
9
|
+
'integrationSelected',
|
|
10
|
+
'credentialsEntered',
|
|
11
|
+
'transferStarted',
|
|
12
|
+
'transferPreviewed',
|
|
13
|
+
'transferPreviewError',
|
|
14
|
+
'transferExecutionError',
|
|
15
|
+
'pageLoaded',
|
|
16
|
+
'transferAssetSelected',
|
|
17
|
+
'transferNetworkSelected',
|
|
18
|
+
'transferAmountEntered',
|
|
19
|
+
'transferMfaRequired',
|
|
20
|
+
'transferMfaEntered',
|
|
21
|
+
'transferKycRequired',
|
|
22
|
+
'done',
|
|
23
|
+
'close'
|
|
24
|
+
];
|
|
25
|
+
export function isLinkEventTypeKey(key) {
|
|
26
|
+
return LINK_EVENT_TYPE_KEYS.includes(key);
|
|
27
|
+
}
|
package/utils/popup.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export declare const iframeId = "mesh-link-popup__iframe";
|
|
2
|
-
export declare function removePopup(): void;
|
|
3
|
-
export declare function addPopup(iframeLink: string): void;
|
|
1
|
+
export declare const iframeId = "mesh-link-popup__iframe";
|
|
2
|
+
export declare function removePopup(): void;
|
|
3
|
+
export declare function addPopup(iframeLink: string): void;
|
package/utils/popup.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { getLinkStyle, getNumber } from './style';
|
|
2
|
-
var popupId = 'mesh-link-popup';
|
|
3
|
-
var backdropId = 'mesh-link-popup__backdrop';
|
|
4
|
-
var popupContentId = 'mesh-link-popup__popup-content';
|
|
5
|
-
var stylesId = 'mesh-link-popup__styles';
|
|
6
|
-
export var iframeId = 'mesh-link-popup__iframe';
|
|
7
|
-
var getPopupHtml = function (link) { return "\n<div id=\"".concat(popupId, "\">\n <div id=\"").concat(backdropId, "\"></div>\n <div id=\"").concat(popupContentId, "\">\n <iframe id=\"").concat(iframeId, "\" src=\"").concat(link, "\" allow=\"clipboard-read *; clipboard-write *\" />\n </div>\n</div>\n"); };
|
|
8
|
-
var getStyles = function (style) { return "\n<style id=\"".concat(stylesId, "\">\n body {\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n overflow: hidden;\n }\n\n #").concat(popupId, " {\n all: unset;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n }\n\n #").concat(backdropId, " {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n z-index: 10000;\n background: black;\n opacity: ").concat(getNumber(0.6, style === null || style === void 0 ? void 0 : style.io), ";\n }\n\n #").concat(popupContentId, " {\n position: absolute;\n height: 80%;\n max-height: 710px;\n min-height: 685px;\n margin: auto;\n z-index: 10001;\n width: 30%;\n max-width: 430px;\n min-width: 380px;\n display: flex;\n flex-direction: column;\n border-radius: ").concat(getNumber(24, style === null || style === void 0 ? void 0 : style.ir), "px;\n background: white;\n flex-grow: 1;\n }\n\n #").concat(popupContentId, " iframe {\n border: none;\n width: 100%;\n flex-grow: 1;\n border-radius: ").concat(getNumber(24, style === null || style === void 0 ? void 0 : style.ir), "px;\n }\n\n @media only screen and (max-width: 768px) {\n #").concat(popupContentId, " {\n height: 100vh;\n width: 100vw;\n max-width: 100%;\n min-width: 100%;\n max-height: 100%;\n min-height: 100%;\n border-radius: 0px;\n }\n\n #").concat(popupContentId, " iframe {\n border-radius: 0px;\n }\n }\n\n @media only screen and (max-height: 710px) {\n #").concat(popupContentId, " {\n max-height: 100%;\n min-height: 100%;\n }\n }\n</style>\n"); };
|
|
9
|
-
export function removePopup() {
|
|
10
|
-
var _a, _b;
|
|
11
|
-
var existingPopup = window.document.getElementById(popupId);
|
|
12
|
-
(_a = existingPopup === null || existingPopup === void 0 ? void 0 : existingPopup.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existingPopup);
|
|
13
|
-
var existingStyles = window.document.getElementById(stylesId);
|
|
14
|
-
(_b = existingStyles === null || existingStyles === void 0 ? void 0 : existingStyles.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(existingStyles);
|
|
15
|
-
}
|
|
16
|
-
export function addPopup(iframeLink) {
|
|
17
|
-
var style = getLinkStyle(iframeLink);
|
|
18
|
-
removePopup();
|
|
19
|
-
var popup = getPopupHtml(iframeLink);
|
|
20
|
-
var stylesElement = htmlToElement(getStyles(style));
|
|
21
|
-
if (stylesElement) {
|
|
22
|
-
window.document.head.appendChild(stylesElement);
|
|
23
|
-
}
|
|
24
|
-
var popupElement = htmlToElement(popup);
|
|
25
|
-
if (popupElement) {
|
|
26
|
-
window.document.body.appendChild(popupElement);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
function htmlToElement(html) {
|
|
30
|
-
var template = document.createElement('template');
|
|
31
|
-
html = html.trim();
|
|
32
|
-
template.innerHTML = html;
|
|
33
|
-
return template.content.firstChild;
|
|
34
|
-
}
|
|
1
|
+
import { getLinkStyle, getNumber } from './style';
|
|
2
|
+
var popupId = 'mesh-link-popup';
|
|
3
|
+
var backdropId = 'mesh-link-popup__backdrop';
|
|
4
|
+
var popupContentId = 'mesh-link-popup__popup-content';
|
|
5
|
+
var stylesId = 'mesh-link-popup__styles';
|
|
6
|
+
export var iframeId = 'mesh-link-popup__iframe';
|
|
7
|
+
var getPopupHtml = function (link) { return "\n<div id=\"".concat(popupId, "\">\n <div id=\"").concat(backdropId, "\"></div>\n <div id=\"").concat(popupContentId, "\">\n <iframe id=\"").concat(iframeId, "\" src=\"").concat(link, "\" allow=\"clipboard-read *; clipboard-write *\" />\n </div>\n</div>\n"); };
|
|
8
|
+
var getStyles = function (style) { return "\n<style id=\"".concat(stylesId, "\">\n body {\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n overflow: hidden;\n }\n\n #").concat(popupId, " {\n all: unset;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n }\n\n #").concat(backdropId, " {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n z-index: 10000;\n background: black;\n opacity: ").concat(getNumber(0.6, style === null || style === void 0 ? void 0 : style.io), ";\n }\n\n #").concat(popupContentId, " {\n position: absolute;\n height: 80%;\n max-height: 710px;\n min-height: 685px;\n margin: auto;\n z-index: 10001;\n width: 30%;\n max-width: 430px;\n min-width: 380px;\n display: flex;\n flex-direction: column;\n border-radius: ").concat(getNumber(24, style === null || style === void 0 ? void 0 : style.ir), "px;\n background: white;\n flex-grow: 1;\n }\n\n #").concat(popupContentId, " iframe {\n border: none;\n width: 100%;\n flex-grow: 1;\n border-radius: ").concat(getNumber(24, style === null || style === void 0 ? void 0 : style.ir), "px;\n }\n\n @media only screen and (max-width: 768px) {\n #").concat(popupContentId, " {\n height: 100vh;\n width: 100vw;\n max-width: 100%;\n min-width: 100%;\n max-height: 100%;\n min-height: 100%;\n border-radius: 0px;\n }\n\n #").concat(popupContentId, " iframe {\n border-radius: 0px;\n }\n }\n\n @media only screen and (max-height: 710px) {\n #").concat(popupContentId, " {\n max-height: 100%;\n min-height: 100%;\n }\n }\n</style>\n"); };
|
|
9
|
+
export function removePopup() {
|
|
10
|
+
var _a, _b;
|
|
11
|
+
var existingPopup = window.document.getElementById(popupId);
|
|
12
|
+
(_a = existingPopup === null || existingPopup === void 0 ? void 0 : existingPopup.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existingPopup);
|
|
13
|
+
var existingStyles = window.document.getElementById(stylesId);
|
|
14
|
+
(_b = existingStyles === null || existingStyles === void 0 ? void 0 : existingStyles.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(existingStyles);
|
|
15
|
+
}
|
|
16
|
+
export function addPopup(iframeLink) {
|
|
17
|
+
var style = getLinkStyle(iframeLink);
|
|
18
|
+
removePopup();
|
|
19
|
+
var popup = getPopupHtml(iframeLink);
|
|
20
|
+
var stylesElement = htmlToElement(getStyles(style));
|
|
21
|
+
if (stylesElement) {
|
|
22
|
+
window.document.head.appendChild(stylesElement);
|
|
23
|
+
}
|
|
24
|
+
var popupElement = htmlToElement(popup);
|
|
25
|
+
if (popupElement) {
|
|
26
|
+
window.document.body.appendChild(popupElement);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function htmlToElement(html) {
|
|
30
|
+
var template = document.createElement('template');
|
|
31
|
+
html = html.trim();
|
|
32
|
+
template.innerHTML = html;
|
|
33
|
+
return template.content.firstChild;
|
|
34
|
+
}
|
package/utils/style.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { LinkStyle } from './types';
|
|
2
|
-
export declare function getLinkStyle(url: string): LinkStyle | undefined;
|
|
3
|
-
export declare function getNumber(def: number, value?: number): number;
|
|
1
|
+
import { LinkStyle } from './types';
|
|
2
|
+
export declare function getLinkStyle(url: string): LinkStyle | undefined;
|
|
3
|
+
export declare function getNumber(def: number, value?: number): number;
|
package/utils/style.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export function getLinkStyle(url) {
|
|
2
|
-
try {
|
|
3
|
-
var params = new URLSearchParams(new URL(url).search);
|
|
4
|
-
var style = params.get('link_style');
|
|
5
|
-
return style && JSON.parse(window.atob(style));
|
|
6
|
-
}
|
|
7
|
-
catch (e) {
|
|
8
|
-
return undefined;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
export function getNumber(def, value) {
|
|
12
|
-
return value !== undefined ? value : def;
|
|
13
|
-
}
|
|
1
|
+
export function getLinkStyle(url) {
|
|
2
|
+
try {
|
|
3
|
+
var params = new URLSearchParams(new URL(url).search);
|
|
4
|
+
var style = params.get('link_style');
|
|
5
|
+
return style && JSON.parse(window.atob(style));
|
|
6
|
+
}
|
|
7
|
+
catch (e) {
|
|
8
|
+
return undefined;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
export function getNumber(def, value) {
|
|
12
|
+
return value !== undefined ? value : def;
|
|
13
|
+
}
|