@esri/solutions-components 0.10.35 → 0.10.37
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/dist/cjs/basemap-gallery_7.cjs.entry.js +1 -0
- package/dist/cjs/calcite-action-pad_2.cjs.entry.js +2 -2
- package/dist/cjs/calcite-alert_5.cjs.entry.js +3 -3
- package/dist/cjs/calcite-block_5.cjs.entry.js +2 -2
- package/dist/cjs/card-manager_3.cjs.entry.js +2 -2
- package/dist/cjs/{constants-0a4fc296.js → constants-51cf394f.js} +57 -1
- package/dist/cjs/crowdsource-manager.cjs.entry.js +25 -29
- package/dist/cjs/{downloadUtils-20637f89.js → downloadUtils-76bc7e30.js} +6 -5
- package/dist/cjs/feature-list.cjs.entry.js +3 -3
- package/dist/cjs/{helpers-415179ad.js → helpers-afcac967.js} +1 -1
- package/dist/cjs/{index.es-a242cb45.js → index.es-8336efed.js} +2 -2
- package/dist/cjs/instant-apps-app-guide.cjs.entry.js +26 -13
- package/dist/cjs/instant-apps-export.cjs.entry.js +1086 -59
- package/dist/cjs/instant-apps-interactive-legend-classic.cjs.entry.js +8 -4
- package/dist/cjs/instant-apps-interactive-legend-count_2.cjs.entry.js +10 -5
- package/dist/cjs/instant-apps-interactive-legend-group-legend-element-caption.cjs.entry.js +1 -1
- package/dist/cjs/instant-apps-interactive-legend-group-legend-element_5.cjs.entry.js +52 -12
- package/dist/cjs/instant-apps-interactive-legend.cjs.entry.js +9 -3
- package/dist/cjs/instant-apps-landing-page.cjs.entry.js +19 -13
- package/dist/cjs/instant-apps-language-switcher.cjs.entry.js +3 -2
- package/dist/cjs/instant-apps-language-translator.cjs.entry.js +1 -1
- package/dist/cjs/instant-apps-measurement.cjs.entry.js +2 -2
- package/dist/cjs/instant-apps-popover.cjs.entry.js +1 -1
- package/dist/cjs/instant-apps-scoreboard.cjs.entry.js +1 -1
- package/dist/cjs/instant-apps-sign-in.cjs.entry.js +13 -9
- package/dist/cjs/instant-apps-splash.cjs.entry.js +1 -1
- package/dist/cjs/instant-apps-time-filter.cjs.entry.js +11 -9
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/map-select-tools_3.cjs.entry.js +2 -2
- package/dist/cjs/{popupUtils-d477705b.js → popupUtils-bc762034.js} +1 -1
- package/dist/cjs/public-notification.cjs.entry.js +2 -2
- package/dist/cjs/solution-item-accordion.cjs.entry.js +7 -3
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +27 -29
- package/dist/collection/components/map-legend/map-legend.js +1 -0
- package/dist/collection/components/solution-item-accordion/solution-item-accordion.js +7 -3
- package/dist/collection/demos/solution-item-accordion.html +32 -0
- package/dist/collection/utils/downloadUtils.js +5 -3
- package/dist/collection/utils/downloadUtils.ts +6 -3
- package/dist/collection/utils/test/downloadUtils.spec.tsx +10 -12
- package/dist/components/crowdsource-manager.js +26 -29
- package/dist/components/downloadUtils.js +5 -4
- package/dist/components/instant-apps-app-guide.js +28 -14
- package/dist/components/instant-apps-export.js +1119 -76
- package/dist/components/instant-apps-interactive-legend-classic2.js +8 -4
- package/dist/components/instant-apps-interactive-legend-count2.js +6 -3
- package/dist/components/instant-apps-interactive-legend-layer-element-caption2.js +5 -2
- package/dist/components/instant-apps-interactive-legend-legend-element-caption2.js +52 -12
- package/dist/components/instant-apps-interactive-legend.js +13 -4
- package/dist/components/instant-apps-landing-page.js +19 -13
- package/dist/components/instant-apps-language-switcher.js +3 -1
- package/dist/components/instant-apps-language-translator2.js +57 -1
- package/dist/components/instant-apps-measurement-tool2.js +2 -2
- package/dist/components/instant-apps-measurement.js +2 -2
- package/dist/components/instant-apps-popover.js +1 -1
- package/dist/components/instant-apps-scoreboard.js +1 -1
- package/dist/components/instant-apps-sign-in2.js +14 -9
- package/dist/components/instant-apps-social-share2.js +2 -2
- package/dist/components/instant-apps-splash.js +1 -1
- package/dist/components/instant-apps-time-filter.js +11 -9
- package/dist/components/map-legend2.js +1 -0
- package/dist/components/solution-item-accordion.js +7 -3
- package/dist/components/store.js +1 -1
- package/dist/esm/basemap-gallery_7.entry.js +1 -0
- package/dist/esm/calcite-action-pad_2.entry.js +2 -2
- package/dist/esm/calcite-alert_5.entry.js +3 -3
- package/dist/esm/calcite-block_5.entry.js +2 -2
- package/dist/esm/card-manager_3.entry.js +2 -2
- package/dist/esm/{constants-045d6a1b.js → constants-886c7c2c.js} +57 -1
- package/dist/esm/crowdsource-manager.entry.js +25 -29
- package/dist/esm/{downloadUtils-e266e98d.js → downloadUtils-bc7a4ba1.js} +6 -5
- package/dist/esm/feature-list.entry.js +3 -3
- package/dist/esm/{helpers-f9bf9c0b.js → helpers-91087955.js} +1 -1
- package/dist/esm/{index.es-c5f258e2.js → index.es-0d189a34.js} +2 -2
- package/dist/esm/instant-apps-app-guide.entry.js +26 -13
- package/dist/esm/instant-apps-export.entry.js +1086 -59
- package/dist/esm/instant-apps-interactive-legend-classic.entry.js +8 -4
- package/dist/esm/instant-apps-interactive-legend-count_2.entry.js +10 -5
- package/dist/esm/instant-apps-interactive-legend-group-legend-element-caption.entry.js +1 -1
- package/dist/esm/instant-apps-interactive-legend-group-legend-element_5.entry.js +52 -12
- package/dist/esm/instant-apps-interactive-legend.entry.js +9 -3
- package/dist/esm/instant-apps-landing-page.entry.js +19 -13
- package/dist/esm/instant-apps-language-switcher.entry.js +3 -2
- package/dist/esm/instant-apps-language-translator.entry.js +1 -1
- package/dist/esm/instant-apps-measurement.entry.js +2 -2
- package/dist/esm/instant-apps-popover.entry.js +1 -1
- package/dist/esm/instant-apps-scoreboard.entry.js +1 -1
- package/dist/esm/instant-apps-sign-in.entry.js +13 -9
- package/dist/esm/instant-apps-splash.entry.js +1 -1
- package/dist/esm/instant-apps-time-filter.entry.js +11 -9
- package/dist/esm/loader.js +1 -1
- package/dist/esm/map-select-tools_3.entry.js +2 -2
- package/dist/esm/{popupUtils-4570096e.js → popupUtils-03dc398a.js} +1 -1
- package/dist/esm/public-notification.entry.js +2 -2
- package/dist/esm/solution-item-accordion.entry.js +7 -3
- package/dist/esm/solutions-components.js +1 -1
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-app-guide/instant-apps-app-guide.css +0 -5
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-export/instant-apps-export.css +4 -0
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-classic/instant-apps-interactive-legend-classic.css +14 -0
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-count/instant-apps-interactive-legend-count.css +9 -0
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-layer-element-caption/instant-apps-interactive-legend-layer-element-caption.css +5 -3
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-legend-element-caption/instant-apps-interactive-legend-legend-element-caption.css +29 -0
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-landing-page/instant-apps-landing-page.css +8 -0
- package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-sign-in/instant-apps-sign-in.css +22 -0
- package/dist/solutions-components/demos/solution-item-accordion.html +32 -0
- package/dist/solutions-components/{p-cb3199f9.entry.js → p-04ab956c.entry.js} +1 -1
- package/dist/solutions-components/p-1e14b3d0.entry.js +6 -0
- package/dist/solutions-components/p-2542d5c9.entry.js +6 -0
- package/dist/solutions-components/{p-70ecc979.entry.js → p-374ddead.entry.js} +1 -1
- package/dist/solutions-components/{p-146acd9a.entry.js → p-3fc18283.entry.js} +1 -1
- package/dist/solutions-components/p-43699470.entry.js +6 -0
- package/dist/solutions-components/p-5585dcd3.entry.js +6 -0
- package/dist/solutions-components/{p-3a513c67.entry.js → p-5b3c0418.entry.js} +1 -1
- package/dist/solutions-components/{p-f7e7b830.entry.js → p-6438d1ea.entry.js} +1 -1
- package/dist/solutions-components/{p-a568af9f.js → p-6f606cdb.js} +1 -1
- package/dist/solutions-components/p-720de4db.entry.js +6 -0
- package/dist/solutions-components/p-750b3277.entry.js +6 -0
- package/dist/solutions-components/p-8779ee41.entry.js +6 -0
- package/dist/solutions-components/p-90fc786f.entry.js +6 -0
- package/dist/solutions-components/p-97fe6ec5.entry.js +6 -0
- package/dist/solutions-components/{p-43165ebd.entry.js → p-9c170b30.entry.js} +1 -1
- package/dist/solutions-components/{p-b4c49411.entry.js → p-9c4fef09.entry.js} +1 -1
- package/dist/solutions-components/p-a5b751e2.entry.js +6 -0
- package/dist/solutions-components/{p-89046451.entry.js → p-aac0c89c.entry.js} +1 -1
- package/dist/solutions-components/p-af573e0d.js +6 -0
- package/dist/solutions-components/p-bb8b1ee2.entry.js +6 -0
- package/dist/solutions-components/{p-b79f296d.entry.js → p-c48be45f.entry.js} +2 -2
- package/dist/solutions-components/p-ca3cbd29.entry.js +6 -0
- package/dist/solutions-components/p-cd482a33.js +21 -0
- package/dist/solutions-components/p-ceb1030b.js +6 -0
- package/dist/solutions-components/{p-b86b2664.entry.js → p-d2612c30.entry.js} +1 -1
- package/dist/solutions-components/{p-29047e77.entry.js → p-e1391389.entry.js} +1 -1
- package/dist/solutions-components/{p-588adf13.entry.js → p-e345f9c4.entry.js} +1 -1
- package/dist/solutions-components/p-f3b71784.entry.js +6 -0
- package/dist/solutions-components/{p-759d0beb.entry.js → p-f728af86.entry.js} +1 -1
- package/dist/solutions-components/{p-46c8015c.js → p-ff9e28d1.js} +30 -30
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/downloadUtils.ts +6 -3
- package/dist/solutions-components/utils/test/downloadUtils.spec.tsx +10 -12
- package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +4 -7
- package/package.json +8 -7
- package/dist/solutions-components/p-07a194e6.entry.js +0 -6
- package/dist/solutions-components/p-14d78748.entry.js +0 -6
- package/dist/solutions-components/p-2360802a.js +0 -21
- package/dist/solutions-components/p-24e3f09f.entry.js +0 -6
- package/dist/solutions-components/p-3a33ef72.entry.js +0 -6
- package/dist/solutions-components/p-402301cb.js +0 -6
- package/dist/solutions-components/p-41a6f03d.entry.js +0 -6
- package/dist/solutions-components/p-4db86c5e.entry.js +0 -6
- package/dist/solutions-components/p-5eb9a413.entry.js +0 -6
- package/dist/solutions-components/p-750f234e.entry.js +0 -6
- package/dist/solutions-components/p-7e97d4d6.entry.js +0 -6
- package/dist/solutions-components/p-7eb5d31a.js +0 -6
- package/dist/solutions-components/p-90d2aadc.entry.js +0 -6
- package/dist/solutions-components/p-b78a4ce7.entry.js +0 -6
- package/dist/solutions-components/p-ecf642c2.entry.js +0 -6
- package/dist/solutions-components/p-efb4cb43.entry.js +0 -6
@@ -11,6 +11,838 @@ import './esri-loader-c6842c6b.js';
|
|
11
11
|
import './_commonjsHelpers-089957fe.js';
|
12
12
|
import './languageUtil-2b6e191a.js';
|
13
13
|
|
14
|
+
function resolveUrl(url, baseUrl) {
|
15
|
+
// url is absolute already
|
16
|
+
if (url.match(/^[a-z]+:\/\//i)) {
|
17
|
+
return url;
|
18
|
+
}
|
19
|
+
// url is absolute already, without protocol
|
20
|
+
if (url.match(/^\/\//)) {
|
21
|
+
return window.location.protocol + url;
|
22
|
+
}
|
23
|
+
// dataURI, mailto:, tel:, etc.
|
24
|
+
if (url.match(/^[a-z]+:/i)) {
|
25
|
+
return url;
|
26
|
+
}
|
27
|
+
const doc = document.implementation.createHTMLDocument();
|
28
|
+
const base = doc.createElement('base');
|
29
|
+
const a = doc.createElement('a');
|
30
|
+
doc.head.appendChild(base);
|
31
|
+
doc.body.appendChild(a);
|
32
|
+
if (baseUrl) {
|
33
|
+
base.href = baseUrl;
|
34
|
+
}
|
35
|
+
a.href = url;
|
36
|
+
return a.href;
|
37
|
+
}
|
38
|
+
const uuid = (() => {
|
39
|
+
// generate uuid for className of pseudo elements.
|
40
|
+
// We should not use GUIDs, otherwise pseudo elements sometimes cannot be captured.
|
41
|
+
let counter = 0;
|
42
|
+
// ref: http://stackoverflow.com/a/6248722/2519373
|
43
|
+
const random = () =>
|
44
|
+
// eslint-disable-next-line no-bitwise
|
45
|
+
`0000${((Math.random() * 36 ** 4) << 0).toString(36)}`.slice(-4);
|
46
|
+
return () => {
|
47
|
+
counter += 1;
|
48
|
+
return `u${random()}${counter}`;
|
49
|
+
};
|
50
|
+
})();
|
51
|
+
function toArray(arrayLike) {
|
52
|
+
const arr = [];
|
53
|
+
for (let i = 0, l = arrayLike.length; i < l; i++) {
|
54
|
+
arr.push(arrayLike[i]);
|
55
|
+
}
|
56
|
+
return arr;
|
57
|
+
}
|
58
|
+
function px(node, styleProperty) {
|
59
|
+
const win = node.ownerDocument.defaultView || window;
|
60
|
+
const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
|
61
|
+
return val ? parseFloat(val.replace('px', '')) : 0;
|
62
|
+
}
|
63
|
+
function getNodeWidth(node) {
|
64
|
+
const leftBorder = px(node, 'border-left-width');
|
65
|
+
const rightBorder = px(node, 'border-right-width');
|
66
|
+
return node.clientWidth + leftBorder + rightBorder;
|
67
|
+
}
|
68
|
+
function getNodeHeight(node) {
|
69
|
+
const topBorder = px(node, 'border-top-width');
|
70
|
+
const bottomBorder = px(node, 'border-bottom-width');
|
71
|
+
return node.clientHeight + topBorder + bottomBorder;
|
72
|
+
}
|
73
|
+
function getImageSize(targetNode, options = {}) {
|
74
|
+
const width = options.width || getNodeWidth(targetNode);
|
75
|
+
const height = options.height || getNodeHeight(targetNode);
|
76
|
+
return { width, height };
|
77
|
+
}
|
78
|
+
function getPixelRatio() {
|
79
|
+
let ratio;
|
80
|
+
let FINAL_PROCESS;
|
81
|
+
try {
|
82
|
+
FINAL_PROCESS = process;
|
83
|
+
}
|
84
|
+
catch (e) {
|
85
|
+
// pass
|
86
|
+
}
|
87
|
+
const val = FINAL_PROCESS && FINAL_PROCESS.env
|
88
|
+
? FINAL_PROCESS.env.devicePixelRatio
|
89
|
+
: null;
|
90
|
+
if (val) {
|
91
|
+
ratio = parseInt(val, 10);
|
92
|
+
if (Number.isNaN(ratio)) {
|
93
|
+
ratio = 1;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
return ratio || window.devicePixelRatio || 1;
|
97
|
+
}
|
98
|
+
// @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
|
99
|
+
const canvasDimensionLimit = 16384;
|
100
|
+
function checkCanvasDimensions(canvas) {
|
101
|
+
if (canvas.width > canvasDimensionLimit ||
|
102
|
+
canvas.height > canvasDimensionLimit) {
|
103
|
+
if (canvas.width > canvasDimensionLimit &&
|
104
|
+
canvas.height > canvasDimensionLimit) {
|
105
|
+
if (canvas.width > canvas.height) {
|
106
|
+
canvas.height *= canvasDimensionLimit / canvas.width;
|
107
|
+
canvas.width = canvasDimensionLimit;
|
108
|
+
}
|
109
|
+
else {
|
110
|
+
canvas.width *= canvasDimensionLimit / canvas.height;
|
111
|
+
canvas.height = canvasDimensionLimit;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
else if (canvas.width > canvasDimensionLimit) {
|
115
|
+
canvas.height *= canvasDimensionLimit / canvas.width;
|
116
|
+
canvas.width = canvasDimensionLimit;
|
117
|
+
}
|
118
|
+
else {
|
119
|
+
canvas.width *= canvasDimensionLimit / canvas.height;
|
120
|
+
canvas.height = canvasDimensionLimit;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
124
|
+
function createImage(url) {
|
125
|
+
return new Promise((resolve, reject) => {
|
126
|
+
const img = new Image();
|
127
|
+
img.decode = () => resolve(img);
|
128
|
+
img.onload = () => resolve(img);
|
129
|
+
img.onerror = reject;
|
130
|
+
img.crossOrigin = 'anonymous';
|
131
|
+
img.decoding = 'async';
|
132
|
+
img.src = url;
|
133
|
+
});
|
134
|
+
}
|
135
|
+
async function svgToDataURL(svg) {
|
136
|
+
return Promise.resolve()
|
137
|
+
.then(() => new XMLSerializer().serializeToString(svg))
|
138
|
+
.then(encodeURIComponent)
|
139
|
+
.then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
|
140
|
+
}
|
141
|
+
async function nodeToDataURL(node, width, height) {
|
142
|
+
const xmlns = 'http://www.w3.org/2000/svg';
|
143
|
+
const svg = document.createElementNS(xmlns, 'svg');
|
144
|
+
const foreignObject = document.createElementNS(xmlns, 'foreignObject');
|
145
|
+
svg.setAttribute('width', `${width}`);
|
146
|
+
svg.setAttribute('height', `${height}`);
|
147
|
+
svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
|
148
|
+
foreignObject.setAttribute('width', '100%');
|
149
|
+
foreignObject.setAttribute('height', '100%');
|
150
|
+
foreignObject.setAttribute('x', '0');
|
151
|
+
foreignObject.setAttribute('y', '0');
|
152
|
+
foreignObject.setAttribute('externalResourcesRequired', 'true');
|
153
|
+
svg.appendChild(foreignObject);
|
154
|
+
foreignObject.appendChild(node);
|
155
|
+
return svgToDataURL(svg);
|
156
|
+
}
|
157
|
+
const isInstanceOfElement = (node, instance) => {
|
158
|
+
if (node instanceof instance)
|
159
|
+
return true;
|
160
|
+
const nodePrototype = Object.getPrototypeOf(node);
|
161
|
+
if (nodePrototype === null)
|
162
|
+
return false;
|
163
|
+
return (nodePrototype.constructor.name === instance.name ||
|
164
|
+
isInstanceOfElement(nodePrototype, instance));
|
165
|
+
};
|
166
|
+
|
167
|
+
function formatCSSText(style) {
|
168
|
+
const content = style.getPropertyValue('content');
|
169
|
+
return `${style.cssText} content: '${content.replace(/'|"/g, '')}';`;
|
170
|
+
}
|
171
|
+
function formatCSSProperties(style) {
|
172
|
+
return toArray(style)
|
173
|
+
.map((name) => {
|
174
|
+
const value = style.getPropertyValue(name);
|
175
|
+
const priority = style.getPropertyPriority(name);
|
176
|
+
return `${name}: ${value}${priority ? ' !important' : ''};`;
|
177
|
+
})
|
178
|
+
.join(' ');
|
179
|
+
}
|
180
|
+
function getPseudoElementStyle(className, pseudo, style) {
|
181
|
+
const selector = `.${className}:${pseudo}`;
|
182
|
+
const cssText = style.cssText
|
183
|
+
? formatCSSText(style)
|
184
|
+
: formatCSSProperties(style);
|
185
|
+
return document.createTextNode(`${selector}{${cssText}}`);
|
186
|
+
}
|
187
|
+
function clonePseudoElement(nativeNode, clonedNode, pseudo) {
|
188
|
+
const style = window.getComputedStyle(nativeNode, pseudo);
|
189
|
+
const content = style.getPropertyValue('content');
|
190
|
+
if (content === '' || content === 'none') {
|
191
|
+
return;
|
192
|
+
}
|
193
|
+
const className = uuid();
|
194
|
+
try {
|
195
|
+
clonedNode.className = `${clonedNode.className} ${className}`;
|
196
|
+
}
|
197
|
+
catch (err) {
|
198
|
+
return;
|
199
|
+
}
|
200
|
+
const styleElement = document.createElement('style');
|
201
|
+
styleElement.appendChild(getPseudoElementStyle(className, pseudo, style));
|
202
|
+
clonedNode.appendChild(styleElement);
|
203
|
+
}
|
204
|
+
function clonePseudoElements(nativeNode, clonedNode) {
|
205
|
+
clonePseudoElement(nativeNode, clonedNode, ':before');
|
206
|
+
clonePseudoElement(nativeNode, clonedNode, ':after');
|
207
|
+
}
|
208
|
+
|
209
|
+
const WOFF = 'application/font-woff';
|
210
|
+
const JPEG = 'image/jpeg';
|
211
|
+
const mimes = {
|
212
|
+
woff: WOFF,
|
213
|
+
woff2: WOFF,
|
214
|
+
ttf: 'application/font-truetype',
|
215
|
+
eot: 'application/vnd.ms-fontobject',
|
216
|
+
png: 'image/png',
|
217
|
+
jpg: JPEG,
|
218
|
+
jpeg: JPEG,
|
219
|
+
gif: 'image/gif',
|
220
|
+
tiff: 'image/tiff',
|
221
|
+
svg: 'image/svg+xml',
|
222
|
+
webp: 'image/webp',
|
223
|
+
};
|
224
|
+
function getExtension(url) {
|
225
|
+
const match = /\.([^./]*?)$/g.exec(url);
|
226
|
+
return match ? match[1] : '';
|
227
|
+
}
|
228
|
+
function getMimeType(url) {
|
229
|
+
const extension = getExtension(url).toLowerCase();
|
230
|
+
return mimes[extension] || '';
|
231
|
+
}
|
232
|
+
|
233
|
+
function getContentFromDataUrl(dataURL) {
|
234
|
+
return dataURL.split(/,/)[1];
|
235
|
+
}
|
236
|
+
function isDataUrl(url) {
|
237
|
+
return url.search(/^(data:)/) !== -1;
|
238
|
+
}
|
239
|
+
function makeDataUrl(content, mimeType) {
|
240
|
+
return `data:${mimeType};base64,${content}`;
|
241
|
+
}
|
242
|
+
async function fetchAsDataURL(url, init, process) {
|
243
|
+
const res = await fetch(url, init);
|
244
|
+
if (res.status === 404) {
|
245
|
+
throw new Error(`Resource "${res.url}" not found`);
|
246
|
+
}
|
247
|
+
const blob = await res.blob();
|
248
|
+
return new Promise((resolve, reject) => {
|
249
|
+
const reader = new FileReader();
|
250
|
+
reader.onerror = reject;
|
251
|
+
reader.onloadend = () => {
|
252
|
+
try {
|
253
|
+
resolve(process({ res, result: reader.result }));
|
254
|
+
}
|
255
|
+
catch (error) {
|
256
|
+
reject(error);
|
257
|
+
}
|
258
|
+
};
|
259
|
+
reader.readAsDataURL(blob);
|
260
|
+
});
|
261
|
+
}
|
262
|
+
const cache = {};
|
263
|
+
function getCacheKey(url, contentType, includeQueryParams) {
|
264
|
+
let key = url.replace(/\?.*/, '');
|
265
|
+
if (includeQueryParams) {
|
266
|
+
key = url;
|
267
|
+
}
|
268
|
+
// font resource
|
269
|
+
if (/ttf|otf|eot|woff2?/i.test(key)) {
|
270
|
+
key = key.replace(/.*\//, '');
|
271
|
+
}
|
272
|
+
return contentType ? `[${contentType}]${key}` : key;
|
273
|
+
}
|
274
|
+
async function resourceToDataURL(resourceUrl, contentType, options) {
|
275
|
+
const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
|
276
|
+
if (cache[cacheKey] != null) {
|
277
|
+
return cache[cacheKey];
|
278
|
+
}
|
279
|
+
// ref: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
|
280
|
+
if (options.cacheBust) {
|
281
|
+
// eslint-disable-next-line no-param-reassign
|
282
|
+
resourceUrl += (/\?/.test(resourceUrl) ? '&' : '?') + new Date().getTime();
|
283
|
+
}
|
284
|
+
let dataURL;
|
285
|
+
try {
|
286
|
+
const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
|
287
|
+
if (!contentType) {
|
288
|
+
// eslint-disable-next-line no-param-reassign
|
289
|
+
contentType = res.headers.get('Content-Type') || '';
|
290
|
+
}
|
291
|
+
return getContentFromDataUrl(result);
|
292
|
+
});
|
293
|
+
dataURL = makeDataUrl(content, contentType);
|
294
|
+
}
|
295
|
+
catch (error) {
|
296
|
+
dataURL = options.imagePlaceholder || '';
|
297
|
+
let msg = `Failed to fetch resource: ${resourceUrl}`;
|
298
|
+
if (error) {
|
299
|
+
msg = typeof error === 'string' ? error : error.message;
|
300
|
+
}
|
301
|
+
if (msg) {
|
302
|
+
console.warn(msg);
|
303
|
+
}
|
304
|
+
}
|
305
|
+
cache[cacheKey] = dataURL;
|
306
|
+
return dataURL;
|
307
|
+
}
|
308
|
+
|
309
|
+
async function cloneCanvasElement(canvas) {
|
310
|
+
const dataURL = canvas.toDataURL();
|
311
|
+
if (dataURL === 'data:,') {
|
312
|
+
return canvas.cloneNode(false);
|
313
|
+
}
|
314
|
+
return createImage(dataURL);
|
315
|
+
}
|
316
|
+
async function cloneVideoElement(video, options) {
|
317
|
+
if (video.currentSrc) {
|
318
|
+
const canvas = document.createElement('canvas');
|
319
|
+
const ctx = canvas.getContext('2d');
|
320
|
+
canvas.width = video.clientWidth;
|
321
|
+
canvas.height = video.clientHeight;
|
322
|
+
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
323
|
+
const dataURL = canvas.toDataURL();
|
324
|
+
return createImage(dataURL);
|
325
|
+
}
|
326
|
+
const poster = video.poster;
|
327
|
+
const contentType = getMimeType(poster);
|
328
|
+
const dataURL = await resourceToDataURL(poster, contentType, options);
|
329
|
+
return createImage(dataURL);
|
330
|
+
}
|
331
|
+
async function cloneIFrameElement(iframe) {
|
332
|
+
var _a;
|
333
|
+
try {
|
334
|
+
if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
|
335
|
+
return (await cloneNode(iframe.contentDocument.body, {}, true));
|
336
|
+
}
|
337
|
+
}
|
338
|
+
catch (_b) {
|
339
|
+
// Failed to clone iframe
|
340
|
+
}
|
341
|
+
return iframe.cloneNode(false);
|
342
|
+
}
|
343
|
+
async function cloneSingleNode(node, options) {
|
344
|
+
if (isInstanceOfElement(node, HTMLCanvasElement)) {
|
345
|
+
return cloneCanvasElement(node);
|
346
|
+
}
|
347
|
+
if (isInstanceOfElement(node, HTMLVideoElement)) {
|
348
|
+
return cloneVideoElement(node, options);
|
349
|
+
}
|
350
|
+
if (isInstanceOfElement(node, HTMLIFrameElement)) {
|
351
|
+
return cloneIFrameElement(node);
|
352
|
+
}
|
353
|
+
return node.cloneNode(false);
|
354
|
+
}
|
355
|
+
const isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === 'SLOT';
|
356
|
+
async function cloneChildren(nativeNode, clonedNode, options) {
|
357
|
+
var _a, _b;
|
358
|
+
let children = [];
|
359
|
+
if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
|
360
|
+
children = toArray(nativeNode.assignedNodes());
|
361
|
+
}
|
362
|
+
else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
|
363
|
+
((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
|
364
|
+
children = toArray(nativeNode.contentDocument.body.childNodes);
|
365
|
+
}
|
366
|
+
else {
|
367
|
+
children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
|
368
|
+
}
|
369
|
+
if (children.length === 0 ||
|
370
|
+
isInstanceOfElement(nativeNode, HTMLVideoElement)) {
|
371
|
+
return clonedNode;
|
372
|
+
}
|
373
|
+
await children.reduce((deferred, child) => deferred
|
374
|
+
.then(() => cloneNode(child, options))
|
375
|
+
.then((clonedChild) => {
|
376
|
+
if (clonedChild) {
|
377
|
+
clonedNode.appendChild(clonedChild);
|
378
|
+
}
|
379
|
+
}), Promise.resolve());
|
380
|
+
return clonedNode;
|
381
|
+
}
|
382
|
+
function cloneCSSStyle(nativeNode, clonedNode) {
|
383
|
+
const targetStyle = clonedNode.style;
|
384
|
+
if (!targetStyle) {
|
385
|
+
return;
|
386
|
+
}
|
387
|
+
const sourceStyle = window.getComputedStyle(nativeNode);
|
388
|
+
if (sourceStyle.cssText) {
|
389
|
+
targetStyle.cssText = sourceStyle.cssText;
|
390
|
+
targetStyle.transformOrigin = sourceStyle.transformOrigin;
|
391
|
+
}
|
392
|
+
else {
|
393
|
+
toArray(sourceStyle).forEach((name) => {
|
394
|
+
let value = sourceStyle.getPropertyValue(name);
|
395
|
+
if (name === 'font-size' && value.endsWith('px')) {
|
396
|
+
const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
|
397
|
+
value = `${reducedFont}px`;
|
398
|
+
}
|
399
|
+
if (isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
|
400
|
+
name === 'display' &&
|
401
|
+
value === 'inline') {
|
402
|
+
value = 'block';
|
403
|
+
}
|
404
|
+
if (name === 'd' && clonedNode.getAttribute('d')) {
|
405
|
+
value = `path(${clonedNode.getAttribute('d')})`;
|
406
|
+
}
|
407
|
+
targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
|
408
|
+
});
|
409
|
+
}
|
410
|
+
}
|
411
|
+
function cloneInputValue(nativeNode, clonedNode) {
|
412
|
+
if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
|
413
|
+
clonedNode.innerHTML = nativeNode.value;
|
414
|
+
}
|
415
|
+
if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
|
416
|
+
clonedNode.setAttribute('value', nativeNode.value);
|
417
|
+
}
|
418
|
+
}
|
419
|
+
function cloneSelectValue(nativeNode, clonedNode) {
|
420
|
+
if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
|
421
|
+
const clonedSelect = clonedNode;
|
422
|
+
const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute('value'));
|
423
|
+
if (selectedOption) {
|
424
|
+
selectedOption.setAttribute('selected', '');
|
425
|
+
}
|
426
|
+
}
|
427
|
+
}
|
428
|
+
function decorate(nativeNode, clonedNode) {
|
429
|
+
if (isInstanceOfElement(clonedNode, Element)) {
|
430
|
+
cloneCSSStyle(nativeNode, clonedNode);
|
431
|
+
clonePseudoElements(nativeNode, clonedNode);
|
432
|
+
cloneInputValue(nativeNode, clonedNode);
|
433
|
+
cloneSelectValue(nativeNode, clonedNode);
|
434
|
+
}
|
435
|
+
return clonedNode;
|
436
|
+
}
|
437
|
+
async function ensureSVGSymbols(clone, options) {
|
438
|
+
const uses = clone.querySelectorAll ? clone.querySelectorAll('use') : [];
|
439
|
+
if (uses.length === 0) {
|
440
|
+
return clone;
|
441
|
+
}
|
442
|
+
const processedDefs = {};
|
443
|
+
for (let i = 0; i < uses.length; i++) {
|
444
|
+
const use = uses[i];
|
445
|
+
const id = use.getAttribute('xlink:href');
|
446
|
+
if (id) {
|
447
|
+
const exist = clone.querySelector(id);
|
448
|
+
const definition = document.querySelector(id);
|
449
|
+
if (!exist && definition && !processedDefs[id]) {
|
450
|
+
// eslint-disable-next-line no-await-in-loop
|
451
|
+
processedDefs[id] = (await cloneNode(definition, options, true));
|
452
|
+
}
|
453
|
+
}
|
454
|
+
}
|
455
|
+
const nodes = Object.values(processedDefs);
|
456
|
+
if (nodes.length) {
|
457
|
+
const ns = 'http://www.w3.org/1999/xhtml';
|
458
|
+
const svg = document.createElementNS(ns, 'svg');
|
459
|
+
svg.setAttribute('xmlns', ns);
|
460
|
+
svg.style.position = 'absolute';
|
461
|
+
svg.style.width = '0';
|
462
|
+
svg.style.height = '0';
|
463
|
+
svg.style.overflow = 'hidden';
|
464
|
+
svg.style.display = 'none';
|
465
|
+
const defs = document.createElementNS(ns, 'defs');
|
466
|
+
svg.appendChild(defs);
|
467
|
+
for (let i = 0; i < nodes.length; i++) {
|
468
|
+
defs.appendChild(nodes[i]);
|
469
|
+
}
|
470
|
+
clone.appendChild(svg);
|
471
|
+
}
|
472
|
+
return clone;
|
473
|
+
}
|
474
|
+
async function cloneNode(node, options, isRoot) {
|
475
|
+
if (!isRoot && options.filter && !options.filter(node)) {
|
476
|
+
return null;
|
477
|
+
}
|
478
|
+
return Promise.resolve(node)
|
479
|
+
.then((clonedNode) => cloneSingleNode(clonedNode, options))
|
480
|
+
.then((clonedNode) => cloneChildren(node, clonedNode, options))
|
481
|
+
.then((clonedNode) => decorate(node, clonedNode))
|
482
|
+
.then((clonedNode) => ensureSVGSymbols(clonedNode, options));
|
483
|
+
}
|
484
|
+
|
485
|
+
const URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
|
486
|
+
const URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
|
487
|
+
const FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
|
488
|
+
function toRegex(url) {
|
489
|
+
// eslint-disable-next-line no-useless-escape
|
490
|
+
const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
|
491
|
+
return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, 'g');
|
492
|
+
}
|
493
|
+
function parseURLs(cssText) {
|
494
|
+
const urls = [];
|
495
|
+
cssText.replace(URL_REGEX, (raw, quotation, url) => {
|
496
|
+
urls.push(url);
|
497
|
+
return raw;
|
498
|
+
});
|
499
|
+
return urls.filter((url) => !isDataUrl(url));
|
500
|
+
}
|
501
|
+
async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
|
502
|
+
try {
|
503
|
+
const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
|
504
|
+
const contentType = getMimeType(resourceURL);
|
505
|
+
let dataURL;
|
506
|
+
if (getContentFromUrl) {
|
507
|
+
const content = await getContentFromUrl(resolvedURL);
|
508
|
+
dataURL = makeDataUrl(content, contentType);
|
509
|
+
}
|
510
|
+
else {
|
511
|
+
dataURL = await resourceToDataURL(resolvedURL, contentType, options);
|
512
|
+
}
|
513
|
+
return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
|
514
|
+
}
|
515
|
+
catch (error) {
|
516
|
+
// pass
|
517
|
+
}
|
518
|
+
return cssText;
|
519
|
+
}
|
520
|
+
function filterPreferredFontFormat(str, { preferredFontFormat }) {
|
521
|
+
return !preferredFontFormat
|
522
|
+
? str
|
523
|
+
: str.replace(FONT_SRC_REGEX, (match) => {
|
524
|
+
// eslint-disable-next-line no-constant-condition
|
525
|
+
while (true) {
|
526
|
+
const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
|
527
|
+
if (!format) {
|
528
|
+
return '';
|
529
|
+
}
|
530
|
+
if (format === preferredFontFormat) {
|
531
|
+
return `src: ${src};`;
|
532
|
+
}
|
533
|
+
}
|
534
|
+
});
|
535
|
+
}
|
536
|
+
function shouldEmbed(url) {
|
537
|
+
return url.search(URL_REGEX) !== -1;
|
538
|
+
}
|
539
|
+
async function embedResources(cssText, baseUrl, options) {
|
540
|
+
if (!shouldEmbed(cssText)) {
|
541
|
+
return cssText;
|
542
|
+
}
|
543
|
+
const filteredCSSText = filterPreferredFontFormat(cssText, options);
|
544
|
+
const urls = parseURLs(filteredCSSText);
|
545
|
+
return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
|
546
|
+
}
|
547
|
+
|
548
|
+
async function embedProp(propName, node, options) {
|
549
|
+
var _a;
|
550
|
+
const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
|
551
|
+
if (propValue) {
|
552
|
+
const cssString = await embedResources(propValue, null, options);
|
553
|
+
node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
|
554
|
+
return true;
|
555
|
+
}
|
556
|
+
return false;
|
557
|
+
}
|
558
|
+
async function embedBackground(clonedNode, options) {
|
559
|
+
if (!(await embedProp('background', clonedNode, options))) {
|
560
|
+
await embedProp('background-image', clonedNode, options);
|
561
|
+
}
|
562
|
+
if (!(await embedProp('mask', clonedNode, options))) {
|
563
|
+
await embedProp('mask-image', clonedNode, options);
|
564
|
+
}
|
565
|
+
}
|
566
|
+
async function embedImageNode(clonedNode, options) {
|
567
|
+
const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
|
568
|
+
if (!(isImageElement && !isDataUrl(clonedNode.src)) &&
|
569
|
+
!(isInstanceOfElement(clonedNode, SVGImageElement) &&
|
570
|
+
!isDataUrl(clonedNode.href.baseVal))) {
|
571
|
+
return;
|
572
|
+
}
|
573
|
+
const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
|
574
|
+
const dataURL = await resourceToDataURL(url, getMimeType(url), options);
|
575
|
+
await new Promise((resolve, reject) => {
|
576
|
+
clonedNode.onload = resolve;
|
577
|
+
clonedNode.onerror = reject;
|
578
|
+
const image = clonedNode;
|
579
|
+
if (image.decode) {
|
580
|
+
image.decode = resolve;
|
581
|
+
}
|
582
|
+
if (image.loading === 'lazy') {
|
583
|
+
image.loading = 'eager';
|
584
|
+
}
|
585
|
+
if (isImageElement) {
|
586
|
+
clonedNode.srcset = '';
|
587
|
+
clonedNode.src = dataURL;
|
588
|
+
}
|
589
|
+
else {
|
590
|
+
clonedNode.href.baseVal = dataURL;
|
591
|
+
}
|
592
|
+
});
|
593
|
+
}
|
594
|
+
async function embedChildren(clonedNode, options) {
|
595
|
+
const children = toArray(clonedNode.childNodes);
|
596
|
+
const deferreds = children.map((child) => embedImages(child, options));
|
597
|
+
await Promise.all(deferreds).then(() => clonedNode);
|
598
|
+
}
|
599
|
+
async function embedImages(clonedNode, options) {
|
600
|
+
if (isInstanceOfElement(clonedNode, Element)) {
|
601
|
+
await embedBackground(clonedNode, options);
|
602
|
+
await embedImageNode(clonedNode, options);
|
603
|
+
await embedChildren(clonedNode, options);
|
604
|
+
}
|
605
|
+
}
|
606
|
+
|
607
|
+
function applyStyle(node, options) {
|
608
|
+
const { style } = node;
|
609
|
+
if (options.backgroundColor) {
|
610
|
+
style.backgroundColor = options.backgroundColor;
|
611
|
+
}
|
612
|
+
if (options.width) {
|
613
|
+
style.width = `${options.width}px`;
|
614
|
+
}
|
615
|
+
if (options.height) {
|
616
|
+
style.height = `${options.height}px`;
|
617
|
+
}
|
618
|
+
const manual = options.style;
|
619
|
+
if (manual != null) {
|
620
|
+
Object.keys(manual).forEach((key) => {
|
621
|
+
style[key] = manual[key];
|
622
|
+
});
|
623
|
+
}
|
624
|
+
return node;
|
625
|
+
}
|
626
|
+
|
627
|
+
const cssFetchCache = {};
|
628
|
+
async function fetchCSS(url) {
|
629
|
+
let cache = cssFetchCache[url];
|
630
|
+
if (cache != null) {
|
631
|
+
return cache;
|
632
|
+
}
|
633
|
+
const res = await fetch(url);
|
634
|
+
const cssText = await res.text();
|
635
|
+
cache = { url, cssText };
|
636
|
+
cssFetchCache[url] = cache;
|
637
|
+
return cache;
|
638
|
+
}
|
639
|
+
async function embedFonts(data, options) {
|
640
|
+
let cssText = data.cssText;
|
641
|
+
const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
|
642
|
+
const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
|
643
|
+
const loadFonts = fontLocs.map(async (loc) => {
|
644
|
+
let url = loc.replace(regexUrl, '$1');
|
645
|
+
if (!url.startsWith('https://')) {
|
646
|
+
url = new URL(url, data.url).href;
|
647
|
+
}
|
648
|
+
return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
|
649
|
+
cssText = cssText.replace(loc, `url(${result})`);
|
650
|
+
return [loc, result];
|
651
|
+
});
|
652
|
+
});
|
653
|
+
return Promise.all(loadFonts).then(() => cssText);
|
654
|
+
}
|
655
|
+
function parseCSS(source) {
|
656
|
+
if (source == null) {
|
657
|
+
return [];
|
658
|
+
}
|
659
|
+
const result = [];
|
660
|
+
const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
|
661
|
+
// strip out comments
|
662
|
+
let cssText = source.replace(commentsRegex, '');
|
663
|
+
// eslint-disable-next-line prefer-regex-literals
|
664
|
+
const keyframesRegex = new RegExp('((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})', 'gi');
|
665
|
+
// eslint-disable-next-line no-constant-condition
|
666
|
+
while (true) {
|
667
|
+
const matches = keyframesRegex.exec(cssText);
|
668
|
+
if (matches === null) {
|
669
|
+
break;
|
670
|
+
}
|
671
|
+
result.push(matches[0]);
|
672
|
+
}
|
673
|
+
cssText = cssText.replace(keyframesRegex, '');
|
674
|
+
const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
|
675
|
+
// to match css & media queries together
|
676
|
+
const combinedCSSRegex = '((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]' +
|
677
|
+
'*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})';
|
678
|
+
// unified regex
|
679
|
+
const unifiedRegex = new RegExp(combinedCSSRegex, 'gi');
|
680
|
+
// eslint-disable-next-line no-constant-condition
|
681
|
+
while (true) {
|
682
|
+
let matches = importRegex.exec(cssText);
|
683
|
+
if (matches === null) {
|
684
|
+
matches = unifiedRegex.exec(cssText);
|
685
|
+
if (matches === null) {
|
686
|
+
break;
|
687
|
+
}
|
688
|
+
else {
|
689
|
+
importRegex.lastIndex = unifiedRegex.lastIndex;
|
690
|
+
}
|
691
|
+
}
|
692
|
+
else {
|
693
|
+
unifiedRegex.lastIndex = importRegex.lastIndex;
|
694
|
+
}
|
695
|
+
result.push(matches[0]);
|
696
|
+
}
|
697
|
+
return result;
|
698
|
+
}
|
699
|
+
async function getCSSRules(styleSheets, options) {
|
700
|
+
const ret = [];
|
701
|
+
const deferreds = [];
|
702
|
+
// First loop inlines imports
|
703
|
+
styleSheets.forEach((sheet) => {
|
704
|
+
if ('cssRules' in sheet) {
|
705
|
+
try {
|
706
|
+
toArray(sheet.cssRules || []).forEach((item, index) => {
|
707
|
+
if (item.type === CSSRule.IMPORT_RULE) {
|
708
|
+
let importIndex = index + 1;
|
709
|
+
const url = item.href;
|
710
|
+
const deferred = fetchCSS(url)
|
711
|
+
.then((metadata) => embedFonts(metadata, options))
|
712
|
+
.then((cssText) => parseCSS(cssText).forEach((rule) => {
|
713
|
+
try {
|
714
|
+
sheet.insertRule(rule, rule.startsWith('@import')
|
715
|
+
? (importIndex += 1)
|
716
|
+
: sheet.cssRules.length);
|
717
|
+
}
|
718
|
+
catch (error) {
|
719
|
+
console.error('Error inserting rule from remote css', {
|
720
|
+
rule,
|
721
|
+
error,
|
722
|
+
});
|
723
|
+
}
|
724
|
+
}))
|
725
|
+
.catch((e) => {
|
726
|
+
console.error('Error loading remote css', e.toString());
|
727
|
+
});
|
728
|
+
deferreds.push(deferred);
|
729
|
+
}
|
730
|
+
});
|
731
|
+
}
|
732
|
+
catch (e) {
|
733
|
+
const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
|
734
|
+
if (sheet.href != null) {
|
735
|
+
deferreds.push(fetchCSS(sheet.href)
|
736
|
+
.then((metadata) => embedFonts(metadata, options))
|
737
|
+
.then((cssText) => parseCSS(cssText).forEach((rule) => {
|
738
|
+
inline.insertRule(rule, sheet.cssRules.length);
|
739
|
+
}))
|
740
|
+
.catch((err) => {
|
741
|
+
console.error('Error loading remote stylesheet', err);
|
742
|
+
}));
|
743
|
+
}
|
744
|
+
console.error('Error inlining remote css file', e);
|
745
|
+
}
|
746
|
+
}
|
747
|
+
});
|
748
|
+
return Promise.all(deferreds).then(() => {
|
749
|
+
// Second loop parses rules
|
750
|
+
styleSheets.forEach((sheet) => {
|
751
|
+
if ('cssRules' in sheet) {
|
752
|
+
try {
|
753
|
+
toArray(sheet.cssRules || []).forEach((item) => {
|
754
|
+
ret.push(item);
|
755
|
+
});
|
756
|
+
}
|
757
|
+
catch (e) {
|
758
|
+
console.error(`Error while reading CSS rules from ${sheet.href}`, e);
|
759
|
+
}
|
760
|
+
}
|
761
|
+
});
|
762
|
+
return ret;
|
763
|
+
});
|
764
|
+
}
|
765
|
+
function getWebFontRules(cssRules) {
|
766
|
+
return cssRules
|
767
|
+
.filter((rule) => rule.type === CSSRule.FONT_FACE_RULE)
|
768
|
+
.filter((rule) => shouldEmbed(rule.style.getPropertyValue('src')));
|
769
|
+
}
|
770
|
+
async function parseWebFontRules(node, options) {
|
771
|
+
if (node.ownerDocument == null) {
|
772
|
+
throw new Error('Provided element is not within a Document');
|
773
|
+
}
|
774
|
+
const styleSheets = toArray(node.ownerDocument.styleSheets);
|
775
|
+
const cssRules = await getCSSRules(styleSheets, options);
|
776
|
+
return getWebFontRules(cssRules);
|
777
|
+
}
|
778
|
+
async function getWebFontCSS(node, options) {
|
779
|
+
const rules = await parseWebFontRules(node, options);
|
780
|
+
const cssTexts = await Promise.all(rules.map((rule) => {
|
781
|
+
const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
|
782
|
+
return embedResources(rule.cssText, baseUrl, options);
|
783
|
+
}));
|
784
|
+
return cssTexts.join('\n');
|
785
|
+
}
|
786
|
+
async function embedWebFonts(clonedNode, options) {
|
787
|
+
const cssText = options.fontEmbedCSS != null
|
788
|
+
? options.fontEmbedCSS
|
789
|
+
: options.skipFonts
|
790
|
+
? null
|
791
|
+
: await getWebFontCSS(clonedNode, options);
|
792
|
+
if (cssText) {
|
793
|
+
const styleNode = document.createElement('style');
|
794
|
+
const sytleContent = document.createTextNode(cssText);
|
795
|
+
styleNode.appendChild(sytleContent);
|
796
|
+
if (clonedNode.firstChild) {
|
797
|
+
clonedNode.insertBefore(styleNode, clonedNode.firstChild);
|
798
|
+
}
|
799
|
+
else {
|
800
|
+
clonedNode.appendChild(styleNode);
|
801
|
+
}
|
802
|
+
}
|
803
|
+
}
|
804
|
+
|
805
|
+
async function toSvg(node, options = {}) {
|
806
|
+
const { width, height } = getImageSize(node, options);
|
807
|
+
const clonedNode = (await cloneNode(node, options, true));
|
808
|
+
await embedWebFonts(clonedNode, options);
|
809
|
+
await embedImages(clonedNode, options);
|
810
|
+
applyStyle(clonedNode, options);
|
811
|
+
const datauri = await nodeToDataURL(clonedNode, width, height);
|
812
|
+
return datauri;
|
813
|
+
}
|
814
|
+
async function toCanvas(node, options = {}) {
|
815
|
+
const { width, height } = getImageSize(node, options);
|
816
|
+
const svg = await toSvg(node, options);
|
817
|
+
const img = await createImage(svg);
|
818
|
+
const canvas = document.createElement('canvas');
|
819
|
+
const context = canvas.getContext('2d');
|
820
|
+
const ratio = options.pixelRatio || getPixelRatio();
|
821
|
+
const canvasWidth = options.canvasWidth || width;
|
822
|
+
const canvasHeight = options.canvasHeight || height;
|
823
|
+
canvas.width = canvasWidth * ratio;
|
824
|
+
canvas.height = canvasHeight * ratio;
|
825
|
+
if (!options.skipAutoScale) {
|
826
|
+
checkCanvasDimensions(canvas);
|
827
|
+
}
|
828
|
+
canvas.style.width = `${canvasWidth}`;
|
829
|
+
canvas.style.height = `${canvasHeight}`;
|
830
|
+
if (options.backgroundColor) {
|
831
|
+
context.fillStyle = options.backgroundColor;
|
832
|
+
context.fillRect(0, 0, canvas.width, canvas.height);
|
833
|
+
}
|
834
|
+
context.drawImage(img, 0, 0, canvas.width, canvas.height);
|
835
|
+
return canvas;
|
836
|
+
}
|
837
|
+
async function toPng(node, options = {}) {
|
838
|
+
const canvas = await toCanvas(node, options);
|
839
|
+
return canvas.toDataURL();
|
840
|
+
}
|
841
|
+
async function toJpeg(node, options = {}) {
|
842
|
+
const canvas = await toCanvas(node, options);
|
843
|
+
return canvas.toDataURL('image/jpeg', options.quality || 1);
|
844
|
+
}
|
845
|
+
|
14
846
|
const printStyling = `
|
15
847
|
@media print {
|
16
848
|
@page {
|
@@ -35,15 +867,27 @@ const printStyling = `
|
|
35
867
|
|
36
868
|
|
37
869
|
.instant-apps-export-print {
|
38
|
-
height: 100%;
|
39
|
-
width: 100%;
|
40
870
|
position: absolute;
|
41
871
|
z-index: -999;
|
42
872
|
color: #323232 !important;
|
873
|
+
--esri-calcite-mode-name: "light";
|
874
|
+
}
|
875
|
+
|
876
|
+
.instant-apps-export-print__pdf {
|
877
|
+
height: 100%;
|
878
|
+
width: 100%;
|
43
879
|
display: grid;
|
44
880
|
gap: 24px;
|
45
881
|
grid-auto-flow: row;
|
46
|
-
|
882
|
+
}
|
883
|
+
|
884
|
+
.instant-apps-export-print__img {
|
885
|
+
display: grid;
|
886
|
+
width: auto;
|
887
|
+
}
|
888
|
+
|
889
|
+
.instant-apps-export-print__img--extra-content {
|
890
|
+
grid-template-columns: 2fr minmax(0, 325px);
|
47
891
|
}
|
48
892
|
|
49
893
|
.instant-apps-export-print, .instant-apps-export-print * {
|
@@ -61,30 +905,55 @@ const printStyling = `
|
|
61
905
|
justify-content: center;
|
62
906
|
}
|
63
907
|
|
908
|
+
.instant-apps-export-print__img .instant-apps-export-print__view-container {
|
909
|
+
grid-row: 1;
|
910
|
+
grid-column: 1;
|
911
|
+
}
|
912
|
+
|
64
913
|
.instant-apps-export-print__view-wrapper {
|
65
914
|
height: fit-content;
|
66
915
|
width: fit-content;
|
67
916
|
position: relative;
|
68
917
|
display: flex;
|
69
918
|
flex-direction: column;
|
70
|
-
border: 2pt solid #323232;
|
71
919
|
overflow: hidden;
|
72
920
|
}
|
73
921
|
|
922
|
+
.instant-apps-export-print__pdf .instant-apps-export-print__view-wrapper {
|
923
|
+
border: 2pt solid #323232;
|
924
|
+
}
|
925
|
+
|
926
|
+
.instant-apps-export-print__img .instant-apps-export-print__view-wrapper {
|
927
|
+
border: 1pt solid #323232;
|
928
|
+
}
|
929
|
+
|
74
930
|
.instant-apps-export-print__view {
|
75
931
|
object-fit: contain;
|
76
932
|
}
|
77
933
|
|
934
|
+
.instant-apps-export-print__extra-container {
|
935
|
+
grid-row: 1 / span 2;
|
936
|
+
grid-column: 2;
|
937
|
+
}
|
938
|
+
|
78
939
|
.instant-apps-export-print__popup-container {
|
79
940
|
height: min-content;
|
80
|
-
max-width:
|
941
|
+
max-width: 325px;
|
81
942
|
display: none;
|
82
943
|
color: #323232;
|
83
944
|
background: #fff;
|
84
|
-
border: 1pt solid #323232;
|
85
945
|
break-inside: avoid;
|
86
946
|
}
|
87
947
|
|
948
|
+
.instant-apps-export-print__pdf .instant-apps-export-print__popup-container {
|
949
|
+
border: 1pt solid #323232;
|
950
|
+
}
|
951
|
+
|
952
|
+
.instant-apps-export-print__img .instant-apps-export-print__popup-container {
|
953
|
+
grid-row: 1 / span 2;
|
954
|
+
grid-column: 2;
|
955
|
+
}
|
956
|
+
|
88
957
|
.instant-apps-export-print__popup-title {
|
89
958
|
border-bottom: 1pt solid #323232;
|
90
959
|
}
|
@@ -104,6 +973,12 @@ const printStyling = `
|
|
104
973
|
overflow: unset;
|
105
974
|
}
|
106
975
|
|
976
|
+
.instant-apps-export-print__img .instant-apps-export-print__legend-container {
|
977
|
+
margin: 14px;
|
978
|
+
grid-row: 2;
|
979
|
+
grid-column: 1;
|
980
|
+
}
|
981
|
+
|
107
982
|
.esri-legend--card, .esri-legend--card__service-content {
|
108
983
|
flex-flow: row wrap;
|
109
984
|
}
|
@@ -113,7 +988,7 @@ const printStyling = `
|
|
113
988
|
color: #323232;
|
114
989
|
}
|
115
990
|
|
116
|
-
.instant-apps-export-print__popup-content * {
|
991
|
+
.instant-apps-export-print__popup-content *, .instant-apps-export-print__img .esri-feature.esri-widget * {
|
117
992
|
color: #323232;
|
118
993
|
}
|
119
994
|
|
@@ -302,7 +1177,6 @@ const screenshotStyling = `
|
|
302
1177
|
max-height: 75%;
|
303
1178
|
max-width: 75%;
|
304
1179
|
object-fit: contain;
|
305
|
-
border: 10px solid white;
|
306
1180
|
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
|
307
1181
|
margin-bottom: 0.5em;
|
308
1182
|
}
|
@@ -322,7 +1196,7 @@ const screenshotStyling = `
|
|
322
1196
|
margin: 5px;
|
323
1197
|
}`;
|
324
1198
|
|
325
|
-
const instantAppsExportCss = ":host{display:block;--instant-apps-export-action-background:var(--calcite-color-foreground-1);--instant-apps-export-action-background-hover:var(--calcite-color-foreground-2);--instant-apps-export-action-background-press:var(--calcite-color-foreground-3);--instant-apps-export-action-height:100%;--instant-apps-export-action-width:fit-content;--instant-apps-export-action-icon-color:var(--calcite-color-text-3);--instant-apps-export-action-icon-hover-color:var(--calcite-color-text-1);--instant-apps-export-background:var(--calcite-color-foreground-1);--instant-apps-export-text-color:var(--calcite-color-text-1);--instant-apps-export-popover-width:250px}.instant-apps-export{height:100%}.instant-apps-export *{box-sizing:border-box}.instant-apps-export__popover-container,.instant-apps-export__inline-container{padding:12px;background:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export__popover-container{width:var(--instant-apps-export-popover-width)}.instant-apps-export calcite-action{height:var(--instant-apps-export-action-height);width:var(--instant-apps-export-action-width);--calcite-color-foreground-1:var(--instant-apps-export-action-background);--calcite-color-foreground-2:var(--instant-apps-export-action-background-hover);--calcite-color-foreground-3:var(--instant-apps-export-action-background-press);--calcite-color-text-3:var(--instant-apps-export-action-icon-color);--calcite-color-text-1:var(--instant-apps-export-action-icon-hover-color)}.instant-apps-export .instant-apps-export-print{display:none}.instant-apps-export__visually-hidden{position:absolute;top:0;z-index:-1;visibility:hidden}.instant-apps-export calcite-input{--calcite-color-foreground-1:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export calcite-popover{--calcite-color-foreground-1:var(--instant-apps-export-background)}.instant-apps-export calcite-switch{--calcite-color-foreground-1:#fff;--calcite-color-foreground-2:#f3f3f3}.instant-apps-export calcite-button:last-of-type{margin-top:0.5rem}.instant-apps-export .calcite-mode-dark calcite-switch{--calcite-color-foreground-1:#2b2b2b;--calcite-color-foreground-2:#202020}.instant-apps-export__compass-container.esri-widget{background:#fff;box-shadow:0 1px 2px rgba(0, 0, 0, 0.3)}.instant-apps-export__compass-container.esri-widget .esri-compass__icon.esri-icon-compass{color:#6e6e6e}.hide{display:none}.screenshotCursor{cursor:crosshair}";
|
1199
|
+
const instantAppsExportCss = ":host{display:block;--instant-apps-export-action-background:var(--calcite-color-foreground-1);--instant-apps-export-action-background-hover:var(--calcite-color-foreground-2);--instant-apps-export-action-background-press:var(--calcite-color-foreground-3);--instant-apps-export-action-height:100%;--instant-apps-export-action-width:fit-content;--instant-apps-export-action-icon-color:var(--calcite-color-text-3);--instant-apps-export-action-icon-hover-color:var(--calcite-color-text-1);--instant-apps-export-background:var(--calcite-color-foreground-1);--instant-apps-export-text-color:var(--calcite-color-text-1);--instant-apps-export-popover-width:250px}.instant-apps-export{height:100%}.instant-apps-export *{box-sizing:border-box}.instant-apps-export__popover-container,.instant-apps-export__inline-container{padding:12px;background:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export__popover-container{width:var(--instant-apps-export-popover-width)}.instant-apps-export calcite-action{height:var(--instant-apps-export-action-height);width:var(--instant-apps-export-action-width);--calcite-color-foreground-1:var(--instant-apps-export-action-background);--calcite-color-foreground-2:var(--instant-apps-export-action-background-hover);--calcite-color-foreground-3:var(--instant-apps-export-action-background-press);--calcite-color-text-3:var(--instant-apps-export-action-icon-color);--calcite-color-text-1:var(--instant-apps-export-action-icon-hover-color)}.instant-apps-export .instant-apps-export-print{display:none}.instant-apps-export .instant-apps-export-print_img{display:flex;flex-flow:row wrap}.instant-apps-export__visually-hidden{position:absolute;top:0;z-index:-1;visibility:hidden}.instant-apps-export calcite-input{--calcite-color-foreground-1:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export calcite-popover{--calcite-color-foreground-1:var(--instant-apps-export-background)}.instant-apps-export calcite-switch{--calcite-color-foreground-1:#fff;--calcite-color-foreground-2:#f3f3f3}.instant-apps-export calcite-button:last-of-type{margin-top:0.5rem}.instant-apps-export .calcite-mode-dark calcite-switch{--calcite-color-foreground-1:#2b2b2b;--calcite-color-foreground-2:#202020}.instant-apps-export__compass-container.esri-widget{background:#fff;box-shadow:0 1px 2px rgba(0, 0, 0, 0.3)}.instant-apps-export__compass-container.esri-widget .esri-compass__icon.esri-icon-compass{color:#6e6e6e}.hide{display:none}.screenshotCursor{cursor:crosshair}";
|
326
1200
|
const InstantAppsExportStyle0 = instantAppsExportCss;
|
327
1201
|
|
328
1202
|
const CSS = {
|
@@ -332,7 +1206,9 @@ const CSS = {
|
|
332
1206
|
popoverContainer: 'instant-apps-export__popover-container',
|
333
1207
|
hidden: 'instant-apps-export__visually-hidden',
|
334
1208
|
print: {
|
335
|
-
|
1209
|
+
pdfBase: 'instant-apps-export-print instant-apps-export-print__pdf',
|
1210
|
+
imgBase: 'instant-apps-export-print instant-apps-export-print__img',
|
1211
|
+
imgExtraContent: 'instant-apps-export-print__img--extra-content',
|
336
1212
|
contentContainer: 'instant-apps-export-print__content-container',
|
337
1213
|
extraContainer: 'instant-apps-export-print__extra-container',
|
338
1214
|
legendContainer: 'instant-apps-export-print__legend-container',
|
@@ -352,16 +1228,20 @@ const InstantAppsExport = class {
|
|
352
1228
|
constructor(hostRef) {
|
353
1229
|
registerInstance(this, hostRef);
|
354
1230
|
this.exportOutputUpdated = createEvent(this, "exportOutputUpdated", 7);
|
1231
|
+
this.fileTypes = ['PDF', 'JPG', 'PNG'];
|
355
1232
|
this.output = undefined;
|
356
1233
|
this.beforeExport = () => Promise.resolve();
|
357
1234
|
this.popoverIcon = 'export';
|
358
1235
|
this.extraContent = undefined;
|
359
1236
|
this.extraContentLabel = undefined;
|
360
1237
|
this.headerTitle = '';
|
1238
|
+
this.logoImage = '';
|
361
1239
|
this.includeExtraContent = true;
|
1240
|
+
this.showExtraContentInImg = false;
|
362
1241
|
this.includeLegend = true;
|
363
1242
|
this.includeMap = true;
|
364
1243
|
this.includePopup = false;
|
1244
|
+
this.includeFileFormat = true;
|
365
1245
|
this.mode = 'popover';
|
366
1246
|
this.popoverPositioning = 'absolute';
|
367
1247
|
this.popoverPlacement = 'auto';
|
@@ -377,6 +1257,7 @@ const InstantAppsExport = class {
|
|
377
1257
|
this.baseClass = CSS.baseLight;
|
378
1258
|
this.exportIsLoading = undefined;
|
379
1259
|
this.messages = undefined;
|
1260
|
+
this.selectedFileType = 'PDF';
|
380
1261
|
}
|
381
1262
|
watchIncludeMap(includeMap) {
|
382
1263
|
if (includeMap) {
|
@@ -404,7 +1285,7 @@ const InstantAppsExport = class {
|
|
404
1285
|
render() {
|
405
1286
|
const mode = this.mode === 'popover' ? this.renderPopover() : this.renderPanel();
|
406
1287
|
const compass = this.renderCompass();
|
407
|
-
return (h(Host, { key: '
|
1288
|
+
return (h(Host, { key: '9811c244faf2c794db3edaad498a9a902cb3faad' }, h("div", { key: 'cb880c04d46ec06a9588cedc0bd90ab62d25c0ac', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode, h("div", { key: 'fc7ccd1eeb4b6a82bd9804d1aa73c4f242085a56', class: CSS.hidden }, compass))));
|
408
1289
|
}
|
409
1290
|
renderPopover() {
|
410
1291
|
var _a, _b, _c;
|
@@ -415,25 +1296,31 @@ const InstantAppsExport = class {
|
|
415
1296
|
];
|
416
1297
|
}
|
417
1298
|
renderPanel() {
|
418
|
-
var _a, _b;
|
1299
|
+
var _a, _b, _c;
|
419
1300
|
const headerTitle = this.showHeaderTitle ? this.renderTitle() : null;
|
420
|
-
const includeExtraContent = this.extraContent != null ? this.renderSwitch('includeExtraContent', this.extraContentLabel) : null;
|
421
|
-
const includeMap = this.showIncludeMap ? this.renderSwitch('includeMap') : null;
|
1301
|
+
const includeExtraContent = this.extraContent != null ? this.renderSwitch('includeExtraContent', this.extraContentLabel, this.selectedFileType !== 'PDF' && !this.showExtraContentInImg) : null;
|
1302
|
+
const includeMap = this.showIncludeMap ? this.renderSwitch('includeMap', undefined, this.selectedFileType !== 'PDF') : null;
|
422
1303
|
const options = this.includeMap ? this.renderMapOptions() : null;
|
423
|
-
const
|
1304
|
+
const fileType = this.includeFileFormat ? this.renderSelectFileType() : null;
|
1305
|
+
const print = this.selectedFileType === 'PDF' ? this.renderPrint() : this.renderImg();
|
424
1306
|
const panelClass = this.mode === 'inline' ? CSS.inlineContainer : CSS.popoverContainer;
|
425
|
-
return (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, this.includeMap ? (h("calcite-button", { appearance: "transparent", width: "full", onClick: this.setMapAreaOnClick.bind(this), disabled: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.setMapArea)) : null, h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), disabled: this.exportIsLoading }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.export), print));
|
1307
|
+
return (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, fileType, this.includeMap ? (h("calcite-button", { appearance: "transparent", width: "full", onClick: this.setMapAreaOnClick.bind(this, true), disabled: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.setMapArea)) : null, h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), disabled: this.exportIsLoading }, this.selectedFileType === 'PDF' ? (_b = this.messages) === null || _b === void 0 ? void 0 : _b.export : (_c = this.messages) === null || _c === void 0 ? void 0 : _c.preview), print));
|
426
1308
|
}
|
427
1309
|
renderTitle() {
|
428
1310
|
var _a;
|
429
1311
|
return (h("calcite-label", null, (_a = this.messages) === null || _a === void 0 ? void 0 :
|
430
1312
|
_a.title, h("calcite-input", { value: this.headerTitle, onCalciteInputInput: this.updateHeaderTitle.bind(this) })));
|
431
1313
|
}
|
432
|
-
renderSwitch(value, label) {
|
1314
|
+
renderSwitch(value, label, disabled) {
|
433
1315
|
var _a;
|
434
1316
|
const checked = this[value];
|
435
1317
|
const title = label != null ? label : (_a = this.messages) === null || _a === void 0 ? void 0 : _a[value];
|
436
|
-
return (h("calcite-label", { layout: "inline-space-between" }, title, h("calcite-switch", { checked: checked, value: value, onCalciteSwitchChange: this.optionOnChange.bind(this) })));
|
1318
|
+
return (h("calcite-label", { layout: "inline-space-between" }, title, h("calcite-switch", { checked: checked, value: value, onCalciteSwitchChange: this.optionOnChange.bind(this), disabled: disabled })));
|
1319
|
+
}
|
1320
|
+
renderSelectFileType() {
|
1321
|
+
var _a;
|
1322
|
+
return (h("calcite-label", null, (_a = this.messages) === null || _a === void 0 ? void 0 :
|
1323
|
+
_a.fileType, h("calcite-select", { onCalciteSelectChange: this.handleSelectFileType.bind(this) }, this.fileTypes.map(fileType => (h("calcite-option", { value: fileType, selected: fileType === this.selectedFileType }, fileType))))));
|
437
1324
|
}
|
438
1325
|
renderMapOptions() {
|
439
1326
|
const includeLegend = this.showIncludeLegend ? this.renderSwitch('includeLegend') : null;
|
@@ -445,10 +1332,10 @@ const InstantAppsExport = class {
|
|
445
1332
|
const extraContent = this.renderExtraContent();
|
446
1333
|
const legend = this.includeMap && this.showIncludeLegend ? this.renderLegend() : null;
|
447
1334
|
const popup = this.includeMap && this.showIncludePopup ? this.renderPopup() : null;
|
448
|
-
return (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.
|
1335
|
+
return (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.pdfBase, ref: (el) => (this.printEl = el) }, printMap, legend, h("div", { class: CSS.print.contentContainer }, popup, extraContent))));
|
449
1336
|
}
|
450
1337
|
renderPrintMap() {
|
451
|
-
return (h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? h("instant-apps-header", { titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" }) : null, h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) }))));
|
1338
|
+
return (h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? (h("instant-apps-header", { logoImage: this.logoImage, logoScale: "s", titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" })) : null, h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) }))));
|
452
1339
|
}
|
453
1340
|
renderLegend() {
|
454
1341
|
return h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
|
@@ -462,6 +1349,18 @@ const InstantAppsExport = class {
|
|
462
1349
|
renderExtraContent() {
|
463
1350
|
return h("div", { class: CSS.print.extraContainer, id: "export-content", ref: (el) => (this.extraContainerEl = el) });
|
464
1351
|
}
|
1352
|
+
renderImg() {
|
1353
|
+
const printMap = this.includeMap ? this.renderPrintMap() : null;
|
1354
|
+
const legend = this.includeMap && this.showIncludeLegend ? this.renderLegend() : null;
|
1355
|
+
let content;
|
1356
|
+
if (this.includeMap && this.showIncludePopup) {
|
1357
|
+
content = this.renderPopup();
|
1358
|
+
}
|
1359
|
+
else if (this.showExtraContentInImg && this.extraContent != null && this.includeExtraContent) {
|
1360
|
+
content = this.renderExtraContent();
|
1361
|
+
}
|
1362
|
+
return (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.imgBase, ref: (el) => (this.printEl = el) }, printMap, legend, content)));
|
1363
|
+
}
|
465
1364
|
optionOnChange(e) {
|
466
1365
|
const { checked, value } = e.target;
|
467
1366
|
this[value] = checked;
|
@@ -482,6 +1381,40 @@ const InstantAppsExport = class {
|
|
482
1381
|
this.popoverEl.open = false;
|
483
1382
|
}
|
484
1383
|
}
|
1384
|
+
async exportPreviewOnClick() {
|
1385
|
+
if (this.selectedFileType === 'PDF') {
|
1386
|
+
await this.exportPDF();
|
1387
|
+
}
|
1388
|
+
else {
|
1389
|
+
this.exportImg();
|
1390
|
+
}
|
1391
|
+
}
|
1392
|
+
async exportPDF() {
|
1393
|
+
this.removeScreenshotElements();
|
1394
|
+
await this.beforeExport();
|
1395
|
+
if (this.viewWrapperEl != null && !this.viewWrapperEl.contains(this.compassContainerEl)) {
|
1396
|
+
this.viewWrapperEl.append(this.compassContainerEl);
|
1397
|
+
}
|
1398
|
+
this.handleViewExportOnClick();
|
1399
|
+
if (this.popoverEl != null) {
|
1400
|
+
this.popoverEl.open = false;
|
1401
|
+
}
|
1402
|
+
}
|
1403
|
+
exportImg() {
|
1404
|
+
var _a;
|
1405
|
+
this.resetPopupVisibility();
|
1406
|
+
if (this.dataUrl == null)
|
1407
|
+
return;
|
1408
|
+
const downloadLink = document.createElement('a');
|
1409
|
+
downloadLink.id = 'download-link';
|
1410
|
+
downloadLink.href = this.dataUrl;
|
1411
|
+
downloadLink.download = (_a = this.headerTitle) !== null && _a !== void 0 ? _a : document.title;
|
1412
|
+
downloadLink.click();
|
1413
|
+
this.dataUrl = null;
|
1414
|
+
this.exportIsLoading = false;
|
1415
|
+
this.removeScreenshotElements();
|
1416
|
+
this.resetPrintContent();
|
1417
|
+
}
|
485
1418
|
async handleViewExportOnClick() {
|
486
1419
|
if (this.view != null) {
|
487
1420
|
this.addPrintStyling();
|
@@ -489,7 +1422,6 @@ const InstantAppsExport = class {
|
|
489
1422
|
this.handleExtraContent();
|
490
1423
|
if (this.includeMap) {
|
491
1424
|
this.updateScaleBar();
|
492
|
-
this.updatePopupToPrint();
|
493
1425
|
this.viewScreenshot();
|
494
1426
|
this.handleImgLoaded();
|
495
1427
|
}
|
@@ -513,7 +1445,9 @@ const InstantAppsExport = class {
|
|
513
1445
|
handleImgLoaded() {
|
514
1446
|
this.exportIsLoading = true;
|
515
1447
|
setTimeout(() => {
|
516
|
-
this.
|
1448
|
+
if (this.selectedFileType === 'PDF') {
|
1449
|
+
this.exportIsLoading = false;
|
1450
|
+
}
|
517
1451
|
this.setupViewPrintElements();
|
518
1452
|
}, 1500);
|
519
1453
|
}
|
@@ -521,7 +1455,10 @@ const InstantAppsExport = class {
|
|
521
1455
|
const extraContainerEl = this.printEl.querySelector('#export-content');
|
522
1456
|
if (extraContainerEl != null) {
|
523
1457
|
extraContainerEl.innerHTML = '';
|
524
|
-
|
1458
|
+
const hasExtraContent = this.extraContent != null && this.includeExtraContent;
|
1459
|
+
const imgAndFeatureVisible = this.selectedFileType !== 'PDF' && this.showExtraContentInImg && hasExtraContent;
|
1460
|
+
this.printEl.classList.toggle(CSS.print.imgExtraContent, imgAndFeatureVisible);
|
1461
|
+
if (hasExtraContent) {
|
525
1462
|
extraContainerEl.style.display = 'block';
|
526
1463
|
extraContainerEl.append(this.extraContent.cloneNode(true));
|
527
1464
|
}
|
@@ -529,13 +1466,17 @@ const InstantAppsExport = class {
|
|
529
1466
|
extraContainerEl.style.display = 'none';
|
530
1467
|
}
|
531
1468
|
}
|
1469
|
+
else if (this.showExtraContentInImg && this.selectedFileType !== 'PDF' && !this.includeExtraContent) {
|
1470
|
+
this.printEl.classList.toggle(CSS.print.imgExtraContent, false);
|
1471
|
+
}
|
532
1472
|
}
|
533
1473
|
resetPrintContent() {
|
534
|
-
var _a, _b;
|
1474
|
+
var _a, _b, _c;
|
535
1475
|
if (this.view != null) {
|
536
1476
|
this.screenshot = null;
|
537
1477
|
(_a = this.printContainerEl) === null || _a === void 0 ? void 0 : _a.prepend(this.printEl);
|
538
1478
|
(_b = this.printStyleEl) === null || _b === void 0 ? void 0 : _b.remove();
|
1479
|
+
(_c = this.tmpPopupTitleEl) === null || _c === void 0 ? void 0 : _c.remove();
|
539
1480
|
this.printStyleEl = undefined;
|
540
1481
|
const extraContainerEl = this.printEl.querySelector('#export-content');
|
541
1482
|
if (extraContainerEl) {
|
@@ -545,20 +1486,26 @@ const InstantAppsExport = class {
|
|
545
1486
|
}
|
546
1487
|
async updatePopupToPrint() {
|
547
1488
|
var _a, _b;
|
548
|
-
if (this.view
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
1489
|
+
if (this.view == null || this.popupContainerEl == null)
|
1490
|
+
return;
|
1491
|
+
this.popupContainerEl.style.display = this.includePopup && this.view.popup.visible ? 'block' : 'none';
|
1492
|
+
this.checkPopupOpen();
|
1493
|
+
const popupVisible = this.includePopup && (this.view.popup.visible || this.popupHiddenByMapArea) && this.view.popup.selectedFeature != null;
|
1494
|
+
this.printEl.classList.toggle(CSS.print.imgExtraContent, this.selectedFileType !== 'PDF' && popupVisible);
|
1495
|
+
if (popupVisible) {
|
1496
|
+
const heading = document.createElement(`h${(_a = this.view.popup.headingLevel) !== null && _a !== void 0 ? _a : 2}`);
|
1497
|
+
heading.innerHTML = (_b = this.view.popup.title) !== null && _b !== void 0 ? _b : '';
|
1498
|
+
heading.className = 'esri-widget__heading esri-popup__header-title';
|
1499
|
+
if (this.popupTitleEl == null) {
|
1500
|
+
this.tmpPopupTitleEl = document.createElement('div');
|
1501
|
+
this.tmpPopupTitleEl.prepend(heading);
|
1502
|
+
this.tmpPopupTitleEl.style.display = this.view.popup.title ? 'block' : 'none';
|
1503
|
+
this.popupContainerEl.prepend(this.tmpPopupTitleEl);
|
1504
|
+
}
|
1505
|
+
else {
|
1506
|
+
this.popupTitleEl.style.display = this.view.popup.title ? 'block' : 'none';
|
1507
|
+
this.popupTitleEl.innerHTML = '';
|
1508
|
+
this.popupTitleEl.prepend(heading);
|
562
1509
|
}
|
563
1510
|
}
|
564
1511
|
}
|
@@ -581,17 +1528,40 @@ const InstantAppsExport = class {
|
|
581
1528
|
setupViewPrintElements() {
|
582
1529
|
if (this.view != null) {
|
583
1530
|
this.handleLegendSetup();
|
584
|
-
|
585
|
-
|
586
|
-
|
1531
|
+
if (this.selectedFileType === 'PDF') {
|
1532
|
+
const title = document.title;
|
1533
|
+
if (this.showHeaderTitle && this.headerTitle) {
|
1534
|
+
document.title = this.headerTitle;
|
1535
|
+
}
|
1536
|
+
window.print();
|
1537
|
+
document.title = title;
|
1538
|
+
setTimeout(() => {
|
1539
|
+
this.resetPrintContent();
|
1540
|
+
}, 1000);
|
1541
|
+
}
|
1542
|
+
else {
|
1543
|
+
this.convertToImage();
|
587
1544
|
}
|
588
|
-
window.print();
|
589
|
-
document.title = title;
|
590
|
-
setTimeout(() => {
|
591
|
-
this.resetPrintContent();
|
592
|
-
}, 1000);
|
593
1545
|
}
|
594
1546
|
}
|
1547
|
+
convertToImage() {
|
1548
|
+
const options = { backgroundColor: '#FFF', skipFonts: true };
|
1549
|
+
if (this.selectedFileType === 'JPG') {
|
1550
|
+
toJpeg(this.printEl, options).then(this.handleGetImage.bind(this));
|
1551
|
+
}
|
1552
|
+
else {
|
1553
|
+
toPng(this.printEl, options).then(this.handleGetImage.bind(this));
|
1554
|
+
}
|
1555
|
+
}
|
1556
|
+
handleGetImage(dataUrl) {
|
1557
|
+
var _a;
|
1558
|
+
this.resetPrintContent();
|
1559
|
+
this.dataUrl = dataUrl;
|
1560
|
+
this.setMapAreaOnClick(false);
|
1561
|
+
this.showPreview(dataUrl);
|
1562
|
+
(_a = this.view) === null || _a === void 0 ? void 0 : _a.container.classList.remove('screenshot-cursor');
|
1563
|
+
this.setMaskPosition(null);
|
1564
|
+
}
|
595
1565
|
handleLegendSetup() {
|
596
1566
|
var _a;
|
597
1567
|
if (this.showIncludeLegend && this.view != null && this.includeMap && this.legendContainerEl != null) {
|
@@ -603,6 +1573,7 @@ const InstantAppsExport = class {
|
|
603
1573
|
if (this.includeMap) {
|
604
1574
|
this.handleLegendCreation();
|
605
1575
|
this.handleCompassCreation();
|
1576
|
+
this.updatePopupToPrint();
|
606
1577
|
}
|
607
1578
|
}
|
608
1579
|
handleIncludePopup() {
|
@@ -613,6 +1584,8 @@ const InstantAppsExport = class {
|
|
613
1584
|
(_b = this.reactiveUtils) === null || _b === void 0 ? void 0 : _b.whenOnce(() => { var _a; return (_a = this.view) === null || _a === void 0 ? void 0 : _a.ready; }).then(() => {
|
614
1585
|
var _a;
|
615
1586
|
(_a = this.handles) === null || _a === void 0 ? void 0 : _a.add(this.reactiveUtils.watch(() => { var _a, _b; return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.popup) === null || _b === void 0 ? void 0 : _b.visible; }, (visible) => {
|
1587
|
+
if (this.settingMapArea)
|
1588
|
+
return;
|
616
1589
|
this.includePopup = visible;
|
617
1590
|
}), handleId);
|
618
1591
|
});
|
@@ -644,6 +1617,7 @@ const InstantAppsExport = class {
|
|
644
1617
|
this.legend = new Legend({
|
645
1618
|
container: legendCont,
|
646
1619
|
view,
|
1620
|
+
respectLayerDefinitionExpression: true,
|
647
1621
|
style: {
|
648
1622
|
type: 'card',
|
649
1623
|
layout: 'side-by-side',
|
@@ -711,7 +1685,9 @@ const InstantAppsExport = class {
|
|
711
1685
|
}
|
712
1686
|
}
|
713
1687
|
setMaxRowHeightOnViewContainer() {
|
714
|
-
this.
|
1688
|
+
if (this.selectedFileType === 'PDF') {
|
1689
|
+
this.printEl.style.gridTemplateRows = 'minmax(auto, 70%)';
|
1690
|
+
}
|
715
1691
|
this.viewEl.style.height = '100%';
|
716
1692
|
this.viewEl.style.width = '';
|
717
1693
|
this.viewWrapperEl.style.height = '100%';
|
@@ -755,7 +1731,7 @@ const InstantAppsExport = class {
|
|
755
1731
|
}
|
756
1732
|
}
|
757
1733
|
createScreenshot() {
|
758
|
-
var _a, _b;
|
1734
|
+
var _a, _b, _c;
|
759
1735
|
if (this.view != null) {
|
760
1736
|
this.screenshotPreview = document.createElement('div');
|
761
1737
|
this.screenshotPreview.className = 'screenshot-preview hide';
|
@@ -765,10 +1741,10 @@ const InstantAppsExport = class {
|
|
765
1741
|
const screenshotBtnContainer = document.createElement('div');
|
766
1742
|
const exportBtn = document.createElement('calcite-button');
|
767
1743
|
const returnBtn = document.createElement('calcite-button');
|
768
|
-
exportBtn.innerHTML = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.export;
|
769
|
-
returnBtn.innerHTML = (
|
1744
|
+
exportBtn.innerHTML = this.selectedFileType === 'PDF' ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.export : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.downloadImage;
|
1745
|
+
returnBtn.innerHTML = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.returnToMap;
|
770
1746
|
returnBtn.appearance = 'outline-fill';
|
771
|
-
exportBtn.onclick = this.
|
1747
|
+
exportBtn.onclick = this.exportPreviewOnClick.bind(this);
|
772
1748
|
returnBtn.onclick = this.screenshotReturn.bind(this);
|
773
1749
|
screenshotBtnContainer.append(returnBtn, exportBtn);
|
774
1750
|
this.screenshotImgContainer.append(this.screenshotImg, screenshotBtnContainer);
|
@@ -793,10 +1769,19 @@ const InstantAppsExport = class {
|
|
793
1769
|
this.removeScreenshotElements();
|
794
1770
|
this.exportIsLoading = false;
|
795
1771
|
this.screenshot = null;
|
1772
|
+
this.resetPopupVisibility();
|
796
1773
|
}
|
797
|
-
setMapAreaOnClick() {
|
1774
|
+
setMapAreaOnClick(handlePopup) {
|
798
1775
|
if (this.view == null)
|
799
1776
|
return;
|
1777
|
+
this.settingMapArea = true;
|
1778
|
+
if (handlePopup) {
|
1779
|
+
if (this.view.popup.visible) {
|
1780
|
+
this.popupHiddenByMapArea = true;
|
1781
|
+
const popupContainer = this.view.popup.container;
|
1782
|
+
popupContainer.style.display = 'none';
|
1783
|
+
}
|
1784
|
+
}
|
800
1785
|
this.exportIsLoading = true;
|
801
1786
|
this.createMaskDiv();
|
802
1787
|
this.createScreenshot();
|
@@ -841,9 +1826,21 @@ const InstantAppsExport = class {
|
|
841
1826
|
this.view.takeScreenshot({ area: this.area, width: width * 2, height: height * 2, format: 'jpg' }).then(screenshot => {
|
842
1827
|
var _a;
|
843
1828
|
this.screenshot = screenshot;
|
844
|
-
this.showPreview();
|
845
1829
|
(_a = this.view) === null || _a === void 0 ? void 0 : _a.container.classList.remove('screenshot-cursor');
|
846
1830
|
this.setMaskPosition(null);
|
1831
|
+
if (this.selectedFileType === 'PDF') {
|
1832
|
+
this.showPreview(screenshot === null || screenshot === void 0 ? void 0 : screenshot.dataUrl);
|
1833
|
+
this.resetPopupVisibility();
|
1834
|
+
}
|
1835
|
+
else {
|
1836
|
+
if (this.viewWrapperEl != null && !this.viewWrapperEl.contains(this.compassContainerEl)) {
|
1837
|
+
this.viewWrapperEl.append(this.compassContainerEl);
|
1838
|
+
}
|
1839
|
+
this.handleViewExportOnClick();
|
1840
|
+
if (this.popoverEl != null) {
|
1841
|
+
this.popoverEl.open = false;
|
1842
|
+
}
|
1843
|
+
}
|
847
1844
|
});
|
848
1845
|
}
|
849
1846
|
}
|
@@ -862,10 +1859,12 @@ const InstantAppsExport = class {
|
|
862
1859
|
clamp(value, from, to) {
|
863
1860
|
return value < from ? from : value > to ? to : value;
|
864
1861
|
}
|
865
|
-
showPreview() {
|
1862
|
+
showPreview(dataUrl) {
|
1863
|
+
if (!dataUrl)
|
1864
|
+
return;
|
866
1865
|
this.screenshotPreview.classList.remove('hide');
|
867
|
-
if (this.screenshotImg != null
|
868
|
-
this.screenshotImg.src =
|
1866
|
+
if (this.screenshotImg != null) {
|
1867
|
+
this.screenshotImg.src = dataUrl;
|
869
1868
|
}
|
870
1869
|
}
|
871
1870
|
handleScaleBarSize() {
|
@@ -889,9 +1888,37 @@ const InstantAppsExport = class {
|
|
889
1888
|
}
|
890
1889
|
}
|
891
1890
|
removeScreenshotElements() {
|
892
|
-
var _a, _b;
|
893
|
-
(_a = this.
|
894
|
-
(_b = this.
|
1891
|
+
var _a, _b, _c;
|
1892
|
+
(_a = this.view) === null || _a === void 0 ? void 0 : _a.removeHandles(dragHandlerName);
|
1893
|
+
(_b = this.screenshotPreview) === null || _b === void 0 ? void 0 : _b.remove();
|
1894
|
+
(_c = this.screenshotStyle) === null || _c === void 0 ? void 0 : _c.remove();
|
1895
|
+
}
|
1896
|
+
resetPopupVisibility() {
|
1897
|
+
if (this.view && this.settingMapArea && this.popupHiddenByMapArea) {
|
1898
|
+
const popupContainer = this.view.popup.container;
|
1899
|
+
popupContainer.style.display = '';
|
1900
|
+
}
|
1901
|
+
this.settingMapArea = false;
|
1902
|
+
this.popupHiddenByMapArea = false;
|
1903
|
+
}
|
1904
|
+
handleSelectFileType(e) {
|
1905
|
+
const node = e.target;
|
1906
|
+
this.selectedFileType = node.value;
|
1907
|
+
if (this.selectedFileType === 'PDF') {
|
1908
|
+
this.includeMap = this.pdfIncludeMap;
|
1909
|
+
if (!this.showExtraContentInImg) {
|
1910
|
+
this.includeExtraContent = this.pdfIncludeExtraContent;
|
1911
|
+
}
|
1912
|
+
}
|
1913
|
+
else {
|
1914
|
+
this.pdfIncludeMap = this.includeMap;
|
1915
|
+
this.includeMap = true;
|
1916
|
+
if (!this.showExtraContentInImg) {
|
1917
|
+
this.pdfIncludeExtraContent = this.includeExtraContent;
|
1918
|
+
this.includeMap = true;
|
1919
|
+
this.includeExtraContent = false;
|
1920
|
+
}
|
1921
|
+
}
|
895
1922
|
}
|
896
1923
|
get el() { return getElement(this); }
|
897
1924
|
static get watchers() { return {
|