USU Design Tools Training

2.2: Canvas Global JS

This page explains the Global JavaScript code

This code is found in canvasGlobal.js and needs to be added to the institution's global JavaScript file.

Note: This code does not need to be modified

Open a panel below to learn about the Global JavaScript code.

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, tinyMCE */

The copyright portion identifies what license these tools are released under.

// These tools were designed to facilitate rapid course development in the Canvas LMS
// Copyright (C) 2014  Kenneth Larsen - Center for Innovative Design and Instruction
// Utah State University

// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
// http://www.gnu.org/licenses/agpl-3.0.html

These variables will tell the program where to find the files it needs to run. The only variable that should need to be adjusted is:

klToolsPath
Change this variable to point to the folder where to tools are located on the institutions server.
klGlobalCSSFile
Change this variable to point to institution's global CSS file. This will be used to add styles to the content editor.
// Development version will be loaded in the following courses
var iframeID,
    // Path to where the canvasCustomTools folder is located
    klToolsPath = 'https://{path to tools}/',
    // Path to the tools_variables file
    klToolsVariablesFile = klToolsPath + 'js/tools_variables.js',
    // Path to additional_customization file
    klToolsAdditionalCustomizationFile = klToolsPath + 'js/additional_customization.js',
    // To utilize the features that pull from the Canvas api you will need the hosted php files put their path here
    klApiToolsPath = klToolsPath + 'api/',
    // Path to institutional css file
    klGlobalCSSFile = 'https://{path to css}/canvasGlobal.css',
    klFontAwesomePath = '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css',
    coursenum;

The following function pulls the Canvas course id from the url of the current course.

function klGetCourseNum() {
    'use strict';
    var matches, killspot;
    // Parse Course Number - It is stored in the variable "coursenum"
    coursenum = null;
    matches = location.pathname.match(/\/courses\/(.*)/);
    if (matches) {
        coursenum = matches[1];
        killspot = coursenum.indexOf("/", 0);
        if (killspot >= 0) {
            coursenum = coursenum.slice(0, killspot);
        }
    }
}
klGetCourseNum();

The following files contain additional information that is needed to run USU Design Tools.

tools_variables.js
Contains institutional variables that will be used to customize USU Design Tools.
See Tools Variables JS.
additional_customization.js
Allows for additional scripts to be run during the tool loading process.
See Additional Customization JS.
master_controls.js
Identifies when to load various elements of the tools. Not customizable.
// Pull in custom variables
$.getScript(klToolsVariablesFile, function () {
    'use strict';
    console.log("tools_variables.js loaded");
    // Additional Customization
    $.getScript(klToolsAdditionalCustomizationFile, function () {
        console.log("additional_customization.js loaded");
        // Run code to initialize tools
        $.getScript(klToolsPath + "master_controls.js", function () {
            console.log("master_controls.js loaded");
        });
    });
});