userscripts/Compass QoL Enhancer.user.js

// ==UserScript==
// @name        Compass QoL Enhancer
// @namespace   blankie-scripts
// @match       http*://*.compass.education/*
// @version     1.4.0
// @author      blankie
// @description A userscript that adds small but useful features for Compass, such as the ability to close windows by clicking on the background
// @inject-into page
// @run-at      document-end
// ==/UserScript==

"use strict";

let qolTabOpened = false;
// needed because .toString() adds a trailing = for empty values
function serializeURLSearchParams(query) {
    let out = "";
    for (let [key, value] of query) {
        if (out) {
            out += "&";
        }
        // required for session/... or activity/...
        out += encodeURIComponent(key).replaceAll("%2F", "/");
        if (value) {
            out += `=${encodeURIComponent(value)}`;
        }
    }
    return out;
}
function getPanelItemHash(panelId, isDefault) {
    if (window.location.pathname === "/Organise/Activities/Activity.aspx") {
        let query = new URLSearchParams(window.location.hash.substring(1));
        if (panelId === "learningtasks") {
            query.delete("qol_open_tab");
            query.set("openLearningTaskTab", "");
        } else if (isDefault) {
            query.delete("qol_open_tab");
            query.delete("openLearningTaskTab");
        } else {
            query.set("qol_open_tab", panelId);
            query.delete("openLearningTaskTab");
        }
        return `#${serializeURLSearchParams(query)}`;
    }

    return `#${encodeURIComponent(panelId)}`;
}

let observer = new MutationObserver(function(mutations) {
    for (let mutation of mutations) {
        if (mutation.type !== "childList") {
            continue;
        }
        for (let node of mutation.addedNodes) {
            handleNewNode(node);
        }
    }
});
observer.observe(document.body, {childList: true, subtree: true});

// we make a copy of window.location.hash because the dashboard tab on a user's page would set the fragment to #dsh for some reason
let hashCopy = window.location.hash;
function handleNewNode(node) {
    if (node.nodeType !== 1) {
        return;
    }

    if (node.parentElement && (node.classList.contains("ext-cal-hd-ct") || node.classList.contains("ext-cal-bg-tbl") || node.classList.contains("ext-cal-inner-ct"))) {
        for (let element of node.querySelectorAll("div.ext-cal-evt")) {
            handleNewCalendarEvent(element);
        }
    } else if (!qolTabOpened && node.classList.contains("x-panel")) {
        qolTabOpened = true;
        let tabToOpen = hashCopy.substring(1) || null;
        if (window.location.pathname === "/Organise/Activities/Activity.aspx") {
            tabToOpen = (new URLSearchParams(tabToOpen)).get("qol_open_tab");
        }
        let panel = unsafeWindow.Ext.getCmp(node.id);
        for (let i = 0; i < panel.items.items.length; i++) {
            handlePanelItem(panel, panel.items.items[i], i === 0, tabToOpen);
        }
    } else if (node.closest("[id^='wikibrowserpanel-'], #CompassWidgetsWikiBrowserPanel")) {
        // Make files and folders in wiki/resources clickable for Link Hints
        if (node.localName === "td") {
            node.setAttribute("role", "button");
        }
        for (let element of node.querySelectorAll("td, .x-tree-expander")) {
            element.setAttribute("role", "button");
        }
    }
}

document.body.addEventListener("click", function(event) {
    // Add the ability to close windows by clicking on the background
    if (!event.target.classList.contains("x-mask")) {
        return;
    }
    let maskZIndex = BigInt(event.target.style.zIndex);
    for (let maskMsg of document.querySelectorAll(".x-mask-msg")) {
        if (BigInt(maskMsg.style.zIndex) >= maskZIndex && maskMsg.style.display !== "none") {
            return;
        }
    }

    document.querySelector(".x-window-closable.x-window-active .x-tool-close").click();
}, {passive: true});

function handleNewCalendarEvent(element) {
    // Turn each calendar event into a link so that Link Hints can recognize it
    let a = document.createElement("a");
    for (let attr of element.attributes) {
        a.setAttribute(attr.name, attr.value);
    }
    // fix learning tasks shrinking for some reason
    a.style.display = "block";
    a.replaceChildren(...element.childNodes);
    let preventCompassHandler = false;

    let calendarElement = element.closest(".x-component.ext-cal-ct, .x-component.ext-cal-body-ct");
    let calendar = unsafeWindow.Ext.getCmp(calendarElement.id);
    if (a.classList.contains("activity-type-1")) {
        // Add a link and show the finish time for activities/"standard classes"
        let data = calendar.getEventRecordFromEl(element).data;
        let startString = unsafeWindow.Ext.util.Format.date(data.start, unsafeWindow.Compass.TIME_NO_PERIOD_FORMAT);
        let finishString = unsafeWindow.Ext.util.Format.date(data.finish, unsafeWindow.Compass.TIME_NO_PERIOD_FORMAT);
        a.href = `/Organise/Activities/Activity.aspx?targetUserId=${data.targetStudentId}#session/${data.instanceId}`;
        // yes, innerHTML. longTitleWithoutTime can apparently contain HTML. lets hope that startString and finishString don't
        a.querySelector("span").innerHTML = `${startString} - ${finishString}: ${data.longTitleWithoutTime}`;
        preventCompassHandler = true;
    } else if (a.classList.contains("activity-type-10")) {
        // Add a link for learning tasks
        let calendarPanel = calendar.ownerCalendarPanel;
        a.href = calendarPanel.targetUserId !== undefined ? `/Records/User.aspx?userId=${calendarPanel.targetUserId}#learningTasks` : "/Records/User.aspx#learningTasks";
        preventCompassHandler = true;
    }

    // prevent ctrl-clicking from changing the current tab
    // it seems like the link thing actually effectively killed the default handler anyway
    if (preventCompassHandler) {
        a.addEventListener("click", function(event) {
            event.stopImmediatePropagation();
        }, {passive: true});
    }

    element.replaceWith(a);
}

function handlePanelItem(panel, panelItem, isDefault, tabToOpen) {
    let panelId = panelItem.itemId || panelItem.id;
    let panelItemHash = getPanelItemHash(panelId, isDefault);
    // i don't know why but dashboard is dsh
    if (window.location.pathname === "/Records/User.aspx" && panelId === "dashboard") {
        panelId = "dsh";
    }

    // Automatically open tab specified in fragment
    if (panelId === tabToOpen) {
        // if the sessions tab is automatically opened, the currently selected tab is still dashboard for some reason
        // i can't be arsed to read any more minified javascript, so this is the best fix that you'll get
        // it does look like that this bug only manifests if the tab is activated while the initial loading thing is shown
        setTimeout(function() {
            panel.setActiveTab(panelItem);
            // reference the now active tab in the fragment if necessary (cough cough the reason why hashCopy exists)
            if (panelItemHash !== window.location.hash) {
                history.replaceState("", "", panelItemHash);
            }
        }, 1000);
    }

    // /Communicate/SchoolDocumentation.aspx does not have tabs
    if (!panelItem.tab) {
        return;
    }

    panelItem.tab.preventDefault = false;
    panelItem.tab.el.dom.href = panelItemHash;

    panelItem.tab.el.dom.addEventListener("click", function(event) {
        if (event.ctrlKey) {
            event.stopImmediatePropagation();
            return;
        }
        // prevent the browser from scrolling to the body
        event.preventDefault();
        if (panelItemHash !== window.location.hash) {
            // Automatically add a reference to the tab when it is clicked
            history.pushState("", "", panelItemHash);
        }
    });
}

// Suppress that annoying barebones context menu that only has Copy
// why is it not obvious that you can just hold ctrl or shift to suppress it???
// i know it's compass' fault but i'm still frustrated
// unsafeWindow.CKEDITOR may not be set if you're on the login page, for example
if (unsafeWindow.CKEDITOR) {
    let originalOn = unsafeWindow.CKEDITOR.dom.domObject.prototype.on;
    unsafeWindow.CKEDITOR.dom.domObject.prototype.on = function(type, listener) {
        // https://stackoverflow.com/a/10815581
        if (type !== "contextmenu") {
            return originalOn.apply(this, arguments);
        }
    };
}

// Uncheck the Remember Me button by default
if (window.location.pathname === "/login.aspx") {
    document.querySelector("#rememberMeChk").checked = false;
}