browser_compare_view.js

var e, t, c = { d: (e, t) => { for (var n in t) c.o(t, n) && !c.o(e, n) && Object.defineProperty(e, n, { enumerable: !0, get: t[n] }) }, o: (e, t) => Object.prototype.hasOwnProperty.call(e, t), r: e => { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) } }, n = {}; function o(e) { var t, c; let n = null === (t = e[0]) || void 0 === t ? void 0 : t.element.width, o = null === (c = e[0]) || void 0 === c ? void 0 : c.element.height; for (let t of e) t.element.width == n && t.element.height == o || console.log("Warning: images don't have the same resolution"), n = Math.max(n, t.element.width), o = Math.max(o, t.element.height); return [n, o] } function i(e) { return e.images.unshift(e.images.pop()), !0 } function r(t) { var c; if (null != t.ctrl_data) switch ((c = t.ctrl_data).circle_check.checked = !1, c.horizontal_check.checked = !1, c.vertical_check.checked = !1, t.current_mode) { case e.circle: t.ctrl_data.circle_check.checked = !0; break; case e.horizontal: t.ctrl_data.horizontal_check.checked = !0; break; case e.vertical: t.ctrl_data.vertical_check.checked = !0; break; default: throw `unsupported mode: ${t.current_mode}` } } function a(e, c) { return n => { n.target.checked ? (e.next_mode = c, b(e, t.change_mode)) : r(e) } } function l(e, t) { let c = e.canvas.getBoundingClientRect(), n = e.width / c.width, o = e.height / c.height; e.mouse_pos = [(t.clientX - c.left) * n, (t.clientY - c.top) * o] } function s(e) { return e.render_circle = !0, e.canvas.style.cursor = "none", !1 } function u(e) { return x(e, t.update_circle), e.canvas.style.cursor = "default", !0 } function d(e, t, c) { e.ctx.beginPath(), e.ctx.arc(e.mouse_pos[0], e.mouse_pos[1], e.circle_size, t, c), c - t != 2 * Math.PI && e.ctx.lineTo(e.mouse_pos[0], e.mouse_pos[1]), e.ctx.closePath() } function _(e, t, c, n) { var o; d(e, c, n), e.ctx.save(), e.ctx.clip(), e.ctx.drawImage(null === (o = e.images[t]) || void 0 === o ? void 0 : o.element, 0, 0, e.width, e.height), e.ctx.restore(), e.show_circle && (d(e, c, n), e.ctx.strokeStyle = "black", e.ctx.lineWidth = e.circumference_thickness, e.ctx.stroke()) } function h(c, n) { return b(c, t.update_slider), c.start_timestamp = n, c.start_pos = c.slider_pos, c.current_mode == e.horizontal ? c.target_pos = c.mouse_pos[0] / c.width : c.target_pos = c.mouse_pos[1] / c.height, !0 } function m(t, c) { return t.held_down && (t.current_mode == e.horizontal ? t.target_pos = t.mouse_pos[0] / t.width : t.target_pos = t.mouse_pos[1] / t.height, t.start_pos = t.target_pos, t.slider_pos = t.target_pos), !0 } function v(e, t) { let c = (t - e.start_timestamp) / e.slider_time; return c = Math.min(Math.max(c, 0), 1), c = e.rate_function(c), e.slider_pos = (1 - c) * e.start_pos + c * e.target_pos, e.slider_pos == e.target_pos } function g(c) { switch (c.current_mode) { case e.undefined: break; case e.circle: !function(e) { e.canvas.onmousemove = null, e.canvas.onmouseleave = null, e.canvas.ontouchstart = null, e.canvas.onmousedown = null, e.canvas.onfocus = null, e.canvas.onblur = null, e.canvas.style.cursor = "default", document.body.style.userSelect = "text", e.touching = !1, b(e, t.remove_circle) }(c); break; case e.horizontal: case e.vertical: !function(e) { e.canvas.onmousedown = null, e.canvas.onmouseup = null, document.onmouseup = null, e.canvas.onmouseup = null, e.canvas.onmousemove = null, e.canvas.onmouseenter = null, e.canvas.onmouseleave = null, e.canvas.onfocus = null, e.canvas.onblur = null, e.held_down = !1, e.canvas.style.cursor = "default", document.body.style.userSelect = "text" }(c); break; default: throw `unsupported mode: ${c.current_mode}` } } function p(c) { switch (c.current_mode = c.next_mode, c.next_mode) { case e.circle: !function(e) { e.canvas.onmousemove = c => { l(e, c), b(e, t.update_circle) }, e.canvas.onmouseleave = () => { b(e, t.remove_circle) }, e.revolve_imgs_on_click && (e.canvas.ontouchstart = () => { e.touching = !0 }, e.canvas.onmousedown = () => { e.touching || b(e, t.revolve_imgs) }), e.canvas.matches(":hover") && b(e, t.update_circle), e.canvas.onfocus = () => { document.body.style.userSelect = "none" }, e.canvas.onblur = () => { document.body.style.userSelect = "text", e.touching = !1 } }(c); break; case e.horizontal: case e.vertical: !function(c) { c.canvas.onmousedown = () => { c.held_down = !0, b(c, t.start_slider_move) }, c.canvas.onmouseup = () => { c.held_down = !1 }, document.onmouseup = () => { c.held_down = !1 }, c.canvas.onmousemove = e => { l(c, e), b(c, t.possible_instant_slide) }, c.current_mode == e.horizontal ? c.canvas.onmouseenter = () => { c.canvas.style.cursor = "ew-resize" } : c.canvas.onmouseenter = () => { c.canvas.style.cursor = "ns-resize" }, c.canvas.onmouseleave = () => { c.canvas.style.cursor = "default" }, c.canvas.onfocus = () => { document.body.style.userSelect = "none" }, c.canvas.onblur = () => { document.body.style.userSelect = "text" } }(c); break; default: throw `unsupported mode: ${c.current_mode}` }r(c) } function f(e) { return g(e), p(e), !0 } function k(c, n) { !function(e, c) { let n = []; for (; e.task_stack.length;) { let o, r = e.task_stack.pop(); switch (r) { case t.none: o = !0; break; case t.change_mode: o = f(e); break; case t.revolve_imgs: o = i(e); break; case t.update_circle: o = s(e); break; case t.remove_circle: o = u(e); break; case t.start_slider_move: o = h(e, c); break; case t.possible_instant_slide: o = m(e); break; case t.update_slider: o = v(e, c); break; default: throw `unknown task: ${r}` }o || n.push(r) } e.task_stack = n }(c, n), function(t) { switch (t.current_mode) { case e.circle: !function(e) { var t; if (e.render_circle) { e.ctx.clearRect(0, 0, e.width, e.height), function(e) { var t; e.ctx.beginPath(), e.ctx.arc(e.mouse_pos[0], e.mouse_pos[1], e.circle_size - 1, 0, 2 * Math.PI), e.ctx.lineTo(e.width, 0), e.ctx.lineTo(0, 0), e.ctx.lineTo(0, e.height), e.ctx.lineTo(e.width, e.height), e.ctx.lineTo(e.width, 0), e.ctx.closePath(), e.ctx.save(), e.ctx.clip(), e.ctx.drawImage(null === (t = e.images[0]) || void 0 === t ? void 0 : t.element, 0, 0, e.width, e.height), e.ctx.restore() }(e); for (let t = 1; t < e.images_len; ++t)_(e, t, (t - 1) * Math.PI * 2 / (e.images_len - 1), t * Math.PI * 2 / (e.images_len - 1)) } else e.ctx.clearRect(0, 0, e.width, e.height), e.ctx.drawImage(null === (t = e.images[0]) || void 0 === t ? void 0 : t.element, 0, 0, e.width, e.height); e.render_circle = !1 }(t); break; case e.horizontal: case e.vertical: !function(t) { var c; t.ctx.clearRect(0, 0, t.width, t.height), t.ctx.drawImage(null === (c = t.images[0]) || void 0 === c ? void 0 : c.element, 0, 0, t.width, t.height), t.show_slider && function(t) { t.ctx.beginPath(), t.current_mode == e.horizontal ? (t.ctx.moveTo(t.slider_pos * t.width, 0), t.ctx.lineTo(t.slider_pos * t.width, t.height)) : (t.ctx.moveTo(0, t.slider_pos * t.height), t.ctx.lineTo(t.width, t.slider_pos * t.height)), t.ctx.closePath(), t.ctx.strokeStyle = "black", t.ctx.lineWidth = t.slider_thickness, t.ctx.stroke() }(t), function(t) { var c; t.ctx.beginPath(), t.current_mode == e.horizontal ? t.ctx.rect(t.slider_pos * t.width, 0, t.width, t.height) : t.ctx.rect(0, t.slider_pos * t.height, t.width, t.height), t.ctx.closePath(), t.ctx.save(), t.ctx.clip(), t.ctx.clearRect(0, 0, t.width, t.height), t.ctx.drawImage(null === (c = t.images[1]) || void 0 === c ? void 0 : c.element, 0, 0, t.width, t.height), t.ctx.restore() }(t) }(t); break; default: throw `unsupported mode: ${t.current_mode}` } }(c), c.task_stack.length ? w(c) : c.next_update_queued = !1 } function w(e) { e.next_update_queued = !0, window.requestAnimationFrame((t => { k(e, t) })) } function x(e, t) { let c = e.task_stack.indexOf(t); -1 != c && e.task_stack.splice(c, 1) } function b(e, t) { x(e, t), e.task_stack.push(t), function(e) { e.next_update_queued || w(e) }(e) } c.r(n), c.d(n, { load: () => I }), function(e) { e[void 0] = "undefined", e.horizontal = "horizontal", e.vertical = "vertical", e.circle = "circle" }(e || (e = {})), function(e) { e[e.none = 0] = "none", e[e.revolve_imgs = 1] = "revolve_imgs", e[e.change_mode = 2] = "change_mode", e[e.update_circle = 3] = "update_circle", e[e.remove_circle = 4] = "remove_circle", e[e.start_slider_move = 5] = "start_slider_move", e[e.possible_instant_slide = 6] = "possible_instant_slide", e[e.update_slider = 7] = "update_slider" }(t || (t = {})); const y = { start_mode: e.circle, circumference_fraction: .005, circle_size: void 0, circle_fraction: .2, show_circle: !0, revolve_imgs_on_click: !0, slider_fraction: .01, slider_time: 400, rate_function: function(e) { return e < .5 ? 4 * e * e * e : 1 - Math.pow(-2 * e + 2, 3) / 2 }, start_slider_pos: .5, show_slider: !0 }; function z(e, t) { return null != e[t] ? e[t] : y[t] } function M(c, n, i = {}, r) { !function(e) { if ("y" === e.dataset.in_use) throw `the canvas with the id '${e.id}' is already in use`; e.dataset.in_use = "y" }(n.canvas), function(e, t) { if (e.length < 2) throw `image_urls must contain at least two images, not ${e.length}`; let c = [], n = 0, i = e.length; for (let r = 0; r < i; ++r) { let a = { url: e[r], element: document.createElement("img"), label: `${r}` }; c.push(a), a.element.onload = () => { ++n, n == i && t(c, o(c)) }, a.element.src = a.url } }(c, ((c, o) => { let a = { images: c, images_len: c.length, canvas: n.canvas, ctx: n, width: 0, height: 0, ctrl_data: void 0, mouse_pos: [0, 0], held_down: !1, next_mode: z(i, "start_mode"), current_mode: e.undefined, task_stack: [], next_update_queued: !1, circumference_thickness: 0, render_circle: !1, circle_size: 0, show_circle: z(i, "show_circle"), revolve_imgs_on_click: z(i, "revolve_imgs_on_click"), touching: !1, slider_thickness: 0, slider_pos: z(i, "start_slider_pos"), slider_time: z(i, "slider_time"), rate_function: z(i, "rate_function"), show_slider: z(i, "show_slider"), start_timestamp: 0, start_pos: 0, target_pos: 0 }; (function(e, t, c) { e.canvas.width = t[0], e.canvas.height = t[1], e.width = e.canvas.width, e.height = e.canvas.height, function(e, t) { let c = Math.max(e.canvas.width, e.canvas.height); e.circumference_thickness = c * z(t, "circumference_fraction"), e.circle_size = null != t.circle_size ? t.circle_size : c * z(t, "circle_fraction"), e.slider_thickness = c * z(t, "slider_fraction") }(e, c) })(a, o, i), null != r && r(a), b(a, t.change_mode) })) } function P(e, t, c) { let n = document.createElement("input"); n.type = "checkbox", n.id = e; let o = document.createElement("label"); o.innerHTML = t, o.htmlFor = n.id; let i = document.createElement("br"); return c.appendChild(n), c.appendChild(o), c.appendChild(i), n } function T(e, t) { let c = document.createElement("button"); c.innerHTML = e; let n = document.createElement("br"); return t.appendChild(c), t.appendChild(n), c } function I(c, n, o = {}) { let i = null != o.controls_id ? function(e, t = function() { let e = ""; for (let t = 0; t < 12; t++)e += "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".charAt(Math.floor(36 * Math.random())); return e }()) { let c = document.getElementById(e); if (null == c) throw `controls_id '${e}' isn't valid`; return { circle_check: P(`${t}_circle_button`, "Circle", c), horizontal_check: P(`${t}_horizontal_button`, "Horizontal", c), vertical_check: P(`${t}_vertical_button`, "Vertical", c), revolve_imgs_button: T("Revolve Images", c) } }(o.controls_id, o.key) : void 0; M(c, function(e) { let t = document.getElementById(e), c = t.getContext("2d"); return t.tabIndex = 1, c }(n), o, (c => { null != i && function(c, n) { c.ctrl_data = n, n.circle_check.onclick = a(c, e.circle), n.horizontal_check.onclick = a(c, e.horizontal), n.vertical_check.onclick = a(c, e.vertical), n.revolve_imgs_button.onclick = () => { b(c, t.revolve_imgs) } }(c, i) })) }