troodle-expcontent/script.js
Kumi 5b45d9ea82
feat(exp360): add EXP360 module for embedding 360° content
Introduce the EXP360 activity module to embed interactive 360° content
in Moodle. This update includes:

- Database schema for the exp360 table.
- Language support for the module.
- Frontend form to create exp360 activities.
- Script to handle 360° content embedding within a modal.
- Two new PHP scripts to display and serve 360° content.
- Version and plugin initialization.

These changes allow users to seamlessly integrate and interact with
360° content within Moodle courses.
2024-07-05 11:13:58 +02:00

192 lines
5.7 KiB
JavaScript

(function () {
function loadScript(url, integrity, crossorigin) {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = url;
script.integrity = integrity;
script.crossOrigin = crossorigin;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
document.head.appendChild(script);
});
}
function getFeedbackLinks() {
const links = document.querySelectorAll("a.stretched-link");
const feedbackLinks = [];
links.forEach((link) => {
const href = link.getAttribute("href");
if (href) {
if (href.includes("/feedback/")) {
feedbackLinks.push(href);
} else if (href.includes("/quiz/")) {
feedbackLinks.push(href);
}
}
});
return feedbackLinks;
}
var currentScript = document.currentScript;
var myModal = document.getElementById("fullScreenModal");
myModal.addEventListener("shown.bs.modal", function () {
var modalContent = myModal.querySelector(".modal-content");
var modalWidth = modalContent.offsetWidth;
var modalHeight = modalContent.offsetHeight;
const modalIframe = window.$("#modal-iframe");
modalIframe.css("width", "100%");
modalIframe.css("height", "100%");
modalIframe.css("border", "none");
});
loadScript(
"https://code.jquery.com/jquery-3.7.1.min.js",
"sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=",
"anonymous"
)
.then(() => {
console.log("jQuery loaded successfully");
window.$ = jQuery;
return loadScript(
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js",
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz",
"anonymous"
);
})
.then(() => {
console.log("Bootstrap loaded successfully");
var scriptId = "script-" + Math.random().toString(36).substring(2, 9);
currentScript.id = scriptId;
var contentUrl = "/mod/exp360/view_content.php?id=" + $(currentScript).attr("data-activity-id");
function openInModal(url, block) {
$("#modal-iframe").attr("src", url);
if (block) {
$("#fullScreenModal").attr("data-block", block);
} else {
$("#fullScreenModal").removeAttr("data-block");
}
}
function showContent(url, block) {
bootstrap.Modal.getOrCreateInstance(
document.getElementById("fullScreenModal")
).show();
if (url) {
openInModal(url, block);
}
}
function hideContent() {
bootstrap.Modal.getOrCreateInstance(
document.getElementById("fullScreenModal")
).hide();
openInModal("about:blank");
}
async function nextContent() {
var modal = $("#fullScreenModal");
var currentLi = $("#" + modal.attr("data-block"));
var nextLi = currentLi.next("li.section");
var aLink = nextLi.find("a.stretched-link");
if (aLink.length > 0) {
let hrefValue = aLink.attr("href");
if (hrefValue.includes("feedback")) {
hrefValue = hrefValue.replace("view", "complete");
hrefValue = hrefValue + "&embed=1";
} else if (hrefValue.includes("/quiz/")) {
hrefValue = hrefValue.replace("view", "attempt");
try {
const response = await fetch(hrefValue);
hrefValue = response.url;
} catch (error) {
console.error('Error fetching the URL:', error);
}
hrefValue = hrefValue + "&embed=1";
}
return openInModal(hrefValue, nextLi.attr("id"));
} else {
var button = nextLi.find("button.btn-primary");
if (button.length > 0) {
return button.click();
}
}
hideContent();
}
async function openQuizModal(number) {
let href = getFeedbackLinks()[number - 1];
if (href.includes("/feedback/")) {
href = href.replace("view", "complete");
} else if (href.includes("/quiz/")) {
href = href.replace("view", "attempt");
try {
const response = await fetch(href);
href = response.url;
} catch (error) {
console.error('Error fetching the URL:', error);
}
console.log(href);
}
href = href + "&embed=1&modal=1";
$("#regular-modal-iframe").attr("src", href);
$("#regularModal").modal("show");
}
function closeQuizModal() {
$("#regularModal").modal("hide");
$("#regular-modal-iframe").attr("src", "about:blank");
}
// Attach global functions to window.top
window.top.nextContent = nextContent;
window.top.openQuizModal = openQuizModal;
window.top.openModal = openQuizModal;
window.top.closeQuizModal = closeQuizModal;
window.top.goToQuiz = window.top.nextContent;
$(currentScript)
.parent()
.append(
`<button id="contentButton-` +
scriptId +
`" class="btn btn-primary" type="button">360° Content</button>`
);
var button = $("#contentButton-" + scriptId);
button.click(function () {
showContent(
contentUrl,
$(currentScript).closest("li.section").attr("id")
);
});
$("head").append(
'<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">'
);
})
.catch((error) => {
console.error(error);
});
})();