clarity-visualize 0.6.41 → 0.6.42
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/build/clarity.visualize.js +245 -245
- package/build/clarity.visualize.min.js +1 -1
- package/build/clarity.visualize.module.js +245 -245
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/*! *****************************************************************************
|
|
6
6
|
Copyright (c) Microsoft Corporation.
|
|
7
7
|
|
|
8
8
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -55,7 +55,7 @@ function __generator(thisArg, body) {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
var _a
|
|
58
|
+
var _a;
|
|
59
59
|
var DataHelper = /** @class */ (function () {
|
|
60
60
|
function DataHelper(state) {
|
|
61
61
|
var _this = this;
|
|
@@ -86,24 +86,24 @@ var DataHelper = /** @class */ (function () {
|
|
|
86
86
|
else {
|
|
87
87
|
_this.metrics[m] += event.data[m];
|
|
88
88
|
}
|
|
89
|
-
_this.lean = key === 1 /*
|
|
89
|
+
_this.lean = key === 1 /* Playback */ && event.data[m] === 0 ? true : _this.lean;
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
for (var entry in _this.metrics) {
|
|
93
93
|
if (entry in DataHelper.METRIC_MAP) {
|
|
94
94
|
var m = _this.metrics[entry];
|
|
95
95
|
var map = DataHelper.METRIC_MAP[entry];
|
|
96
|
-
var unit = "unit" in map ? map.unit : "" /*
|
|
97
|
-
metricMarkup.push("<li><h2>"
|
|
96
|
+
var unit = "unit" in map ? map.unit : "" /* Empty */;
|
|
97
|
+
metricMarkup.push("<li><h2>" + _this.value(m, unit) + "<span>" + _this.key(unit) + "</span></h2>" + map.name + "</li>");
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
// Append region information to metadata
|
|
101
101
|
for (var name_1 in _this.regions) {
|
|
102
102
|
var r = _this.regions[name_1];
|
|
103
|
-
var className = (r.visibility === 10 /*
|
|
104
|
-
regionMarkup.push("<span class=\""
|
|
103
|
+
var className = (r.visibility === 10 /* Visible */ ? "visible" : (r.interaction === 20 /* Clicked */ ? "clicked" : "" /* Empty */));
|
|
104
|
+
regionMarkup.push("<span class=\"" + className + "\">" + name_1 + "</span>");
|
|
105
105
|
}
|
|
106
|
-
_this.state.options.metadata.innerHTML = "<ul>"
|
|
106
|
+
_this.state.options.metadata.innerHTML = "<ul>" + metricMarkup.join("" /* Empty */) + "</ul><div>" + regionMarkup.join("" /* Empty */) + "</div>";
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
this.key = function (unit) {
|
|
@@ -111,7 +111,7 @@ var DataHelper = /** @class */ (function () {
|
|
|
111
111
|
case "html-price":
|
|
112
112
|
case "ld-price":
|
|
113
113
|
case "cls":
|
|
114
|
-
return "" /*
|
|
114
|
+
return "" /* Empty */;
|
|
115
115
|
default: return unit;
|
|
116
116
|
}
|
|
117
117
|
};
|
|
@@ -136,17 +136,17 @@ var DataHelper = /** @class */ (function () {
|
|
|
136
136
|
this.regionMap[r.id] = r.name;
|
|
137
137
|
}
|
|
138
138
|
};
|
|
139
|
-
DataHelper.METRIC_MAP = (_a
|
|
140
|
-
_a
|
|
141
|
-
_a
|
|
142
|
-
_a
|
|
143
|
-
_a
|
|
144
|
-
_a
|
|
145
|
-
_a
|
|
146
|
-
_a
|
|
147
|
-
_a
|
|
148
|
-
_a
|
|
149
|
-
_a
|
|
139
|
+
DataHelper.METRIC_MAP = (_a = {},
|
|
140
|
+
_a[2 /* TotalBytes */] = { name: "Total Bytes", unit: "KB" },
|
|
141
|
+
_a[4 /* TotalCost */] = { name: "Total Cost", unit: "ms" },
|
|
142
|
+
_a[3 /* LayoutCost */] = { name: "Layout Cost", unit: "ms" },
|
|
143
|
+
_a[8 /* LargestPaint */] = { name: "LCP", unit: "s" },
|
|
144
|
+
_a[9 /* CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
|
|
145
|
+
_a[7 /* LongTaskCount */] = { name: "Long Tasks" },
|
|
146
|
+
_a[24 /* CartTotal */] = { name: "Cart Total", unit: "html-price" },
|
|
147
|
+
_a[13 /* ProductPrice */] = { name: "Product Price", unit: "ld-price" },
|
|
148
|
+
_a[6 /* ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
|
|
149
|
+
_a);
|
|
150
150
|
return DataHelper;
|
|
151
151
|
}());
|
|
152
152
|
|
|
@@ -170,7 +170,7 @@ function hash (input) {
|
|
|
170
170
|
return hash.toString(36);
|
|
171
171
|
}
|
|
172
172
|
|
|
173
|
-
var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /*
|
|
173
|
+
var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* ExcludeClassNames */.split("," /* Comma */);
|
|
174
174
|
var selectorMap = {};
|
|
175
175
|
function reset$k() {
|
|
176
176
|
selectorMap = {};
|
|
@@ -178,68 +178,68 @@ function reset$k() {
|
|
|
178
178
|
function get$1(input, type) {
|
|
179
179
|
var a = input.attributes;
|
|
180
180
|
var prefix = input.prefix ? input.prefix[type] : null;
|
|
181
|
-
var suffix = type === 0 /*
|
|
181
|
+
var suffix = type === 0 /* Alpha */ ? "" + "~" /* Tilde */ + (input.position - 1) : ":nth-of-type(" + input.position + ")";
|
|
182
182
|
switch (input.tag) {
|
|
183
183
|
case "STYLE":
|
|
184
184
|
case "TITLE":
|
|
185
185
|
case "LINK":
|
|
186
186
|
case "META":
|
|
187
|
-
case "*T" /*
|
|
188
|
-
case "*D" /*
|
|
189
|
-
return "" /*
|
|
187
|
+
case "*T" /* TextTag */:
|
|
188
|
+
case "*D" /* DocumentTag */:
|
|
189
|
+
return "" /* Empty */;
|
|
190
190
|
case "HTML":
|
|
191
|
-
return "HTML" /*
|
|
191
|
+
return "HTML" /* HTML */;
|
|
192
192
|
default:
|
|
193
193
|
if (prefix === null) {
|
|
194
|
-
return "" /*
|
|
194
|
+
return "" /* Empty */;
|
|
195
195
|
}
|
|
196
|
-
prefix = ""
|
|
197
|
-
input.tag = input.tag.indexOf("svg:" /*
|
|
198
|
-
var selector = ""
|
|
199
|
-
var id = "id" /*
|
|
200
|
-
var classes = input.tag !== "BODY" /*
|
|
196
|
+
prefix = "" + prefix + ">" /* Separator */;
|
|
197
|
+
input.tag = input.tag.indexOf("svg:" /* SvgPrefix */) === 0 ? input.tag.substr("svg:" /* SvgPrefix */.length) : input.tag;
|
|
198
|
+
var selector = "" + prefix + input.tag + suffix;
|
|
199
|
+
var id = "id" /* Id */ in a && a["id" /* Id */].length > 0 ? a["id" /* Id */] : null;
|
|
200
|
+
var classes = input.tag !== "BODY" /* BodyTag */ && "class" /* Class */ in a && a["class" /* Class */].length > 0 ? a["class" /* Class */].trim().split(/\s+/).filter(function (c) { return filter(c); }).join("." /* Period */) : null;
|
|
201
201
|
if (classes && classes.length > 0) {
|
|
202
|
-
if (type === 0 /*
|
|
202
|
+
if (type === 0 /* Alpha */) {
|
|
203
203
|
// In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
|
|
204
204
|
// If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
|
|
205
|
-
var key = ""
|
|
205
|
+
var key = "" + getDomPath(prefix) + input.tag + "." /* Dot */ + classes;
|
|
206
206
|
if (!(key in selectorMap)) {
|
|
207
207
|
selectorMap[key] = [];
|
|
208
208
|
}
|
|
209
209
|
if (selectorMap[key].indexOf(input.id) < 0) {
|
|
210
210
|
selectorMap[key].push(input.id);
|
|
211
211
|
}
|
|
212
|
-
selector = ""
|
|
212
|
+
selector = "" + key + "~" /* Tilde */ + selectorMap[key].indexOf(input.id);
|
|
213
213
|
}
|
|
214
214
|
else {
|
|
215
215
|
// In Beta mode, we continue to look at query selectors in context of the full page
|
|
216
|
-
selector = ""
|
|
216
|
+
selector = "" + prefix + input.tag + "." + classes + suffix;
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
219
|
// Update selector to use "id" field when available. There are two exceptions:
|
|
220
220
|
// (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
|
|
221
221
|
// (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
|
|
222
|
-
selector = id && filter(id) ? ""
|
|
222
|
+
selector = id && filter(id) ? "" + getDomPrefix(prefix) + "#" /* Hash */ + id : selector;
|
|
223
223
|
return selector;
|
|
224
224
|
}
|
|
225
225
|
}
|
|
226
226
|
function getDomPrefix(prefix) {
|
|
227
|
-
var shadowDomStart = prefix.lastIndexOf("*S" /*
|
|
228
|
-
var iframeDomStart = prefix.lastIndexOf(""
|
|
227
|
+
var shadowDomStart = prefix.lastIndexOf("*S" /* ShadowDomTag */);
|
|
228
|
+
var iframeDomStart = prefix.lastIndexOf("" + "iframe:" /* IFramePrefix */ + "HTML" /* HTML */);
|
|
229
229
|
var domStart = Math.max(shadowDomStart, iframeDomStart);
|
|
230
230
|
if (domStart < 0) {
|
|
231
|
-
return "" /*
|
|
231
|
+
return "" /* Empty */;
|
|
232
232
|
}
|
|
233
|
-
return prefix.substring(0, prefix.indexOf(">" /*
|
|
233
|
+
return prefix.substring(0, prefix.indexOf(">" /* Separator */, domStart) + 1);
|
|
234
234
|
}
|
|
235
235
|
function getDomPath(input) {
|
|
236
|
-
var parts = input.split(">" /*
|
|
236
|
+
var parts = input.split(">" /* Separator */);
|
|
237
237
|
for (var i = 0; i < parts.length; i++) {
|
|
238
|
-
var tIndex = parts[i].indexOf("~" /*
|
|
239
|
-
var dIndex = parts[i].indexOf("." /*
|
|
238
|
+
var tIndex = parts[i].indexOf("~" /* Tilde */);
|
|
239
|
+
var dIndex = parts[i].indexOf("." /* Dot */);
|
|
240
240
|
parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
|
|
241
241
|
}
|
|
242
|
-
return parts.join(">" /*
|
|
242
|
+
return parts.join(">" /* Separator */);
|
|
243
243
|
}
|
|
244
244
|
// Check if the given input string has digits or excluded class names
|
|
245
245
|
function filter(value) {
|
|
@@ -251,7 +251,7 @@ function filter(value) {
|
|
|
251
251
|
}
|
|
252
252
|
for (var i = 0; i < value.length; i++) {
|
|
253
253
|
var c = value.charCodeAt(i);
|
|
254
|
-
if (c >= 48 /*
|
|
254
|
+
if (c >= 48 /* Zero */ && c <= 57 /* Nine */) {
|
|
255
255
|
return false;
|
|
256
256
|
}
|
|
257
257
|
}
|
|
@@ -288,7 +288,7 @@ function getNode(id) {
|
|
|
288
288
|
}
|
|
289
289
|
return null;
|
|
290
290
|
}
|
|
291
|
-
function get
|
|
291
|
+
function get(node) {
|
|
292
292
|
var id = getId(node);
|
|
293
293
|
return id in values ? values[id] : null;
|
|
294
294
|
}
|
|
@@ -296,7 +296,7 @@ function lookup(hash) {
|
|
|
296
296
|
return hash in hashMap ? hashMap[hash] : null;
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
-
var helper = { hash: hash, selector: selector, get: get
|
|
299
|
+
var helper = { hash: hash, selector: selector, get: get, getNode: getNode, lookup: lookup };
|
|
300
300
|
|
|
301
301
|
var EnrichHelper = /** @class */ (function () {
|
|
302
302
|
function EnrichHelper() {
|
|
@@ -335,11 +335,11 @@ var EnrichHelper = /** @class */ (function () {
|
|
|
335
335
|
var input = { id: d.id, tag: d.tag, prefix: parent ? [parent.alpha, parent.beta] : null, position: node.position, attributes: attributes };
|
|
336
336
|
// Get stable selector
|
|
337
337
|
// We intentionally use "null" value for empty selectors to keep parity with v0.6.25 and before.
|
|
338
|
-
var selectorAlpha = helper.selector.get(input, 0 /*
|
|
338
|
+
var selectorAlpha = helper.selector.get(input, 0 /* Alpha */);
|
|
339
339
|
d.selectorAlpha = selectorAlpha.length > 0 ? selectorAlpha : null;
|
|
340
340
|
d.hashAlpha = selectorAlpha.length > 0 ? helper.hash(d.selectorAlpha) : null;
|
|
341
341
|
// Get beta selector
|
|
342
|
-
var selectorBeta = helper.selector.get(input, 1 /*
|
|
342
|
+
var selectorBeta = helper.selector.get(input, 1 /* Beta */);
|
|
343
343
|
d.selectorBeta = selectorBeta.length > 0 ? selectorBeta : null;
|
|
344
344
|
d.hashBeta = selectorBeta.length > 0 ? helper.hash(d.selectorBeta) : null;
|
|
345
345
|
/* Track state for future reference */
|
|
@@ -404,14 +404,14 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
404
404
|
this.clear = function () {
|
|
405
405
|
var doc = _this.state.window.document;
|
|
406
406
|
var win = _this.state.window;
|
|
407
|
-
var canvas = doc.getElementById("clarity-heatmap-canvas" /*
|
|
407
|
+
var canvas = doc.getElementById("clarity-heatmap-canvas" /* HeatmapCanvas */);
|
|
408
408
|
var de = doc.documentElement;
|
|
409
409
|
if (canvas) {
|
|
410
410
|
canvas.width = de.clientWidth;
|
|
411
411
|
canvas.height = de.clientHeight;
|
|
412
|
-
canvas.style.left = win.pageXOffset + "px" /*
|
|
413
|
-
canvas.style.top = win.pageYOffset + "px" /*
|
|
414
|
-
canvas.getContext("2d" /*
|
|
412
|
+
canvas.style.left = win.pageXOffset + "px" /* Pixel */;
|
|
413
|
+
canvas.style.top = win.pageYOffset + "px" /* Pixel */;
|
|
414
|
+
canvas.getContext("2d" /* Context */).clearRect(0, 0, canvas.width, canvas.height);
|
|
415
415
|
}
|
|
416
416
|
_this.reset();
|
|
417
417
|
};
|
|
@@ -420,13 +420,13 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
420
420
|
_this.scrollAvgFold = avgFold != null ? avgFold : _this.scrollAvgFold;
|
|
421
421
|
_this.addScrollMakers = addMarkers != null ? addMarkers : _this.addScrollMakers;
|
|
422
422
|
var canvas = _this.overlay();
|
|
423
|
-
var context = canvas.getContext("2d" /*
|
|
423
|
+
var context = canvas.getContext("2d" /* Context */);
|
|
424
424
|
var doc = _this.state.window.document;
|
|
425
425
|
var body = doc.body;
|
|
426
426
|
var de = doc.documentElement;
|
|
427
427
|
var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
|
|
428
|
-
canvas.height = Math.min(height, 40000 /*
|
|
429
|
-
canvas.style.top = 0 + "px" /*
|
|
428
|
+
canvas.height = Math.min(height, 40000 /* ScrollCanvasMaxHeight */);
|
|
429
|
+
canvas.style.top = 0 + "px" /* Pixel */;
|
|
430
430
|
if (canvas.width > 0 && canvas.height > 0) {
|
|
431
431
|
if (_this.scrollData) {
|
|
432
432
|
var grd = context.createLinearGradient(0, 0, 0, canvas.height);
|
|
@@ -434,9 +434,9 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
434
434
|
var currentCombination = _a[_i];
|
|
435
435
|
var huePercentView = 1 - (currentCombination.cumulativeSum / _this.scrollData[0].cumulativeSum);
|
|
436
436
|
var percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
|
|
437
|
-
var hue = huePercentView * 240 /*
|
|
437
|
+
var hue = huePercentView * 240 /* MaxHue */;
|
|
438
438
|
if (percentView <= 1) {
|
|
439
|
-
grd.addColorStop(percentView, "hsla("
|
|
439
|
+
grd.addColorStop(percentView, "hsla(" + hue + ", 100%, 50%, 0.6)");
|
|
440
440
|
}
|
|
441
441
|
}
|
|
442
442
|
// Fill with gradient
|
|
@@ -449,15 +449,15 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
449
449
|
}
|
|
450
450
|
};
|
|
451
451
|
this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
|
|
452
|
-
_this.addMarker(context, width, "Average Fold" /*
|
|
452
|
+
_this.addMarker(context, width, "Average Fold" /* AverageFold */, avgFold, 84 /* MarkerMediumWidth */);
|
|
453
453
|
var markers = [75, 50, 25];
|
|
454
454
|
var _loop_1 = function (marker) {
|
|
455
455
|
var closest = scrollMapInfo.reduce(function (prev, curr) {
|
|
456
456
|
return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
|
|
457
457
|
});
|
|
458
|
-
if (closest.percUsers >= marker - 2 /*
|
|
458
|
+
if (closest.percUsers >= marker - 2 /* MarkerRange */ && closest.percUsers <= marker + 2 /* MarkerRange */) {
|
|
459
459
|
var markerLine = (closest.scrollReachY / 100) * height;
|
|
460
|
-
_this.addMarker(context, width,
|
|
460
|
+
_this.addMarker(context, width, marker + "%", markerLine, 35 /* MarkerSmallWidth */);
|
|
461
461
|
}
|
|
462
462
|
};
|
|
463
463
|
for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
|
|
@@ -470,20 +470,20 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
470
470
|
context.moveTo(0, markerY);
|
|
471
471
|
context.lineTo(heatmapWidth, markerY);
|
|
472
472
|
context.setLineDash([2, 2]);
|
|
473
|
-
context.lineWidth = 1 /*
|
|
474
|
-
context.strokeStyle = "white" /*
|
|
473
|
+
context.lineWidth = 1 /* MarkerLineHeight */;
|
|
474
|
+
context.strokeStyle = "white" /* MarkerColor */;
|
|
475
475
|
context.stroke();
|
|
476
|
-
context.fillStyle = "#323130" /*
|
|
477
|
-
context.fillRect(0, (markerY - 32 /*
|
|
478
|
-
context.fillStyle = "white" /*
|
|
479
|
-
context.font = "500 12px Segoe UI" /*
|
|
480
|
-
context.fillText(label, 5 /*
|
|
476
|
+
context.fillStyle = "#323130" /* CanvasTextColor */;
|
|
477
|
+
context.fillRect(0, (markerY - 32 /* MarkerHeight */ / 2), markerWidth, 32 /* MarkerHeight */);
|
|
478
|
+
context.fillStyle = "white" /* MarkerColor */;
|
|
479
|
+
context.font = "500 12px Segoe UI" /* CanvasTextFont */;
|
|
480
|
+
context.fillText(label, 5 /* MarkerPadding */, markerY + 5 /* MarkerPadding */);
|
|
481
481
|
};
|
|
482
482
|
this.click = function (activity) {
|
|
483
483
|
_this.data = _this.data || activity;
|
|
484
484
|
var heat = _this.transform();
|
|
485
485
|
var canvas = _this.overlay();
|
|
486
|
-
var ctx = canvas.getContext("2d" /*
|
|
486
|
+
var ctx = canvas.getContext("2d" /* Context */);
|
|
487
487
|
if (canvas.width > 0 && canvas.height > 0) {
|
|
488
488
|
// To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
|
|
489
489
|
// Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
|
|
@@ -494,7 +494,7 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
494
494
|
for (var _i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
|
|
495
495
|
var entry = heat_1[_i];
|
|
496
496
|
ctx.globalAlpha = entry.a;
|
|
497
|
-
ctx.drawImage(ring, entry.x - 20 /*
|
|
497
|
+
ctx.drawImage(ring, entry.x - 20 /* Radius */, entry.y - 20 /* Radius */);
|
|
498
498
|
}
|
|
499
499
|
// Add color to the canvas based on alpha value of each pixel
|
|
500
500
|
var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
@@ -518,14 +518,14 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
518
518
|
var doc = _this.state.window.document;
|
|
519
519
|
var win = _this.state.window;
|
|
520
520
|
var de = doc.documentElement;
|
|
521
|
-
var canvas = doc.getElementById("clarity-heatmap-canvas" /*
|
|
521
|
+
var canvas = doc.getElementById("clarity-heatmap-canvas" /* HeatmapCanvas */);
|
|
522
522
|
if (canvas === null) {
|
|
523
|
-
canvas = doc.createElement("CANVAS" /*
|
|
524
|
-
canvas.id = "clarity-heatmap-canvas" /*
|
|
523
|
+
canvas = doc.createElement("CANVAS" /* Canvas */);
|
|
524
|
+
canvas.id = "clarity-heatmap-canvas" /* HeatmapCanvas */;
|
|
525
525
|
canvas.width = 0;
|
|
526
526
|
canvas.height = 0;
|
|
527
|
-
canvas.style.position = "absolute" /*
|
|
528
|
-
canvas.style.zIndex = ""
|
|
527
|
+
canvas.style.position = "absolute" /* Absolute */;
|
|
528
|
+
canvas.style.zIndex = "" + 2147483647 /* ZIndex */;
|
|
529
529
|
de.appendChild(canvas);
|
|
530
530
|
win.addEventListener("scroll", _this.redraw, true);
|
|
531
531
|
win.addEventListener("resize", _this.redraw, true);
|
|
@@ -537,23 +537,23 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
537
537
|
// Ensure canvas is positioned correctly
|
|
538
538
|
canvas.width = de.clientWidth;
|
|
539
539
|
canvas.height = de.clientHeight;
|
|
540
|
-
canvas.style.left = win.pageXOffset + "px" /*
|
|
541
|
-
canvas.style.top = win.pageYOffset + "px" /*
|
|
542
|
-
canvas.getContext("2d" /*
|
|
540
|
+
canvas.style.left = win.pageXOffset + "px" /* Pixel */;
|
|
541
|
+
canvas.style.top = win.pageYOffset + "px" /* Pixel */;
|
|
542
|
+
canvas.getContext("2d" /* Context */).clearRect(0, 0, canvas.width, canvas.height);
|
|
543
543
|
return canvas;
|
|
544
544
|
};
|
|
545
545
|
this.getRing = function () {
|
|
546
546
|
if (_this.offscreenRing === null) {
|
|
547
547
|
var doc = _this.state.window.document;
|
|
548
|
-
_this.offscreenRing = doc.createElement("CANVAS" /*
|
|
549
|
-
_this.offscreenRing.width = 20 /*
|
|
550
|
-
_this.offscreenRing.height = 20 /*
|
|
551
|
-
var ctx = _this.offscreenRing.getContext("2d" /*
|
|
552
|
-
ctx.shadowOffsetX = 20 /*
|
|
553
|
-
ctx.shadowBlur = 20 /*
|
|
554
|
-
ctx.shadowColor = "black" /*
|
|
548
|
+
_this.offscreenRing = doc.createElement("CANVAS" /* Canvas */);
|
|
549
|
+
_this.offscreenRing.width = 20 /* Radius */ * 2;
|
|
550
|
+
_this.offscreenRing.height = 20 /* Radius */ * 2;
|
|
551
|
+
var ctx = _this.offscreenRing.getContext("2d" /* Context */);
|
|
552
|
+
ctx.shadowOffsetX = 20 /* Radius */ * 2;
|
|
553
|
+
ctx.shadowBlur = 20 /* Radius */ / 2;
|
|
554
|
+
ctx.shadowColor = "black" /* Black */;
|
|
555
555
|
ctx.beginPath();
|
|
556
|
-
ctx.arc(-20 /*
|
|
556
|
+
ctx.arc(-20 /* Radius */, 20 /* Radius */, 20 /* Radius */ / 2, 0, Math.PI * 2, true);
|
|
557
557
|
ctx.closePath();
|
|
558
558
|
ctx.fill();
|
|
559
559
|
}
|
|
@@ -562,18 +562,18 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
562
562
|
this.getGradient = function () {
|
|
563
563
|
if (_this.gradientPixels === null) {
|
|
564
564
|
var doc = _this.state.window.document;
|
|
565
|
-
var offscreenGradient = doc.createElement("CANVAS" /*
|
|
565
|
+
var offscreenGradient = doc.createElement("CANVAS" /* Canvas */);
|
|
566
566
|
offscreenGradient.width = 1;
|
|
567
|
-
offscreenGradient.height = 256 /*
|
|
568
|
-
var ctx = offscreenGradient.getContext("2d" /*
|
|
569
|
-
var gradient = ctx.createLinearGradient(0, 0, 0, 256 /*
|
|
567
|
+
offscreenGradient.height = 256 /* Colors */;
|
|
568
|
+
var ctx = offscreenGradient.getContext("2d" /* Context */);
|
|
569
|
+
var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Colors */);
|
|
570
570
|
var step = 1 / HeatmapHelper.COLORS.length;
|
|
571
571
|
for (var i = 0; i < HeatmapHelper.COLORS.length; i++) {
|
|
572
572
|
gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
|
|
573
573
|
}
|
|
574
574
|
ctx.fillStyle = gradient;
|
|
575
|
-
ctx.fillRect(0, 0, 1, 256 /*
|
|
576
|
-
_this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /*
|
|
575
|
+
ctx.fillRect(0, 0, 1, 256 /* Colors */);
|
|
576
|
+
_this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Colors */);
|
|
577
577
|
}
|
|
578
578
|
return _this.gradientPixels;
|
|
579
579
|
};
|
|
@@ -582,14 +582,14 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
582
582
|
if (_this.timeout) {
|
|
583
583
|
clearTimeout(_this.timeout);
|
|
584
584
|
}
|
|
585
|
-
_this.timeout = setTimeout(_this.click, 30 /*
|
|
585
|
+
_this.timeout = setTimeout(_this.click, 30 /* Interval */);
|
|
586
586
|
}
|
|
587
587
|
else if (_this.scrollData) {
|
|
588
588
|
if (event.type != 'scroll') {
|
|
589
589
|
if (_this.timeout) {
|
|
590
590
|
clearTimeout(_this.timeout);
|
|
591
591
|
}
|
|
592
|
-
_this.timeout = setTimeout(_this.scroll, 30 /*
|
|
592
|
+
_this.timeout = setTimeout(_this.scroll, 30 /* Interval */);
|
|
593
593
|
}
|
|
594
594
|
}
|
|
595
595
|
};
|
|
@@ -607,9 +607,9 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
607
607
|
// Process clicks for only visible elements
|
|
608
608
|
if (_this.max === null || v) {
|
|
609
609
|
for (var i = 0; i < element.points; i++) {
|
|
610
|
-
var x = Math.round(r.left + (element.x[i] / 32767 /*
|
|
611
|
-
var y = Math.round(r.top + (element.y[i] / 32767 /*
|
|
612
|
-
var k = ""
|
|
610
|
+
var x = Math.round(r.left + (element.x[i] / 32767 /* ClickPrecision */) * r.width);
|
|
611
|
+
var y = Math.round(r.top + (element.y[i] / 32767 /* ClickPrecision */) * r.height);
|
|
612
|
+
var k = "" + x + "X" /* Separator */ + y + "X" /* Separator */ + (v ? 1 : 0);
|
|
613
613
|
points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
|
|
614
614
|
localMax = Math.max(points[k], localMax);
|
|
615
615
|
}
|
|
@@ -621,8 +621,8 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
621
621
|
// Once all points are accounted for, convert everything into absolute (x, y)
|
|
622
622
|
for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
|
|
623
623
|
var coordinates = _c[_b];
|
|
624
|
-
var parts = coordinates.split("X" /*
|
|
625
|
-
var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /*
|
|
624
|
+
var parts = coordinates.split("X" /* Separator */);
|
|
625
|
+
var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* AlphaBoost */, 1);
|
|
626
626
|
if (parts[2] === "1") {
|
|
627
627
|
output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
|
|
628
628
|
}
|
|
@@ -639,7 +639,7 @@ var HeatmapHelper = /** @class */ (function () {
|
|
|
639
639
|
for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
|
|
640
640
|
var e = elements_1[_i];
|
|
641
641
|
// Ignore if top element ends up being the canvas element we added for heatmap visualization
|
|
642
|
-
if (e.tagName === "CANVAS" /*
|
|
642
|
+
if (e.tagName === "CANVAS" /* Canvas */ || (e.id && e.id.indexOf("clarity-" /* ClarityPrefix */) === 0)) {
|
|
643
643
|
continue;
|
|
644
644
|
}
|
|
645
645
|
visibility = e === el;
|
|
@@ -690,8 +690,8 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
690
690
|
}
|
|
691
691
|
var canvas = _this.overlay();
|
|
692
692
|
if (canvas) {
|
|
693
|
-
canvas.style.left = data.x + "px" /*
|
|
694
|
-
canvas.style.top = data.y + "px" /*
|
|
693
|
+
canvas.style.left = data.x + "px" /* Pixel */;
|
|
694
|
+
canvas.style.top = data.y + "px" /* Pixel */;
|
|
695
695
|
canvas.width = de.clientWidth;
|
|
696
696
|
canvas.height = de.clientHeight;
|
|
697
697
|
}
|
|
@@ -708,13 +708,13 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
708
708
|
};
|
|
709
709
|
this.visibility = function (event) {
|
|
710
710
|
var doc = _this.state.window.document;
|
|
711
|
-
if (doc && doc.documentElement && event.data.visible !== "visible" /*
|
|
712
|
-
doc.documentElement.style.backgroundColor = "black" /*
|
|
713
|
-
doc.documentElement.style.opacity = "0.4" /*
|
|
711
|
+
if (doc && doc.documentElement && event.data.visible !== "visible" /* Visible */) {
|
|
712
|
+
doc.documentElement.style.backgroundColor = "black" /* Black */;
|
|
713
|
+
doc.documentElement.style.opacity = "0.4" /* HiddenOpacity */;
|
|
714
714
|
}
|
|
715
715
|
else {
|
|
716
|
-
doc.documentElement.style.backgroundColor = "transparent" /*
|
|
717
|
-
doc.documentElement.style.opacity = "1" /*
|
|
716
|
+
doc.documentElement.style.backgroundColor = "transparent" /* Transparent */;
|
|
717
|
+
doc.documentElement.style.opacity = "1" /* VisibleOpacity */;
|
|
718
718
|
}
|
|
719
719
|
};
|
|
720
720
|
this.input = function (event) {
|
|
@@ -749,12 +749,12 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
749
749
|
var type = event.event;
|
|
750
750
|
var doc = _this.state.window.document;
|
|
751
751
|
var de = doc.documentElement;
|
|
752
|
-
var p = doc.getElementById("clarity-pointer" /*
|
|
753
|
-
var pointerWidth = 29 /*
|
|
754
|
-
var pointerHeight = 38 /*
|
|
752
|
+
var p = doc.getElementById("clarity-pointer" /* PointerLayer */);
|
|
753
|
+
var pointerWidth = 29 /* PointerWidth */;
|
|
754
|
+
var pointerHeight = 38 /* PointerHeight */;
|
|
755
755
|
if (p === null) {
|
|
756
756
|
p = doc.createElement("DIV");
|
|
757
|
-
p.id = "clarity-pointer" /*
|
|
757
|
+
p.id = "clarity-pointer" /* PointerLayer */;
|
|
758
758
|
de.appendChild(p);
|
|
759
759
|
// Add custom styles
|
|
760
760
|
var style = doc.createElement("STYLE");
|
|
@@ -763,62 +763,62 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
763
763
|
"@keyframes pulsate-two { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(5, 5); opacity: 0; } }" +
|
|
764
764
|
"@keyframes pulsate-touch { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }" +
|
|
765
765
|
"@keyframes disappear { 90% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, 1.3); opacity: 0; } }" +
|
|
766
|
-
"#"
|
|
767
|
-
"#"
|
|
768
|
-
"."
|
|
769
|
-
"."
|
|
770
|
-
"."
|
|
771
|
-
"."
|
|
772
|
-
"."
|
|
773
|
-
"."
|
|
774
|
-
"."
|
|
766
|
+
("#" + "clarity-interaction-canvas" /* InteractionCanvas */ + " { position: absolute; left: 0; top: 0; z-index: " + 2147483647 /* ZIndex */ + "; background: none; }") +
|
|
767
|
+
("#" + "clarity-pointer" /* PointerLayer */ + " { position: absolute; z-index: " + 2147483647 /* ZIndex */ + "; url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Pointer */ + ") no-repeat left center; width: " + pointerWidth + "px; height: " + pointerHeight + "px; }") +
|
|
768
|
+
("." + "clarity-click" /* ClickLayer */ + ", ." + "clarity-click-ring" /* ClickRing */ + ", ." + "clarity-touch" /* TouchLayer */ + ", ." + "clarity-touch-ring" /* TouchRing */ + " { position: absolute; z-index: " + 2147483647 /* ZIndex */ + "; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: " + 22 /* ClickRadius */ + "px; height: " + 22 /* ClickRadius */ + "px;}") +
|
|
769
|
+
("." + "clarity-click-ring" /* ClickRing */ + " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }") +
|
|
770
|
+
("." + "clarity-touch" /* TouchLayer */ + " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
|
|
771
|
+
("." + "clarity-touch-ring" /* TouchRing */ + " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
|
|
772
|
+
("." + "clarity-pointer-click" /* PointerClickLayer */ + " { background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Click */ + "); }") +
|
|
773
|
+
("." + "clarity-pointer-none" /* PointerNone */ + " { background: none; }") +
|
|
774
|
+
("." + "clarity-pointer-move" /* PointerMove */ + " { background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Pointer */ + "); }");
|
|
775
775
|
p.appendChild(style);
|
|
776
776
|
}
|
|
777
|
-
p.style.left = (data.x - 4 /*
|
|
778
|
-
p.style.top = (data.y - 4 /*
|
|
777
|
+
p.style.left = (data.x - 4 /* PointerOffset */) + "px" /* Pixel */;
|
|
778
|
+
p.style.top = (data.y - 4 /* PointerOffset */) + "px" /* Pixel */;
|
|
779
779
|
var title = "Pointer";
|
|
780
780
|
switch (type) {
|
|
781
|
-
case 9 /*
|
|
781
|
+
case 9 /* Click */:
|
|
782
782
|
title = "Click";
|
|
783
783
|
_this.drawClick(doc, data.x, data.y, title);
|
|
784
|
-
p.className = "clarity-pointer-none" /*
|
|
784
|
+
p.className = "clarity-pointer-none" /* PointerNone */;
|
|
785
785
|
break;
|
|
786
|
-
case 16 /*
|
|
786
|
+
case 16 /* DoubleClick */:
|
|
787
787
|
title = "Click";
|
|
788
788
|
_this.drawClick(doc, data.x, data.y, title);
|
|
789
|
-
p.className = "clarity-pointer-none" /*
|
|
789
|
+
p.className = "clarity-pointer-none" /* PointerNone */;
|
|
790
790
|
break;
|
|
791
|
-
case 17 /*
|
|
792
|
-
case 18 /*
|
|
793
|
-
case 20 /*
|
|
791
|
+
case 17 /* TouchStart */:
|
|
792
|
+
case 18 /* TouchEnd */:
|
|
793
|
+
case 20 /* TouchCancel */:
|
|
794
794
|
title = "Touch";
|
|
795
795
|
_this.drawTouch(doc, data.x, data.y, title);
|
|
796
|
-
p.className = "clarity-pointer-none" /*
|
|
796
|
+
p.className = "clarity-pointer-none" /* PointerNone */;
|
|
797
797
|
break;
|
|
798
|
-
case 19 /*
|
|
798
|
+
case 19 /* TouchMove */:
|
|
799
799
|
title = "Touch Move";
|
|
800
|
-
p.className = "clarity-pointer-none" /*
|
|
800
|
+
p.className = "clarity-pointer-none" /* PointerNone */;
|
|
801
801
|
break;
|
|
802
|
-
case 12 /*
|
|
802
|
+
case 12 /* MouseMove */:
|
|
803
803
|
title = "Mouse Move";
|
|
804
|
-
p.className = "clarity-pointer-move" /*
|
|
804
|
+
p.className = "clarity-pointer-move" /* PointerMove */;
|
|
805
805
|
_this.addPoint({ time: event.time, x: data.x, y: data.y });
|
|
806
806
|
_this.targetId = data.target;
|
|
807
807
|
break;
|
|
808
808
|
default:
|
|
809
|
-
p.className = "clarity-pointer-move" /*
|
|
809
|
+
p.className = "clarity-pointer-move" /* PointerMove */;
|
|
810
810
|
break;
|
|
811
811
|
}
|
|
812
|
-
p.setAttribute("title" /*
|
|
812
|
+
p.setAttribute("title" /* Title */, title + " (" + data.x + "px" /* Pixel */ + ", " + data.y + "px" /* Pixel */ + ")");
|
|
813
813
|
};
|
|
814
814
|
this.hover = function () {
|
|
815
815
|
if (_this.targetId && _this.targetId !== _this.hoverId) {
|
|
816
816
|
var depth = 0;
|
|
817
817
|
// First, remove any previous hover class assignments
|
|
818
818
|
var hoverNode = _this.hoverId ? _this.layout.element(_this.hoverId) : null;
|
|
819
|
-
while (hoverNode && depth < 7 /*
|
|
819
|
+
while (hoverNode && depth < 7 /* HoverDepth */) {
|
|
820
820
|
if ("removeAttribute" in hoverNode) {
|
|
821
|
-
hoverNode.removeAttribute("clarity-hover" /*
|
|
821
|
+
hoverNode.removeAttribute("clarity-hover" /* HoverAttribute */);
|
|
822
822
|
}
|
|
823
823
|
hoverNode = hoverNode.parentElement;
|
|
824
824
|
depth++;
|
|
@@ -826,9 +826,9 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
826
826
|
// Then, add hover class on elements that are below the pointer
|
|
827
827
|
depth = 0;
|
|
828
828
|
var targetNode = _this.targetId ? _this.layout.element(_this.targetId) : null;
|
|
829
|
-
while (targetNode && depth < 7 /*
|
|
829
|
+
while (targetNode && depth < 7 /* HoverDepth */) {
|
|
830
830
|
if ("setAttribute" in targetNode) {
|
|
831
|
-
targetNode.setAttribute("clarity-hover" /*
|
|
831
|
+
targetNode.setAttribute("clarity-hover" /* HoverAttribute */, "" /* Empty */);
|
|
832
832
|
}
|
|
833
833
|
targetNode = targetNode.parentElement;
|
|
834
834
|
depth++;
|
|
@@ -849,18 +849,18 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
849
849
|
this.drawTouch = function (doc, x, y, title) {
|
|
850
850
|
var de = doc.documentElement;
|
|
851
851
|
var touch = doc.createElement("DIV");
|
|
852
|
-
touch.className = "clarity-touch" /*
|
|
853
|
-
touch.setAttribute("title" /*
|
|
854
|
-
touch.style.left = (x - 22 /*
|
|
855
|
-
touch.style.top = (y - 22 /*
|
|
852
|
+
touch.className = "clarity-touch" /* TouchLayer */;
|
|
853
|
+
touch.setAttribute("title" /* Title */, title + " (" + x + "px" /* Pixel */ + ", " + y + "px" /* Pixel */ + ")");
|
|
854
|
+
touch.style.left = (x - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
|
|
855
|
+
touch.style.top = (y - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
|
|
856
856
|
touch.style.animation = "disappear 1 1s";
|
|
857
857
|
touch.style.animationFillMode = "forwards";
|
|
858
858
|
de.appendChild(touch);
|
|
859
859
|
// First pulsating ring
|
|
860
860
|
var ringOne = touch.cloneNode();
|
|
861
|
-
ringOne.className = "clarity-touch-ring" /*
|
|
862
|
-
ringOne.style.left = "-0.5" + "px" /*
|
|
863
|
-
ringOne.style.top = "-0.5" + "px" /*
|
|
861
|
+
ringOne.className = "clarity-touch-ring" /* TouchRing */;
|
|
862
|
+
ringOne.style.left = "-0.5" + "px" /* Pixel */;
|
|
863
|
+
ringOne.style.top = "-0.5" + "px" /* Pixel */;
|
|
864
864
|
ringOne.style.animation = "pulsate-touch 1 1s";
|
|
865
865
|
ringOne.style.animationFillMode = "forwards";
|
|
866
866
|
touch.appendChild(ringOne);
|
|
@@ -868,16 +868,16 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
868
868
|
this.drawClick = function (doc, x, y, title) {
|
|
869
869
|
var de = doc.documentElement;
|
|
870
870
|
var click = doc.createElement("DIV");
|
|
871
|
-
click.className = "clarity-click" /*
|
|
872
|
-
click.setAttribute("title" /*
|
|
873
|
-
click.style.left = (x - 22 /*
|
|
874
|
-
click.style.top = (y - 22 /*
|
|
871
|
+
click.className = "clarity-click" /* ClickLayer */;
|
|
872
|
+
click.setAttribute("title" /* Title */, title + " (" + x + "px" /* Pixel */ + ", " + y + "px" /* Pixel */ + ")");
|
|
873
|
+
click.style.left = (x - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
|
|
874
|
+
click.style.top = (y - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
|
|
875
875
|
de.appendChild(click);
|
|
876
876
|
// First pulsating ring
|
|
877
877
|
var ringOne = click.cloneNode();
|
|
878
|
-
ringOne.className = "clarity-click-ring" /*
|
|
879
|
-
ringOne.style.left = "-0.5" + "px" /*
|
|
880
|
-
ringOne.style.top = "-0.5" + "px" /*
|
|
878
|
+
ringOne.className = "clarity-click-ring" /* ClickRing */;
|
|
879
|
+
ringOne.style.left = "-0.5" + "px" /* Pixel */;
|
|
880
|
+
ringOne.style.top = "-0.5" + "px" /* Pixel */;
|
|
881
881
|
ringOne.style.animation = "pulsate-one 1 1s";
|
|
882
882
|
ringOne.style.animationFillMode = "forwards";
|
|
883
883
|
click.appendChild(ringOne);
|
|
@@ -886,9 +886,9 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
886
886
|
ringTwo.style.animation = "pulsate-two 1 1s";
|
|
887
887
|
click.appendChild(ringTwo);
|
|
888
888
|
// Play sound
|
|
889
|
-
if (typeof Audio !== "undefined" /*
|
|
889
|
+
if (typeof Audio !== "undefined" /* Undefined */) {
|
|
890
890
|
if (_this.clickAudio === null) {
|
|
891
|
-
_this.clickAudio = new Audio("data:video/webm;base64,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" /*
|
|
891
|
+
_this.clickAudio = new Audio("data:video/webm;base64,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" /* Sound */);
|
|
892
892
|
click.appendChild(_this.clickAudio);
|
|
893
893
|
}
|
|
894
894
|
_this.clickAudio.play();
|
|
@@ -898,10 +898,10 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
898
898
|
// Create canvas for visualizing interactions
|
|
899
899
|
var doc = _this.state.window.document;
|
|
900
900
|
var de = doc.documentElement;
|
|
901
|
-
var canvas = doc.getElementById("clarity-interaction-canvas" /*
|
|
901
|
+
var canvas = doc.getElementById("clarity-interaction-canvas" /* InteractionCanvas */);
|
|
902
902
|
if (canvas === null) {
|
|
903
903
|
canvas = doc.createElement("canvas");
|
|
904
|
-
canvas.id = "clarity-interaction-canvas" /*
|
|
904
|
+
canvas.id = "clarity-interaction-canvas" /* InteractionCanvas */;
|
|
905
905
|
canvas.width = 0;
|
|
906
906
|
canvas.height = 0;
|
|
907
907
|
de.appendChild(canvas);
|
|
@@ -917,14 +917,14 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
917
917
|
for (var i = _this.points.length - 1; i > 0; i--) {
|
|
918
918
|
// Each pixel in the trail has a pixel life of 3s. The only exception to this is if the user scrolled.
|
|
919
919
|
// We reset the trail after every scroll event to avoid drawing weird looking trail.
|
|
920
|
-
if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /*
|
|
920
|
+
if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* PixelLife */) {
|
|
921
921
|
p.push(_this.points[i]);
|
|
922
922
|
}
|
|
923
923
|
else {
|
|
924
924
|
break;
|
|
925
925
|
}
|
|
926
926
|
}
|
|
927
|
-
return p.slice(0, 75 /*
|
|
927
|
+
return p.slice(0, 75 /* MaxTrailPoints */);
|
|
928
928
|
};
|
|
929
929
|
this.trail = function (now) {
|
|
930
930
|
var canvas = _this.overlay();
|
|
@@ -953,9 +953,9 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
953
953
|
gradient.addColorStop(1, _this.color(currentFactor));
|
|
954
954
|
gradient.addColorStop(0, _this.color(lastFactor));
|
|
955
955
|
// Line width of the trail shrinks as the position of the point goes farther away.
|
|
956
|
-
ctx.lineWidth = 6 /*
|
|
957
|
-
ctx.lineCap = "round" /*
|
|
958
|
-
ctx.lineJoin = "round" /*
|
|
956
|
+
ctx.lineWidth = 6 /* TrailWidth */ * currentFactor;
|
|
957
|
+
ctx.lineCap = "round" /* Round */;
|
|
958
|
+
ctx.lineJoin = "round" /* Round */;
|
|
959
959
|
ctx.strokeStyle = gradient;
|
|
960
960
|
ctx.beginPath();
|
|
961
961
|
// The coordinates need to be relative to where canvas is rendered.
|
|
@@ -981,7 +981,7 @@ var InteractionHelper = /** @class */ (function () {
|
|
|
981
981
|
for (var i = 0; i < 3; i++) {
|
|
982
982
|
c[i] = Math.round(e[i] + factor * (s[i] - e[i]));
|
|
983
983
|
}
|
|
984
|
-
return "rgba("
|
|
984
|
+
return "rgba(" + c[0] + ", " + c[1] + ", " + c[2] + ", " + factor + ")";
|
|
985
985
|
};
|
|
986
986
|
// Reference: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
|
|
987
987
|
this.curve = function (path) {
|
|
@@ -1061,10 +1061,10 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1061
1061
|
_this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
|
|
1062
1062
|
};
|
|
1063
1063
|
this.resize = function (el, width, height) {
|
|
1064
|
-
if (el && el.nodeType === 1 /*
|
|
1065
|
-
el.style.width = width + "px" /*
|
|
1066
|
-
el.style.height = height + "px" /*
|
|
1067
|
-
el.style.boxSizing = "border-box" /*
|
|
1064
|
+
if (el && el.nodeType === 1 /* ELEMENT_NODE */ && width && height) {
|
|
1065
|
+
el.style.width = width + "px" /* Pixel */;
|
|
1066
|
+
el.style.height = height + "px" /* Pixel */;
|
|
1067
|
+
el.style.boxSizing = "border-box" /* BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
|
|
1068
1068
|
}
|
|
1069
1069
|
};
|
|
1070
1070
|
this.element = function (nodeId) {
|
|
@@ -1078,7 +1078,7 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1078
1078
|
if (!event) return [3 /*break*/, 2];
|
|
1079
1079
|
doc = this.state.window.document;
|
|
1080
1080
|
if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
|
|
1081
|
-
doc.documentElement.style.visibility = "hidden" /*
|
|
1081
|
+
doc.documentElement.style.visibility = "hidden" /* Hidden */;
|
|
1082
1082
|
// Render all DOM events to reconstruct the page
|
|
1083
1083
|
this.markup(event);
|
|
1084
1084
|
// Wait on all stylesheets to finish loading
|
|
@@ -1087,7 +1087,7 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1087
1087
|
// Wait on all stylesheets to finish loading
|
|
1088
1088
|
_a.sent();
|
|
1089
1089
|
// Toggle back the visibility of target window
|
|
1090
|
-
doc.documentElement.style.visibility = "visible" /*
|
|
1090
|
+
doc.documentElement.style.visibility = "visible" /* Visible */;
|
|
1091
1091
|
_a.label = 2;
|
|
1092
1092
|
case 2: return [2 /*return*/];
|
|
1093
1093
|
}
|
|
@@ -1112,13 +1112,13 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1112
1112
|
var pivot = _this.element(node.previous);
|
|
1113
1113
|
var insert = _this.insertAfter;
|
|
1114
1114
|
var tag = node.tag;
|
|
1115
|
-
if (tag && tag.indexOf("iframe:" /*
|
|
1116
|
-
tag = node.tag.substr("iframe:" /*
|
|
1115
|
+
if (tag && tag.indexOf("iframe:" /* IFramePrefix */) === 0) {
|
|
1116
|
+
tag = node.tag.substr("iframe:" /* IFramePrefix */.length);
|
|
1117
1117
|
}
|
|
1118
1118
|
switch (tag) {
|
|
1119
|
-
case "*D" /*
|
|
1119
|
+
case "*D" /* DocumentTag */:
|
|
1120
1120
|
var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
|
|
1121
|
-
if (tagDoc && tagDoc === doc && type === 5 /*
|
|
1121
|
+
if (tagDoc && tagDoc === doc && type === 5 /* Discover */) {
|
|
1122
1122
|
_this.reset();
|
|
1123
1123
|
}
|
|
1124
1124
|
if (typeof XMLSerializer !== "undefined" && tagDoc) {
|
|
@@ -1127,13 +1127,13 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1127
1127
|
tagDoc.close();
|
|
1128
1128
|
}
|
|
1129
1129
|
break;
|
|
1130
|
-
case "*P" /*
|
|
1130
|
+
case "*P" /* PolyfillShadowDomTag */:
|
|
1131
1131
|
// In case of polyfill, map shadow dom to it's parent for rendering purposes
|
|
1132
1132
|
// All its children should be inserted as regular children to the parent node.
|
|
1133
1133
|
_this.nodes[node.id] = parent_1;
|
|
1134
1134
|
_this.addToHashMap(node, parent_1);
|
|
1135
1135
|
break;
|
|
1136
|
-
case "*S" /*
|
|
1136
|
+
case "*S" /* ShadowDomTag */:
|
|
1137
1137
|
if (parent_1) {
|
|
1138
1138
|
var shadowRoot = _this.element(node.id);
|
|
1139
1139
|
shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
|
|
@@ -1142,10 +1142,10 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1142
1142
|
// Support for adoptedStyleSheet is limited and not available in all browsers.
|
|
1143
1143
|
// To ensure that we can replay session in any browser, we turn adoptedStyleSheets from recording
|
|
1144
1144
|
// into classic style tags at the playback time.
|
|
1145
|
-
if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /*
|
|
1145
|
+
if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /* AdoptedStyleSheet */) {
|
|
1146
1146
|
shadowStyle = shadowRoot.firstChild;
|
|
1147
1147
|
}
|
|
1148
|
-
shadowStyle.id = "clarity-adopted-style" /*
|
|
1148
|
+
shadowStyle.id = "clarity-adopted-style" /* AdoptedStyleSheet */;
|
|
1149
1149
|
shadowStyle.textContent = node.attributes["style"];
|
|
1150
1150
|
shadowRoot.appendChild(shadowStyle);
|
|
1151
1151
|
}
|
|
@@ -1153,16 +1153,16 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1153
1153
|
_this.addToHashMap(node, shadowRoot);
|
|
1154
1154
|
}
|
|
1155
1155
|
break;
|
|
1156
|
-
case "*T" /*
|
|
1156
|
+
case "*T" /* TextTag */:
|
|
1157
1157
|
var textElement = _this.element(node.id);
|
|
1158
1158
|
textElement = textElement ? textElement : doc.createTextNode(null);
|
|
1159
1159
|
textElement.nodeValue = node.value;
|
|
1160
1160
|
insert(node, parent_1, textElement, pivot);
|
|
1161
1161
|
break;
|
|
1162
|
-
case "*M" /*
|
|
1162
|
+
case "*M" /* SuspendMutationTag */:
|
|
1163
1163
|
var suspendedElement = _this.element(node.id);
|
|
1164
1164
|
if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
|
|
1165
|
-
suspendedElement.setAttribute("data-clarity-suspend" /*
|
|
1165
|
+
suspendedElement.setAttribute("data-clarity-suspend" /* Suspend */, "" /* Empty */);
|
|
1166
1166
|
}
|
|
1167
1167
|
break;
|
|
1168
1168
|
case "HTML":
|
|
@@ -1170,7 +1170,7 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1170
1170
|
if (htmlDoc !== null) {
|
|
1171
1171
|
var docElement = _this.element(node.id);
|
|
1172
1172
|
if (docElement === null) {
|
|
1173
|
-
var newDoc = htmlDoc.implementation.createHTMLDocument("" /*
|
|
1173
|
+
var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Empty */);
|
|
1174
1174
|
docElement = newDoc.documentElement;
|
|
1175
1175
|
var p = htmlDoc.importNode(docElement, true);
|
|
1176
1176
|
htmlDoc.replaceChild(p, htmlDoc.documentElement);
|
|
@@ -1183,8 +1183,8 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1183
1183
|
}
|
|
1184
1184
|
_this.setAttributes(htmlDoc.documentElement, node);
|
|
1185
1185
|
// If we are still processing discover events, keep the markup hidden until we are done
|
|
1186
|
-
if (type === 5 /*
|
|
1187
|
-
htmlDoc.documentElement.style.visibility = "hidden" /*
|
|
1186
|
+
if (type === 5 /* Discover */ && !parent_1) {
|
|
1187
|
+
htmlDoc.documentElement.style.visibility = "hidden" /* Hidden */;
|
|
1188
1188
|
}
|
|
1189
1189
|
_this.nodes[node.id] = htmlDoc.documentElement;
|
|
1190
1190
|
_this.addToHashMap(node, htmlDoc.documentElement);
|
|
@@ -1194,9 +1194,9 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1194
1194
|
var headElement = _this.element(node.id);
|
|
1195
1195
|
if (headElement === null) {
|
|
1196
1196
|
headElement = doc.createElement(node.tag);
|
|
1197
|
-
if (node.attributes && "*B" /*
|
|
1197
|
+
if (node.attributes && "*B" /* Base */ in node.attributes) {
|
|
1198
1198
|
var base = doc.createElement("base");
|
|
1199
|
-
base.href = node.attributes["*B" /*
|
|
1199
|
+
base.href = node.attributes["*B" /* Base */];
|
|
1200
1200
|
headElement.appendChild(base);
|
|
1201
1201
|
}
|
|
1202
1202
|
// Add custom styles to assist with visualization
|
|
@@ -1264,8 +1264,8 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1264
1264
|
var sheet = node.sheet;
|
|
1265
1265
|
var cssRules = sheet ? sheet.cssRules : [];
|
|
1266
1266
|
for (var i = 0; i < cssRules.length; i++) {
|
|
1267
|
-
if (cssRules[i].cssText.indexOf(":hover" /*
|
|
1268
|
-
var css = cssRules[i].cssText.replace(/:hover/g, "["
|
|
1267
|
+
if (cssRules[i].cssText.indexOf(":hover" /* Hover */) >= 0) {
|
|
1268
|
+
var css = cssRules[i].cssText.replace(/:hover/g, "[" + "clarity-hover" /* CustomHover */ + "]");
|
|
1269
1269
|
sheet.removeRule(i);
|
|
1270
1270
|
sheet.insertRule(css, i);
|
|
1271
1271
|
}
|
|
@@ -1277,16 +1277,16 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1277
1277
|
}
|
|
1278
1278
|
};
|
|
1279
1279
|
this.createElement = function (doc, tag) {
|
|
1280
|
-
if (tag && tag.indexOf("svg:" /*
|
|
1281
|
-
return doc.createElementNS("http://www.w3.org/2000/svg" /*
|
|
1280
|
+
if (tag && tag.indexOf("svg:" /* SvgPrefix */) === 0) {
|
|
1281
|
+
return doc.createElementNS("http://www.w3.org/2000/svg" /* SvgNamespace */, tag.substr("svg:" /* SvgPrefix */.length));
|
|
1282
1282
|
}
|
|
1283
1283
|
try {
|
|
1284
1284
|
return doc.createElement(tag);
|
|
1285
1285
|
}
|
|
1286
1286
|
catch (ex) {
|
|
1287
1287
|
// We log the warning on non-standard markup but continue with the visualization
|
|
1288
|
-
console.warn("Exception encountered while creating element "
|
|
1289
|
-
return doc.createElement("clarity-unknown" /*
|
|
1288
|
+
console.warn("Exception encountered while creating element " + tag + ": " + ex);
|
|
1289
|
+
return doc.createElement("clarity-unknown" /* UnknownTag */);
|
|
1290
1290
|
}
|
|
1291
1291
|
};
|
|
1292
1292
|
this.insertAfter = function (data, parent, node, previous) {
|
|
@@ -1302,7 +1302,7 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1302
1302
|
this.firstChild = function (node) {
|
|
1303
1303
|
var child = node.firstChild;
|
|
1304
1304
|
// BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
|
|
1305
|
-
if (child && child.nodeType === 1 /*
|
|
1305
|
+
if (child && child.nodeType === 1 /* ELEMENT_NODE */ && child.tagName === "BASE" /* BaseTag */) {
|
|
1306
1306
|
return child.nextSibling;
|
|
1307
1307
|
}
|
|
1308
1308
|
return child;
|
|
@@ -1328,17 +1328,17 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1328
1328
|
var attributes = data.attributes || {};
|
|
1329
1329
|
var sameorigin = false;
|
|
1330
1330
|
// Clarity attributes
|
|
1331
|
-
attributes["data-clarity-id" /*
|
|
1332
|
-
attributes["data-clarity-hashalpha" /*
|
|
1333
|
-
attributes["data-clarity-hashbeta" /*
|
|
1334
|
-
var tag = node.nodeType === 1 /*
|
|
1331
|
+
attributes["data-clarity-id" /* Id */] = "" + data.id;
|
|
1332
|
+
attributes["data-clarity-hashalpha" /* HashAlpha */] = "" + data.hashAlpha;
|
|
1333
|
+
attributes["data-clarity-hashbeta" /* HashBeta */] = "" + data.hashBeta;
|
|
1334
|
+
var tag = node.nodeType === 1 /* ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
|
|
1335
1335
|
// First remove all its existing attributes
|
|
1336
1336
|
if (node.attributes) {
|
|
1337
1337
|
var length_1 = node.attributes.length;
|
|
1338
1338
|
while (node.attributes && length_1 > 0) {
|
|
1339
1339
|
// Do not remove "clarity-hover" attribute and let it be managed by interaction module
|
|
1340
1340
|
// This helps avoid flickers during visualization
|
|
1341
|
-
if (node.attributes[0].name !== "clarity-hover" /*
|
|
1341
|
+
if (node.attributes[0].name !== "clarity-hover" /* HoverAttribute */) {
|
|
1342
1342
|
node.removeAttribute(node.attributes[0].name);
|
|
1343
1343
|
}
|
|
1344
1344
|
length_1--;
|
|
@@ -1352,22 +1352,22 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1352
1352
|
if (attribute.indexOf("xlink:") === 0) {
|
|
1353
1353
|
node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
|
|
1354
1354
|
}
|
|
1355
|
-
else if (attribute.indexOf("*O" /*
|
|
1355
|
+
else if (attribute.indexOf("*O" /* SameOrigin */) === 0) {
|
|
1356
1356
|
sameorigin = true;
|
|
1357
1357
|
}
|
|
1358
1358
|
else if (attribute.indexOf("*") === 0) {
|
|
1359
1359
|
// Do nothing if we encounter internal Clarity attributes
|
|
1360
1360
|
}
|
|
1361
|
-
else if (tag === "iframe" /*
|
|
1362
|
-
node.setAttribute("data-clarity-"
|
|
1361
|
+
else if (tag === "iframe" /* IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
|
|
1362
|
+
node.setAttribute("data-clarity-" + attribute, v);
|
|
1363
1363
|
}
|
|
1364
|
-
else if (tag === "img" /*
|
|
1365
|
-
node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /*
|
|
1366
|
-
var size = "l" /*
|
|
1364
|
+
else if (tag === "img" /* ImageTag */ && attribute.indexOf("src") === 0 && (v === null || v.length === 0)) {
|
|
1365
|
+
node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Transparent */);
|
|
1366
|
+
var size = "l" /* Large */;
|
|
1367
1367
|
if (data.width) {
|
|
1368
|
-
size = data.width <= 200 /*
|
|
1368
|
+
size = data.width <= 200 /* Medium */ ? "m" /* Medium */ : (data.width <= 75 /* Small */ ? "s" /* Small */ : size);
|
|
1369
1369
|
}
|
|
1370
|
-
node.setAttribute("data-clarity-hide" /*
|
|
1370
|
+
node.setAttribute("data-clarity-hide" /* Hide */, size);
|
|
1371
1371
|
}
|
|
1372
1372
|
else {
|
|
1373
1373
|
node.setAttribute(attribute, v);
|
|
@@ -1379,29 +1379,29 @@ var LayoutHelper = /** @class */ (function () {
|
|
|
1379
1379
|
}
|
|
1380
1380
|
}
|
|
1381
1381
|
}
|
|
1382
|
-
if (sameorigin === false && tag === "iframe" /*
|
|
1383
|
-
node.setAttribute("data-clarity-unavailable" /*
|
|
1382
|
+
if (sameorigin === false && tag === "iframe" /* IFrameTag */ && typeof node.setAttribute == "function" /* Function */) {
|
|
1383
|
+
node.setAttribute("data-clarity-unavailable" /* Unavailable */, "" /* Empty */);
|
|
1384
1384
|
}
|
|
1385
1385
|
// Add an empty ALT tag on all IMG elements
|
|
1386
|
-
if (tag === "img" /*
|
|
1387
|
-
node.setAttribute("alt" /*
|
|
1386
|
+
if (tag === "img" /* ImageTag */ && !node.hasAttribute("alt" /* AltAttribute */)) {
|
|
1387
|
+
node.setAttribute("alt" /* AltAttribute */, "" /* Empty */);
|
|
1388
1388
|
}
|
|
1389
1389
|
// During visualization This will prevent the browser from auto filling form fields with saved details of user who is seeing the visualization
|
|
1390
|
-
if (tag === "form" /*
|
|
1391
|
-
if (node.hasAttribute("autocomplete" /*
|
|
1392
|
-
node.removeAttribute("autocomplete" /*
|
|
1390
|
+
if (tag === "form" /* FormTag */ || tag === "input" /* InputTag */) {
|
|
1391
|
+
if (node.hasAttribute("autocomplete" /* AutoComplete */)) {
|
|
1392
|
+
node.removeAttribute("autocomplete" /* AutoComplete */);
|
|
1393
1393
|
}
|
|
1394
|
-
node.setAttribute("autocomplete" /*
|
|
1394
|
+
node.setAttribute("autocomplete" /* AutoComplete */, "new-password" /* NewPassword */);
|
|
1395
1395
|
}
|
|
1396
1396
|
};
|
|
1397
1397
|
this.getCustomStyle = function () {
|
|
1398
1398
|
// tslint:disable-next-line: max-line-length
|
|
1399
|
-
return "
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
"*["
|
|
1399
|
+
return "img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "] { background-color: #CCC; background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Hide */ + "); background-repeat:no-repeat; background-position: center; }" +
|
|
1400
|
+
("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "s" /* Small */ + "] { background-size: 18px 18px; }") +
|
|
1401
|
+
("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "m" /* Medium */ + "] { background-size: 24px 24px; }") +
|
|
1402
|
+
("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "l" /* Large */ + "] { background-size: 36px 36px; }") +
|
|
1403
|
+
("iframe" /* IFrameTag */ + "[" + "data-clarity-unavailable" /* Unavailable */ + "] { background: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Unavailable */ + ") no-repeat center center, url('" + "data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\" x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Cross */ + "'); }") +
|
|
1404
|
+
("*[" + "data-clarity-suspend" /* Suspend */ + "] { filter: grayscale(100%); }");
|
|
1405
1405
|
};
|
|
1406
1406
|
this.state = state;
|
|
1407
1407
|
}
|
|
@@ -1437,7 +1437,7 @@ var Visualizer = /** @class */ (function () {
|
|
|
1437
1437
|
while (merged.events.length > 0 && _this.layout.exists(hash) === false) {
|
|
1438
1438
|
var entry = merged.events.shift();
|
|
1439
1439
|
switch (entry.event) {
|
|
1440
|
-
case 6 /*
|
|
1440
|
+
case 6 /* Mutation */:
|
|
1441
1441
|
var domEvent = entry;
|
|
1442
1442
|
_this.renderTime = domEvent.time;
|
|
1443
1443
|
if (time && _this.renderTime > time) {
|
|
@@ -1490,9 +1490,9 @@ var Visualizer = /** @class */ (function () {
|
|
|
1490
1490
|
for (var _c = 0, p_1 = p; _c < p_1.length; _c++) {
|
|
1491
1491
|
var entry = p_1[_c];
|
|
1492
1492
|
switch (key) {
|
|
1493
|
-
case "dom" /*
|
|
1493
|
+
case "dom" /* Dom */:
|
|
1494
1494
|
var dom = _this.enrich.selectors(entry);
|
|
1495
|
-
if (entry.event === 5 /*
|
|
1495
|
+
if (entry.event === 5 /* Discover */) {
|
|
1496
1496
|
merged.dom = dom;
|
|
1497
1497
|
}
|
|
1498
1498
|
else {
|
|
@@ -1538,40 +1538,40 @@ var Visualizer = /** @class */ (function () {
|
|
|
1538
1538
|
var entry = events_1[_i];
|
|
1539
1539
|
time = entry.time;
|
|
1540
1540
|
switch (entry.event) {
|
|
1541
|
-
case 0 /*
|
|
1541
|
+
case 0 /* Metric */:
|
|
1542
1542
|
_this.data.metric(entry);
|
|
1543
1543
|
break;
|
|
1544
|
-
case 7 /*
|
|
1544
|
+
case 7 /* Region */:
|
|
1545
1545
|
_this.data.region(entry);
|
|
1546
1546
|
break;
|
|
1547
|
-
case 6 /*
|
|
1547
|
+
case 6 /* Mutation */:
|
|
1548
1548
|
_this.layout.markup(entry);
|
|
1549
1549
|
break;
|
|
1550
|
-
case 13 /*
|
|
1551
|
-
case 14 /*
|
|
1552
|
-
case 12 /*
|
|
1553
|
-
case 15 /*
|
|
1554
|
-
case 9 /*
|
|
1555
|
-
case 16 /*
|
|
1556
|
-
case 17 /*
|
|
1557
|
-
case 20 /*
|
|
1558
|
-
case 18 /*
|
|
1559
|
-
case 19 /*
|
|
1550
|
+
case 13 /* MouseDown */:
|
|
1551
|
+
case 14 /* MouseUp */:
|
|
1552
|
+
case 12 /* MouseMove */:
|
|
1553
|
+
case 15 /* MouseWheel */:
|
|
1554
|
+
case 9 /* Click */:
|
|
1555
|
+
case 16 /* DoubleClick */:
|
|
1556
|
+
case 17 /* TouchStart */:
|
|
1557
|
+
case 20 /* TouchCancel */:
|
|
1558
|
+
case 18 /* TouchEnd */:
|
|
1559
|
+
case 19 /* TouchMove */:
|
|
1560
1560
|
_this.interaction.pointer(entry);
|
|
1561
1561
|
break;
|
|
1562
|
-
case 28 /*
|
|
1562
|
+
case 28 /* Visibility */:
|
|
1563
1563
|
_this.interaction.visibility(entry);
|
|
1564
1564
|
break;
|
|
1565
|
-
case 27 /*
|
|
1565
|
+
case 27 /* Input */:
|
|
1566
1566
|
_this.interaction.input(entry);
|
|
1567
1567
|
break;
|
|
1568
|
-
case 21 /*
|
|
1568
|
+
case 21 /* Selection */:
|
|
1569
1569
|
_this.interaction.selection(entry);
|
|
1570
1570
|
break;
|
|
1571
|
-
case 11 /*
|
|
1571
|
+
case 11 /* Resize */:
|
|
1572
1572
|
_this.interaction.resize(entry);
|
|
1573
1573
|
break;
|
|
1574
|
-
case 10 /*
|
|
1574
|
+
case 10 /* Scroll */:
|
|
1575
1575
|
_this.interaction.scroll(entry);
|
|
1576
1576
|
break;
|
|
1577
1577
|
}
|
|
@@ -1608,14 +1608,14 @@ var Visualizer = /** @class */ (function () {
|
|
|
1608
1608
|
return Visualizer;
|
|
1609
1609
|
}());
|
|
1610
1610
|
|
|
1611
|
-
var _a;
|
|
1612
|
-
var state = (_a = new Visualizer(), _a.state), dom = _a.dom, get = _a.get, html = _a.html, time = _a.time, clickmap = _a.clickmap, clearmap = _a.clearmap, scrollmap = _a.scrollmap, merge = _a.merge, setup = _a.setup, render = _a.render;
|
|
1611
|
+
var _a$1;
|
|
1612
|
+
var state = (_a$1 = new Visualizer(), _a$1.state), dom = _a$1.dom, get$2 = _a$1.get, html = _a$1.html, time = _a$1.time, clickmap = _a$1.clickmap, clearmap = _a$1.clearmap, scrollmap = _a$1.scrollmap, merge = _a$1.merge, setup = _a$1.setup, render = _a$1.render;
|
|
1613
1613
|
|
|
1614
1614
|
var clarity = /*#__PURE__*/Object.freeze({
|
|
1615
1615
|
__proto__: null,
|
|
1616
1616
|
state: state,
|
|
1617
1617
|
dom: dom,
|
|
1618
|
-
get: get,
|
|
1618
|
+
get: get$2,
|
|
1619
1619
|
html: html,
|
|
1620
1620
|
time: time,
|
|
1621
1621
|
clickmap: clickmap,
|