@chriscas
You can try the following. It will look for the course status button wrapper. If it is found, then it will watch for the published icon to show as the selected state. Once the published icon is found as the selected state, it will replace the button with a modified version of the button content that no longer triggers the menu to change the course state.
- If a course is already published, it will be updated as the page loads.
- If it is currently, unpublished, it will update it once the course is changed to published.
(function () {
"use strict";
if (
/\/courses\/[0-9]+\/?$/.test(window.location.pathname) ||
/\/courses\/[0-9]+\/(settings|details)\/?$/.test(window.location.pathname)
) {
watchForCoursePublishButtonWrapper();
}
function watchForCoursePublishButtonWrapper() {
const cssSelector = `#course_publish_button`;
watchForAddedElement(cssSelector, watchForPublishedState);
}
function watchForAddedElement(
cssSelector,
handlerFunction,
elementToObserve = document.body,
options = { childList: true, subtree: true },
shouldContinueObservingWhenFound = false
) {
const element = elementToObserve?.querySelector(cssSelector);
if (element) {
handlerFunction(element);
if (!shouldContinueObservingWhenFound) {
return;
}
}
const observer = new MutationObserver((mutations) => {
if (
!mutations.some((mutation) => mutation?.addedNodes?.length ?? 0 > 0)
) {
return;
}
const foundElement = elementToObserve?.querySelector(cssSelector);
if (foundElement) {
handlerFunction(foundElement);
if (!shouldContinueObservingWhenFound) {
observer.disconnect();
}
}
});
observer.observe(elementToObserve, options);
}
function watchForPublishedState(buttonWrapper) {
const cssSelector = `svg[name=IconPublish]`;
watchForAddedElement(
cssSelector,
() => replacePublishButton(buttonWrapper),
buttonWrapper
);
}
function replacePublishButton(buttonWrapper) {
console.log("replace publish");
const button = buttonWrapper.querySelector("button");
const buttonContent = buttonWrapper?.querySelector("button > span");
if (button && buttonContent) {
// Remove drop-down arrow
const arrowSvg = buttonContent?.querySelector("svg[name^=IconArrow]");
arrowSvg?.remove();
// Cloning to remove event listeners
const clonedButtonContent = buttonContent.cloneNode(true);
// Adjusting justify content style to keep left-aligned
const childrenLayoutWrapper = clonedButtonContent?.querySelector(
":scope > span[class$=childrenLayout]"
);
if (childrenLayoutWrapper) {
childrenLayoutWrapper.style.justifyContent = "left";
}
// Replace the current button with the cloned and updated button content
button.replaceWith(clonedButtonContent);
}
}
})();
