Change Order of Drawer Elements

change-drawer-elements-order.js

console.log("Running Gist at https://gist.github.com/robert-blankenship/bc1f262dca08943c00cb");

function when(selector, callback) {
  var interval = window.setInterval(function () {
    if (document.querySelectorAll(selector).length > 0) {
      var err = null; 

      function throwAfter() {
        if (err) throw err;
      }

      try {
        callback();
      } catch (e) {
        err = e;
      } finally {
        window.clearInterval(interval);
      }

      throwAfter()
    }
  }, 200);
}

function forAllWhenVisible(selector, callback) {
  when(selector, function() {
    [].forEach.call(document.querySelectorAll(selector), callback);
  });
}


function changeOrderOfDrawerLinks(drawerContainer) {
  function getHomeLink(drawerChildren) {
    return [].slice.call(drawerChildren, 0, 1)[0];
  }

  function getPageLinks(drawerChildren) {
    var categoryHeaderFound = false;
    return [].slice.call(drawerChildren, 1).filter(function (el) {
      var isHeader = false;

      if (el.tagName === 'H6') {
        categoryHeaderFound = true;
        isHeader = true;
      }

      return !isHeader && !categoryHeaderFound;
    });
  }

  function getCategoryLinks(drawerChildren) {
    var categoryHeaderFound = false;
    var settingsHeaderFound = false;

    return [].slice.call(drawerChildren, 1).filter(function (el) {
      var isHeader = false;

      if (el.tagName === 'H6') {
        if (!categoryHeaderFound) {
          categoryHeaderFound = true
        } else {
          settingsHeaderFound = true
        }
        isHeader = true;
      } 
      
      return !isHeader && categoryHeaderFound && !settingsHeaderFound;
    });
  }

  function getCategoryHeader(drawerChildren) {
    var categoryHeaderFound = false;

    return [].slice.call(drawerChildren, 1).filter(function (el) {
      var isCategoryHeader = false;

      if (el.tagName === 'H6' && !categoryHeaderFound) {
        return categoryHeaderFound = true;
      }
    })[0];
  }


  var homeLink = getHomeLink(drawerContainer.children);
  var pageLinks = getPageLinks(drawerContainer.children);
  
  var categoryLinks = getCategoryLinks(drawerContainer.children);
  var categoryHeader = getCategoryHeader(drawerContainer.children);

  drawerContainer.insertBefore(categoryHeader, homeLink.nextSibling);

  pageLinks.reverse().forEach(function (pageLink) {
    drawerContainer.insertBefore(pageLink, categoryLinks[categoryLinks.length - 1].nextSibling);
  });

  var pageHeader = document.createElement('h6');
  pageHeader.className = "spb-drawerfont spb-drawersectiontextcolor spb-drawersectionbackground";
  pageHeader.innerHTML = "Pages";

  drawerContainer.insertBefore(pageHeader, pageLinks.reverse()[0]);
}

forAllWhenVisible('drawer.ng-isolate-scope section#drawer', function (drawerContainer) {

  var $scope = angular.element(drawerContainer).scope();

  if ($scope.pageLinks && $scope.pageLinks instanceof Array) {
    changeOrderOfDrawerLinks(drawerContainer);
  } else {
    var unset = $scope.$watch('pageLinks', function (pageLinks) {
      if (pageLinks && pageLinks.length) {
        unset();
        changeOrderOfDrawerLinks(drawerContainer);
      }
    });
  }
});