USU Design Tools Training

2.4: Additional Customization JS

The functions in this area can be used to extend the functionality of USU Design Tools.

This code is found in the addition_customization.js file.

Warning: Extreme caution should be used in this area because any changes to these functions may break USU Design Tools and other features of Canvas.

The code at the top is to configure this page to work with JSLint to help identify code errors.

/*jslint browser: true, sloppy: false, eqeq: false, vars: false, maxerr: 50, indent: 4, plusplus: true */
/*global $, jQuery, alert, console, klToolsVariables, coursenum, tinyMCE, iframeID, ENV */

Code added to this function will be triggered right after Canvas loads user created content into pages, discussions, assignments and syllabus.

Examples of where this would be useful:

  • USU Design Tools checks for the existence of a fa class that indicates the presence of a Font Awesome icon to know if it should load resources.

Note: See also Content Live View

function klAdditionalAfterContentLoaded() {
    'use strict';
    // Additional code to run after a page's content has loaded

This function fires right before the tools load and could be used in conjunction with the klAdditionalAccordionSections() function if an institution wanted to add to the tools.

function klAfterToolDependenciesLoaded() {
    'use strict';
    // Additional code to load with tool dependencies

This function can be used to add additional accordion panels to the bottom of the tools.

function klAdditionalAccordionSections() {
    'use strict';

The JavaScript for a new panel would look something like:

var addAccordionSection = '<h3 class="kl_wiki">Section Title</h3>' + '<div>' + ' Section Content' + '</div>'; $('#kl_tools_accordion').append(addAccordionSection);

Then add additional code to perform the desired functions with that section.

The following function fires right after the tools launch. This function could be used to add additional functionality to a page that uses USU Design Tools.

function klAfterToolLaunch() {
    'use strict';
    // Additional code to load after the tools are launched

The klAdditionalLiveView() function is similar to the klAdditionalAfterContentLoaded() with the following differences:

klAdditionalAfterContentLoaded() klAdditionalLiveView()
Runs on every page where USU Design Tools can be used (Content Pages, Assignments, Discussions and Syllabus) Runs only if content was created using USU Design Tools
Runs before USU Design Tools manipulates content Runs after USU Design Tools has created Accordions, Modals, Tooltips, Quick Checks, etc.
  • Only executed when content was created using USU Design Tools
function klAdditionalLiveView() {
    'use strict';
    // Additional code