[ARCHIVED] Custom Java Issue

[MZelmanowicz]

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');

  });

});

[kona]

 @MZelmanowicz ​, because of the highly technical nature of this question I'm going to share it with the Canvas Developers​ group in the Community. They are the back-end programmers and while some are Canvas Admins, some consider themselves more on the tech side of things.

[MZelmanowicz]

Thank you very much, Kona.

Marissa Zelmanowicz

Help Desk Manager and Technical Support Specialist

The Allen-Stevenson School

646-493-5710

mzelmanowicz@allen-stevenson.org<mailto:mzelmanowicz@allen-stevenson.org>

[akkaufmann]

Hi Marissa,

This is just a possible suggestion after a quick look at your code, but I think updating the displayLinks function should do the trick.

Here is the updated code (changes in bold)

function displayLinks(element, index, array) {

  displayVals += '<li>';

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

  displayVals += '</li>';

  }

Adding the 'target' attribute to a link tells the web browser where to open the link when clicked. The '_blank' target is a new window or tab.

There is also a helpful discussion about adding content to the menus for the new UI here: Has anyone been working on scripts for the new Beta UI? 

If this doesn't work, let me know and I will do a more thorough analysis of your code.

Alex

[MZelmanowicz · Accepted 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

[szabarovska]

I wanted to open this discussion up again to see if anyone is experiencing issues with  the custom java code that is mentioned above.

TIA for any help!

[JACOBSEN_C]

OUr custom global option is not working.  Seems to stem from something changing in the latest production release.

[MZelmanowicz]

Our custom java stopped working with the latest production release as well. So far I haven't had any luck figuring out a fix. When I reached out to my CSM and support I got the usual answer that it is unsupported and they could possibly help find a fix for a fee through the admin consulting, which we are going to try to avoid if possible. 

If anybody does find a fix and is willing to share it would be much appreciated! 

Thanks,

Marissa