@caspingus/lt/dist/assessment/extensions/magnifier.js

A utility library of helpers and extensions useful when working with Learnosity APIs.

import { r as e, t } from "../../extensionsFactory-hk5ijx1G.js";
//#region src/assessment/extensions/accessibility/ux/magnifier/index.js
var n = {
	zoom: 4,
	shape: "square",
	width: 350,
	height: 350,
	sampleOffsetX: 0,
	sampleOffsetY: 350
}, r = {
	initialised: !1,
	instance: null,
	options: { ...n }
};
function i(e) {
	if (r.initialised) {
		t.utils.logger.debug("Magnifier already initialised; ignoring run()");
		return;
	}
	r.initialised = !0, r.options = {
		...n,
		...e || {}
	};
}
function a() {
	return r.instance ||= new u(r.options), r.instance;
}
function o(e = "lrn__magnifier") {
	document.querySelectorAll(`.${e}`).forEach((e) => {
		e.addEventListener("click", () => {
			a().toggle();
		});
	}), t.eventBus.on("item:load", d, "magnifier");
}
function s() {
	a().hide();
}
function c() {
	a().show();
}
function l() {
	a().toggle();
}
function u(e) {
	let t = this;
	t.options = {
		...n,
		...e || {}
	};
	let r, i, a = !1, o = 0, s = !0, c = {};
	document.addEventListener("keydown", (e) => {
		e.key === "Escape" && t.isVisible() && t.hide();
	});
	function l(e, t, n) {
		e.style.left = `${t}px`, e.style.top = `${n}px`;
	}
	function u(e, t, n) {
		e.style.width = `${t}px`, e.style.height = `${n}px`;
	}
	function d() {
		let { shape: e, width: n, height: a, zoom: o } = t.options;
		u(r, n, a), r.style.borderRadius = e === "circle" ? "50%" : "4px", i.style.transform = `scale(${o})`;
	}
	function f() {
		let e = r.getBoundingClientRect(), n = r.clientWidth, a = r.clientHeight, o = n / 2, s = a / 2, c = t.options.zoom, u = x || document.scrollingElement || document.documentElement, d = u === document.scrollingElement || u === document.documentElement ? {
			left: 0,
			top: 0
		} : u.getBoundingClientRect(), f = u.scrollLeft || 0, p = u.scrollTop || 0, m = f + (e.left - d.left) + o, h = p + (e.top - d.top) + s, g = Number(t.options.sampleOffsetX) || 0, _ = Number(t.options.sampleOffsetY) || 0, v = Math.round(o + g - m * c), b = Math.round(s + _ - h * c);
		l(i, v, b), y("viewPortChanged", i);
	}
	function p() {
		i.innerHTML = "";
		let e = document.body, t = e.cloneNode(!0), n = t.querySelector("#lt__magnifier");
		n && n.remove();
		let a = getComputedStyle(e);
		r.style.backgroundColor = a.backgroundColor || "#fff", t.style.margin = a.margin, t.style.padding = a.padding || "0", t.style.boxSizing = a.boxSizing || "border-box", t.style.cursor = "auto", t.style.paddingTop = "0px", t.setAttribute("unselectable", "on"), i.appendChild(t), x = S();
		let o = document.documentElement, c = Math.max(o.scrollWidth, o.clientWidth), l = Math.max(o.scrollHeight, o.clientHeight);
		u(i, c, l), y("contentUpdated", i), s = !1;
	}
	function m(e) {
		let t = [];
		if (e?.getAttribute) {
			let n = e.getAttribute("id");
			n && t.push("#" + n);
			let r = String(e.className || "").trim();
			r && t.push("." + r.split(/\s+/).join("."));
			for (let n = 0; n < t.length; n++) {
				let r = i.querySelectorAll(t[n]);
				if (r.length === 1) return r[0].scrollTop = e.scrollTop, r[0].scrollLeft = e.scrollLeft, !0;
			}
		} else e === document && f();
		return !1;
	}
	function h(e) {
		if (a) {
			if (e && e.target) m(e.target);
			else {
				let e = [];
				document.querySelectorAll("div").forEach((t) => {
					t.scrollTop > 0 && e.push(t);
				});
				for (let t = 0; t < e.length; t++) g(r, e[t]) || m(e[t]);
			}
			y("syncScrollBars", i);
		}
	}
	function g(e, t) {
		for (let n = t; n; n = n.parentNode) if (n === e) return !0;
		return !1;
	}
	function _() {
		a && (s && p(), h());
	}
	function v() {
		a && (o && cancelAnimationFrame(o), o = requestAnimationFrame(_));
	}
	function y(e, n) {
		let r = c[e];
		if (r) for (let e = 0; e < r.length; e++) r[e].call(t, n);
	}
	function b(e, t = {}) {
		let n = new Set((t.exclude || [
			"INPUT",
			"TEXTAREA",
			"SELECT",
			"A",
			"BUTTON"
		]).map((e) => e.toUpperCase())), r = 0, i = 0, a = 0, o = 0, s = !1;
		e.style.cursor = "move";
		function c(t) {
			let c = t.target;
			if (c && (n.has(c.tagName) || c.parentNode && n.has(c.parentNode.tagName))) return;
			let l = e.getBoundingClientRect();
			r = l.left, i = l.top, a = t.clientX ?? t.touches?.[0]?.clientX, o = t.clientY ?? t.touches?.[0]?.clientY, s = !0, t.preventDefault();
		}
		function u(n) {
			if (!s) return;
			let c = n.clientX ?? n.touches?.[0]?.clientX, u = n.clientY ?? n.touches?.[0]?.clientY;
			l(e, Math.round(r + (c - a)), Math.round(i + (u - o))), t.ondrag?.(n);
		}
		function d() {
			s = !1;
		}
		e.addEventListener("mousedown", c), e.addEventListener("touchstart", c, { passive: !1 }), window.addEventListener("mousemove", u, { passive: !0 }), window.addEventListener("touchmove", u, { passive: !0 }), window.addEventListener("mouseup", d, { passive: !0 }), window.addEventListener("touchend", d, { passive: !0 });
	}
	let x = null;
	function S() {
		let e = [
			document.querySelector(".lrn-assess"),
			document.querySelector("#app"),
			document.scrollingElement
		].filter(Boolean);
		for (let t of e) {
			let e = getComputedStyle(t);
			if ((/(auto|scroll)/.test(e.overflow) || /(auto|scroll)/.test(e.overflowX) || /(auto|scroll)/.test(e.overflowY)) && (t.scrollWidth > t.clientWidth || t.scrollHeight > t.clientHeight)) return t;
		}
		return document.scrollingElement || document.documentElement;
	}
	window.addEventListener("scroll", (e) => {
		e && e.target && e.target !== document && e.target !== window && (x = e.target), h(e), v();
	}, {
		passive: !0,
		capture: !0
	});
	function C() {
		let e = document.createElement("div");
		e.innerHTML = "<div id=\"lt__magnifier\" class=\"magnifier\" style=\"display:none;position:fixed;overflow:hidden;background-color:#fff;border:2px solid #555;border-radius:6px;z-index:10000;\">\n  <div class=\"magnifier-content\" style=\"top:0;left:0;position:absolute;display:block;transform-origin:left top;user-select:none;\"></div>\n  <div class=\"magnifier-glass\" style=\"position:absolute;inset:0;opacity:0;background-color:#fff;cursor:move;\"></div>\n</div>", r = e.querySelector(".magnifier"), i = r.querySelector(".magnifier-content"), document.body.appendChild(r), window.addEventListener("resize", () => {
			s = !0, v();
		}, { passive: !0 }), window.addEventListener("scroll", (e) => {
			h(e), v();
		}, {
			passive: !0,
			capture: !0
		}), b(r, { ondrag: () => f() });
	}
	return t.setZoom = (e) => {
		t.options.zoom = Number(e) || t.options.zoom, d(), f();
	}, t.setShape = (e, n, r) => {
		t.options.shape = e, n && (t.options.width = n), r && (t.options.height = r), d(), f();
	}, t.setWidth = (e) => {
		t.options.width = e, d(), f();
	}, t.setHeight = (e) => {
		t.options.height = e, d(), f();
	}, t.getZoom = () => t.options.zoom, t.getShape = () => t.options.shape, t.getWidth = () => t.options.width, t.getHeight = () => t.options.height, t.isVisible = () => a, t.on = (e, t) => {
		c[e] = c[e] || [], c[e].push(t);
	}, t.syncScrollBars = () => h(), t.syncContent = () => v(), t.hide = () => {
		i.innerHTML = "", r.style.display = "none", a = !1;
	}, t.show = (e) => {
		let { width: n, height: i } = t.options, o = e?.clientX ?? 200, c = e?.clientY ?? 200, u = Math.max(0, Math.round(o - n / 2)), m = Math.max(0, Math.round(c - i / 2));
		d(), s && p(), l(r, u, m), r.style.display = "", a = !0, f(), h();
	}, t.toggle = () => t.isVisible() ? t.hide() : t.show(), C(), t;
}
function d() {
	let e = t.itemElement();
	if (!e) return;
	let n = e.querySelectorAll("img");
	!n || !n.length || n.forEach((e) => {
		e.addEventListener("click", (e) => {
			let t = a();
			t.isVisible() || t.show(e);
		});
	});
}
var f = e("magnifier", i, {
	setupButtons: o,
	hide: s,
	show: c,
	toggle: l
});
//#endregion
export { f as magnifier };