1504 lines
52 KiB
JavaScript
1504 lines
52 KiB
JavaScript
/* https://hcaptcha.com/license */
|
|
var image_drag_drop = function(t, i, e, s, h, o, n, a, r) {
|
|
"use strict";
|
|
h = h && Object.prototype.hasOwnProperty.call(h, "default") ? h["default"] : h,
|
|
n = n && Object.prototype.hasOwnProperty.call(n, "default") ? n["default"] : n;
|
|
var l = new s.Theme;
|
|
function d(t) {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.bounding = null,
|
|
this.dimensions = null,
|
|
this.scale = 1,
|
|
this._image = null,
|
|
this._aspect = 1,
|
|
this._visible = !1,
|
|
this._offset = 0,
|
|
this.element = this.initComponent(o.Path)
|
|
}
|
|
function c() {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.bounding = null,
|
|
this._visible = !1,
|
|
this._scale = 1,
|
|
this.image = this.initComponent(d),
|
|
this.element = this.initComponent(o.Path),
|
|
this.element.fillColor = "#ebebeb",
|
|
this.element.fill = !1
|
|
}
|
|
function p() {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.text = "",
|
|
this.copy = "",
|
|
this.visible = !1,
|
|
this.scale = 1,
|
|
this.size = 12,
|
|
this.weight = 500,
|
|
this.width = 0,
|
|
this.offset = 0,
|
|
this.typeface = "Helvetica",
|
|
this.color = "#fff",
|
|
this.align = "center",
|
|
this.baseline = "middle",
|
|
this.x = 0,
|
|
this.y = 0
|
|
}
|
|
l.add("contrast", {
|
|
component: {
|
|
prompt: {
|
|
main: {
|
|
fill: "#fff",
|
|
text: "#000"
|
|
}
|
|
},
|
|
expandButton: {
|
|
main: {
|
|
fill: "#000"
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
l.add("grey-red", {
|
|
component: {
|
|
prompt: {
|
|
main: {
|
|
fill: "#6a6a6a"
|
|
}
|
|
},
|
|
task: {
|
|
main: {
|
|
fill: "#fff"
|
|
},
|
|
selected: {
|
|
border: "#FF0000"
|
|
}
|
|
},
|
|
expandButton: {
|
|
main: {
|
|
fill: "#6a6a6a"
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
i.Extend.proto(d, i.BaseComponent),
|
|
d.prototype.load = function(t) {
|
|
var e = this;
|
|
return i.Loader.image(t, {
|
|
crossOrigin: "Anonymous"
|
|
}).then((function(t) {
|
|
null !== e.dom && (e._image = t,
|
|
e._aspect = t.width / t.height,
|
|
e.size.call(e, e.areaWidth, e.areaHeight, e._offset))
|
|
}
|
|
))
|
|
}
|
|
,
|
|
d.prototype.getImage = function() {
|
|
return this._image && this._image.element.dom
|
|
}
|
|
,
|
|
d.prototype.inBounds = function(t) {
|
|
return t.x >= this.bounding.left && t.x <= this.bounding.right && t.y >= this.bounding.top && t.y <= this.bounding.bottom
|
|
}
|
|
,
|
|
d.prototype.size = function(t, i, e) {
|
|
var s = this._aspect
|
|
, h = t - 20
|
|
, o = h / s;
|
|
o > i - 20 && (h = (o = i - 20) * s);
|
|
var n = (t - h) / 2
|
|
, a = e + (i - o) / 2
|
|
, r = n + h
|
|
, l = a + o
|
|
, d = [{
|
|
x: n,
|
|
y: a
|
|
}, {
|
|
x: r,
|
|
y: a
|
|
}, {
|
|
x: r,
|
|
y: l
|
|
}, {
|
|
x: n,
|
|
y: l
|
|
}];
|
|
this.element.setPoints(d),
|
|
this.dimensions = this.element.getDimensions(),
|
|
this.bounding = this.element.getBounding(),
|
|
this.areaWidth = t,
|
|
this.areaHeight = i,
|
|
this.scale = this._image ? h / this._image.width : 1,
|
|
this._offset = e || this._offset
|
|
}
|
|
,
|
|
d.prototype.draw = function(t) {
|
|
this._visible && (t.ctx.save(),
|
|
t.ctx.roundedRect(this.bounding.left, this.bounding.top, this.dimensions.width, this.dimensions.height, 4),
|
|
t.ctx.clip(),
|
|
this._image && t.ctx.drawImage(this._image.element.dom, this.bounding.left, this.bounding.top, this.dimensions.width, this.dimensions.height),
|
|
t.ctx.restore())
|
|
}
|
|
,
|
|
d.prototype.display = function(t) {
|
|
this._visible = t
|
|
}
|
|
,
|
|
i.Extend.proto(c, i.BaseComponent),
|
|
c.prototype.display = function(t) {
|
|
this._visible = t,
|
|
this.image.display(t)
|
|
}
|
|
,
|
|
c.prototype.inImageBounds = function(t) {
|
|
return this.image.inBounds(t)
|
|
}
|
|
,
|
|
c.prototype.inBounds = function(t) {
|
|
return t.x >= this.bounding.left && t.x <= this.bounding.right && t.y >= this.bounding.top && t.y <= this.bounding.bottom
|
|
}
|
|
,
|
|
c.prototype.getBounding = function() {
|
|
return this.image.bounding
|
|
}
|
|
,
|
|
c.prototype.getDimensions = function() {
|
|
return this.image.dimensions
|
|
}
|
|
,
|
|
c.prototype.size = function(t, i, e, s) {
|
|
var h = 0 + t
|
|
, o = e + i
|
|
, n = [{
|
|
x: 0,
|
|
y: e
|
|
}, {
|
|
x: h,
|
|
y: e
|
|
}, {
|
|
x: h,
|
|
y: o
|
|
}, {
|
|
x: 0,
|
|
y: o
|
|
}];
|
|
this.element.setPoints(n),
|
|
this.bounding = this.element.getBounding(),
|
|
this.image.size(t, i, e),
|
|
this.width = t,
|
|
this.height = i,
|
|
this._scale = s
|
|
}
|
|
,
|
|
c.prototype.load = function(t) {
|
|
return this.image.load(t)
|
|
}
|
|
,
|
|
c.prototype.render = function(t) {
|
|
var i = this.element.getPoint(0);
|
|
t.ctx.roundedRect(i.x, i.y, this.width, this.height, 4 / t.scale),
|
|
t.ctx.fillStyle = this.element.fillColor,
|
|
t.ctx.fill(),
|
|
this.image.draw(t)
|
|
}
|
|
,
|
|
i.Extend.proto(p, i.BaseComponent),
|
|
p.prototype.set = function(t) {
|
|
this.copy !== t && (this.text = n.translate(t),
|
|
this.copy = t)
|
|
}
|
|
,
|
|
p.prototype.place = function(t) {
|
|
this.x = t.x,
|
|
this.y = t.y
|
|
}
|
|
,
|
|
p.prototype.move = function(t, i) {
|
|
this.x += t,
|
|
this.y += i
|
|
}
|
|
,
|
|
p.prototype.display = function(t) {
|
|
this.visible = t
|
|
}
|
|
,
|
|
p.prototype.draw = function(t) {
|
|
this.width = t.ctx.measureText(this.text).width,
|
|
this.visible && (t.ctx.fillStyle = this.color,
|
|
t.ctx.textAlign = this.align,
|
|
t.ctx.textBaseline = this.baseline,
|
|
t.ctx.font = this.weight + " " + this.size / this.scale + "px " + this.typeface,
|
|
t.ctx.fillText(this.text, this.x + this.offset, this.y))
|
|
}
|
|
;
|
|
function g() {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.x = 0,
|
|
this.y = 0,
|
|
this.isRTL = n.isRTL(),
|
|
this.width = 0,
|
|
this.height = 0,
|
|
this.scale = 1,
|
|
this.radius = 22,
|
|
this.mobile = !1,
|
|
this.updating = !1,
|
|
this.hovered = !1,
|
|
this.isPressed = !1,
|
|
this.progress = 0,
|
|
this.bounding = this.getBounding(),
|
|
this.pathSVG = new o.PathSVG("data:image/svg+xml,%3csvg width='14' height='19' viewBox='0 0 14 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.99999 18.3334C1.54166 18.3334 1.1493 18.1702 0.822912 17.8438C0.496523 17.5174 0.333328 17.125 0.333328 16.6667V8.33337C0.333328 7.87504 0.496523 7.48268 0.822912 7.15629C1.1493 6.8299 1.54166 6.66671 1.99999 6.66671H2.83333V5.00004C2.83333 3.84726 3.23958 2.86462 4.05208 2.05212C4.86458 1.23962 5.84722 0.833374 7 0.833374C8.15277 0.833374 9.13541 1.23962 9.94791 2.05212C10.7604 2.86462 11.1667 3.84726 11.1667 5.00004V6.66671H12C12.4583 6.66671 12.8507 6.8299 13.1771 7.15629C13.5035 7.48268 13.6667 7.87504 13.6667 8.33337V16.6667C13.6667 17.125 13.5035 17.5174 13.1771 17.8438C12.8507 18.1702 12.4583 18.3334 12 18.3334H1.99999ZM1.99999 16.6667H12V8.33337H1.99999V16.6667ZM7 14.1667C7.45833 14.1667 7.85069 14.0035 8.17708 13.6771C8.50347 13.3507 8.66666 12.9584 8.66666 12.5C8.66666 12.0417 8.50347 11.6493 8.17708 11.323C7.85069 10.9966 7.45833 10.8334 7 10.8334C6.54166 10.8334 6.1493 10.9966 5.82291 11.323C5.49652 11.6493 5.33333 12.0417 5.33333 12.5C5.33333 12.9584 5.49652 13.3507 5.82291 13.6771C6.1493 14.0035 6.54166 14.1667 7 14.1667ZM4.5 6.66671H9.5V5.00004C9.5 4.3056 9.25694 3.71532 8.77083 3.22921C8.28472 2.7431 7.69444 2.50004 7 2.50004C6.30555 2.50004 5.71527 2.7431 5.22916 3.22921C4.74305 3.71532 4.5 4.3056 4.5 5.00004V6.66671Z' fill='white'/%3e%3c/svg%3e"),
|
|
this.text = this.initComponent(p),
|
|
this.text.set("Hold an item to unlock")
|
|
}
|
|
function u(t, i, e, s, h, o, n) {
|
|
t.beginPath(),
|
|
t.moveTo(i + o, e),
|
|
t.lineTo(i + s - n, e),
|
|
t.arcTo(i + s, e, i + s, e + n, n),
|
|
t.lineTo(i + s, e + h - n),
|
|
t.arcTo(i + s, e + h, i + s - n, e + h, n),
|
|
t.lineTo(i + o, e + h),
|
|
t.arcTo(i, e + h, i, e + h - o, o),
|
|
t.lineTo(i, e + o),
|
|
t.arcTo(i, e, i + o, e, o),
|
|
t.closePath(),
|
|
t.stroke()
|
|
}
|
|
i.Extend.proto(g, i.BaseComponent),
|
|
g.prototype.size = function(t, i, e) {
|
|
this.width = t,
|
|
this.height = i,
|
|
this.scale = e,
|
|
this.bounding = this.getBounding(),
|
|
this.text.scale = this.scale,
|
|
this.text.size = 14 * this.scale,
|
|
this.text.weight = 700,
|
|
this.text.display(!0)
|
|
}
|
|
,
|
|
g.prototype.place = function(t, i) {
|
|
this.x = t,
|
|
this.y = i,
|
|
this.pathSVG.move(t + 20, i + this.height / 4),
|
|
this.text.place({
|
|
x: this._parent.width / 2 + (this.updating ? 10 : 15),
|
|
y: this.y + this.height / 2
|
|
}),
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
g.prototype.move = function(t, i) {
|
|
this.x += t,
|
|
this.y += i,
|
|
this.bounding = this.getBounding(),
|
|
this.text.move(t, i),
|
|
this.pathSVG.move(t, i)
|
|
}
|
|
,
|
|
g.prototype.getBounding = function() {
|
|
return {
|
|
left: this.x,
|
|
top: this.y,
|
|
right: this.width,
|
|
bottom: this.height
|
|
}
|
|
}
|
|
,
|
|
g.prototype.draw = function(t) {
|
|
var i, e;
|
|
if (this.isRTL ? (e = (i = (this._parent.width - (this.text.width + (this.updating ? 50 : 60))) / 2) + this.text.width + 20,
|
|
"landscape" === this._parent.orientation && (e += 10,
|
|
i += 10)) : e = (i = (this._parent.width - (this.text.width + (this.updating ? 20 : 30))) / 2) + 14,
|
|
this.pathSVG.move(e, this.y + this.height / 4),
|
|
this.text.offset = this.isRTL ? !this.updating && this.isPressed ? -30 : -20 : !this.updating && this.isPressed ? 10 : 0,
|
|
this.isPressed) {
|
|
var s = n.translate(this.updating ? "Drag the item" : "Hold to unlock");
|
|
this.text.set(s)
|
|
} else {
|
|
var h = n.translate("Hold an item to unlock");
|
|
this.text.set(h)
|
|
}
|
|
t.ctx.beginPath(),
|
|
t.ctx.fillStyle = r.Color.outline,
|
|
t.ctx.strokeStyle = "transparent",
|
|
u(t.ctx, i, this.y, this.text.width + (this.updating ? 40 : 52), this.height, this.radius, this.radius),
|
|
t.ctx.lineWidth = 3,
|
|
t.ctx.fill(),
|
|
t.ctx.closePath(),
|
|
this.isPressed && (t.ctx.beginPath(),
|
|
t.ctx.globalAlpha = .25,
|
|
t.ctx.fillStyle = this.updating ? "transparent" : r.Color.white,
|
|
u(t.ctx, i, this.y, this.progress < 100 ? this.progress * (this.text.width + 24) / 100 : this.text.width + (this.updating ? 40 : 60), this.height, this.radius, this.progress < 100 ? this.progress >= 90 ? this.progress - 90 : 0 : this.radius),
|
|
t.ctx.fill(),
|
|
t.ctx.globalAlpha = 1,
|
|
t.ctx.closePath()),
|
|
this.text.draw(t),
|
|
!this.updating && this.isPressed && (t.ctx.save(),
|
|
this.pathSVG.drawSVG(t),
|
|
t.ctx.fill(),
|
|
t.ctx.restore())
|
|
}
|
|
;
|
|
function f(t) {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.x = 0,
|
|
this.y = 0,
|
|
this.width = 48,
|
|
this.height = 48,
|
|
this.tooltipHeight = 26,
|
|
this.scale = 1,
|
|
this.offset = 8,
|
|
this.iconsoffset = 5,
|
|
this.iconSize = 12,
|
|
this.radius = 8,
|
|
this.top = 0,
|
|
this.right = 0,
|
|
this.mobile = !1,
|
|
this.hovered = !1,
|
|
this.hasHold = t.hold,
|
|
this.isRTL = t.isRTL,
|
|
this.bounding = null,
|
|
this.lockIcon = new o.PathSVG("data:image/svg+xml,%3csvg width='12' height='15' viewBox='0 0 12 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.00001 14.6666C1.63334 14.6666 1.31945 14.5361 1.05834 14.275C0.797227 14.0138 0.666672 13.7 0.666672 13.3333V6.66663C0.666672 6.29996 0.797227 5.98607 1.05834 5.72496C1.31945 5.46385 1.63334 5.33329 2.00001 5.33329H2.66667V3.99996C2.66667 3.07774 2.99167 2.29163 3.64167 1.64163C4.29167 0.991626 5.07778 0.666626 6.00001 0.666626C6.92223 0.666626 7.70834 0.991626 8.35834 1.64163C9.00834 2.29163 9.33334 3.07774 9.33334 3.99996V5.33329H10C10.3667 5.33329 10.6806 5.46385 10.9417 5.72496C11.2028 5.98607 11.3333 6.29996 11.3333 6.66663V13.3333C11.3333 13.7 11.2028 14.0138 10.9417 14.275C10.6806 14.5361 10.3667 14.6666 10 14.6666H2.00001ZM2.00001 13.3333H10V6.66663H2.00001V13.3333ZM6.00001 11.3333C6.36667 11.3333 6.68056 11.2027 6.94167 10.9416C7.20278 10.6805 7.33334 10.3666 7.33334 9.99996C7.33334 9.63329 7.20278 9.3194 6.94167 9.05829C6.68056 8.79718 6.36667 8.66663 6.00001 8.66663C5.63334 8.66663 5.31945 8.79718 5.05834 9.05829C4.79723 9.3194 4.66667 9.63329 4.66667 9.99996C4.66667 10.3666 4.79723 10.6805 5.05834 10.9416C5.31945 11.2027 5.63334 11.3333 6.00001 11.3333ZM4.00001 5.33329H8.00001V3.99996C8.00001 3.4444 7.80556 2.97218 7.41667 2.58329C7.02778 2.1944 6.55556 1.99996 6.00001 1.99996C5.44445 1.99996 4.97223 2.1944 4.58334 2.58329C4.19445 2.97218 4.00001 3.4444 4.00001 3.99996V5.33329Z' fill='white'/%3e%3c/svg%3e"),
|
|
this.arrowIcon = new o.PathSVG("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1V15' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M1 8H15M1 8L3 10M1 8L3 6M15 8L13 6M15 8L13 10M10 3L8 1L6 3M6 13L8 15L10 13' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"),
|
|
this.currentIcon = this.hasHold ? this.arrowIcon : this.lockIcon,
|
|
this.text = this.initComponent(p),
|
|
this.text.set(n.translate("Locked")),
|
|
this.responsiveWidth = this.width,
|
|
this.tooltipX = this.x + .5 * this.width - this.responsiveWidth / 2
|
|
}
|
|
function m() {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.x = 0,
|
|
this.y = 0,
|
|
this.width = 48,
|
|
this.height = 48,
|
|
this.scale = 1,
|
|
this.offset = 8,
|
|
this.radius = 8,
|
|
this.top = 0,
|
|
this.right = 0,
|
|
this.mobile = !1,
|
|
this.hovered = !1,
|
|
this.bgColor = "rgba(255, 255, 255, 0.4)",
|
|
this.imageBgColor = "rgba(255, 255, 255, 0.85)",
|
|
this.bounding = null,
|
|
this.image = new Image
|
|
}
|
|
function y() {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.x = 0,
|
|
this.y = 0,
|
|
this.width = 48,
|
|
this.height = 48,
|
|
this.scale = 1,
|
|
this.offset = 8,
|
|
this.radius = 8,
|
|
this.top = 0,
|
|
this.right = 0,
|
|
this.mobile = !1,
|
|
this.hovered = !1,
|
|
this.bounding = null
|
|
}
|
|
function x(t) {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.orientation = t.orientation || "portrait",
|
|
this.hold = t.hold,
|
|
this.x = 0,
|
|
this.y = 0,
|
|
this.width = 48,
|
|
this.height = 48,
|
|
this.scale = 1,
|
|
this.offset = 8,
|
|
this.unlockedStateOffset = 0,
|
|
this.radius = 8,
|
|
this.top = 0,
|
|
this.right = 0,
|
|
this.mobile = !1,
|
|
this.bgColor = "rgba(255, 255, 255, 0.4)",
|
|
this.imageBgColor = "rgba(255, 255, 255, 0.85)",
|
|
this.exhausted = !1,
|
|
this.hovered = !1,
|
|
this.bounding = null,
|
|
this.step = 0,
|
|
this.icon = this.initComponent(f, {
|
|
hold: this.hold
|
|
}),
|
|
this.image = this.initComponent(m),
|
|
this.outline = this.initComponent(y)
|
|
}
|
|
function v(t, e) {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.orientation = t || "portrait",
|
|
this.hold = e,
|
|
this.key = null,
|
|
this.value = null,
|
|
this.isPressed = !1,
|
|
this.progress = 0,
|
|
this.step = 0,
|
|
this.scale = 1,
|
|
this.mobile = !1,
|
|
this.draggable = this.initComponent(x, {
|
|
orientation: this.orientation,
|
|
hold: this.hold
|
|
}),
|
|
this.x = 0,
|
|
this.y = 0,
|
|
this.bounding = null,
|
|
this.coords = null,
|
|
this.setExhausted(!1)
|
|
}
|
|
function b(t) {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.orientation = t.orientation || "portrait",
|
|
this.width = 0,
|
|
this.height = 0,
|
|
this.scale = 1,
|
|
this.coords = {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
this.active = !1,
|
|
this.visible = !1,
|
|
this.hold = !1,
|
|
this.image = null,
|
|
this.bounding = null,
|
|
this.dimensions = null,
|
|
this.progressBar = this.initComponent(g),
|
|
this.items = []
|
|
}
|
|
function w(t) {
|
|
i.Extend.self(this, i.BaseComponent),
|
|
this.scale = 1,
|
|
this.width = 0,
|
|
this.height = 0,
|
|
this.updated = !1,
|
|
this.selectedIndex = -1,
|
|
this.key = null,
|
|
this.config = t.task || {},
|
|
this.hold = !t.hold,
|
|
this.orientation = t.orientation || "portrait",
|
|
this.cursor = "default",
|
|
this.userDraw = !0,
|
|
this.coords = null,
|
|
this.area = this.initComponent(c),
|
|
this.draggables = this.initComponent(b, {
|
|
orientation: this.orientation
|
|
})
|
|
}
|
|
function _() {
|
|
i.Extend.self(this, i.DomComponent, "challenge-view"),
|
|
this.scale = 1,
|
|
this.updated = !1,
|
|
this._coords = {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
this._cursor = "default",
|
|
this._lock = !1,
|
|
this._task = null,
|
|
this.config = {
|
|
orientation: "portrait",
|
|
skipText: !1,
|
|
hold: !1
|
|
},
|
|
this.header = this.initComponent(a.ChallengeHeader, {
|
|
theme: l
|
|
}),
|
|
this.canvas = this.initComponent(o.Canvas),
|
|
this.canvas.setAttribute("tabindex", "0");
|
|
var t = n.translate("Image-based CAPTCHA challenge. Please use the 'Accessibility: Retrieve Cookie' or 'Accessibility: Text Challenge' options if available in the challenge menu.");
|
|
this.canvas.setAttribute("role", "img"),
|
|
this.canvas.setAttribute("aria-label", t);
|
|
var e = C.bind(this)
|
|
, s = k.bind(this);
|
|
this.render = this.render.bind(this),
|
|
this.canvas.addEventListener("down", e),
|
|
this.canvas.addEventListener("move", e),
|
|
this.canvas.addEventListener("up", e),
|
|
this.canvas.addEventListener("out", e),
|
|
this.addEventListener("keydown", s)
|
|
}
|
|
function C(t) {
|
|
if (!this._lock && (h.System.desktop || t.preventDefault(),
|
|
3 !== t.keyNum)) {
|
|
var i = this._task
|
|
, e = "default"
|
|
, s = {
|
|
x: Math.round(t.elementX / this.scale),
|
|
y: Math.round(t.elementY / this.scale)
|
|
}
|
|
, o = {
|
|
x: s.x,
|
|
y: s.y
|
|
};
|
|
if (i) {
|
|
var n = i.check(s)
|
|
, a = i.area.inImageBounds(s)
|
|
, r = i.area.inBounds(s);
|
|
if (a && (e = n && i.selectedIndex > -1 ? "grabbing" : "pointer"),
|
|
"down" === t.action)
|
|
!n && i.userDraw ? a && i.create(s) : (i.selectUI(s),
|
|
i.hoverOn(s),
|
|
n && (e = "grabbing"));
|
|
else if (!r && i.userDraw || "up" === t.action || "out" === t.action)
|
|
n && (i.releaseUI(s),
|
|
i.hoverOff(s),
|
|
e = "pointer");
|
|
else if ("move" === t.action)
|
|
if (n) {
|
|
if (i.hoverOn(s),
|
|
i.isUpdating()) {
|
|
this.updated || (this.updated = !0,
|
|
this.emit("update"));
|
|
var l = {
|
|
x: s.x - this._coords.x,
|
|
y: s.y - this._coords.y
|
|
};
|
|
o.x = i.draggables.items[i.selectedIndex].x,
|
|
o.y = i.draggables.items[i.selectedIndex].y,
|
|
e = "grabbing",
|
|
i.moveElement(l)
|
|
}
|
|
} else
|
|
i.releaseUI(s),
|
|
i.hoverOff(s)
|
|
}
|
|
this._coords = s,
|
|
this._cursor !== e && (this._cursor = e,
|
|
this.canvas.css({
|
|
cursor: e
|
|
}))
|
|
}
|
|
}
|
|
function k(t) {
|
|
9 === t.keyNum && t.shiftKey && (this.emit("blur"),
|
|
t.stopPropagation && t.stopPropagation(),
|
|
t.preventDefault && t.preventDefault())
|
|
}
|
|
function B(t) {
|
|
i.Extend.self(this, i.DomComponent, "challenge"),
|
|
this.type = "image_drag_drop",
|
|
this.resolve = null,
|
|
this.reject = null,
|
|
this.breadcrumbs = 0,
|
|
this.served = 0,
|
|
this.mobile = !1,
|
|
this.orientation = "portrait",
|
|
this._data = null,
|
|
this._answers = Object.create(null),
|
|
this._total = 0,
|
|
t && this.theme(t.theme.name, t.theme.config),
|
|
this.syncCheckState = this.syncCheckState.bind(this);
|
|
var s = this;
|
|
this.view = this.initComponent(_),
|
|
this.view.on("update", this.syncCheckState),
|
|
this.view.on("blur", (function() {
|
|
s.emit("focus-check")
|
|
}
|
|
)),
|
|
this.renderLoop = null,
|
|
e.Render.add(this.view.render)
|
|
}
|
|
return i.Extend.proto(f, i.BaseComponent),
|
|
f.prototype.size = function(t, i, e) {
|
|
this.width = t,
|
|
this.height = i,
|
|
this.scale = e,
|
|
this.bounding = this.getBounding(),
|
|
null !== this.text && this.text !== undefined && (this.text.scale = this.scale,
|
|
this.text.size = 12 * this.scale,
|
|
this.text.weight = 700,
|
|
this.text.display(!0)),
|
|
this.responsiveWidth = this.width,
|
|
this.tooltipX = this.x + .5 * this.width - this.responsiveWidth / 2
|
|
}
|
|
,
|
|
f.prototype.place = function(t, i) {
|
|
this.x = t,
|
|
this.y = i,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
f.prototype.move = function(t, i) {
|
|
this.x += t,
|
|
this.y += i,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
f.prototype.hover = function(t) {
|
|
this.hovered = t
|
|
}
|
|
,
|
|
f.prototype.updateLabel = function(t, i, s) {
|
|
if (null !== this.text && this.text !== undefined) {
|
|
this.text.set(n.translate(!this._parent.exhausted && this.hasHold ? "Locked" : "Move"));
|
|
var h = 25;
|
|
"landscape" === this._parent.orientation ? (h = 15,
|
|
this.text.offset = this.currentIcon.bounding.width + this.iconsoffset - 1,
|
|
this.text.size = e.MathUtil.lerp(this.text.size, i ? 10 * this.scale : 7 * this.scale, .25)) : (this.text.offset = this.currentIcon.bounding.width + (i ? this.isRTL ? this.iconsoffset : this.iconsoffset + 6 : this.iconsoffset),
|
|
this.text.size = e.MathUtil.lerp(this.text.size, i ? 14 * this.scale : 12 * this.scale, .25)),
|
|
this.iconSize = i ? 12 : 10;
|
|
var o = this.isRTL ? this.x + this.iconsoffset - this.offset - s + (this._parent.exhausted && this.hasHold ? 4 : 0) - h / 2 : this.x + this.width / 2 + this.iconsoffset - this.offset - s + (this._parent.exhausted && this.hasHold ? 4 : 0) - h;
|
|
this.isRTL && "landscape" === this._parent.orientation && !i ? o -= 5 : this.isRTL && "landscape" === this._parent.orientation && i && (o -= 10),
|
|
this.text.x = o,
|
|
this._parent.mobile && i && (this.text.x += this.iconSize),
|
|
this.text.y = this.y - this.offset - s,
|
|
this.text.draw(t)
|
|
}
|
|
}
|
|
,
|
|
f.prototype.draw = function(t) {
|
|
if (this.text && t) {
|
|
this.tooltipX = this.x + .5 * this.width - this.responsiveWidth / 2;
|
|
var i = "landscape" === this._parent.orientation ? this._parent.unlockedStateOffset + 10 : this._parent.unlockedStateOffset
|
|
, s = this._parent.isOnHold
|
|
, h = null !== this.text && this.text !== undefined ? this.text : "Locked"
|
|
, o = h.width > 55 || !this.hasHold ? (this.width + 10 + h.width / 2) * (s ? 1.2 : 1) : s ? this.width + h.width / 2 : this.width + 10;
|
|
this.responsiveWidth = e.MathUtil.lerp(this.responsiveWidth, "landscape" === this._parent.orientation ? o + 15 : o, .25),
|
|
t.ctx.beginPath(),
|
|
t.ctx.fillStyle = r.Color.outline,
|
|
t.ctx.roundedRect(this.tooltipX, this.y - this.offset - i - (s ? .5 * this.tooltipHeight : .4 * this.tooltipHeight), this.responsiveWidth, s ? this.tooltipHeight : .8 * this.tooltipHeight, this.iconSize + 2),
|
|
t.ctx.fill(),
|
|
t.ctx.closePath(),
|
|
this.updateLabel(t, s, i),
|
|
t.ctx.beginPath(),
|
|
this.hasHold ? (t.ctx.lineWidth = this._parent.exhausted ? 1 : .5,
|
|
t.ctx.strokeStyle = this._parent.exhausted ? "white" : "transparent",
|
|
t.ctx.fillStyle = this._parent.exhausted ? "transparent" : r.Color.white) : (t.ctx.lineWidth = 1,
|
|
t.ctx.strokeStyle = "white",
|
|
t.ctx.fillStyle = "white"),
|
|
this.currentIcon.size(this.iconSize, this.iconSize);
|
|
var n = this.y - (this.currentIcon.bounding.height + 1) - (this._parent.exhausted && this.hasHold ? i + 1 : i + 2)
|
|
, a = this.isRTL ? s || "landscape" !== this._parent.orientation ? s && "landscape" === this._parent.orientation ? 28 : 20 : 25 : "landscape" === this._parent.orientation ? 10 : 25
|
|
, l = this.isRTL ? this.tooltipX + this.offset + this.width / 2 - this.currentIcon.bounding.width / 2 + a - 4 : this.tooltipX + this.offset + this.width / 2 - this.currentIcon.bounding.width / 2 - a;
|
|
this.isRTL && !this._parent.exhausted && s && (l += 4),
|
|
this.currentIcon.move(l, n),
|
|
this.currentIcon.drawSVG(t),
|
|
t.ctx.fill(),
|
|
t.ctx.closePath(),
|
|
this.currentIcon = !this._parent.exhausted && this.hasHold ? this.lockIcon : this.arrowIcon,
|
|
this.iconsoffset = this.isRTL ? this._parent.exhausted && this.hasHold ? 14 : 16.5 : this._parent.exhausted && this.hasHold ? 12.5 : 15
|
|
}
|
|
}
|
|
,
|
|
f.prototype.getBounding = function() {
|
|
return {
|
|
left: this.x - 10,
|
|
top: this.y - 10,
|
|
bottom: this.y + this.height + 10,
|
|
right: this.x + this.width + 10
|
|
}
|
|
}
|
|
,
|
|
i.Extend.proto(m, i.BaseComponent),
|
|
m.prototype.size = function(t, i, e) {
|
|
this.width = t,
|
|
this.height = i,
|
|
this.scale = e,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
m.prototype.load = function(t, s) {
|
|
var h = this;
|
|
return i.Loader.image(t, {
|
|
crossOrigin: "Anonymous"
|
|
}).then((function(t) {
|
|
null !== h.dom && (h.image = t.element.dom,
|
|
h.width = e.MathUtil.clamp(h.image.width, 50, 200) * s,
|
|
h.height = e.MathUtil.clamp(h.image.height, 50, 200) * s,
|
|
e.ErrorUtil.sentryBreadcrumb("DND Asset Loaded: ", "challenge", "info", t))
|
|
}
|
|
))
|
|
}
|
|
,
|
|
m.prototype.place = function(t, i) {
|
|
this.x = t,
|
|
this.y = i,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
m.prototype.move = function(t, i) {
|
|
this.x += t,
|
|
this.y += i,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
m.prototype.hover = function(t) {
|
|
this.hovered = t
|
|
}
|
|
,
|
|
m.prototype.draw = function(t) {
|
|
if (this.image && this.image.src) {
|
|
var i = this._parent.unlockedStateOffset;
|
|
t.ctx.roundedRect(this.x - this.offset + 1 - i, this.y - this.offset + 1 - i, this.width + 2 * (this.offset + i) - 2, this.height + 2 * (this.offset + i) - 2, this.radius),
|
|
t.ctx.fillStyle = this.bgColor,
|
|
t.ctx.fill(),
|
|
t.ctx.closePath(),
|
|
t.ctx.beginPath(),
|
|
t.ctx.fillStyle = this.imageBgColor,
|
|
t.ctx.strokeStyle = this.imageBgColor,
|
|
t.ctx.lineWidth = .5;
|
|
var e = this.image.width
|
|
, s = this.image.height
|
|
, h = this.x + (this.width - e) / 2
|
|
, o = this.y + (this.height - s) / 2;
|
|
t.ctx.drawImage(this.image, h, o, e, s),
|
|
t.ctx.closePath(),
|
|
t.ctx.stroke(),
|
|
t.ctx.fill()
|
|
}
|
|
}
|
|
,
|
|
m.prototype.getBounding = function() {
|
|
return {
|
|
left: this.x - 10,
|
|
top: this.y - 10,
|
|
bottom: this.y + this.height + 10,
|
|
right: this.x + this.width + 10
|
|
}
|
|
}
|
|
,
|
|
i.Extend.proto(y, i.BaseComponent),
|
|
y.prototype.size = function(t, i, e) {
|
|
this.width = t,
|
|
this.height = i,
|
|
this.scale = e,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
y.prototype.place = function(t, i) {
|
|
this.x = t,
|
|
this.y = i,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
y.prototype.move = function(t, i) {
|
|
this.x += t,
|
|
this.y += i,
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
y.prototype.hover = function(t) {
|
|
this.hovered = t
|
|
}
|
|
,
|
|
y.prototype.draw = function(t) {
|
|
var i = this._parent.unlockedStateOffset;
|
|
if (t.ctx.beginPath(),
|
|
t.ctx.roundedRect(this.x - this.offset - i, this.y - this.offset - i, this.width + 2 * (this.offset + i), this.height + 2 * (this.offset + i), this.radius),
|
|
t.ctx.strokeStyle = this._parent.exhausted || this.hovered ? r.Color.outlineLight : "transparent",
|
|
t.ctx.fillStyle = "transparent",
|
|
t.ctx.lineWidth = 2,
|
|
t.ctx.closePath(),
|
|
this._parent.progress > 0 && this._parent.progress < 100) {
|
|
var e = Math.round(this._parent.progress / 10 * 20 / 10 - 2 * this._parent.step / 10);
|
|
t.ctx.setLineDash && t.ctx.setLineDash([e, 20 - e])
|
|
}
|
|
t.ctx.stroke(),
|
|
t.ctx.fill(),
|
|
t.ctx.setLineDash && t.ctx.setLineDash([])
|
|
}
|
|
,
|
|
y.prototype.getBounding = function() {
|
|
return {
|
|
left: this.x - 10,
|
|
top: this.y - 10,
|
|
bottom: this.y + this.height + 10,
|
|
right: this.x + this.width + 10
|
|
}
|
|
}
|
|
,
|
|
i.Extend.proto(x, i.BaseComponent),
|
|
x.prototype.size = function(t, i, e) {
|
|
this.width = t,
|
|
this.height = i,
|
|
this.scale = e,
|
|
this.outline.size(t, i, e),
|
|
this.image.size(t, i, e),
|
|
this.icon.size(t, i, e),
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
x.prototype.load = function(t, i) {
|
|
var s = this;
|
|
return e.ErrorUtil.sentryBreadcrumb("DND DraggableGraphic setData", "challenge", "info", {
|
|
src: t
|
|
}),
|
|
this.image.load(t, i).then((function() {
|
|
var t = 2 * s.image.offset
|
|
, e = s.image.width + t
|
|
, h = s.image.height + t;
|
|
s.size(e, h, i),
|
|
s.place(s._parent.x - s.width / 2, s._parent.y - s.height / 2)
|
|
}
|
|
))
|
|
}
|
|
,
|
|
x.prototype.place = function(t, i) {
|
|
this.x = t,
|
|
this.y = i,
|
|
this.outline.place(t, i),
|
|
this.image.place(t, i),
|
|
this.icon.place(t, i),
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
x.prototype.move = function(t, i) {
|
|
this.x += t,
|
|
this.y += i,
|
|
this.outline.move(t, i),
|
|
this.image.move(t, i),
|
|
this.icon.move(t, i),
|
|
this.bounding = this.getBounding()
|
|
}
|
|
,
|
|
x.prototype.hitTest = function(t) {
|
|
var i = !1;
|
|
return t.x >= this.bounding.left && t.x <= this.bounding.right && t.y >= this.bounding.top && t.y <= this.bounding.bottom && (i = {
|
|
action: "move",
|
|
target: this
|
|
}),
|
|
i
|
|
}
|
|
,
|
|
x.prototype.hover = function(t) {
|
|
this.hovered = t,
|
|
this.outline.hover(t),
|
|
this.image.hover(t),
|
|
this.icon.hover(t)
|
|
}
|
|
,
|
|
x.prototype.draw = function(t) {
|
|
this.progress = this._parent.progress,
|
|
this.step = this._parent.step,
|
|
this.isOnHold = 0 !== this._parent.step && this._parent.progress > 0 || 0 === this._parent.step && this._parent.isPressed,
|
|
this.unlockedStateOffset = e.MathUtil.lerp(this.unlockedStateOffset, (this.isOnHold ? this.mobile ? 18 : 8 : 0) * this.scale || 1, .25),
|
|
t.ctx.save(),
|
|
this.outline.draw(t),
|
|
this.image.draw(t),
|
|
this.icon.draw(t),
|
|
t.ctx.restore()
|
|
}
|
|
,
|
|
x.prototype.getBounding = function() {
|
|
return {
|
|
left: this.x - 10,
|
|
top: this.y - 10,
|
|
bottom: this.y + this.height + 10,
|
|
right: this.x + this.width + 10
|
|
}
|
|
}
|
|
,
|
|
i.Extend.proto(v, i.BaseComponent),
|
|
v.prototype.load = function(t, i) {
|
|
var e = this;
|
|
return new Promise((function(s, h) {
|
|
try {
|
|
e.key = t.key,
|
|
e.value = t.value;
|
|
var o = e.value.entity_uri;
|
|
e.draggable.step = e.step,
|
|
e.draggable.load(o, i).then((function() {
|
|
s(e.draggable)
|
|
}
|
|
))["catch"]((function(t) {
|
|
h(t)
|
|
}
|
|
))
|
|
} catch (n) {
|
|
h(n)
|
|
}
|
|
}
|
|
))
|
|
}
|
|
,
|
|
v.prototype.size = function(t, i, e, s, h, o) {
|
|
this.width = t,
|
|
this.height = i,
|
|
this.scale = h,
|
|
this.draggable.top = e,
|
|
this.draggable.right = s,
|
|
this.draggable.mobile = o,
|
|
this.bounding = this.draggable.bounding
|
|
}
|
|
,
|
|
v.prototype.place = function(t, i) {
|
|
this.draggable.place(t - this.width / 2, i - this.height / 2),
|
|
this.x = t,
|
|
this.y = i,
|
|
this.bounding = this.draggable.bounding
|
|
}
|
|
,
|
|
v.prototype.getBounding = function() {
|
|
return this.draggable.getBounding()
|
|
}
|
|
,
|
|
v.prototype.move = function(t) {
|
|
this.draggable.move(t.x, t.y),
|
|
this.x += t.x,
|
|
this.y += t.y,
|
|
this.bounding = this.draggable.getBounding()
|
|
}
|
|
,
|
|
v.prototype.hitTest = function(t) {
|
|
return this.draggable.hitTest(t)
|
|
}
|
|
,
|
|
v.prototype.render = function(t) {
|
|
this.draggable.draw(t)
|
|
}
|
|
,
|
|
v.prototype.replenish = function() {
|
|
this.setExhausted(!1),
|
|
this.progress = 0
|
|
}
|
|
,
|
|
v.prototype.hover = function(t) {
|
|
return this.draggable.hover(t)
|
|
}
|
|
,
|
|
v.prototype.setExhausted = function(t) {
|
|
this.draggable.exhausted = t,
|
|
this.isPressed = t
|
|
}
|
|
,
|
|
i.Extend.proto(b, i.BaseComponent),
|
|
b.prototype.inBounds = function(t) {
|
|
return t.x >= this.bounding.left && t.x <= this.bounding.right && t.y >= this.bounding.top && t.y <= this.bounding.bottom
|
|
}
|
|
,
|
|
b.prototype.display = function(t) {
|
|
this.visible = t
|
|
}
|
|
,
|
|
b.prototype.load = function(t) {
|
|
var i = this;
|
|
return new Promise((function(e, s) {
|
|
try {
|
|
i.active = !0;
|
|
var h, o, n = "landscape" === i.orientation ? i.scale : 1, a = [];
|
|
for (o = 0; o < t.length; o++) {
|
|
h = new v(i.orientation,i.hold);
|
|
var r = 0;
|
|
if (i.hold) {
|
|
var l = 1 + (new Date).getTime() % 1e3 / 1e3;
|
|
r = 1 + (l + Math.random() * (3 - l))
|
|
}
|
|
h.step = r,
|
|
h.index = i.items.length,
|
|
a.push(h.load(t[o], n)),
|
|
i.items.push(h)
|
|
}
|
|
Promise.all(a).then((function(t) {
|
|
e(t)
|
|
}
|
|
))["catch"]((function(t) {
|
|
s(t)
|
|
}
|
|
))
|
|
} catch (d) {
|
|
s(d)
|
|
}
|
|
}
|
|
))
|
|
}
|
|
,
|
|
b.prototype.size = function(t, i, e, s, h, o) {
|
|
for (var n, a, r = this.items.length, l = "landscape" === this.orientation ? h : 1, d = -1; ++d < r; ) {
|
|
var c = (n = this.items[d]).draggable.width
|
|
, p = n.draggable.height;
|
|
a = {
|
|
x: n.value.coords[0] * l,
|
|
y: n.value.coords[1] * l
|
|
},
|
|
n.size(c, p, e, s + t, h, o),
|
|
n.place(a.x + s, a.y + e)
|
|
}
|
|
this.height = i,
|
|
this.width = t,
|
|
this.scale = h,
|
|
this.bounding = {
|
|
left: s,
|
|
top: e,
|
|
bottom: e + i,
|
|
right: s + t
|
|
},
|
|
this.progressBar.size(162 * l, 46, h),
|
|
this.progressBar.place(this.bounding.left + this.width * l / 2 - this.progressBar.width * l / 2, this.bounding.top - 8, this.width, this.height)
|
|
}
|
|
,
|
|
b.prototype.handlePress = function(t) {
|
|
var i = this.progressBar.isPressed
|
|
, e = this.progressBar.progress < 100
|
|
, s = this.items[t];
|
|
return !(!s || !i) && (e && this.hold ? (s.progress += s.draggable.step,
|
|
this.progressBar.progress = s.progress) : (this.progressBar.updating = !0,
|
|
this.hover(this.coords, "out"),
|
|
s.setExhausted(!0)),
|
|
i)
|
|
}
|
|
,
|
|
b.prototype.getLength = function() {
|
|
return this.items.length
|
|
}
|
|
,
|
|
b.prototype.check = function(t) {
|
|
for (var i = !1, e = !1, s = this.items.length; --s > -1 && !1 === e; )
|
|
e = this.items[s].hitTest(t),
|
|
i = this.items[s];
|
|
return !1 !== e && {
|
|
action: e.action,
|
|
target: e.target,
|
|
draggable: i
|
|
}
|
|
}
|
|
,
|
|
b.prototype.select = function(t) {
|
|
return !1 === t.draggable.exhausted && (t.draggable.action = "move",
|
|
t)
|
|
}
|
|
,
|
|
b.prototype.replenish = function(t) {
|
|
t >= 0 && (this.items[t].replenish(),
|
|
this.progressBar.isPressed = !1,
|
|
this.progressBar.progress = 0,
|
|
this.progressBar.updating = !1)
|
|
}
|
|
,
|
|
b.prototype.hover = function(t) {
|
|
for (var i = this.items.length; --i > -1; )
|
|
this.items[i].hitTest(t) ? this.items[i].hover(!0) : this.items[i].hover(!1)
|
|
}
|
|
,
|
|
b.prototype.render = function(t) {
|
|
if (this.visible) {
|
|
for (var i = -1; ++i < this.items.length; )
|
|
i !== this._parent.selectedIndex && this.items[i].render(t);
|
|
this._parent.selectedIndex >= 0 && this.items[this._parent.selectedIndex].render(t),
|
|
this.hold && this.progressBar.draw(t)
|
|
}
|
|
}
|
|
,
|
|
i.Extend.proto(w, i.BaseComponent),
|
|
w.prototype.display = function(t) {
|
|
this.visible = t,
|
|
this.area.display(t),
|
|
this.draggables.display(t)
|
|
}
|
|
,
|
|
w.prototype.load = function(t) {
|
|
var i = this;
|
|
return new Promise((function(e, s) {
|
|
try {
|
|
var h = t.task.datapoint_uri
|
|
, o = t.task.entities;
|
|
i.display.call(i, !1);
|
|
for (var n = [i.area.load(h)], a = [], r = 0; r < o.length; r++)
|
|
a.push({
|
|
key: r,
|
|
value: o[r]
|
|
});
|
|
i.draggables.hold = i.hold,
|
|
n.push(i.draggables.load(a)),
|
|
i.userDraw = !1,
|
|
i.key = t.task.task_key,
|
|
i.options = a,
|
|
Promise.all(n).then((function(t) {
|
|
e(t)
|
|
}
|
|
))["catch"]((function(t) {
|
|
s(t)
|
|
}
|
|
))
|
|
} catch (l) {
|
|
s(l)
|
|
}
|
|
}
|
|
))
|
|
}
|
|
,
|
|
w.prototype.size = function(t, i, e) {
|
|
var s, h;
|
|
"landscape" === this.orientation ? (h = 440,
|
|
i = (s = 215) / 350) : (s = 350,
|
|
h = 500),
|
|
this.area.size(h, s, t, i);
|
|
var o = this.area.getBounding();
|
|
this.draggables.size(h - 20, s, t, o.left, i, e),
|
|
this.width = h,
|
|
this.height = s,
|
|
this.scale = i
|
|
}
|
|
,
|
|
w.prototype.check = function(t) {
|
|
return this.isUpdating() ? this.draggables.inBounds(t) && "label" : this.draggables.check(t)
|
|
}
|
|
,
|
|
w.prototype.isUpdating = function() {
|
|
var t = !this.draggables.hold && this.draggables.progressBar.isPressed
|
|
, i = this.draggables.hold && this.draggables.progressBar.isPressed && this.draggables.progressBar.progress >= 100;
|
|
return t || i
|
|
}
|
|
,
|
|
w.prototype.selectUI = function(t) {
|
|
this.coords = t;
|
|
var i = this.draggables.check(t);
|
|
if (i) {
|
|
var e = this.draggables.select(i.draggable);
|
|
e && (e.coords = t,
|
|
this.selectedIndex = e.index,
|
|
this.draggables.progressBar.isPressed = !0)
|
|
}
|
|
}
|
|
,
|
|
w.prototype.releaseUI = function() {
|
|
this.draggables.replenish(this.selectedIndex),
|
|
this.selectedIndex = -1,
|
|
this.updated = !0
|
|
}
|
|
,
|
|
w.prototype.moveElement = function(t) {
|
|
var i = this.draggables.items[this.selectedIndex]
|
|
, e = i.draggable.getBounding()
|
|
, s = this.area.getBounding();
|
|
t.x + e.right > s.right ? t.x = s.right - e.right : t.x + e.left < s.left && (t.x = s.left - e.left),
|
|
t.y + e.bottom > s.bottom ? t.y = s.bottom - e.bottom : t.y + e.top < s.top && (t.y = s.top - e.top),
|
|
i.move(t)
|
|
}
|
|
,
|
|
w.prototype.hoverOn = function(t) {
|
|
var i = null;
|
|
return !!this.draggables.inBounds(t) && (i = this.draggables.check(t),
|
|
this.draggables.hover(t, i ? "over" : "out"),
|
|
!0)
|
|
}
|
|
,
|
|
w.prototype.hoverOff = function(t) {
|
|
this.draggables.hover(t, "out")
|
|
}
|
|
,
|
|
w.prototype.getTaskImage = function() {
|
|
return this.area.image
|
|
}
|
|
,
|
|
w.prototype.prerender = function(t) {
|
|
this.area.render(t)
|
|
}
|
|
,
|
|
w.prototype.handleProgress = function() {
|
|
this.selectedIndex >= 0 && (this.draggables.items[this.selectedIndex] && this.draggables.handlePress(this.selectedIndex))
|
|
}
|
|
,
|
|
w.prototype.render = function(t) {
|
|
this.handleProgress(),
|
|
this.area.render(t),
|
|
this.draggables.render(t)
|
|
}
|
|
,
|
|
w.prototype.getAnswers = function() {
|
|
for (var t = [], i = this.draggables.items, e = this.area.getBounding(), s = this.area.image.scale, h = 0; h < i.length; h++) {
|
|
for (var o = [i[h].x, i[h].y], n = i[h].value.entity_id, a = 0; a < o.length; a += 2)
|
|
o[a] = Math.round((o[a] - e.left) / s),
|
|
o[a + 1] = Math.round((o[a + 1] - e.top) / s);
|
|
t.push({
|
|
entity_name: n,
|
|
entity_type: "default",
|
|
entity_coords: o
|
|
})
|
|
}
|
|
return t
|
|
}
|
|
,
|
|
i.Extend.proto(_, i.DomComponent),
|
|
_.prototype.lock = function(t) {
|
|
this._lock = t
|
|
}
|
|
,
|
|
_.prototype.display = function(t) {
|
|
this.updated = !1,
|
|
this.header.display(t)
|
|
}
|
|
,
|
|
_.prototype.focus = function() {
|
|
this.canvas.focus()
|
|
}
|
|
,
|
|
_.prototype.style = function(t, i) {
|
|
var e = "landscape" === this.config.orientation
|
|
, s = i ? (e ? t + 60 : t) / 500 : 1
|
|
, o = this.header.style(t, 10, i).height + 10;
|
|
this.header.setCopy(),
|
|
this.top = o / s,
|
|
this._task.size(this.top, s, i),
|
|
this.canvas.css({
|
|
position: "absolute",
|
|
top: 0,
|
|
cursor: this._cursor,
|
|
zIndex: 10
|
|
}),
|
|
o += this._task.height * s,
|
|
this.canvas.dpr = h.System.mobile && this.canvas.dpr > 1 ? Math.round(this.canvas.dpr) : 2,
|
|
this.canvas.scale = s,
|
|
this.canvas.dimensions(t, o),
|
|
this.css({
|
|
width: t,
|
|
height: o,
|
|
borderRadius: 4,
|
|
overflow: "hidden"
|
|
}),
|
|
this.width = t,
|
|
this.height = o,
|
|
this.scale = s,
|
|
this.mobile = i
|
|
}
|
|
,
|
|
_.prototype.render = function() {
|
|
this.canvas.ctx && (this.canvas.clear(),
|
|
this._task && this._task.render(this.canvas))
|
|
}
|
|
,
|
|
_.prototype.clear = function() {
|
|
this._task && (this._task = this._task.destroy())
|
|
}
|
|
,
|
|
_.prototype.isEmpty = function() {
|
|
return 0 === this._task.draggables.getLength()
|
|
}
|
|
,
|
|
_.prototype.setup = function(t, i) {
|
|
this.config = {
|
|
orientation: i.orientation,
|
|
skipText: t.show_skip_text,
|
|
hold: t.normalized,
|
|
prompt: t.requester_question,
|
|
example: t.requester_question_example
|
|
},
|
|
this.header.load(this.config.prompt, this.config.example, i),
|
|
this.header.setCopy()
|
|
}
|
|
,
|
|
_.prototype.createTask = function(t, i, s) {
|
|
var h = this;
|
|
return new Promise((function(o, n) {
|
|
try {
|
|
var a = [];
|
|
e.ErrorUtil.sentryBreadcrumb("Create DND Task", "challenge", "info", i),
|
|
h._task ? h._task = h._task.destroy() : (h.header.load(t, h.config.example, h.config),
|
|
h.translate()),
|
|
h._task = h.initComponent(w, {
|
|
task: s,
|
|
orientation: h.config.orientation,
|
|
hold: h.config.hold
|
|
}),
|
|
h._task.size(h.top, h.scale, h.mobile);
|
|
h._task.on("update", (function(t) {
|
|
h.emit("update", !h.isEmpty())
|
|
}
|
|
)),
|
|
a.push(h._task.load(i)["catch"]((function(t) {
|
|
throw t
|
|
}
|
|
))),
|
|
Promise.all(a).then((function(t) {
|
|
return h.style.call(h, h.width, h.mobile),
|
|
h._task.display(!0),
|
|
o(t)
|
|
}
|
|
))["catch"]((function(t) {
|
|
return h._task = null,
|
|
n(t)
|
|
}
|
|
))
|
|
} catch (r) {
|
|
n(r)
|
|
}
|
|
}
|
|
))
|
|
}
|
|
,
|
|
_.prototype.getResults = function() {
|
|
try {
|
|
if (!this._task)
|
|
throw new Error("Task is missing");
|
|
var t = this._task.getAnswers();
|
|
return [{
|
|
key: this._task.key,
|
|
answers: t
|
|
}, null]
|
|
} catch (i) {
|
|
return [null, i]
|
|
}
|
|
}
|
|
,
|
|
_.prototype.translate = function() {
|
|
if (this.header.setCopy(),
|
|
this.canvas) {
|
|
var t = n.translate("Image-based CAPTCHA challenge. Please use the 'Accessibility: Retrieve Cookie' or 'Accessibility: Text Challenge' options if available in the challenge menu.");
|
|
this.canvas.setAttribute("role", "img"),
|
|
this.canvas.setAttribute("aria-label", t)
|
|
}
|
|
}
|
|
,
|
|
i.Extend.proto(B, i.DomComponent),
|
|
B.prototype.style = function(t, i) {
|
|
var e = this;
|
|
this.mobile = t <= 650;
|
|
var s = this.mobile ? 300 : 500;
|
|
return "landscape" === this.orientation && (this.mobile = !0,
|
|
s = 440),
|
|
new Promise((function(t, i) {
|
|
e.view.style(s, e.mobile),
|
|
e.css({
|
|
width: s,
|
|
height: e.view.height
|
|
}),
|
|
t({
|
|
width: s,
|
|
height: e.view.height,
|
|
mobile: e.mobile
|
|
})
|
|
}
|
|
))
|
|
}
|
|
,
|
|
B.prototype.setup = function(i, s) {
|
|
var h = this
|
|
, o = this.view;
|
|
return this._data = i,
|
|
this._total = i.tasklist.length,
|
|
this._answers = Object.create(null),
|
|
this.served = 0,
|
|
this.breadcrumbs = this._total,
|
|
this.emit("display-check", !1),
|
|
new Promise((function(n, a) {
|
|
try {
|
|
if (o.clear(),
|
|
o.lock(!0),
|
|
o.display(!1),
|
|
e.ErrorUtil.sentryBreadcrumb("Serve DND Challenge", "challenge", "info", i),
|
|
!i.tasklist || 0 === i.tasklist.length)
|
|
return void a({
|
|
event: t.CaptchaError.CHALLENGE_ERROR,
|
|
message: "Missing tasklist"
|
|
});
|
|
h.resolve = n,
|
|
h.reject = a,
|
|
h.orientation = s || "portrait";
|
|
var r = {
|
|
task: i.tasklist[0],
|
|
answers: i.requester_restricted_answer_set
|
|
};
|
|
o.setup(i, {
|
|
orientation: s
|
|
}),
|
|
o.createTask(i.requester_question, r, i.request_config).then((function() {
|
|
h.served += 1,
|
|
h.renderLoop = function() {
|
|
try {
|
|
o.render()
|
|
} catch (i) {
|
|
e.ErrorUtil.sentryBreadcrumb("DND Challenge render: " + i.message, "challenge", "error", i),
|
|
a({
|
|
event: t.CaptchaError.CHALLENGE_ERROR,
|
|
message: "Failed to render: " + h.served + " / " + h._total,
|
|
reason: i
|
|
})
|
|
}
|
|
}
|
|
,
|
|
e.Render.start(h.renderLoop),
|
|
o.lock(!1),
|
|
o.display(!0),
|
|
h.syncCheckState()
|
|
}
|
|
))["catch"]((function(i) {
|
|
a({
|
|
event: t.CaptchaError.CHALLENGE_ERROR,
|
|
message: "Failed to setup task: " + h.served + " / " + h._total,
|
|
reason: i
|
|
})
|
|
}
|
|
))
|
|
} catch (l) {
|
|
a({
|
|
event: t.CaptchaError.CHALLENGE_ERROR,
|
|
message: "Failed to setup task: " + h.served + " / " + h._total,
|
|
reason: l
|
|
})
|
|
}
|
|
}
|
|
))
|
|
}
|
|
,
|
|
B.prototype.setFocus = function() {
|
|
this.view.focus()
|
|
}
|
|
,
|
|
B.prototype.syncCheckState = function() {
|
|
this.emit("display-check", this.view.updated)
|
|
}
|
|
,
|
|
B.prototype.submit = function() {
|
|
var i = this
|
|
, s = this._data
|
|
, h = this.view;
|
|
try {
|
|
h.lock(!0);
|
|
var o, n = this.served === this._total, a = this.view.getResults(), r = a[0], l = a[1];
|
|
if (l)
|
|
throw l;
|
|
if (this._answers[r.key] = r.answers,
|
|
!n) {
|
|
var d = {
|
|
task: s.tasklist[this.served],
|
|
answers: s.requester_restricted_answer_set
|
|
};
|
|
return void this.view.createTask(s.requester_question, d, s.request_config).then((function() {
|
|
i.served += 1,
|
|
i.syncCheckState(),
|
|
h.lock(!1)
|
|
}
|
|
))["catch"]((function(e) {
|
|
i.reject({
|
|
event: t.CaptchaError.CHALLENGE_ERROR,
|
|
message: "Failed to setup task: " + i.served + " / " + i._total,
|
|
reason: e
|
|
})
|
|
}
|
|
))
|
|
}
|
|
e.Render.stop(this.renderLoop);
|
|
for (var c = !1, p = 0; p < s.tasklist.length; p++)
|
|
if (o = s.tasklist[p].task_key,
|
|
!this._answers[o]) {
|
|
c = !0;
|
|
break
|
|
}
|
|
!this._answers || c ? this.reject({
|
|
event: t.CaptchaError.CHALLENGE_ERROR,
|
|
message: "Answers are incomplete"
|
|
}) : this.resolve(this._answers)
|
|
} catch (l) {
|
|
this.reject({
|
|
event: t.CaptchaError.CHALLENGE_ERROR,
|
|
message: "Failed to submit task",
|
|
reason: l
|
|
})
|
|
}
|
|
}
|
|
,
|
|
B.prototype.translate = function() {
|
|
this.view.translate()
|
|
}
|
|
,
|
|
B.prototype.onDestroy = function() {
|
|
e.Render.stop(this.renderLoop)
|
|
}
|
|
,
|
|
B.prototype.theme = function(t, i) {
|
|
i ? (l.add("custom", l.extend(l.active(), i)),
|
|
l.use("custom")) : l.use(t)
|
|
}
|
|
,
|
|
B
|
|
}(_sharedLibs.packages.constants, _sharedLibs.packages.core, _sharedLibs.packages.utils, _sharedLibs.packages.theme, _sharedLibs.packages.device, _sharedLibs.packages.canvas, _sharedLibs.packages.language, _sharedLibs.packages.ui, _sharedLibs.packages.config);
|