Canvas_Custom_Menu_Folder.js

/****************************************************************************
*****************************************************************************
***************       CUSTOM NAVIGATION TAB                  ****************
***************       Referenced from goo.gl/z4WBCD          ****************
***************       Use with your own discretion.          ***************
****************************************************************************/
/* TEACHER & ADMIN CUSTOM NAV */

/* replace "URL" with the url of the image you want to apper for the custom icon.  Recommend a published Google Drawing */ 
var img_url = '<img src="URL" w="70%" align="center"/>'

$(document).ready(function(){
  try{
    if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0){
    console.log("current_user_role >= teacher")
    var trayLinks = [
        //Replace URL and TEXT with relevant info
        {key: 'URL', val: '<span class="Button Button--small Button-block">TEXT</span>'}, 
        {key: '', val:'<hr/>'},
        {key: 'URL', val: '<span class="Button Button--small  Button-block">TEXT</span>'}, 
    ];
  } else if(ENV.current_user_roles.indexOf('teacher') < 0 && ENV.current_user_roles.indexOf('admin') < 0){
    console.log("current_user_role != teacher ||  != admin");
    var trayLinks = [
      {key: 'http://www.cms.k12.nc.us/Pages/studentportal.aspx', val: '<span><img src="https://docs.google.com/drawings/d/e/2PACX-1vSDJSBwmIh20aScLrGVzXOpwcx5Ycth6FOr5I-iGcXtp7qEmimEctWHFcxOoPlKM3ryHgc_bWwwf3xU/pub?w=50&h=50"/> Student Portal</span>'},
    ];
  } 
  }catch(e) {
    document.getElementById('global_nav_dashboard_link').style.display = "none";
    document.getElementById('global_nav_courses_link').style.display = "none";
    document.getElementById('global_nav_calendar_link').style.display = "none";
    document.getElementById('global_nav_conversations_link').style.display = "none";
    document.getElementById('global_nav_help_link').style.display = "none";
  }



    var slide_out_title = "TITLE" //Changes the title on the slide out menu
    var global_nav_name = "TITLE" //Change the title on the global navigation menu

    var footerContent = '<hr/><h2>Click the "x" at the top of this column to regain control of your navigation column.</h2>'; //Changes the text of the bottom on the slide out tray

////////////////////////////////////////////////////////////////////////////////
//DO NOT EDIT ANYTHING BELOW THIS LINE!
////////////////////////////////////////////////////////////////////////////////

    //Browser Detection
    navigator.agentDetect = (function(){
        var ua= navigator.userAgent, tem,
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        if(M[1]=== 'Chrome'){
            tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
            if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
        }
        M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
        if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
        return M;
    })();

    //Array, 0 = browser, 1 = version
    var agent = navigator.agentDetect;
    var reactId;

    switch(agent[0]) {
        case "Firefox":
            reactId = "2";
            break;
        case "Safari":
            reactId = "2";
            break;
        default:
            reactId = "1";
            break;
    }

   var displayVals = '';

    function displayLinks(element, index, array) {
      displayVals += '<h2>';
      displayVals += '<a target="_blank" href="' + element.key + '">' + element.val + '</a>'; //Remove target="_blank" if you do not want the links to open in a new tab.
      displayVals += '</h2>';
    }

    trayLinks.forEach(displayLinks);

    var trayHtml = '<div style="position:absolute;background:#fff;" class="ReactTray__Content ReactTray__Content--after-open cms_trays" width="100%" padding="10px" tabindex="-1" data-reactid=".' +
     reactId + '.0"><div class="ReactTray__layout " data-reactid=".' +
     reactId + '.0.0"><div class="ReactTray__primary-content " data-reactid=".' +
     reactId + '.0.0.0"><div class="ReactTray__header " data-reactid=".' +
     reactId + '.0.0.0.0"><div id="cms_custom_close"><button class="Button Button--icon-action ReactTray__closeBtn" type="button" data-reactid=".' +
     reactId + '.0.0.0.0.1"><i class="icon-x" data-reactid=".' +
     reactId + '.0.0.0.0.1.0"></i><span class="screenreader-only" data-reactid=".' +
     reactId + '.0.0.0.0.1.1">Close</span></button></div><h1 class="ReactTray__headline" data-reactid=".' +
     reactId + '.0.0.0.0.0">' +
     slide_out_title + '</h1></div><div id="cms_nav_buttons" class="ReactTray__link-list" data-reactid=".' +
     reactId + '.0.0.0.1">' +
     displayVals + '</div><div class="ReactTray__secondary-content" data-reactid=".' +
     reactId + '.0.0.1"><div class="ReactTray__info-box" data-reactid=".' +
     reactId + '.0.0.1.0">' +
     footerContent + '</div></div></div></div></div>' +
     '<script>$(\'.Button.Button--icon-action.ReactTray__closeBtn, .Button.Button--icon-action.ReactTray__closeBtn .icon-x\').click(function () {$(\'.ReactTrayPortal div\').removeAttr(\'style\');$(\'.ReactTrayPortal div\').removeAttr(\'class\');$(\'.ReactTrayPortal div\').html("");$(\'#menu, .menu-item.ic-app-header__menu-list-item a\').removeClass(\'ui-state-disabled\').removeAttr(\'disabled\');$(\'#customTrayOverlay\').hide();$(\'#custom_nav\').css(\'background-color\', \'\');$(\'.icon-resources\').css(\'color\', \'#fff\');});</script>';

    trayHtml = trayHtml.replace(/(?:\r\n|\r|\n|  )/g, '');

    var testHtml = '<h1>Title</h1><hr><button class="Button" href="http://www.cms.k12.nc.us">Test button</button>'

    var menu = $('#menu');
    if (!menu.length) return;
    var custom_nav = $('<li/>', {
      'id': 'custom_nav',
      'class': 'menu-item ic-app-header__menu-list-item',
      html: '<a id="global_nav_resources_link" href="javascript:void(0)" class="ic-app-header__menu-list-link">' +
      '<div class="menu-item-icon-container" aria-hidden="true">' +
      img_url +
      '<div class="menu-item__text">' + global_nav_name + '</div>' +
      '</div></a></li>'
    });

    menu.append(custom_nav);

    var custom_tray = '<div id="customTrayOverlay" style="left: '+ $('#menu').width()+'px;"></div>'
    
    $('body').append(custom_tray);

    $('#global_nav_resources_link').click(function () {
      $('.ReactTrayPortal div').addClass('ReactTray__Overlay ReactTray__Overlay--after-open');
      $('.ReactTrayPortal div').css({
        'position' : 'fixed',
        'top' : '0px',
        'left': '0px',
        'right' : '0px',
        'bottom': '0px'
      });

      $('#customTrayOverlay').append(trayHtml);
      $('#menu, .menu-item.ic-app-header__menu-list-item a').addClass('ui-state-disabled').attr('disabled', 'disabled'); 
      $('#customTrayOverlay').show();
      $('#custom_nav').css('background-color', '#fff');

    });
});