@caspingus/lt
Version:
A utility library of helpers and extensions useful when working with Learnosity APIs.
65 lines (64 loc) • 5.96 kB
JavaScript
import { r as e, t } from "../../extensionsFactory-hk5ijx1G.js";
//#region src/assessment/extensions/accessibility/ux/toggleTimer/index.js
var n = {
initialised: !1,
elTimerWrapper: null,
elTimer: null,
elClock: null,
enableForceTimerShow: !1,
forceRenderTimer: !1
};
function r(e) {
let { showTimerLimit: r = 60 } = e || {};
if (n.initialised) {
t.utils.logger.debug("Toggle timer already initialised, ignoring run();");
return;
}
let c = document.querySelector(".lrn-sm"), l = document.querySelector(".lrn-timer-wrapper");
if (!c || !l) {
t.utils.logger.warn("Timer wrapper, or `.lrn-sm`, not found");
return;
}
let u = l.querySelector(".timer"), d = l.querySelector(".clock");
if (!u) {
t.utils.logger.warn("Timer element not found, cannot run toggle timer extension");
return;
}
n.elTimerWrapper = l, n.elTimer = u, n.elClock = d, requestAnimationFrame(() => {
if (n.elTimerWrapper.classList.add("lt__timer-wrapper", "lrn_btn", "lt__tooltip"), n.elTimerWrapper.setAttribute("role", "button"), n.elTimerWrapper.setAttribute("tabindex", "0"), s(!0), n.elTimerWrapper.addEventListener("click", i), n.elTimerWrapper.addEventListener("keydown", a), !n.elTimerWrapper.querySelector(".lt__clock-glyph")) {
let e = document.createElement("span");
e.className = "lt__clock-glyph", n.elTimerWrapper.appendChild(e);
}
if (n.enableForceTimerShow && t.maxTime() > 0) {
let e = t.itemsApp(), i = () => {
let a = t.timeRemaining(), s = n.elTimerWrapper.classList.contains("lt--timer-hidden");
!n.forceRenderTimer && typeof a == "number" && a <= Number(r) && s && (n.forceRenderTimer = !0, o(), t.utils.logger.info(`Force show: timer limit (${r}) reached.`), typeof e.off == "function" && e.off("time:change", i));
};
e.on("time:change", i);
}
n.initialised = !0;
});
}
function i() {
o();
}
function a(e) {
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), o());
}
function o() {
if (!n.elTimerWrapper || !n.elTimer) return;
let e = !n.elTimerWrapper.classList.contains("lt--timer-hidden");
n.elTimerWrapper.classList.toggle("lt--timer-hidden", e), s(!e);
}
function s(e) {
n.elTimerWrapper.setAttribute("aria-pressed", String(e)), n.elTimerWrapper.setAttribute("aria-label", `Assessment time. Timer is ${e ? "visible" : "hidden"}. Click to ${e ? "hide" : "show"} it.`);
}
function c() {
return "\n /* Learnosity toggle timer styles */\n .lrn-timer-wrapper.lt__timer-wrapper {\n position: relative;\n border-radius: 2px;\n cursor: pointer;\n background-color: #eaeaea;\n color: #333;\n border: 1px solid #d9d9d9;\n }\n .lrn-timer-wrapper.lt__timer-wrapper:hover {\n background-color: #d9d9d9;\n color: #333;\n }\n .lrn-timer-wrapper.lt__timer-wrapper:focus {\n box-shadow: none;\n border: 1px solid #1877b1;\n }\n .lrn-timer-wrapper.lt__timer-wrapper:active {\n box-shadow: none;\n }\n\n /* When hidden, suppress the timer number and show the clock icon via ::before */\n .lrn-timer-wrapper.lt__timer-wrapper.lt--timer-hidden .timer {\n display: none !important;\n }\n /* Hide numbers when off */\n .lrn-timer-wrapper.lt__timer-wrapper.lt--timer-hidden .timer {\n display: none !important;\n }\n\n /* Clock glyph element (no tooltip conflict) */\n .lrn-timer-wrapper.lt__timer-wrapper .lt__clock-glyph {\n display: none;\n }\n\n .lrn-timer-wrapper.lt__timer-wrapper.lt--timer-hidden .lt__clock-glyph {\n display: inline-block;\n vertical-align: top;\n max-width: 100%;\n padding: .68em .9em;\n }\n\n /* Render the clock via icon font */\n .lrn-timer-wrapper.lt__timer-wrapper .lt__clock-glyph::before {\n font-family: \"LearnosityIconsRegular\";\n position: relative;\n top: 1px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n content: \"\"; /* same glyph you used before */\n }\n\n /* Tooltip */\n .lrn-timer-wrapper.lt__timer-wrapper.lt__tooltip::before,\n .lrn-timer-wrapper.lt__timer-wrapper.lt__tooltip::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 font-family: inherit;\n }\n .lrn-timer-wrapper.lt__timer-wrapper.lt__tooltip::before {\n box-shadow: 2px 2px 2px rgba(0,0,0,0.2);\n content: attr(aria-label);\n position: absolute;\n top: -55px;\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 .lrn-timer-wrapper.lt__timer-wrapper.lt__tooltip::after {\n content: '';\n position: absolute;\n bottom: 103%;\n left: 50%;\n transform: translateX(-50%);\n border: 6px solid transparent;\n border-top-color: #4d4d4d;\n }\n .lrn-timer-wrapper.lt__timer-wrapper.lt__tooltip:is(:hover, :focus)::before,\n .lrn-timer-wrapper.lt__timer-wrapper.lt__tooltip:is(:hover, :focus)::after {\n opacity: 1;\n visibility: visible;\n }\n\n /* Layout adjustment */\n .lrn.lrn-assess .lrn-region:not(.lrn-items-region) .lrn_btn.lt__timer-wrapper {\n font-size: inherit;\n padding: 0.01em;\n }\n ";
}
var l = e("toggleTimer", r, {
getStyles: c,
toggle: o
});
//#endregion
export { l as toggleTimer };