@caspingus/lt
Version:
A utility library of helpers and extensions useful when working with Learnosity APIs.
134 lines (133 loc) • 9.46 kB
JavaScript
import { r as e, t } from "../../extensionsFactory-hk5ijx1G.js";
import { contentTabs as n } from "../../assessment/extensions/contentTabs.js";
//#region src/authoring/extensions/ui/contentTabs/index.js
var r = {
events: { keydownRegistered: !1 },
options: {
theme: "default",
maxTabs: 5
}
};
function i(e) {
r.options = n.validateOptions(e), document.querySelector(".lrn-author").classList.add("lt__contenttabs"), t.authorApp().on("widgetedit:editor:ready", () => {
document.removeEventListener("keydown", s), r.events.keydownRegistered = !1;
}), t.authorApp().on("widgetedit:preview:changed", o);
}
function a(e, t) {
let n = `
<div class="lrn-qe lrn-qe-modal" style="display: block;" id="lt__addTabs">
<div class="lrn-qe-ui">
<div class="lrn-qe-modal-dialog">
<div class="lrn-qe-modal-dialog-inner">
<div class="lrn-qe-modal-header">
<div class="lrn-qe-form-label lrn-qe-h4 lrn-qe-section-header">
<h4 class="lrn-qe-heading"><label class="lrn-qe-label lrn-qe-form-label-name">Choose number of tabs</label></h4>
</div>
<button type="button" class="lrn-qe-btn lrn-qe-modal-btn-close" aria-label="Close" tabindex="0">
<span class="lrn-qe-sr-only">Close</span>
<span aria-role="presentation" class="lrn-qe-i-cross"></span>
</button>
</div>
<div data-lrn-qe-selector="modal-outlet">
<div class="lrn-qe-modal-content" data-lrn-qe-modal-section="content">
<div class="lrn-qe-edit-aria-label">
<div class="lrn-qe-form-group-wrapper">
<label class="lrn-qe-label lrn-qe-form-label" for="numtabs">Number of tabs</label>
<input class="lrn-qe-input lrn-qe-form-control" type="number" id="numtabs" value="2" min="1" max="${r.options.maxTabs}" required>
</div>
</div>
</div>
<div class="lrn-qe-modal-footer">
<ul class="lrn-qe-ul">
<li class="lrn-qe-li lrn-qe-modal-footer-item">
<button type="button" class="lrn-qe-btn lrn-qe-btn-default"><span>Cancel</span></button>
</li>
<li class="lrn-qe-li lrn-qe-modal-footer-item">
<button type="button" class="lrn-qe-btn lrn-qe-btn-primary" data-lrn-qe-modal-action="confirm"><span>Add tabs</span></button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
`;
document.querySelector(".learnosity-question-editor").insertAdjacentHTML("beforeEnd", n);
let i = [];
i.push(document.querySelector("#lt__addTabs .lrn-qe-btn-default")), i.push(document.querySelector("#lt__addTabs .lrn-qe-modal-btn-close"));
for (let e = 0; e < i.length; e++) i[e].addEventListener("click", () => (f("lt__addTabs"), t("")));
document.querySelector("#lt__addTabs .lrn-qe-btn-primary").addEventListener("click", () => {
let e = document.getElementById("numtabs").value;
return f("lt__addTabs"), t(u(e));
});
}
function o() {
document.querySelectorAll(".lrn-qe-col-edit-inner .lt__nav-tabs li a").forEach((e) => {
e.setAttribute("title", ""), e.setAttribute("contenteditable", "false"), e.addEventListener("focus", (e) => e.target.blur()), e.addEventListener("dblclick", (t) => {
t.preventDefault();
let n = window.prompt("Edit tab label:", e.textContent);
n !== null && (e.textContent = n);
});
});
let e = document.querySelector(".lrn-qe-col-edit-inner .lt__tab-content");
e && (e.querySelectorAll(".lrn-qe-col-edit-inner .lt__tab-pane").forEach((e) => {
if (!e.querySelector(".lt__guard")) {
let t = document.createElement("p");
t.className = "lt__guard", t.setAttribute("contenteditable", "false"), t.setAttribute("aria-hidden", "true"), t.setAttribute("tabindex", "-1"), t.innerHTML = "‌", e.insertBefore(t, e.firstChild);
}
}), r.events.keydownRegistered || (document.addEventListener("keydown", s), r.events.keydownRegistered = !0));
}
function s(e) {
if (e.key === "Backspace" && l()?.querySelector(".lt__tabs")) {
let t = document.querySelector(".lrn-qe-col-edit-inner .lt__tab-content"), n = c(), r = t.querySelector(".lt__tab-pane.active");
if (n === 0) {
let t = window.getSelection();
if (!(!t.isCollapsed && t.toString().length > 0) && (e.preventDefault(), r.firstChild)) {
let e = document.createTextNode("");
r.appendChild(e);
let t = document.createRange();
t.setStart(e, e.textContent.length), t.collapse(!0);
let n = window.getSelection();
n.removeAllRanges(), n.addRange(t);
}
}
}
}
function c() {
let e = window.getSelection();
if (!e.rangeCount) return 0;
let t = e.getRangeAt(0), n = t.startContainer.nodeType === Node.TEXT_NODE ? t.startContainer : t.startContainer.firstChild;
if (!n) return 0;
let r = t.startOffset;
for (; n && n.previousSibling;) n = n.previousSibling, r += n.textContent.length;
return r;
}
function l() {
let e = window.getSelection();
if (!e.rangeCount) return null;
let t = e.getRangeAt(0).startContainer;
return t.nodeType !== Node.ELEMENT_NODE && (t = t.parentElement), t.closest(".cke_editable");
}
function u(e) {
let t = "<div class=\"tabs lt__tabs\"><ul class=\"nav nav-tabs lt__nav-tabs\" role=\"tablist\">", n = " class=\"active\"", r = " active", i = "_" + d();
for (let r = 1; r <= e; r++) t += `<li role="presentation"${n} aria-controls="${r}${i}"><a role="tab" data-tab-target="[data-tab-id='${r}${i}']" data-toggle="tab" href="#">Tab ${r}</a></li>`, r === 1 && (n = "");
t += "</ul><div class=\"tab-content lt__tab-content\">";
for (let n = 1; n <= e; n++) t += `<div class="tab-pane lt__tab-pane${r}" data-tab-id="${n}${i}" id="${n}${i}"><p>Tab ${n} content</p></div>`, n === 1 && (r = "");
return t += "</div></div>", t;
}
function d() {
return Math.floor(Math.random() * Date.now()).toString(36);
}
function f(e) {
document.getElementById(e)?.remove();
}
function p() {
return `${n.getTabsTheme(r.options.theme).concat("\n", "/* Learnosity content tab authoring styles */\n .lrn.lrn-author .lrn-author-item-content-wrapper .lrn-qe-col-edit-inner {\n .lt__tabs.nav-tabs>li>a,\n .lt__tabs.nav-tabs>li>a:focus,\n .lt__tabs.nav-tabs>li.active>a,\n .lt__tabs.nav-tabs>li.active>a:hover,\n .lt__tabs.nav-tabs>li.active>a:focus {\n cursor: pointer;\n }\n\n .lrn-qe-form-el-wrapper .lt__tabs.nav-tabs>li>a {\n position: relative; /* Needed so that the pseudo-element is positioned relative to the <a> */\n cursor: pointer;\n }\n\n .lt__tabs .lt__nav-tabs {\n overflow: visible;\n border-bottom: 1px solid transparent;\n\n > li > a {\n overflow: visible;\n }\n }\n\n /* Tooltip text */\n .lt__nav-tabs.nav-tabs > li > a::after {\n content: \"Double‑click to edit label\";\n position: absolute;\n bottom: 65%;\n left: 110%;\n transform: translateX(-50%);\n background-color: rgba(0, 0, 0, 0.8);\n color: #fff;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n pointer-events: none;\n z-index: 100;\n display: block; /* Ensure block-level display */\n }\n\n /* Tooltip arrow */\n .lt__nav-tabs.nav-tabs > li > a::before {\n content: \"\";\n position: absolute;\n display: block; /* Ensure it shows up */\n bottom: calc(120% - 5px); /* Adjust so the arrow is just below the tooltip */\n left: 85%;\n bottom: calc(65% - 5px);\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid rgba(0, 0, 0, 0.8);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n pointer-events: none;\n z-index: 100;\n }\n\n /* Show tooltip on hover */\n .lt__nav-tabs.nav-tabs > li > a:hover::after,\n .lt__nav-tabs.nav-tabs > li > a:hover::before {\n opacity: 1;\n visibility: visible;\n }\n }\n ")}`;
}
var m = e("contentTabs", i, {
addContentTabs: a,
getStyles: p
});
//#endregion
export { m as contentTabs };