AnsweredAssumed Answered

Help with some custom Java in Canvas

Question asked by Jesse Buchholz on Apr 13, 2018
Latest reply on Apr 23, 2018 by Robert Carroll

I have a small problem and I hope that someone who is much more adept in Java can help me navigate what I need to do to fix our custom drawer in our instance of Canvas.  We had Canvas design us a drawer that mimicked the Help Button drawer that we could customize. Over the last week, something on Canvas's end has changed and I can't for the life of me figure out what it is. Any help is greatly appreciated. Here is our code.

 

// THIS IS NOT SUPPORTED BY INSTRUCTURE, WORKS as of 12/1/17

$(document).ready(function() {

        var trayLinks = [

               {key: 'http://casa.nnu.edu/disability-services', val: 'Disability Support Services', words: 'Learn about accessing services.'},

               {key: 'http://www.grammarly.com/edu/students/', val: 'Grammarly', words: 'Proofread and grammar checking made easy'},

               {key: 'http://library.nnu.edu/', val: 'Library', words: 'Riley Library resources & services'},

               {key: 'http://libguides.nnu.edu/zotero', val: 'Zotero', words: 'Manage your citations and create bibliographies'},

               {key: 'http://www.tutormatchingservice.com/nnu', val: 'TutorMatching', words: 'Find an NNU Subject-Area Tutor or Writing Consultant'},

               {key: 'http://casa.nnu.edu/writing', val: 'Writing Center Website', words: 'NNU\'s Online Writing Center! Resources are available now.'},

               {key: 'https://nnu.instructure.com/enroll/CPEK3F', val: 'Undergraduate Online Writing Center', words: 'Upload your undergraduate paper here.'},

               {key: 'https://nnu.instructure.com/enroll/NNKNMA', val: 'Graduate Online Writing Center', words: 'Upload your graduate paper here'}

        ];

 

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

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

 

        var footerContent = ''; //Changes the text of the bottom on the slide out tray

        ////////////////////////////////////////////////////////////////////////////////

        //DO NOT EDIT ANYTHING BELOW THIS LINE!

        ////////////////////////////////////////////////////////////////////////////////

 

        var displayVals = '';

 

        function displayLinks(element, index, array) {

               displayVals += '<li style="list-style-type:none;">';

               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 +=  '</br>' + element.words + '</br>' + '</br>';

               displayVals += '</li>';

        }

 

        trayLinks.forEach(displayLinks);

 

        var trayHtml = '<div style="position:absolute;background:#fff;" class="ReactTray__Content ReactTray__Content--after-open " tabindex="-1" data-reactid=".1.0">' +

         '<div class="ReactTray__layout" data-reactid=".1.0.0">' +

         '<div class="ReactTray__primary-content" data-reactid=".1.0.0.0">' +

         '<div class="ic-NavMenu__header" data-reactid=".1.0.0.0.0">' +

         '<h1 class="ic-NavMenu__headline" data-reactid=".1.0.0.0.0.0">' +

   slide_out_title +

         '</h1><button class="Button Button--icon-action ReactTray__closeBtn" type="button" data-reactid=".1.0.0.0.0.1">' +

         '<i class="icon-x" data-reactid=".1.0.0.0.0.1.0"></i>' +

         '<span class="screenreader-only" data-reactid=".1.0.0.0.0.1.1">Close</span></button></div>' +

         '<ul class="ReactTray__link-list" data-reactid=".1.0.0.0.1">' +

   displayVals + '</ul></div>' +

         '<div class="ReactTray__secondary-content" data-reactid=".1.0.0.1">' +

         '<div class="ReactTray__info-box" data-reactid=".1.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-folder\').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="ic-icon-svg icon-folder"></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');

 

        });

});

Outcomes