Using JavaScript to Change the Order of Menu Items

In some cases, your organization may want to prioritize the order of certain menu items.

While dominKnow | ONE's theme designer is quite flexible, you are not able to change the order of items in the menu of the course player. However, you can take advantage of the "Add JS" option in the theme builder to make these types of changes. 

Steps:

1. Edit your desired theme.
2. Select Add JS.
   1. NOTE: If you do not see this option, then it has been disabled by your admin for your user role. There are a variety of permission settings that an Admin (with the right permissions) can turn on and off. They will need to turn this option on to enable you to add JS to a theme.
3. Paste in the JavaScript.
   1. NOTE: Do NOT include tags in your code. The code will automatically be put into script tags within the HTML.
4. Select OK.
5. Select Save.
6. Test your changes.

This sample code is changing the order of items and putting "Course Outine" above Custom Menu Items. If you have no custom menu items, then you will not see a change.

NOTE: This code requires you have one or more custom menu items in the Course Player theme to work.

/**
 * Move "Custom Menu Items" after "Outline" in the left nav.
 */
(function () {
  var SOURCE_ID = "navmenu_custom0_wrapper";   // the 
 you want to move
  var AFTER_ID  = "navmenu_outline_wrapper";  // the 
 it should follow

  function moveAfter(sourceEl, afterEl) {
    if (!sourceEl || !afterEl || !afterEl.parentNode) return false;
    var parent = afterEl.parentNode;
    var next = afterEl.nextSibling;
    // If it's already in the right spot, do nothing
    if (next === sourceEl) return true;
    parent.insertBefore(sourceEl, next); // insertBefore(null) appends at end
    return true;
  }

  function runOnce() {
    var sourceEl = document.getElementById(SOURCE_ID);
    var afterEl  = document.getElementById(AFTER_ID);
    if (!sourceEl || !afterEl) return false;
    return moveAfter(sourceEl, afterEl);
  }

  // Try immediately, then poll briefly in case the menu mounts later.
  function init() {
    if (runOnce()) return;
    var tries = 0, max = 200; // ~10s at 50ms
    var iv = setInterval(function () {
      if (runOnce() || ++tries >= max) clearInterval(iv);
    }, 50);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

  // Re-apply after dynamic updates (e.g., menu rebuilt)
  if (window.MutationObserver) {
    try {
      var mo = new MutationObserver(function (muts) {
        // Only do work if something relevant changed
        for (var i = 0; i < muts.length; i++) {
          var m = muts[i];
          if (!m.addedNodes || !m.addedNodes.length) continue;
          // Cheap heuristic: if left menu or the two items appear, try again
          for (var j = 0; j < m.addedNodes.length; j++) {
            var n = m.addedNodes[j];
            if (n.nodeType !== 1) continue;
            if (n.id === "left_menu" || n.id === SOURCE_ID || n.id === AFTER_ID || n.querySelector && (n.querySelector("#" + SOURCE_ID) || n.querySelector("#" + AFTER_ID))) {
              runOnce();
              return;
            }
          }
        }
      });
      mo.observe(document.documentElement, { childList: true, subtree: true });
    } catch (e) {}
  }
})();