Danny's UI Scripts (unsupported#107)

* instructure-unblock

* inst-api

* homebrew-inst-api

* warn_on_external_link

* user_dashboard_customizations

* style_by_domain

* student_remove_ignore_button

* speedgrader_canned_comments

* reset_notification_preferences

* report_discussion_post

* remote_source_loader

* online_users

* login_slideshow

* grades_on_profile

* enroll_in_ta_sections_only

* download_discussion_posts

* do_stuff_by_role

* disable_notification_preferences

* always_record_conferences

* custom_quiz_password_message

* add_language_selectors

branding/css/user_dashboard_customizations/README.md

@@ -0,0 +1,5 @@
+# Canvas User Dashboard Customizations
+A simple CSS template to facilitate the most common dashboard style requests in the New UI.
+
+## Usage
+Change the included values as desired and upload to the Theme Editor (or concatenate to another style sheet).

branding/css/user_dashboard_customizations/user_dashboard_customizations.css

@@ -0,0 +1,44 @@
+/*
+ * User Dashboard Customizations: Modifies course tiles in the new Canvas UI
+ * by: Danny Wahl ([email protected])
+ * Working as of 10/16/2015
+ * By default this doesn't do anything
+ * you need to set the values in the following rules:
+ * 1.  Disable tile color selectors in new Canvas UI
+ * 2a. Set a standard color for all tiles
+ * 2b. Optionally set a background image for all tiles
+ * 3.  Set course title text color
+ * 4.  Set course sub-title text color
+ * 5.  Hide the course cards */
+
+/* 1. hide settings cog on tiles */
+.ic-DashboardCard__header-button {
+  /* display: none; */
+}
+
+/* 2. Set a background color or image for tiles */
+.ic-DashboardCard__background {
+  /* 2a. (uncomment to apply) Need !important b/c react.js writes inline style */
+  /*background-color: #ff0 !important;*/
+
+  /* 2b. Insert image URL between quotes to superimpose an image on all tiles */
+  background-image: url("");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  background-attachment: scroll;
+}
+
+/* 3. Set the color of course title text */
+.ic-DashboardCard__header-title {
+  /* color: currentColor; */
+}
+
+/* 4. Set the color of the course title sub-header text */
+.ic-DashboardCard__header-subtitle {
+  /* color: currentColor; */
+}
+/* 5. Hide the course cards (announcements, discussions, grades, files) */
+.ic-DashboardCard__action-container {
+  /* display: none; */
+}

branding/javascript/add_language_selectors/README.md

@@ -0,0 +1,3 @@
+# Canvas Add Language Selectors
+This JavaScript adds language switchers to the global navigation and to the right side.
+Currently it's configured to switch back and forth between English (EN) and French (FR).

branding/javascript/add_language_selectors/add_languge_selectors.js

@@ -0,0 +1,87 @@
+/* add_language_selectors.js
+ * by: Danny Wahl [email protected]
+ * Working as of 07/07/2018
+ * This script adds language selectors to the
+ * global and sidebar navigation.
+ * This is a proof of concept and switches between
+ * English (en) and Français Canadien (fr-CA).
+ */
+
+$(function() {
+  var locale = ENV.LOCALE;
+  console.log('locale', locale);
+  var french = 'Français';
+  var english = 'English';
+  var translateIcon =
+    '<!--// Translate Icon CC BY Icon54 (Icon54.com) //--><svg class="ic-icon-svg ic-icon-svg--translate" style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M17,20H2.5C1.122,20,0,18.878,0,17.5v-15C0,1.122,1.122,0,2.5,0h8c0.214,0,0.404,0.136,0.473,0.338l6.5,19    c0.052,0.152,0.027,0.321-0.066,0.452C17.313,19.922,17.162,20,17,20z M2.5,1C1.673,1,1,1.673,1,2.5v15C1,18.327,1.673,19,2.5,19    h13.8L10.143,1H2.5z"/></g><g><path d="M21.5,24h-8c-0.208,0-0.395-0.129-0.468-0.324l-1.5-4c-0.097-0.259,0.034-0.547,0.292-0.644    c0.259-0.096,0.547,0.034,0.644,0.292L13.847,23H21.5c0.827,0,1.5-0.673,1.5-1.5v-15C23,5.673,22.327,5,21.5,5H12    c-0.276,0-0.5-0.224-0.5-0.5S11.724,4,12,4h9.5C22.878,4,24,5.122,24,6.5v15C24,22.878,22.878,24,21.5,24z"/></g><g><path d="M13.5,24c-0.117,0-0.234-0.041-0.329-0.124c-0.208-0.182-0.229-0.498-0.047-0.706l3.5-4    c0.182-0.209,0.498-0.229,0.706-0.047c0.208,0.182,0.229,0.498,0.047,0.706l-3.5,4C13.777,23.942,13.639,24,13.5,24z"/></g><g><path d="M9.5,14c-0.206,0-0.398-0.127-0.471-0.332L7,7.987l-2.029,5.681c-0.093,0.26-0.38,0.396-0.639,0.303    c-0.26-0.093-0.396-0.379-0.303-0.639l2.5-7c0.142-0.398,0.8-0.398,0.941,0l2.5,7c0.093,0.26-0.042,0.546-0.303,0.639    C9.613,13.991,9.556,14,9.5,14z"/></g><g><path d="M8,11H6c-0.276,0-0.5-0.224-0.5-0.5S5.724,10,6,10h2c0.276,0,0.5,0.224,0.5,0.5S8.276,11,8,11z"/></g><g><path d="M21.5,11h-7c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h7c0.276,0,0.5,0.224,0.5,0.5S21.776,11,21.5,11z"/></g><g><path d="M17.5,11c-0.276,0-0.5-0.224-0.5-0.5v-1C17,9.224,17.224,9,17.5,9S18,9.224,18,9.5v1C18,10.776,17.776,11,17.5,11z"/></g><g><path d="M16,17c-0.157,0-0.311-0.073-0.408-0.21c-0.16-0.225-0.107-0.537,0.118-0.697c2.189-1.555,3.79-4.727,3.79-5.592    c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5c0,1.318-1.927,4.785-4.21,6.408C16.202,16.97,16.101,17,16,17z"/></g><g><path d="M20,18c-0.121,0-0.242-0.043-0.337-0.131c-0.363-0.332-3.558-3.283-4.126-4.681c-0.104-0.256,0.02-0.547,0.275-0.651    c0.253-0.103,0.547,0.019,0.651,0.275c0.409,1.007,2.936,3.459,3.875,4.319c0.204,0.187,0.217,0.502,0.031,0.707    C20.27,17.945,20.135,18,20,18z"/></g></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>';
+  var toLangText = '';
+  if (locale == 'en') {
+    toLangText = french;
+  } else {
+    toLangText = english;
+  }
+
+  var insertGlobalNavIcon = function() {
+    if ($('#menu').length) {
+      var globalNavTranslateItem =
+        '<li class="menu-item ic-app-header__menu-list-item"><a id="global_nav_translate_link" href="#" class="ic-app-header__menu-list-link translatePage"><div class="menu-item-icon-container" aria-hidden="true">' +
+        translateIcon +
+        '</div><div class="menu-item__text">' +
+        toLangText +
+        '</div></a></li>';
+      $('#menu li:last-child').before(globalNavTranslateItem);
+      console.log('Translator added to global menu.');
+    } else {
+      console.log('No global menu on this page, will not load nav translator.');
+    }
+  };
+  insertGlobalNavIcon();
+
+  var insertSidebarLinks = function() {
+    if ($('#right-side').length) {
+      var sidebarTranslateItem =
+        '<a class="btn button-sidebar-wide" href="#" id="sidebar_translate_link">' +
+        translateIcon +
+        toLangText +
+        '</a>';
+      $('#right-side').append(sidebarTranslateItem);
+      var sidebarIconStyle =
+        '<style>#sidebar_translate_link svg {height:16px;position:relative;top:2px;margin-right:3px;}</style>';
+      $('head').append(sidebarIconStyle);
+      console.log('Translator added to sidebar');
+    } else {
+      console.log(
+        'No right side on this page, will not load sidebar translator.'
+      );
+    }
+  };
+  insertSidebarLinks();
+
+  $('#global_nav_translate_link, #sidebar_translate_link').on('click', function(
+    event
+  ) {
+    event.preventDefault();
+    if (locale == 'en') {
+      changeLocale('fr-CA');
+    } else {
+      changeLocale('en');
+    }
+  });
+
+  var changeLocale = function(toLang) {
+    var toLang = toLang;
+    //AJAX stuff
+    $.ajax({
+      type: 'PUT',
+      url: '/api/v1/users/self',
+      data: { 'user[locale]': toLang }
+    })
+      .done(function(msg) {
+        location.reload();
+      })
+      .fail(function(msg) {
+        console.log('Unable to change locale, exiting.');
+        console.log(msg);
+      });
+  };
+});

branding/javascript/always_record_conferences/README.md

@@ -0,0 +1,5 @@
+# Canvas Always Record Conferences
+This JavaScript hides the 'enable recording' button from the New Conference dialog and sets the value to 'true'.
+
+## Usage
+* Upload always_record_conferences.js to the Theme Editor.

branding/javascript/always_record_conferences/canvas-always-record-conferences.js

@@ -0,0 +1,38 @@
+/* always_record_conferences.js
+ * by: Danny Wahl [email protected]
+ * Working as of 06/16/2016
+ * automatically checks the "enable recording"
+ * setting when creating a new conference
+ * and hides the setting from the user so they
+ * can't uncheck it.
+ */
+
+$(function(){
+
+  console.log("always_record_conferences.js");
+
+  console.log("  Checking current path...");
+  var path = window.location.pathname.split( '/' );
+
+  if((path[1] == "courses") && (path[3] == "conferences")) {
+
+    console.log("  User is on conferences page.");
+    console.log("  Waiting for 'New Conference' to be pressed...");
+
+    $("button[title='New Conference']").click(function(){
+
+      console.log("  'New Conference' pressed, hiding recording option.");
+      $(".web_conference_user_settings").hide();
+      console.log("  Recording option hidden from user.");
+
+      console.log("  Setting recording to 'true'").
+      $("#web_conference_user_settings_record").attr("checked", true);
+      console.log("  Recording is enabled for this new conference.");
+
+    });
+
+  } else {
+    console.log("  Not on a 'Conferences' page, won't set recording preferences.");
+  }
+
+});

branding/javascript/custom_quiz_password_message/README.md

@@ -0,0 +1,5 @@
+# Canvas Custom Quiz Password Message
+Add a custom message to the text above the password field on a Canvas quiz.
+
+## Usage
+Change the message as desired and upload to the Theme Editor.

branding/javascript/custom_quiz_password_message/custom_quiz_password_message.js

@@ -0,0 +1,41 @@
+/* custom_quiz_password_message.js
+ * by: Danny Wahl [email protected]
+ * Working as of 05/11/2016
+ * allows adding a custom message to the text
+ * displayed above the password form on
+ * a canvas quiz.
+ */
+
+$(function(){
+
+    console.log("custom_quiz_password_message.js");
+
+    // Make sure the user is actually on a quiz before we start checking stuff
+    console.log("  Checking current path...");
+    var path = window.location.pathname.split( '/' );
+    if((path[3] == "quizzes") && (path[5] == "take")) {
+
+        console.log("  user is on a quiz page.");
+        console.log("  Checking for query parameters.");
+
+        /* https://github.com/youbastard/jquery.getQueryParameters */
+        // store all query params in an object
+        jQuery.extend({
+            getQueryParameters : function(str) {
+               return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
+            }
+        });
+
+        // Check if there are any query params on /take (preview, masquerade, etc...)
+        var queryParams = $.getQueryParameters();
+        if((Object.keys(queryParams).length == 1) && (queryParams.user_id == ENV.current_user_id)) {
+            console.log("  Student taking a quiz, will display custom message.");
+            var message = "<p>who watches the watchers?</p>";
+            $("#quiz_access_code").parent().before(message);
+        } else {
+            console.log("  Not a student taking a test, won't display custom message.");
+        }
+    } else {
+        console.log("  Not on quiz page, won't display custom mesage.");
+    }
+});

branding/javascript/disable_notification_preferences/README.md

@@ -0,0 +1,5 @@
+# Canvas Disable Notification Preferences
+A script that disables the editing of notification preferences in the New UI.
+
+## Usage
+Upload to the Theme Editor, prepare for complaints.

branding/javascript/disable_notification_preferences/disable_notification_preferences.js

@@ -0,0 +1,46 @@
+$(function(){
+    /* disable_notification_preferences.js
+     * Disable the changing of notification preferences
+     * for the new Canvas UI (September 2015)
+     * by Danny Wahl [email protected]
+     * Working as of 10/28/2015
+     */
+    if(window.location.pathname == "/profile/communication") {
+
+        console.log("disable_notification_preferences.js");
+        console.log("  Editing Notification Preferences will be disabled on this page.");
+
+        // Disable form fields
+        console.log("  Disabling form fields.")
+
+        $("#notification-preferences :input").prop("disabled", true);
+
+        // Disable hover
+        console.log("  Disabling hover interaction.");
+
+        var $style = $(document.createElement("style"));
+        $style.prop("type", "text/css");
+        $style.html('.notification-table-wrapper:after {position:absolute;background:transparent;content:"";display:block;height:100%;width:100%;top:0;left:0;}');
+        $style.appendTo("head");
+
+        // Show notification settings
+        console.log("  Displaying active notification settings.");
+
+        $('.comm-event-option').addClass('show-buttons');
+        $('.ui-buttonset').removeClass('screenreader-only');
+
+        // "gray out" settings to show disabled state
+        console.log("  \"Gray\" out settings to look disabled.");
+
+        $("#notification-preferences").css({'color':'#999'});
+        $(".ui-state-default").css({'color':'#999'});
+        $(".ui-button.ui-state-active").css({'border-color':'#ccc','background-color':'#ccc','color':'#777'});
+
+        // Add a note saying preferences are disabled
+        console.log("  Notify user that preferences are disabled.");
+
+        $("#content h1").html("Notification Preferences have been disabled by your administrator");
+
+        console.log("Notification Preferences have been disabled.");
+    }
+});

branding/javascript/do_stuff_by_role/README.md

@@ -0,0 +1,7 @@
+# Canvas Do Stuff By Role
+This is a helper JavaScript to get the current enrollment types for the current user, and compare them to a whitelist, then execute custom functionality if the user has the whitelisted role.
+
+## Usage
+* Define whitelisted role types in the `supportedRoles[]` array.  See the [Enrollments API](https://canvas.instructure.com/doc/api/enrollments.html#method.enrollments_api.index) for more info on role types.
+* Add desired functionality for users with supported roles in the `doStuff()` function.
+* Upload this script to the theme editor.

branding/javascript/do_stuff_by_role/do_stuff_by_role.js

@@ -0,0 +1,80 @@
+/*
+ * do_stuff_by_role.js
+ * by: Danny Wahl [email protected]
+ * Working as of 05/19/2016
+ * Grabs the current user's actual roles
+ * and compares them to a list of approved
+ * roles to do some stuff.
+ */
+
+$(function(){
+
+    // Array of role types to run the doStuff() function on
+    // See https://canvas.instructure.com/doc/api/enrollments.html#method.enrollments_api.index
+    // and the `type` parameter for more information
+    var supportedRoles = ["TeacherEnrollment", "TaEnrollment"];
+
+    console.log("canvas-do-stuff-by-role.js");
+    console.log("  Supported roles are: " + supportedRoles);
+    // Ensure that doStuff is only run once for the user
+    var runOnce = false;
+    console.log("  Script has not run yet for this user.");
+
+    // Add desired functionality to the doStuff() function
+    var doStuff = function() {
+        console.log("  Executing script for user.");
+
+        /*
+         * ADD CUSTOM CODE HERE
+         */
+
+
+        // Notify that functionality has been executed
+        runOnce = true;
+        console.log("  Script has run for user.");
+    }
+
+
+    // Probably don't need to change anything below here
+    // This gets the user's enrollments, compares them to supportedRoles[]
+    // And executes if the script hasn't run yet
+
+    var domain = window.location.hostname;
+    var courseID = Number(ENV.course.id);
+    var userID = Number(ENV.current_user_id);
+
+    var jsonURL = "https://" + domain + ":443/api/v1/courses/" + courseID + "/enrollments?user_id=" + userID;
+
+    var userRoles = [];
+
+    console.log("  Getting user's current enrollments...");
+    var getEnrollments = $.getJSON( jsonURL, function( data ) {
+        for(var i=0; i < data.length; i++) {
+            userRoles.push(data[i].type);
+
+        }
+    });
+    getEnrollments.done(function(){
+        console.log("  Enrollments gathered, checking for supported role...");
+        for(var i=0; i < userRoles.length; i++) {
+            if(runOnce == false) {
+                for(var j=0; j < supportedRoles.length; j++) {
+                    var supportedRole = supportedRoles.indexOf(userRoles[i]);
+                    if((supportedRole != -1) && (RunOnce == false)) {
+                        console.log("  Script has not run, supported role found, will run script.");
+                        doStuff();
+                    } else {
+                        console.log("  Script has already run, or user does not have supported role.");
+                        break;
+                    }
+                }
+            } else {
+                console.log("  Script has already run.");
+                break;
+            }
+        }
+    });
+    getEnrollments.error(function(){
+        console.log("  Error getting enrollments.");
+    });
+});

branding/javascript/download_discussion_posts/README.md

@@ -0,0 +1,14 @@
+# Canvas Download Discussion posts
+This script adds an "export" button to the top of a discussion, providing a generated CSV file with all replies in the following format:
+
+```
+id, author, time, likes, text
+```
+
+## Example
+
+```
+id,author,time,likes,text
+104,"Amy Leung","2019-01-16T15:27:11.000Z",3,"Thanks for sharing, Alex.  I'm adding the Orwell piece to my (rather long) list."
+105,"Alex McMullin","2019-01-16T16:28:05.000Z",0,"Come on class, let's see some more participation.  Surely you have some thoughts :)"
+```