@caspingus/lt
Version:
A utility library of helpers and extensions useful when working with Learnosity APIs.
79 lines (78 loc) • 8.51 kB
JavaScript
import { r as e, t } from "../../extensionsFactory-hk5ijx1G.js";
//#region src/assessment/extensions/accessibility/ux/columnResizer/index.js
var n = { resize: { triggered: !1 } };
function r() {
t.eventBus.on("item:load", () => {
i();
}, "columnResizer"), window.addEventListener("resize", () => {
s(i, 250);
});
}
function i() {
let e = t.itemElement();
if (!e) return;
let n = e.querySelectorAll("[class^=\"col-\"]"), r = !!e.querySelector(".lt__resizer"), i = !!document.querySelector(".lrn-layout-single-column");
if (n.length === 2) {
if (!i && !r) {
let e = c(), t = document.createElement("div");
t.classList.add("lt__resizer"), t.setAttribute("role", "separator"), t.setAttribute("aria-orientation", "horizontal"), t.setAttribute("aria-pressed", "false"), t.setAttribute("aria-label", "Resize columns"), t.setAttribute("aria-describedby", `lt__helpText-${e}`);
let r = document.createElement("span");
r.classList.add("lt__resizer-tab", "lt__tooltip"), r.setAttribute("data-tooltip", "Click and hold to drag column width"), r.setAttribute("tabindex", "0"), r.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-grip-vertical-icon lucide-grip-vertical\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg>";
let i = document.createElement("span");
i.classList.add("sr-only"), i.setAttribute("id", `lt__helpText-${e}`), i.textContent = "Press space to activate resize mode. Then use arrow keys to adjust the panel width. Press space again to finish.", n[0].classList.add("lt__column-left"), n[1].classList.add("lt__column-right"), t.append(r), t.append(i), n[0].after(t);
} else i && r && a(e, n);
o(e);
}
}
function a(e, t) {
e.querySelector(".lt__resizer")?.remove(), t[0].removeAttribute("style"), window.dispatchEvent(new Event("resize"));
}
function o(e) {
let t = (e) => {
let t = e.previousElementSibling, n = e.parentNode, r = !1, i = 0, a = 0, o = (n) => {
a = n instanceof MouseEvent ? n.clientX : n.targetTouches[0].clientX, i = t.getBoundingClientRect().width, r = !0, e.setAttribute("aria-pressed", "true"), document.addEventListener("mousemove", s), document.addEventListener("mouseup", c), document.addEventListener("touchmove", s), document.addEventListener("touchend", c);
}, s = (e) => {
if (!r) return;
let o;
o = e instanceof MouseEvent ? e.clientX - a : e.targetTouches[0].clientX - a;
let s = n.getBoundingClientRect().width, c = (i + o) * 100 / s;
c >= 10 && c <= 90 && (t.style.width = c + "%");
}, c = () => {
r = !1, e.setAttribute("aria-pressed", "false"), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", c), document.removeEventListener("touchmove", s), document.removeEventListener("touchend", c);
};
e.addEventListener("mousedown", o), e.addEventListener("touchstart", o), e.addEventListener("keydown", (i) => {
if ((i.key === " " || i.key === "Spacebar") && (i.preventDefault(), r = !r, e.setAttribute("aria-pressed", String(r))), !r) return;
let a = n.getBoundingClientRect().width, o = t.getBoundingClientRect().width * 100 / a;
if (i.key === "ArrowLeft") {
i.preventDefault();
let e = Math.max(10, o - 2);
t.style.width = e + "%";
}
if (i.key === "ArrowRight") {
i.preventDefault();
let e = Math.min(90, o + 2);
t.style.width = e + "%";
}
});
}, n = e.querySelector(".lt__resizer");
n && t(n);
}
function s(e, t) {
n.resize.triggered || (n.resize.triggered = !0, e.apply(this));
let r;
return (...i) => {
clearTimeout(r), r = setTimeout(() => {
n.resize.triggered = !1, e.apply(this, i);
}, t);
};
}
function c() {
return crypto.getRandomValues(new Uint32Array(1))[0].toString(36);
}
function l() {
let e = "\n /* Learnosity column resizer styles */\n .lt__resizer {\n background-color: #e8e8e8;\n width: 3px;\n padding: 0;\n position: relative;\n outline: none;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n &[aria-pressed='true'] {\n background-color: rgba(0, 123, 255, 0.2);\n box-shadow:\n 0 0 0 2px rgba(0, 123, 255, 0.5),\n 0 0 0 2px rgba(0, 123, 255, 0.2);\n }\n\n .lt__resizer-tab {\n position: relative;\n width: 45px;\n height: 30px;\n border: 1px solid #e4e4e4;\n left: -21px;\n top: -2px;\n border-radius: 3px;\n cursor: col-resize;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5em;\n z-index: 2;\n padding-bottom: 4px;\n color: #444;\n -webkit-user-select: none;\n user-select: none;\n background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(250,250,250,1) 51%, rgba(245,245,245,1) 100%);\n\n svg {\n width: 18px;\n height: 18px;\n top: 2px;\n position: relative;\n }\n }\n }\n\n .lt__resizer[aria-pressed='true'] .lt__resizer-tab:focus {\n background-color: rgba(0, 123, 255, 0.25);\n box-shadow:\n 0 0 0 2px rgba(0, 123, 255, 0.5),\n 0 0 0 4px rgba(0, 123, 255, 0.2);\n }\n\n .row {\n display: flex;\n }\n\n [class*=\"col-xs-\"].lt__column-left,\n [class*=\"col-xs-\"].lt__column-right {\n display: flex;\n flex-direction: column;\n min-width: 5em;\n overflow: auto;\n }\n\n [class*=\"col-xs-\"].lt__column-right {\n flex: 1;\n }\n\n .lt__column-left .lrn_widget {\n padding-right: 0.75em;\n }\n .lt__column-right .lrn_widget {\n padding-left: 0.75em;\n }\n\n .lrn-layout-single-column {\n .lt__resizer {\n all: unset;\n display: none;\n }\n\n .lt__column-left .lrn_widget,\n .lt__column-right .lrn_widget {\n padding: 0;\n }\n }\n ";
return t.region() !== "horizontal-fixed" && (e += "\n .lt__resizer:not(:is(.lrn-fullscreen *)) {\n .lt__tooltip {\n &::before,\n &::after {\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease-in 0.2s, visibility 0s linear 0.2s;\n visibility: hidden;\n z-index: 10;\n }\n\n &::before {\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);\n content: attr(data-tooltip);\n position: absolute;\n bottom: 140%;\n left: 50%;\n transform: translateX(-50%);\n background: #4d4d4d;\n color: #fff;\n padding: 10px 30px;\n border-radius: 4px;\n white-space: nowrap;\n font-size: 14px;\n }\n\n &::after {\n content: '';\n position: absolute;\n bottom: 105%;\n left: 50%;\n transform: translateX(-50%);\n border: 6px solid transparent;\n border-top-color: #4d4d4d;\n }\n\n &:is(:hover, :focus)::before,\n &:is(:hover, :focus)::after {\n opacity: 1;\n visibility: visible;\n }\n }\n }\n "), e;
}
var u = e("columnResizer", r, { getStyles: l });
//#endregion
export { u as columnResizer };