@qaiddev/thumbs-embed 1.0.3 → 1.0.5
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/qaid.js +114 -107
- package/dist/qaid.js.map +1 -1
- package/dist/qaid.umd.cjs +5 -5
- package/dist/qaid.umd.cjs.map +1 -1
- package/package.json +1 -1
package/dist/qaid.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var d = (i, t, e) =>
|
|
4
|
-
const
|
|
1
|
+
var j = Object.defineProperty;
|
|
2
|
+
var X = (i, t, e) => t in i ? j(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
|
|
3
|
+
var d = (i, t, e) => X(i, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
const k = `<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
5
5
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
|
|
6
|
-
</svg>`,
|
|
6
|
+
</svg>`, w = `<svg xmlns="http://www.w3.org/2000/svg" class="qaid-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
7
7
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.737 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.095c.5 0 .905-.405.905-.905 0-.714.211-1.412.608-2.006L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
|
|
8
|
-
</svg>`,
|
|
9
|
-
let
|
|
10
|
-
const
|
|
8
|
+
</svg>`, Y = "body.qaid-targeting,body.qaid-targeting *{cursor:none!important}.qaid-widget,.qaid-widget *,.qaid-modal-container,.qaid-modal-container *{cursor:pointer!important}.qaid-widget.qaid-auto-container{position:fixed;z-index:50;display:flex;gap:.5rem}.qaid-widget.qaid-auto-container.qaid-bottom-right{bottom:1rem;right:1rem}.qaid-widget.qaid-auto-container.qaid-bottom-left{bottom:1rem;left:1rem}.qaid-widget.qaid-auto-container.qaid-top-right{top:1rem;right:1rem}.qaid-widget.qaid-auto-container.qaid-top-left{top:1rem;left:1rem}.qaid-widget.qaid-incognito{opacity:0;transition:opacity .2s ease-in-out}.qaid-widget.qaid-incognito:hover{opacity:1}button.qaid-btn-structural{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.qaid-icon{width:24px;height:24px}.qaid-btn-structural:not(:has(svg)),.qaid-btn:not(:has(svg)){font-size:var(--qaid-icon-size, 24px);line-height:1}.qaid-emoji-icon{font-size:var(--qaid-icon-size, 24px);line-height:1}.qaid-tooltip-wrapper{position:relative}.qaid-tooltip-text{position:fixed;padding:.5rem .75rem;background:#1f2937;color:#fff;font-size:1rem;font-weight:600;border-radius:.5rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:99999}.qaid-tooltip-text.qaid-tooltip-visible{opacity:1}.qaid-targeting-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none}.qaid-capture-layer{position:fixed;top:0;right:0;bottom:0;left:0;cursor:crosshair;pointer-events:auto;z-index:9999}.qaid-banner{position:fixed;top:0;left:0;right:0;padding:.75rem 1rem;text-align:center;z-index:10000;font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px);animation:qaid-slideDown .2s ease-out}.qaid-banner-up{background:color-mix(in srgb,var(--qaid-positive) 90%,transparent);color:#fff}.qaid-banner-down{background:color-mix(in srgb,var(--qaid-negative) 90%,transparent);color:#fff}.qaid-banner-text{font-weight:500}.qaid-banner-hint{margin-left:.5rem;opacity:.75}@keyframes qaid-slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.qaid-vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.6) 100%);z-index:41}.qaid-crosshair-h,.qaid-crosshair-v{position:fixed;pointer-events:none;z-index:42}.qaid-crosshair-h{left:0;right:0;height:1px;background:color-mix(in srgb,var(--qaid-negative) 60%,transparent)}.qaid-crosshair-v{top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--qaid-negative) 60%,transparent)}.qaid-type-up .qaid-crosshair-h,.qaid-type-up .qaid-crosshair-v{background:color-mix(in srgb,var(--qaid-positive) 60%,transparent)}.qaid-scope{position:fixed;width:80px;height:80px;pointer-events:none;z-index:43;transform:translate(-50%,-50%)}.qaid-scope-ring{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:2px solid color-mix(in srgb,var(--qaid-negative) 80%,transparent);border-radius:50%}.qaid-type-up .qaid-scope-ring{border-color:color-mix(in srgb,var(--qaid-positive) 80%,transparent)}.qaid-scope-ring-inner{position:absolute;top:20px;right:20px;bottom:20px;left:20px;border:1px solid color-mix(in srgb,var(--qaid-negative) 50%,transparent);border-radius:50%}.qaid-type-up .qaid-scope-ring-inner{border-color:color-mix(in srgb,var(--qaid-positive) 50%,transparent)}.qaid-scope-dot{position:absolute;top:50%;left:50%;width:4px;height:4px;background:var(--qaid-negative);border-radius:50%;transform:translate(-50%,-50%)}.qaid-type-up .qaid-scope-dot{background:var(--qaid-positive)}.qaid-highlight{outline:3px solid color-mix(in srgb,var(--qaid-negative) 80%,transparent)!important;outline-offset:2px!important;background-color:color-mix(in srgb,var(--qaid-negative) 10%,transparent)!important;transition:outline .1s ease,background-color .1s ease}body.qaid-targeting.qaid-type-up .qaid-highlight{outline-color:color-mix(in srgb,var(--qaid-positive) 80%,transparent)!important;background-color:color-mix(in srgb,var(--qaid-positive) 10%,transparent)!important}.qaid-selected-marker{position:fixed;border:3px solid var(--qaid-marker, #6366f1);border-radius:50%;pointer-events:none;z-index:44;animation:qaid-markerPulse 1.5s ease-in-out infinite}@keyframes qaid-markerPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.qaid-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:#0000004d}.qaid-modal-container{position:fixed;z-index:50;display:flex;flex-direction:column;align-items:flex-start;max-height:calc(100vh - 32px);font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px)}.qaid-modal-container.qaid-above{flex-direction:column-reverse}.qaid-modal-arrow{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;position:relative;align-self:flex-start}.qaid-modal-container.qaid-below .qaid-modal-arrow{border-bottom:12px solid light-dark(#ffffff,#1f2937)}.qaid-modal-container.qaid-above .qaid-modal-arrow{border-top:12px solid light-dark(#ffffff,#1f2937)}.qaid-modal-box{color-scheme:inherit;background:light-dark(#ffffff,#1f2937);border-radius:1rem;padding:1.5rem;box-shadow:0 25px 50px -12px light-dark(rgba(0,0,0,.25),rgba(0,0,0,.5));width:var(--qaid-modal-width, 400px);max-width:calc(100vw - 32px);max-height:calc(100vh - 60px);overflow-y:auto}.qaid-modal-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}button.qaid-type-toggle{border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.qaid-type-toggle:hover{transform:scale(1.1)}button.qaid-type-toggle:not(.qaid-type-toggle-custom){width:2.5rem;height:2.5rem;border-radius:50%}button.qaid-type-toggle:not(.qaid-type-toggle-custom) svg{width:1.25rem;height:1.25rem}button.qaid-type-toggle.qaid-type-up{background:var(--qaid-positive);color:#fff}button.qaid-type-toggle.qaid-type-down{background:var(--qaid-negative);color:#fff}.qaid-modal-header-text{flex:1;min-width:0}.qaid-modal-title{font-size:1.125rem;font-weight:700;margin:0 0 .25rem;color:light-dark(#1f2937,#f9fafb)}.qaid-modal-subtitle{color:light-dark(#6b7280,#9ca3af);margin:0;font-size:.875rem}.qaid-textarea{width:100%;height:6rem;padding:.75rem;border:1px solid light-dark(#d1d5db,#374151);border-radius:.5rem;font-family:inherit;font-size:1rem;resize:vertical;margin-bottom:1rem;box-sizing:border-box;background:light-dark(#ffffff,#111827);color:light-dark(#1f2937,#f9fafb)}.qaid-textarea:focus{outline:none;border-color:var(--qaid-marker);box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker) 20%,transparent)}.qaid-btn-row{display:flex;gap:.5rem;justify-content:flex-end}button.qaid-btn-submit{padding:.5rem 1rem;background:var(--qaid-marker);color:var(--qaid-marker-text, white);border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s,filter .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.qaid-btn-submit:hover{filter:brightness(.85)}button.qaid-btn-submit:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--qaid-marker) 30%,transparent)}.qaid-bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:50;animation:qaid-slideUpSheet .3s ease-out;font-family:var(--qaid-font-family, system-ui, -apple-system, sans-serif);font-size:var(--qaid-font-size, 16px)}.qaid-bottom-sheet-content{background:light-dark(#ffffff,#1f2937);border-radius:1rem 1rem 0 0;padding:1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}.qaid-bottom-sheet-handle{width:36px;height:4px;background:light-dark(rgba(0,0,0,.2),rgba(255,255,255,.2));border-radius:2px;margin:0 auto 1rem}@keyframes qaid-slideUpSheet{0%{transform:translateY(100%)}to{transform:translateY(0)}}";
|
|
9
|
+
let T = !1;
|
|
10
|
+
const K = {
|
|
11
11
|
small: 36,
|
|
12
12
|
medium: 48,
|
|
13
13
|
large: 64
|
|
14
|
-
},
|
|
14
|
+
}, R = {
|
|
15
15
|
small: 18,
|
|
16
16
|
medium: 24,
|
|
17
17
|
large: 32
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function _(i, t, e) {
|
|
20
20
|
const [o, n, a] = [i, t, e].map((s) => (s = s / 255, s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)));
|
|
21
21
|
return 0.2126 * o + 0.7152 * n + 0.0722 * a;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function V(i) {
|
|
24
24
|
if (i.startsWith("#")) {
|
|
25
25
|
const e = i.slice(1), o = e.length === 3 ? e.split("").map((a) => a + a).join("") : e, n = parseInt(o, 16);
|
|
26
26
|
return {
|
|
@@ -36,13 +36,13 @@ function X(i) {
|
|
|
36
36
|
b: parseInt(t[3])
|
|
37
37
|
} : null;
|
|
38
38
|
}
|
|
39
|
-
function
|
|
40
|
-
const t =
|
|
41
|
-
return t &&
|
|
39
|
+
function J(i) {
|
|
40
|
+
const t = V(i);
|
|
41
|
+
return t && _(t.r, t.g, t.b) > 0.4 ? "black" : "white";
|
|
42
42
|
}
|
|
43
|
-
function
|
|
44
|
-
if (
|
|
45
|
-
|
|
43
|
+
function G(i = {}) {
|
|
44
|
+
if (T) return;
|
|
45
|
+
T = !0;
|
|
46
46
|
const {
|
|
47
47
|
positiveColor: t = "rgb(0, 200, 83)",
|
|
48
48
|
negativeColor: e = "rgb(255, 0, 0)",
|
|
@@ -53,18 +53,18 @@ function R(i = {}) {
|
|
|
53
53
|
backdropOpacity: s = 0.3,
|
|
54
54
|
fontFamily: l = "system-ui, -apple-system, sans-serif",
|
|
55
55
|
fontSize: r = 16
|
|
56
|
-
} = i, c =
|
|
57
|
-
m.id = "qaid-styles", m.textContent = h +
|
|
56
|
+
} = i, c = K[n], p = R[n], g = J(o), h = `:root{--qaid-positive:${t};--qaid-negative:${e};--qaid-marker:${o};--qaid-marker-text:${g};--qaid-btn-size:${c}px;--qaid-icon-size:${p}px;--qaid-modal-width:${a}px;--qaid-backdrop-opacity:${s};--qaid-font-family:${l};--qaid-font-size:${r}px}`, u = "button.qaid-btn{width:var(--qaid-btn-size);height:var(--qaid-btn-size);border-radius:50%;border:none;background:#f3f4f6;color:#374151;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);transition:background-color .2s,color .2s,transform .2s;-webkit-appearance:none;appearance:none}button.qaid-btn:hover{transform:scale(1.05)}button.qaid-btn-up:hover{background:var(--qaid-positive);color:#fff}button.qaid-btn-down:hover{background:var(--qaid-negative);color:#fff}button.qaid-btn svg{width:var(--qaid-icon-size);height:var(--qaid-icon-size)}", m = document.createElement("style");
|
|
57
|
+
m.id = "qaid-styles", m.textContent = h + Y + u, document.head.appendChild(m);
|
|
58
58
|
}
|
|
59
|
-
function
|
|
59
|
+
function Z() {
|
|
60
60
|
const i = document.getElementById("qaid-styles");
|
|
61
|
-
i && (i.remove(),
|
|
61
|
+
i && (i.remove(), T = !1);
|
|
62
62
|
}
|
|
63
|
-
const
|
|
64
|
-
function
|
|
63
|
+
const Q = ["data-comp", "data-qa", "data-testid", "data-id"];
|
|
64
|
+
function F(i, t = document.body) {
|
|
65
65
|
let e = i;
|
|
66
66
|
for (; e && e !== t; ) {
|
|
67
|
-
for (const o of
|
|
67
|
+
for (const o of Q) {
|
|
68
68
|
const n = e.getAttribute(o);
|
|
69
69
|
if (n)
|
|
70
70
|
return `${o}="${n}"`;
|
|
@@ -73,45 +73,45 @@ function A(i, t = document.body) {
|
|
|
73
73
|
}
|
|
74
74
|
return null;
|
|
75
75
|
}
|
|
76
|
-
function
|
|
76
|
+
function tt(i, t = 100) {
|
|
77
77
|
var o;
|
|
78
78
|
const e = ((o = i.textContent) == null ? void 0 : o.trim().slice(0, t)) || "";
|
|
79
79
|
return e.length === t ? e + "..." : e;
|
|
80
80
|
}
|
|
81
|
-
function
|
|
81
|
+
function et(i) {
|
|
82
82
|
let t = 1, e = i.previousElementSibling;
|
|
83
83
|
for (; e; )
|
|
84
84
|
t++, e = e.previousElementSibling;
|
|
85
85
|
return t;
|
|
86
86
|
}
|
|
87
|
-
function
|
|
87
|
+
function it(i) {
|
|
88
88
|
const t = [];
|
|
89
89
|
let e = i;
|
|
90
90
|
for (; e && e !== document.body && e !== document.documentElement; ) {
|
|
91
|
-
const o = e.tagName.toLowerCase(), n =
|
|
91
|
+
const o = e.tagName.toLowerCase(), n = et(e);
|
|
92
92
|
t.unshift(`${o}:nth-child(${n})`), e = e.parentElement;
|
|
93
93
|
}
|
|
94
94
|
return t.length > 0 ? `body > ${t.join(" > ")}` : "body";
|
|
95
95
|
}
|
|
96
|
-
function
|
|
96
|
+
function ot(i) {
|
|
97
97
|
return i.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
|
|
98
98
|
}
|
|
99
|
-
function
|
|
100
|
-
const t =
|
|
101
|
-
return t ? `[${t}]` : i.id ? `#${
|
|
99
|
+
function nt(i) {
|
|
100
|
+
const t = F(i);
|
|
101
|
+
return t ? `[${t}]` : i.id ? `#${ot(i.id)}` : it(i);
|
|
102
102
|
}
|
|
103
|
-
function
|
|
104
|
-
const t =
|
|
105
|
-
return { selector:
|
|
103
|
+
function at(i) {
|
|
104
|
+
const t = tt(i), e = F(i);
|
|
105
|
+
return { selector: nt(i), text: t, dataAttr: e };
|
|
106
106
|
}
|
|
107
|
-
const
|
|
107
|
+
const O = {
|
|
108
108
|
width: 400,
|
|
109
109
|
height: 280,
|
|
110
110
|
arrowHeight: 12,
|
|
111
111
|
gap: 8,
|
|
112
112
|
viewportPadding: 16
|
|
113
113
|
};
|
|
114
|
-
function
|
|
114
|
+
function st(i, t, e, o, n) {
|
|
115
115
|
const a = i.y, s = t - (i.y + i.height);
|
|
116
116
|
if (s >= e + o)
|
|
117
117
|
return {
|
|
@@ -130,22 +130,22 @@ function et(i, t, e, o, n) {
|
|
|
130
130
|
t - e - n
|
|
131
131
|
) : r = Math.max(n, i.y - e - o), { top: r, position: l };
|
|
132
132
|
}
|
|
133
|
-
function
|
|
133
|
+
function rt(i, t, e, o) {
|
|
134
134
|
let a = i.x + i.width / 2 - e / 2;
|
|
135
135
|
return a = Math.max(o, Math.min(a, t - e - o)), a;
|
|
136
136
|
}
|
|
137
|
-
function
|
|
137
|
+
function dt(i, t, e, o = 24, n = 24) {
|
|
138
138
|
const s = i.clickX - t - n / 2;
|
|
139
139
|
return Math.max(o, Math.min(s, e - o - n / 2));
|
|
140
140
|
}
|
|
141
|
-
function
|
|
142
|
-
const n = o.height + o.arrowHeight, a =
|
|
141
|
+
function lt(i, t, e, o = O) {
|
|
142
|
+
const n = o.height + o.arrowHeight, a = st(
|
|
143
143
|
i,
|
|
144
144
|
e,
|
|
145
145
|
n,
|
|
146
146
|
o.gap,
|
|
147
147
|
o.viewportPadding
|
|
148
|
-
), s =
|
|
148
|
+
), s = rt(
|
|
149
149
|
i,
|
|
150
150
|
t,
|
|
151
151
|
o.width,
|
|
@@ -157,8 +157,8 @@ function nt(i, t, e, o = B) {
|
|
|
157
157
|
position: a.position
|
|
158
158
|
};
|
|
159
159
|
}
|
|
160
|
-
function
|
|
161
|
-
const n =
|
|
160
|
+
function ct(i, t, e, o = O) {
|
|
161
|
+
const n = lt(i, t, e, o), a = dt(
|
|
162
162
|
i,
|
|
163
163
|
n.left,
|
|
164
164
|
o.width
|
|
@@ -168,15 +168,15 @@ function at(i, t, e, o = B) {
|
|
|
168
168
|
arrow: { left: a }
|
|
169
169
|
};
|
|
170
170
|
}
|
|
171
|
-
const
|
|
172
|
-
function
|
|
171
|
+
const ht = 20;
|
|
172
|
+
function pt(i) {
|
|
173
173
|
const t = [], e = console.error, o = console.warn, n = console.log, a = (s, l) => {
|
|
174
174
|
const r = {
|
|
175
175
|
message: l.map((c) => String(c)).join(" "),
|
|
176
176
|
timestamp: Date.now(),
|
|
177
177
|
level: s
|
|
178
178
|
};
|
|
179
|
-
t.length >=
|
|
179
|
+
t.length >= ht && t.shift(), t.push(r), i && i(r);
|
|
180
180
|
};
|
|
181
181
|
return console.error = function(...s) {
|
|
182
182
|
a("error", s), e.apply(console, s);
|
|
@@ -191,19 +191,19 @@ function rt(i) {
|
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
193
|
}
|
|
194
|
-
function
|
|
194
|
+
function ut(i = 640) {
|
|
195
195
|
return typeof window < "u" && window.innerWidth < i;
|
|
196
196
|
}
|
|
197
|
-
function
|
|
197
|
+
function D(i, t, e) {
|
|
198
198
|
const o = e.style.pointerEvents;
|
|
199
199
|
e.style.pointerEvents = "none";
|
|
200
200
|
const n = document.elementFromPoint(i, t);
|
|
201
201
|
return e.style.pointerEvents = o, n;
|
|
202
202
|
}
|
|
203
|
-
function
|
|
203
|
+
function B(i) {
|
|
204
204
|
return i ? !!(i.closest(".qaid-widget") || i.closest(".qaid-targeting-overlay") || i.closest(".qaid-modal-container") || i.closest(".qaid-bottom-sheet")) : !1;
|
|
205
205
|
}
|
|
206
|
-
function
|
|
206
|
+
function mt(i, t = 0) {
|
|
207
207
|
const e = i.getBoundingClientRect();
|
|
208
208
|
return {
|
|
209
209
|
x: e.left - t,
|
|
@@ -212,12 +212,12 @@ function lt(i, t = 0) {
|
|
|
212
212
|
height: e.height + t * 2
|
|
213
213
|
};
|
|
214
214
|
}
|
|
215
|
-
function
|
|
215
|
+
function C(i) {
|
|
216
216
|
document.querySelectorAll(`.${i}`).forEach((t) => {
|
|
217
217
|
t.classList.remove(i);
|
|
218
218
|
});
|
|
219
219
|
}
|
|
220
|
-
async function
|
|
220
|
+
async function gt(i = {}) {
|
|
221
221
|
var n;
|
|
222
222
|
const { quality: t = 1, maxWidth: e = 1280, maxHeight: o = 800 } = i;
|
|
223
223
|
try {
|
|
@@ -229,17 +229,17 @@ async function ct(i = {}) {
|
|
|
229
229
|
displaySurface: "browser"
|
|
230
230
|
}
|
|
231
231
|
}), s = a.getVideoTracks()[0], l = s.getSettings(), r = document.createElement("video");
|
|
232
|
-
r.srcObject = a, r.muted = !0, await new Promise((
|
|
232
|
+
r.srcObject = a, r.muted = !0, await new Promise((f) => {
|
|
233
233
|
r.onloadedmetadata = () => {
|
|
234
|
-
r.play(),
|
|
234
|
+
r.play(), f();
|
|
235
235
|
};
|
|
236
|
-
}), await new Promise((
|
|
236
|
+
}), await new Promise((f) => {
|
|
237
237
|
const v = () => {
|
|
238
|
-
r.readyState >= 2 ?
|
|
238
|
+
r.readyState >= 2 ? f() : requestAnimationFrame(v);
|
|
239
239
|
};
|
|
240
240
|
v();
|
|
241
|
-
}), await new Promise((
|
|
242
|
-
const c = l.width || r.videoWidth, p = l.height || r.videoHeight,
|
|
241
|
+
}), await new Promise((f) => setTimeout(f, 100));
|
|
242
|
+
const c = l.width || r.videoWidth, p = l.height || r.videoHeight, g = Math.min(e / c, o / p, 1), h = Math.round(c * g), u = Math.round(p * g), m = document.createElement("canvas");
|
|
243
243
|
m.width = h, m.height = u;
|
|
244
244
|
const b = m.getContext("2d");
|
|
245
245
|
return b ? (b.drawImage(r, 0, 0, h, u), s.stop(), m.toDataURL("image/webp", t)) : (s.stop(), null);
|
|
@@ -247,16 +247,16 @@ async function ct(i = {}) {
|
|
|
247
247
|
return console.warn("Screenshot capture failed:", a), null;
|
|
248
248
|
}
|
|
249
249
|
}
|
|
250
|
-
const
|
|
251
|
-
function
|
|
250
|
+
const H = "qaid_visitor_id";
|
|
251
|
+
function ft() {
|
|
252
252
|
try {
|
|
253
|
-
let i = localStorage.getItem(
|
|
254
|
-
return i || (i = crypto.randomUUID(), localStorage.setItem(
|
|
253
|
+
let i = localStorage.getItem(H);
|
|
254
|
+
return i || (i = crypto.randomUUID(), localStorage.setItem(H, i)), i;
|
|
255
255
|
} catch {
|
|
256
256
|
return crypto.randomUUID();
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
|
-
class
|
|
259
|
+
class bt {
|
|
260
260
|
constructor(t) {
|
|
261
261
|
d(this, "config");
|
|
262
262
|
d(this, "state", "IDLE");
|
|
@@ -301,7 +301,7 @@ class pt {
|
|
|
301
301
|
d(this, "boundClick");
|
|
302
302
|
d(this, "boundResize");
|
|
303
303
|
d(this, "tooltipElement", null);
|
|
304
|
-
var e, o, n, a, s, l, r, c, p,
|
|
304
|
+
var e, o, n, a, s, l, r, c, p, g, h, u, m, b, f, v;
|
|
305
305
|
this.config = {
|
|
306
306
|
endpoint: t.endpoint,
|
|
307
307
|
apiKey: t.apiKey ?? "",
|
|
@@ -325,7 +325,7 @@ class pt {
|
|
|
325
325
|
bannerText: ((r = t.text) == null ? void 0 : r.bannerText) ?? "Click on any element to target it with your feedback",
|
|
326
326
|
bannerHint: ((c = t.text) == null ? void 0 : c.bannerHint) ?? "(Press Escape to cancel)",
|
|
327
327
|
modalTitle: ((p = t.text) == null ? void 0 : p.modalTitle) ?? "Thank you for your feedback!",
|
|
328
|
-
modalSubtitle: ((
|
|
328
|
+
modalSubtitle: ((g = t.text) == null ? void 0 : g.modalSubtitle) ?? "Would you like to add a message to help us understand your feedback better?",
|
|
329
329
|
placeholder: ((h = t.text) == null ? void 0 : h.placeholder) ?? "Optional: Tell us more about your experience...",
|
|
330
330
|
submitButton: ((u = t.text) == null ? void 0 : u.submitButton) ?? "Submit",
|
|
331
331
|
skipButton: ((m = t.text) == null ? void 0 : m.skipButton) ?? "Skip"
|
|
@@ -337,16 +337,16 @@ class pt {
|
|
|
337
337
|
captureScreenshot: t.captureScreenshot ?? !1,
|
|
338
338
|
screenshotOptions: {
|
|
339
339
|
quality: ((b = t.screenshotOptions) == null ? void 0 : b.quality) ?? 0.8,
|
|
340
|
-
maxWidth: ((
|
|
340
|
+
maxWidth: ((f = t.screenshotOptions) == null ? void 0 : f.maxWidth) ?? 1280,
|
|
341
341
|
maxHeight: ((v = t.screenshotOptions) == null ? void 0 : v.maxHeight) ?? 800
|
|
342
342
|
},
|
|
343
343
|
incognito: t.incognito ?? !1,
|
|
344
344
|
positiveIcon: t.positiveIcon ?? "",
|
|
345
345
|
negativeIcon: t.negativeIcon ?? ""
|
|
346
|
-
}, this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundResize = this.handleResize.bind(this), this.visitorId =
|
|
346
|
+
}, this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundResize = this.handleResize.bind(this), this.visitorId = ft(), this.init();
|
|
347
347
|
}
|
|
348
348
|
init() {
|
|
349
|
-
|
|
349
|
+
G({
|
|
350
350
|
positiveColor: this.config.colors.positive,
|
|
351
351
|
negativeColor: this.config.colors.negative,
|
|
352
352
|
markerColor: this.config.colors.marker,
|
|
@@ -356,7 +356,7 @@ class pt {
|
|
|
356
356
|
backdropOpacity: this.config.backdropOpacity,
|
|
357
357
|
fontFamily: this.config.fontFamily,
|
|
358
358
|
fontSize: this.config.fontSize
|
|
359
|
-
}), this.checkMobile(), window.addEventListener("resize", this.boundResize), this.createEmbed(), this.fetchAllowedFeatures(), this.consoleCapture =
|
|
359
|
+
}), this.checkMobile(), window.addEventListener("resize", this.boundResize), this.createEmbed(), this.fetchAllowedFeatures(), this.consoleCapture = pt((t) => {
|
|
360
360
|
var e;
|
|
361
361
|
this.feedbackData.consoleErrors = ((e = this.consoleCapture) == null ? void 0 : e.errors) ?? [];
|
|
362
362
|
}), this.feedbackData.consoleErrors = this.consoleCapture.errors;
|
|
@@ -370,7 +370,7 @@ class pt {
|
|
|
370
370
|
}
|
|
371
371
|
}
|
|
372
372
|
checkMobile() {
|
|
373
|
-
this.isMobile =
|
|
373
|
+
this.isMobile = ut();
|
|
374
374
|
}
|
|
375
375
|
handleResize() {
|
|
376
376
|
this.checkMobile();
|
|
@@ -391,11 +391,11 @@ class pt {
|
|
|
391
391
|
const c = document.createElement("div");
|
|
392
392
|
c.className = "qaid-tooltip-wrapper";
|
|
393
393
|
const p = document.createElement("button");
|
|
394
|
-
p.type = "button", p.className = n ? `${a} qaid-btn-up` : "qaid-btn qaid-btn-up", p.innerHTML = this.config.positiveIcon ||
|
|
395
|
-
const
|
|
396
|
-
|
|
394
|
+
p.type = "button", p.className = n ? `${a} qaid-btn-up` : "qaid-btn qaid-btn-up", p.innerHTML = this.config.positiveIcon || k, p.addEventListener("click", (u) => this.handleThumbClick("up", u.currentTarget)), p.addEventListener("mouseenter", () => this.showTooltip(p)), p.addEventListener("mouseleave", () => this.hideTooltip()), c.appendChild(p);
|
|
395
|
+
const g = document.createElement("div");
|
|
396
|
+
g.className = "qaid-tooltip-wrapper";
|
|
397
397
|
const h = document.createElement("button");
|
|
398
|
-
h.type = "button", h.className = n ? `${a} qaid-btn-down` : "qaid-btn qaid-btn-down", h.innerHTML = this.config.negativeIcon ||
|
|
398
|
+
h.type = "button", h.className = n ? `${a} qaid-btn-down` : "qaid-btn qaid-btn-down", h.innerHTML = this.config.negativeIcon || w, h.addEventListener("click", (u) => this.handleThumbClick("down", u.currentTarget)), h.addEventListener("mouseenter", () => this.showTooltip(h)), h.addEventListener("mouseleave", () => this.hideTooltip()), g.appendChild(h), this.container.appendChild(c), this.container.appendChild(g);
|
|
399
399
|
}
|
|
400
400
|
showTooltip(t) {
|
|
401
401
|
if (!this.tooltipElement) return;
|
|
@@ -448,36 +448,36 @@ class pt {
|
|
|
448
448
|
}
|
|
449
449
|
handleMouseMove(t) {
|
|
450
450
|
if (this.mousePos.x = t.clientX, this.mousePos.y = t.clientY, this.crosshairH && (this.crosshairH.style.top = `${t.clientY}px`), this.crosshairV && (this.crosshairV.style.left = `${t.clientX}px`), this.scope && (this.scope.style.left = `${t.clientX}px`, this.scope.style.top = `${t.clientY}px`), this.captureLayer) {
|
|
451
|
-
const e =
|
|
451
|
+
const e = D(
|
|
452
452
|
t.clientX,
|
|
453
453
|
t.clientY,
|
|
454
454
|
this.captureLayer
|
|
455
455
|
);
|
|
456
|
-
e &&
|
|
456
|
+
e && !B(e) ? (this.lastHighlighted && this.lastHighlighted !== e && this.lastHighlighted.classList.remove("qaid-highlight"), e.classList.add("qaid-highlight"), this.lastHighlighted = e) : this.lastHighlighted && (this.lastHighlighted.classList.remove("qaid-highlight"), this.lastHighlighted = null);
|
|
457
457
|
}
|
|
458
458
|
}
|
|
459
459
|
handleClick(t) {
|
|
460
460
|
if (!this.captureLayer) return;
|
|
461
|
-
const e =
|
|
461
|
+
const e = D(
|
|
462
462
|
t.clientX,
|
|
463
463
|
t.clientY,
|
|
464
464
|
this.captureLayer
|
|
465
465
|
);
|
|
466
|
-
if (!e ||
|
|
466
|
+
if (!e || B(e))
|
|
467
467
|
return;
|
|
468
468
|
e.classList.remove("qaid-highlight");
|
|
469
|
-
const o =
|
|
469
|
+
const o = mt(e, 8);
|
|
470
470
|
this.selectedBounds = {
|
|
471
471
|
...o,
|
|
472
472
|
clickX: t.clientX,
|
|
473
473
|
clickY: t.clientY,
|
|
474
474
|
visible: !0
|
|
475
475
|
};
|
|
476
|
-
const { selector: n, text: a } =
|
|
477
|
-
this.feedbackData.elementSelector = n, this.feedbackData.elementText = a,
|
|
476
|
+
const { selector: n, text: a } = at(e);
|
|
477
|
+
this.feedbackData.elementSelector = n, this.feedbackData.elementText = a, C("qaid-highlight"), this.removeTargetingOverlay(), document.body.classList.remove("qaid-targeting", "qaid-type-up"), this.state = "SELECTED", this.showSelectedMarker(), this.submitFeedback();
|
|
478
478
|
}
|
|
479
479
|
cancelTargeting() {
|
|
480
|
-
|
|
480
|
+
C("qaid-highlight"), this.removeTargetingOverlay(), document.body.classList.remove("qaid-targeting", "qaid-type-up"), document.removeEventListener("keydown", this.boundKeyDown), this.state = "IDLE", this.feedbackData.feedbackType = null, this.feedbackData.elementSelector = null, this.feedbackData.elementText = null, this.selectedBounds.visible = !1, this.lastHighlighted = null;
|
|
481
481
|
}
|
|
482
482
|
removeTargetingOverlay() {
|
|
483
483
|
this.overlayContainer && (this.overlayContainer.remove(), this.overlayContainer = null), this.captureLayer = null, this.crosshairH = null, this.crosshairV = null, this.scope = null;
|
|
@@ -493,7 +493,7 @@ class pt {
|
|
|
493
493
|
if (!this.feedbackData.feedbackType) return;
|
|
494
494
|
let t = null;
|
|
495
495
|
const e = ((a = this.allowedFeatures) == null ? void 0 : a.screenshots) !== !1;
|
|
496
|
-
this.config.captureScreenshot && e && (t = await
|
|
496
|
+
this.config.captureScreenshot && e && (t = await gt(this.config.screenshotOptions));
|
|
497
497
|
const o = this.feedbackData.elementSelector ? {
|
|
498
498
|
x: this.selectedBounds.x,
|
|
499
499
|
y: this.selectedBounds.y,
|
|
@@ -548,7 +548,7 @@ class pt {
|
|
|
548
548
|
`, document.body.appendChild(t), this.modalContainer = t, this.setupModalInteractions();
|
|
549
549
|
}
|
|
550
550
|
showPositionedModal() {
|
|
551
|
-
const { modal: t, arrow: e } =
|
|
551
|
+
const { modal: t, arrow: e } = ct(
|
|
552
552
|
this.selectedBounds,
|
|
553
553
|
window.innerWidth,
|
|
554
554
|
window.innerHeight,
|
|
@@ -569,7 +569,7 @@ class pt {
|
|
|
569
569
|
a.className = "qaid-modal-box", a.innerHTML = this.getModalContent(), this.modalContainer.appendChild(n), this.modalContainer.appendChild(a), document.body.appendChild(this.modalContainer), this.setupModalInteractions();
|
|
570
570
|
}
|
|
571
571
|
getModalContent() {
|
|
572
|
-
const t = this.feedbackData.feedbackType === "up", e = this.config.positiveIcon ||
|
|
572
|
+
const t = this.feedbackData.feedbackType === "up", e = this.config.positiveIcon || k, o = this.config.negativeIcon || w;
|
|
573
573
|
return `
|
|
574
574
|
<div class="qaid-modal-header">
|
|
575
575
|
<button type="button" class="${this.config.buttonClass ? `qaid-type-toggle qaid-type-toggle-custom ${this.config.buttonClass} ${t ? "qaid-btn-up" : "qaid-btn-down"}` : `qaid-type-toggle ${t ? "qaid-type-up" : "qaid-type-down"}`}" title="Click to switch">
|
|
@@ -599,7 +599,7 @@ class pt {
|
|
|
599
599
|
o && o.addEventListener("click", () => {
|
|
600
600
|
const n = this.feedbackData.feedbackType === "up" ? "down" : "up";
|
|
601
601
|
this.feedbackData.feedbackType = n, this.config.buttonClass ? (o.classList.toggle("qaid-btn-up", n === "up"), o.classList.toggle("qaid-btn-down", n === "down")) : (o.classList.toggle("qaid-type-up", n === "up"), o.classList.toggle("qaid-type-down", n === "down"));
|
|
602
|
-
const a = this.config.positiveIcon ||
|
|
602
|
+
const a = this.config.positiveIcon || k, s = this.config.negativeIcon || w;
|
|
603
603
|
o.innerHTML = n === "up" ? a : s, this.feedbackId && fetch(`${this.config.endpoint}/${this.feedbackId}`, {
|
|
604
604
|
method: "PATCH",
|
|
605
605
|
headers: { "Content-Type": "application/json" },
|
|
@@ -633,10 +633,10 @@ class pt {
|
|
|
633
633
|
* Destroy the embed and clean up all resources
|
|
634
634
|
*/
|
|
635
635
|
destroy() {
|
|
636
|
-
this.consoleCapture && (this.consoleCapture.restore(), this.consoleCapture = null), window.removeEventListener("resize", this.boundResize), document.removeEventListener("keydown", this.boundKeyDown),
|
|
636
|
+
this.consoleCapture && (this.consoleCapture.restore(), this.consoleCapture = null), window.removeEventListener("resize", this.boundResize), document.removeEventListener("keydown", this.boundKeyDown), C("qaid-highlight"), document.body.classList.remove("qaid-targeting", "qaid-type-up"), this.container && (this.isUserProvidedContainer ? (this.container.innerHTML = "", this.container.classList.remove("qaid-widget", `qaid-${this.config.position}`)) : this.container.remove(), this.container = null), this.removeTargetingOverlay(), this.hideSelectedMarker(), this.modalContainer && (this.modalContainer.remove(), this.modalContainer = null), this.backdrop && (this.backdrop.remove(), this.backdrop = null), this.tooltipElement && (this.tooltipElement.remove(), this.tooltipElement = null), Z();
|
|
637
637
|
}
|
|
638
638
|
}
|
|
639
|
-
function
|
|
639
|
+
function vt() {
|
|
640
640
|
var e;
|
|
641
641
|
const i = document.querySelector(
|
|
642
642
|
'script[type="application/json"][data-feedback-config]'
|
|
@@ -650,54 +650,61 @@ function ut() {
|
|
|
650
650
|
return null;
|
|
651
651
|
}
|
|
652
652
|
}
|
|
653
|
-
function
|
|
653
|
+
function yt(i) {
|
|
654
654
|
const t = i.getAttribute("data-endpoint");
|
|
655
655
|
if (!t) return null;
|
|
656
|
-
const e = i.getAttribute("data-position"), o = i.getAttribute("data-zindex"), n = i.getAttribute("data-positive-color"), a = i.getAttribute("data-negative-color"), s = i.getAttribute("data-marker-color"), l = i.getAttribute("data-container"), r = i.getAttribute("data-button-class"), c = i.getAttribute("data-skip-targeting"), p = i.getAttribute("data-incognito"),
|
|
656
|
+
const e = i.getAttribute("data-position"), o = i.getAttribute("data-zindex"), n = i.getAttribute("data-positive-color"), a = i.getAttribute("data-negative-color"), s = i.getAttribute("data-marker-color"), l = i.getAttribute("data-container"), r = i.getAttribute("data-button-class"), c = i.getAttribute("data-skip-targeting"), p = i.getAttribute("data-incognito"), g = i.getAttribute("data-button-size"), h = i.getAttribute("data-offset-x"), u = i.getAttribute("data-offset-y"), m = i.getAttribute("data-modal-width"), b = i.getAttribute("data-backdrop-opacity"), f = i.getAttribute("data-font-family"), v = i.getAttribute("data-font-size"), S = i.getAttribute("data-tooltip"), E = i.getAttribute("data-banner-text"), I = i.getAttribute("data-banner-hint"), z = i.getAttribute("data-modal-title"), L = i.getAttribute("data-modal-subtitle"), M = i.getAttribute("data-placeholder"), $ = i.getAttribute("data-submit-button"), A = i.getAttribute("data-skip-button"), N = i.getAttribute("data-positive-icon"), P = i.getAttribute("data-negative-icon"), W = i.getAttribute("data-api-key"), U = i.getAttribute("data-capture-screenshot"), y = i.getAttribute("data-screenshot-quality"), q = i.getAttribute("data-screenshot-max-width"), x = i.getAttribute("data-screenshot-max-height");
|
|
657
657
|
return {
|
|
658
658
|
endpoint: t,
|
|
659
|
+
apiKey: W ?? void 0,
|
|
660
|
+
captureScreenshot: U === "true" ? !0 : void 0,
|
|
661
|
+
screenshotOptions: y || q || x ? {
|
|
662
|
+
quality: y ? parseFloat(y) : void 0,
|
|
663
|
+
maxWidth: q ? parseInt(q, 10) : void 0,
|
|
664
|
+
maxHeight: x ? parseInt(x, 10) : void 0
|
|
665
|
+
} : void 0,
|
|
659
666
|
container: l ?? void 0,
|
|
660
667
|
buttonClass: r ?? void 0,
|
|
661
668
|
position: e ?? void 0,
|
|
662
669
|
zIndex: o ? parseInt(o, 10) : void 0,
|
|
663
670
|
skipTargeting: c === "true" ? !0 : void 0,
|
|
664
671
|
incognito: p === "true" ? !0 : void 0,
|
|
665
|
-
buttonSize:
|
|
672
|
+
buttonSize: g ?? void 0,
|
|
666
673
|
offset: h || u ? {
|
|
667
674
|
x: h ? parseInt(h, 10) : void 0,
|
|
668
675
|
y: u ? parseInt(u, 10) : void 0
|
|
669
676
|
} : void 0,
|
|
670
677
|
modalWidth: m ? parseInt(m, 10) : void 0,
|
|
671
678
|
backdropOpacity: b ? parseFloat(b) : void 0,
|
|
672
|
-
fontFamily:
|
|
679
|
+
fontFamily: f ?? void 0,
|
|
673
680
|
fontSize: v ? parseInt(v, 10) : void 0,
|
|
674
681
|
colors: {
|
|
675
682
|
positive: n ?? void 0,
|
|
676
683
|
negative: a ?? void 0,
|
|
677
684
|
marker: s ?? void 0
|
|
678
685
|
},
|
|
679
|
-
text:
|
|
680
|
-
tooltip:
|
|
681
|
-
bannerText:
|
|
682
|
-
bannerHint:
|
|
683
|
-
modalTitle:
|
|
684
|
-
modalSubtitle:
|
|
685
|
-
placeholder:
|
|
686
|
-
submitButton:
|
|
687
|
-
skipButton:
|
|
686
|
+
text: S || E || I || z || L || M || $ || A ? {
|
|
687
|
+
tooltip: S ?? void 0,
|
|
688
|
+
bannerText: E ?? void 0,
|
|
689
|
+
bannerHint: I ?? void 0,
|
|
690
|
+
modalTitle: z ?? void 0,
|
|
691
|
+
modalSubtitle: L ?? void 0,
|
|
692
|
+
placeholder: M ?? void 0,
|
|
693
|
+
submitButton: $ ?? void 0,
|
|
694
|
+
skipButton: A ?? void 0
|
|
688
695
|
} : void 0,
|
|
689
|
-
positiveIcon:
|
|
690
|
-
negativeIcon:
|
|
696
|
+
positiveIcon: N ?? void 0,
|
|
697
|
+
negativeIcon: P ?? void 0
|
|
691
698
|
};
|
|
692
699
|
}
|
|
693
700
|
if (typeof document < "u") {
|
|
694
701
|
const i = () => {
|
|
695
|
-
const t = document.currentScript, e =
|
|
696
|
-
n != null && n.endpoint && new
|
|
702
|
+
const t = document.currentScript, e = vt(), o = t ? yt(t) : null, n = e ?? o;
|
|
703
|
+
n != null && n.endpoint && new bt(n);
|
|
697
704
|
};
|
|
698
705
|
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", i) : i();
|
|
699
706
|
}
|
|
700
707
|
export {
|
|
701
|
-
|
|
708
|
+
bt as FeedbackEmbed
|
|
702
709
|
};
|
|
703
710
|
//# sourceMappingURL=qaid.js.map
|