Custom JavaScript/CSS Changes

[akinsey]

Hello all,

Question. Over the weekend there was a Canvas Production Release. In the notes, it mentions undocumented changes to the CSS/Javascript. It seems that those changes have broken our Resources Tab, specifically the slide out menu. We've tried rewriting the code, and even used the code found here as a basis: canvas-contrib/Branding/JS_and_CSS/react-tray-link at master · kajigga/canvas-contrib · GitHub 

Has anyone else had this issue or have any thoughts/ideas as to what has changed?

Thanks!

[ryan · Accepted solution]

Hey Everyone,

I'm an Engineer that works on canvas and I wanted to help clear up what changed and how to fix it going forward here so I made a quick screencast.

Basically the issue was that we used to use a JavaScript library we created called "ReactTray" which was a precursor to the one we officially added to InstructureUI. The latter is better because it fixes a bunch of bugs, has better screenreader and Right-to-Left language support and there was no point in loading 2 tray javascript libraries on the page since all of the other trays we use in canvas are all already using the InstructureUI one.

but the good news is that you really shouldn't have to use custom JavaScript or CSS to make custom help links,  or to change the help menu's name and icon.  those are all things that are officially supported right in the canvas UI. just click the "Customize this menu" link at the bottom of the tray when it pops open and it will take you to an account settings page where you can create as many custom links as you'd like (see screencast).

And even if you want to add some kind of custom JavaScript behavior when you click on one of those links you can use the officially supported way to add them and add something like this to your custom JavaScript file to handle clicking on them (also see screencast):

// this is not supported by Instructure, I'm just providing it as a reference in case it is helpful
// Replace "http://example.com/test" in the selector with whatever url you use in the link you want to add custom behavior to
$(document.body).on('click', '#help_tray a[href="http://example.com/test"]', function(event) {
 event.preventDefault()
 alert('do something special')
})‍‍‍‍‍‍‍‍‍‍‍‍‍

Hopefully that helps clear things up. If there is anything any of you are needing that is not possible ‍‍‍‍using the officially supported way of adding custom links, we'd be interested to hear what you are doing. The hope in creating that feature was that there wouldn't be an need to use custom JS for that anymore and that people could do the same thing in a way that was easier, less-brittle, and officially supported.

PS:  I just want to add another reminder to people that are using a Custom JavaScript override file that those modifications are not officially supported and that you should make sure to check beta before every release to make sure your stuff is going to work when it goes to production.

[robotcars · Accepted solution]

Are you using an Instructure icon or a custom svg?

[qnguyen · Accepted solution]

Hi,

I am using Instructure icon but need to be as big as others. I used the code you sent starting with icon-xxxx

  addMenuItem('Training Course', 'https://edu.instructure.com/courses/123', 'icon-certified', '_blank');

[qnguyen]

Hi Robert,

Yes I am using different name , but looks like it is the same size since it also started with icon-XXXX.

I used exact code you mentioned above except changing the name of the icon and URL to my link. Thanks

[robotcars]

Which icon?

[qnguyen]

Hi,

$(document).ready(function () {

  var styleAdded = false;

  function addMenuItem(linkText, linkhref, icon, target) {
    var iconHtml = '',
      itemHtml,
      linkId = linkText.split(' ').join('_'),
      iconCSS = '<style type="text/css">' +
      '   i.custom_menu_list_icon:before {' +
      '       font-size: 27px;' +
      '       width: 27px;' +
      '       line-height: 27px;' +
      '   }' +
      '   i.custom_menu_list_icon {' +
      '       width: 27px;' +
      '       height: 27px;' +
      '   }' +
      '   body.primary-nav-expanded .menu-item__text.custom-menu-item__text {' +
      '       white-space: normal;' +
      '       padding: 0 2px;' +
      '   }' +
      '</style>';
    if (icon !== '') {
      // If it is a Canvas icon 
      if (icon.indexOf('icon') === 0) {
        iconHtml = '<div class="menu-item-icon-container" role="presentation"><i class="' + icon + ' custom_menu_list_icon"></i></div>';
        // for an svg or other image 
      } else if (icon !== '') {
        iconHtml = '<div class="menu-item-icon-container" role="presentation">' + icon + '</div>';
      }
    }
    // Build item html 
    itemHtml = '<li class="ic-app-header__menu-list-item ">' +
      '   <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' + iconHtml +
      '       <div class="menu-item__text custom-menu-item__text">' + linkText + '</div>' +
      '   </a>' +
      '</li>';
    $('#menu .ic-app-header__menu-list-item').last().before(itemHtml);
    // Add some custom css to the head the first time 
    if (!styleAdded) {
      $('head').append(iconCSS);
      styleAdded = true;
    }

  }

 addMenuItem('Wellness Central', 'https://ohlone.beta.instructure.com/courses/12884', 'icon-line icon-analytics', '_blank');
});

$(document).ready(function(){
// set timeout
var tid = setTimeout(mycode, 250);
function mycode() {
  //Hide Report a Problem Link from everyone regardless of role
  $('#help-dialog-options a[href=#create_ticket]').parent() .hide();
   tid = setTimeout(mycode, 250); // repeat myself
}
});

[robotcars]

Oddly, that works for me, and shows the icon at the correct size. Try without icon-line, and just 

addMenuItem('Wellness Central', 'https://ohlone.beta.instructure.com/courses/12884', 'icon-analytics', '_blank');

[robotcars]

Is that working now?

[qnguyen]

Hi,

It still the same size, I tried different names( icons) from that list and it didn't change the size.

Is there a different set of icons just for Global Navigation? Thanks

[robotcars]

Hi  @qnguyen 

I'm really bad at debugging other's code and since I have other nav hacks I kinda just wrote my own to build out the set. Would you be willing to try this one?

ccsd-canvas/global-nav-custom-links at master · robert-carroll/ccsd-canvas · GitHub 

Please let me know how that works.

[qnguyen]

Thanks Robert,

I used this one by itself and nothing happened. I downloaded this set of code, saved as .JS and upload to Canvas Theme. Sorry I am very new this this too.

============

const links = [{
      title: 'Test', // the menu item or tray name, what users will see
      icon_svg: 'icon-pin', // can be instructure icon, <svg>, or link to .svg
      href: 'https://community.canvaslms.com/',
      target: '' // _blank opens new window/tab, '' opens in the current window/tab
    },
    {
      title: 'Canvas Community',
      icon_svg: 'icon-heart',
      href: 'https://community.canvaslms.com/',
      target: '_blank'
    },
  ];

[robotcars]

That's just the links, you need the rest of it.

ccsd-canvas/global-nav-custom-links.min.js at master · robert-carroll/ccsd-canvas · GitHub 

[qnguyen]

Hi Robert,

Yes it worked now. I wonder what I did wrong that it showed a smaller icon in my last try ( last week that I showed you)

Di you use the icon-heart from the same page?

instructure-ui - A design system by Instructure Inc. (6.24.0) 

[robotcars]

It's not you. Some of these snippets are so old, and Canvas updates frequently, and without keeping the snippets up to date they slowly fall away from fully functional. For some, who they remain working for, it could be a matter of what other changes they've made or how they adjust their css. I try to frequently review my hacks and make sure they are still doing what they need to. All the code here needs a better home.

I haven't used icon-heart, except for developing and providing the example. Is it working for you?

[carlosmorales2]

Hi Ryan,

Hope your good. I'm having an problem with a custom JS that's not working on Catalog homepage. I'm trying to use append to substitute some icons for the page but it's not working the images are hosted on a separate host I'm not sure this is the problem. 

Here is the code I'm using Jquery maybe you can shed some light into what might be the issue i'm not sure if it's a security issue with append and the images. I tried using window .on (load) to see if it was an issue with it not registering the css elements. Thanks

$(document).ready(function () {

document.cookie = "catalog-branding=new; SameSite=None; Secure";

if(window.location.href == "https://development.catalog.instructure.com/"){

    var courseIcon = $(".icon-course");

    var programIcon = $(".icon-program");

    var freeFlag = $(".product-flag-free");  

    if(courseIcon){

    $(".icon-course").hide();

    $(".ProductIcon__LargeCircle--course").append('<img src="externalhost"  width="40rem" />');

    } 

    if(programIcon) {

    $(".icon-program").hide();

    $(".ProductIcon__LargeCircle--program").append('<img src="externalhost"  width="40rem" />');

    }

    if(freeFlag) {

    $(".product-flag-free").hide();

    $('.jqFlag').append('<img src="externalhost"  width="125px" />');

    }

    $('.jqFlag').attr('style', 'border-top: 64px solid; margin-left:-7px;');

    }

});

[mjennings]

Deactivated user‌ Thanks for taking the time to respond out here in the community. We really appreciate all that you canvas developers do. However I think that some of our issues are not with adding to Help menu but to adding our own Resource links for our users. Similar to what  @JACOBSEN_C ‌ mentioned in his comment above. the help menu will get awfully crowded if we add the 15 or so links to campus resources such as libraries, disability support, etc. to that option which would, IMHO make it harder for students to distinguish how to actually get to help when they need it.

Again I think this is helpful information and maybe someone can still work to find a solution for these additional options that many seem to use.

[tylerweldon]

Thanks Deactivated user‌ for the explanation, this really helped clear up what happened with the code. Just to expand on  @mjennings  comments above. @UAB we are currently using the custom menu item provided by Canvas for our technical help areas i.e Canvas Support, Virtual Meeting support etc. We were also using custom Javascript to add another menu item for Student Resources. As a work around I have added a onClick method directly on the student resources button that takes the students to our eLearning website. Any idea if it would be possible to have another custom menu item in the Canvas Settings? The image below explains how we have our navigation setup. 

[robotcars]

I've continued taking periodic 'stabs' at this and started a new thread...

https://community.canvaslms.com/message/101582-global-nav-custom-tray 

[carlosmorales2]

Hi, I'm having an issue trying to have a custom JS to work on Catalog Homepage sometimes it loads for the first time, then if I reload it doesn't work. Maybe you have some idea as to what could be happening i'm not sure if it's a security issues since I'm trying to load some images from another server. 

Thanks