Kennethware Config/Installation

[millerjm]

Hi everyone and  @kenneth_larsen ​

I've got the Kennethware Template wizard installed and working but I'm struggling with the CSS bit and getting the Launch DesignTools button to show.

The instructions say:

Paste the content from the canvasGlobal.css file into your institutions global CSS file in Canvas.

Copy the images from the "canvasImages" folder into a folder called "images" in the same location as your global CSS file.

I'm a little confused because we upload our global CSS file into the canvas theme editor.  I've tried to do   @import url("https://canvasl.seminolestate.edu/designtools/canvasGlobal.css"); at the top of our CSS file but otherwise I'm not sure how I need to do the CSS file and where to put it since the links to the images are relative links. 

Is there something else that I'm missing or need to do to get the button to load?

Thanks!

[kenneth_larsen]

Hi  @millerjm ​,

Congrats on getting the Template Wizard up and running (that is usually the hard one). The instructions for the CSS are based on the legacy Canvas and not the new UI. The lack of image files will impact some of the themes, but it would not be an issue with the Launch button not showing up.

The @import should work, that is how I handle our CSS at USU, mostly because I can edit it locally and save it rather than having to upload the file every time I addd or change something. You could also update the image urls in your Canvas CSS file to be absolute paths to the files on your server. I have heard that you can upload a zip file through the Canvas theme editor but I have not tried it.

Now, in regards to the button showing up. Are you familiar with how to view a JavaScript console in your browser? If you have configured everything properly in your Canvas JavaScript file, you should be able to look at the console and see if the code is running. You should see the following listed:

• tools_variables.js loaded
• additional_customization.js loaded
• klTriggerToolsCheck()
• klLoadToolsDependencies()
• master_controls.js loaded
• spectrum loaded
• tools_main loaded

If you want to take a look and let me know how much (if any) of those you see, we can move forward from there.

[millerjm]

OK, glad to hear that the button is not CSS related.    Thanks for your quick response!

Here is what shows up in the console:

• tools_variables.js loaded
• additional_customization.js loaded
• klTriggerToolsCheck()
• master_controls.js loaded

These did not load:

• klLoadToolsDependencies()
• spectrum loaded
• tools_main loaded

[kenneth_larsen]

Would you be willing to email me your global JS file (or a link to it)? That would probably help me track down the issue better.

[millerjm]

Hi Kenneth,

I just sent it to you.  Thank you!!!

Joni

[kenneth_larsen]

Okay, I found the issue. That was a crazy one. The problem is in my code and is tied to the limit by user parameter. If you open master_controls.js and look at line 113, it says:

if ($.inArray(val, ENV.current_user_roles) === -1) {

Change it to:

if ($.inArray(val, ENV.current_user_roles) !== -1) {

I will get the changes made and committed back up to GitHub for future users.

Thanks for asking for help.

[millerjm]

Thanks!  I made that change and now I get this: 

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead

Use of Mutation Events is deprecated. Use MutationObserver instead

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead

tools_variables.js loaded seminole-2015-03-24-kw.js

additional_customization.js loaded seminole-2015-03-24-kw.js

klTriggerToolsCheck() master_controls.js

master_controls.js loaded

[kenneth_larsen · Accepted solution]

Sorry  @millerjm , I spent the remainder of yesterday bouncing between meetings. I looked at your master_controls.js file and it still shows the wrong criteria, let me give a larger context. To match the new code from GitHub, change the following (starting on line 100):

// Check to see if the editor is available yet
function klTriggerToolsCheck() {
    'use strict';
    var klLoadTools = false,
        userID = ENV.current_user_id;
    console.log('klTriggerToolsCheck()');
    // Only proceed if this passes the limits on the tools
    if (klToolsVariables.klLimitByRole === false && klToolsVariables.klLimitByUser === false) {
        klLoadTools = true;
    } else if (klToolsVariables.klLimitByRole === true && klToolsVariables.klLimitByUser === false) {
        $.each(klToolsVariables.klRoleArray, function (index, val) {
            if ($.inArray(val, ENV.current_user_roles) === -1) {
                klLoadTools = true;
                // return false;
            }
        });
    } else if (klToolsVariables.klLimitByRole === false && klToolsVariables.klLimitByUser === true) {
        console.log(userID);
        // If the user's Canvas ID is in the klToolsVariables.klUserArray
        if ($.inArray(userID, klToolsVariables.klUserArray) !== -1) {
            klLoadTools = true;
        }
    } else if (klToolsVariables.klLimitByRole === true && klToolsVariables.klLimitByUser === true) {
        $.each(klToolsVariables.klRoleArray, function (index, val) {
            if ($.inArray(val, ENV.current_user_roles) !== -1 && $.inArray(userID, klToolsVariables.klUserArray) !== -1) {
                klLoadTools = true;
                // return false;
            }
        });
    }
    if (klLoadTools) {
        // First condition is for syllabus
        if ($('.kl_add_tools').length > 0) {
            $('.kl_add_tools').show();
        // If it is not the syllabus check for editor
        } else if ($('iframe').contents().find('#tinymce').length > 0) {
            // console.log(tinyMCE.activeEditor.id);
            iframeID = '#' + tinyMCE.activeEditor.id + '_ifr';
            klLoadToolsDependencies();
        } else {
            // console.log('Check Again');
            setTimeout(function () {
                klTriggerToolsCheck();
            }, 500);
        }
    }
}

to:

// Check to see if the editor is available yet
function klTriggerToolsCheck() {
    'use strict';
    var klLoadTools = false,
        userID = ENV.current_user_id;
    console.log('klTriggerToolsCheck()');
    try {
        // Only proceed if this passes the limits on the tools
        if (klToolsVariables.klLimitByRole === false && klToolsVariables.klLimitByUser === false) {
            klLoadTools = true;
        } else if (klToolsVariables.klLimitByRole === true && klToolsVariables.klLimitByUser === false) {
            $.each(klToolsVariables.klRoleArray, function (index, val) {
                if ($.inArray(val, ENV.current_user_roles) !== -1) {
                    klLoadTools = true;
                    // return false;
                }
            });
        } else if (klToolsVariables.klLimitByRole === false && klToolsVariables.klLimitByUser === true) {
            console.log(userID);
            // If the user's Canvas ID is in the klToolsVariables.klUserArray
            if ($.inArray(userID, klToolsVariables.klUserArray) !== -1) {
                klLoadTools = true;
            }
        } else if (klToolsVariables.klLimitByRole === true && klToolsVariables.klLimitByUser === true) {
            $.each(klToolsVariables.klRoleArray, function (index, val) {
                if ($.inArray(val, ENV.current_user_roles) !== -1 && $.inArray(userID, klToolsVariables.klUserArray) !== -1) {
                    klLoadTools = true;
                    // return false;
                }
            });
        }
        console.log("Load Tools: " + klLoadTools);
        if (klLoadTools) {
            // First condition is for syllabus
            if ($('.kl_add_tools').length > 0) {
                $('.kl_add_tools').show();
            // If it is not the syllabus check for editor
            } else if ($('iframe').contents().find('#tinymce').length > 0) {
                // console.log(tinyMCE.activeEditor.id);
                iframeID = '#' + tinyMCE.activeEditor.id + '_ifr';
                klLoadToolsDependencies();
            } else {
                // console.log('Check Again');
                setTimeout(function () {
                    klTriggerToolsCheck();
                }, 500);
            }
        }
    } catch (err) {
        console.log(err);
    }
}

Sorry for the inconvenience and thanks again for finding this.

[millerjm]

Thanks!  I will do some testing when I can And hopefully that does the trick! 

[millerjm]

Hey Kenneth,

Still no luck. 

tools_variables.js loaded

additional_customization.js loaded

master_controls.js loaded

Any chance we could webex or something?  My schedule is pretty flexible.

Thanks!

Joni

[kenneth_larsen]

You're just enjoying giving me a challenge aren't you? If this one doesn't work, I would be happy to do a webex. I took a look at your code, and your master_controls.js file is now missing the first two lines.

What should read:

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

Actually reads:

  klAfterToolDependenciesLoaded, tinyMCE, iframeID, ENV */

Which is stopping the file from processing. Try fixing that and let me know.

[millerjm]

part of the fun of using VI to edit the file! 

It works!!!!  Thank you so much!!!!

[kenneth_larsen]

So, in looking at your tools_variables.js file it looks like you may have deleted some of the variables. If you don't want to use something, I would recommend giving it an empty value. Odds are, the code is looking for a variable value that you have removed and so it is crashing. I am going to fix your variables file and send it back to you and we will see if that works.

[kenneth_larsen]

Scratch that, let me do some more checking, I was looking at a different version of the variables file :smileyblush: