Custom Java Issue

Jump to solution
MZelmanowicz
Community Explorer

Hi Everyone,

I was wondering if anyone could help me out with a minor problem we are having. We use custom Java to add an extra icon on the global navigation that acts as our Helpful Links tab.  Prior to switching over to the new user interface, the code worked perfectly. Depending on the role of the user it would display a different set of links and when clicked the links would open up in a new browser. Since the change to the new UI, the links no longer open in a new window. Currently, we have asked everyone who is bothered by the lack of this ability to right-click on the link.   While I know this is a minor issue and that there are workarounds, we would like to fix it if possible.  I have tried looking at the javascript using my basic understanding and experience with the language, and cannot figure out the appropriate location to edit the code to make this change. I was wondering if any of you incredibly smart people in the Canvas Community might be able to help.  I have added the code below. Any help would be greatly appreciated!

Thanks,

Marissa

// THIS IS NOT SUPPORTED BY INSTRUCTURE, WORKS as of 12-4-15

$(document).ready(function() {

  if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0){

  //items to show to teacher and admins

  var trayLinks = [

  {key: 'http://www.primetimetable.com/publish/?id=a245f67f-b6ee-4c4b-97ca-c1562c39249e&time=2&skin=2#id=a245...', val: 'Faculty Schedules'},

  {key: 'https://app.foliocollaborative.org/sign_in', val: 'Folio'},

  {key: 'https://allen-stevenson.rubiconatlas.org/Atlas/Authentication/View/Login', val: 'Atlas Mapping'},

  {key: 'https://allen-stevenson.seniormbp.com/SeniorApps/facelets/registration/loginCenter.xhtml?convid=8737', val: 'My BackPack'},

  {key: 'https://docs.google.com/spreadsheets/d/1kqWP5kFuabbFMB7h-zCcN7yPvhz0ogRKkzFx09Uuzxc/edit#gid=9711195...', val: 'Halftime Schedule'},

  {key: 'https://docs.google.com/a/allen-stevenson.org/forms/d/1jAfer89_4d1e6gqzj_-gLYKfHDRoeVGvX53Hr4JhYjw/e...', val: 'Halftime Sign Up'},

  {key: 'https://usteachersonly.wikispaces.com/page/code/Tests', val: 'Upper School Quiz/Test Schedule'},

  {key: 'https://docs.google.com/a/allen-stevenson.org/spreadsheets/d/1ydM6acmBRjfNTwKQYQqOguGIf03RxSo2SrJEOO...', val: 'Music Lesson Schedule'},

  {key: 'https://allen-stevenson.myschoolapp.com/app/faculty#calendar', val: 'Allen-Stevenson Master Calendar'},

  {key: 'http://www.allen-stevenson.org/page/tisch-library-media-center', val: 'Learning Commons'}

  ];

  } else if (ENV.current_user_roles.indexOf('student') >= 0) {

  //items to show to students

  var trayLinks = [

  {key:'http://www.primetimetable.com/publish/?id=a245f67f-b6ee-4c4b-97ca-c1562c39249e&time=2&skin=2#id%3Da2...', val: 'Class Schedule'},

  {key: 'https://docs.google.com/spreadsheets/d/1kqWP5kFuabbFMB7h-zCcN7yPvhz0ogRKkzFx09Uuzxc/edit#gid=9711195...', val: 'Halftime Schedule'},

  {key: 'https://docs.google.com/a/allen-stevenson.org/forms/d/1jAfer89_4d1e6gqzj_-gLYKfHDRoeVGvX53Hr4JhYjw/e...', val: 'Halftime Sign Up'},

  {key: 'https://docs.google.com/a/allen-stevenson.org/spreadsheets/d/1ydM6acmBRjfNTwKQYQqOguGIf03RxSo2SrJEOO...', val: 'Music Lesson Schedule'},

  {key: 'http://www.allen-stevenson.org/page/tisch-library-media-center', val: 'Learning Commons'}

  ];

  } else {

  //items to show to people who are not teachers, students or admins

  var trayLinks = [

  {key:'http://www.primetimetable.com/publish/?id=a245f67f-b6ee-4c4b-97ca-c1562c39249e&time=2&skin=2#id%3Da2...', val: 'Class Schedule'},

  {key: 'https://docs.google.com/spreadsheets/d/1kqWP5kFuabbFMB7h-zCcN7yPvhz0ogRKkzFx09Uuzxc/edit#gid=9711195...', val: 'Halftime Schedule'},

  {key: 'https://docs.google.com/a/allen-stevenson.org/spreadsheets/d/1ydM6acmBRjfNTwKQYQqOguGIf03RxSo2SrJEOO...', val: 'Music Lesson Schedule'},

  {key: 'http://www.allen-stevenson.org/page/tisch-library-media-center', val: 'Learning Commons'}

  ];

  }

  var slide_out_title = "Helpful Links" //Changes the title on the slide out menu

  var global_nav_name = "Helpful Links" //Change the title on the global navigation menu

  var footerContent = 'For access to the Canvas Guides or Support use the Help button.'; //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 += '<li>';

  displayVals += '<a href="' + element.key + '">' + element.val + '</a>';

  displayVals += '</li>';

  }

  trayLinks.forEach(displayLinks);

  var trayHtml = '<div style="position:absolute;background:#fff;" class="ReactTray__Content ReactTray__Content--after-open " 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"><h1 class="ReactTray__headline" data-reactid=".' +

   reactId + '.0.0.0.0.0">' +

   slide_out_title + '</h1><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><ul class="ReactTray__link-list" data-reactid=".' +

   reactId + '.0.0.0.1">' +

   displayVals + '</ul></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>' +

   '<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 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">' +

  '<i class="icon-resources"></i>' +

  '<div class="menu-item__text">' + global_nav_name + '</div>' +

  '</div></a></li>'

  });

  menu.append(custom_nav);

  $('body').append('<div id="customTrayOverlay" style="width:' + $('#menu').width() + 'px;height: ' + $('#menu').height() + 'px;position: absolute;left: 0;top: 87px;z-index: 999;display:none;"></div>');

  $('#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'

  });

  $('.ReactTrayPortal div').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');

  });

});

1 Solution
Hi Alex,


Thank you so much for your help. You’re a lifesaver! While the code didn’t work, it did help me understand what was happening so I was able to tweak it so it would. Below is the code that worked.


var displayVals = '';


function displayLinks(element, index, array) {
displayVals += '
    ';
    displayVals += '<a href="' + element.key + '"' + 'target="_blank"' + '>' + element.val + '</a>';
    displayVals += '</li>';
    }


    Keep being awesome!


    Marissa

    View solution in original post