canvas-all.user.js

// ==UserScript==
// @name         Canvas All Info
// @namespace    https://theusaf.github.io
// @version      1.4.0
// @icon         https://canvas.instructure.com/favicon.ico
// @copyright    2020-2021, Daniel Lau
// @license      MIT
// @description  Place all information on a single page (https://canvas.example.com/all or https://example.instructure.com/all)
// @author       theusaf
// @include      /^https:\/\/canvas\.[a-z0-9]*?\.[a-z]*?\/all\/?(\?.*)?$/
// @include      /^https:\/\/[a-z0-9]*?\.instructure\.com\/all\/?(\?.*)?$/
// @inject-into  page
// @grant        none
// ==/UserScript==

/*
  Note:
  - This userscript uses public APIs accessed by canvas
    - Gets class information
    - Gets assignments
    - Gets basic teacher information
  - This userscript does not store or upload any information gathered by the script
  - This userscript overwrites /all in canvas
  - This userscript was originally developed for Oregon State University
*/

/* Useful Links (for use later?)
/api/v1/conversations?scope=inbox&filter_mode=and&include_private_conversation_enrollments=false
- Canvas mail
/api/v1/conversations/(mailbox_id)?include_participant_contexts=false&include_private_conversation_enrollments=false
- Specific mail
/courses/(class_id)/modules/items/assignment_info
- Module items
*/

/**
 * log - logs info to console
 * @param {*} str
 * @param  {...any} data
 */
const log = (str, ...data) => {
  if (data.length > 0) {
    console.log(`[CANVAS-ALL] ${str}`, data);
  }
  console.log(`[CANVAS-ALL] ${str}`);
};

/**
 * load - Loads everything
 */
async function load() {
  document.title = "Dashboard - All";

  /**
   * mainElement - the main application div
   * iFrameLoader - The div for loading iframes for getting data
   * styles - A style element
   */
  const mainElement = document.getElementById("main"),
    iFrameLoader = document.createElement("div");
  mainElement.innerHTML = `<style>
    #canvas-all-iframe-loader{
      visibility: hidden;
      position: fixed;
      width: 100%;
      height: 100%;
      pointer-events: none;
      left: 0;
    }
    #canvas-all-iframe-loader > iframe{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    #main{
      display: flex;
      flex-flow: column;
      padding: 1rem;
    }
    #main>span{
      flex: 0;
      margin-bottom: 1rem;
    }
    #main>div{
      flex: 1;
    }
    #canvasall_main_wrapper{
      display: flex;
    }
    #canvasall_main_wrapper>div{
      flex: 75%;
    }
    #canvasall_class_grades{
      display: flex;
      flex-flow: column;
      background: #fff5e0;
      padding: 0.5rem;
      border-radius: 0.5rem;
    }
    #canvasall_assignments_wrapper{
      padding: 0.5rem;
      background: #fff5e0;
      border-radius: 0.5rem;
    }
    #canvasall_main_wrapper>#canvasall_announcement_wrapper{
      flex: 25%;
      padding: 0.5rem;
    }
    #canvasall_assignment_filter_list_chosen{
      display: inline-block;
    }
    #canvasall_assignment_filter_list_chosen>option{
      display: inline-block;
      background: grey;
      color: white;
      padding: 0.25rem;
      margin: 0.25rem;
      cursor: pointer;
    }
    #canvasall_assignment_filter_list_chosen>option::before{
      content: "x ";
    }
    .canvasall_announcement_wrapper{
      margin-bottom: 0.5rem;
      padding: 0.5rem;
      border-radius: 0.5rem;
    }
    .canvasall_announcement_wrapper:nth-child(2n+1){
      background: #fff5e0;
    }
    .canvasall_announcement_wrapper:nth-child(2n){
      background: #ddd;
    }
    .canvasall_announcement_title{
      font-size: 1.25rem;
      font-weight: bold;
    }
    .canvasall_announcement_class,
    .canvasall_announcement_when{
      font-size: 0.75rem;
    }
    .canvasall_announcement_class>a{
      color: grey;
    }
    .canvasall_class_grade_wrapper:nth-child(2n+1){
      background: white;
    }
    .canvasall_class_grade_wrapper:nth-child(2n){
      background: #eee;
    }
    .canvasall_class_grade_wrapper{
      flex: 1;
      display: flex;
      border-radius: 0.5rem;
    }
    .canvasall_class_grade_wrapper>div{
      flex: 1;
      padding: 0.5rem;
      word-break: break-all;
    }
    .canvasall_assignment_wrapper:nth-child(2n+1){
      background: rgba(255,255,255,0.8);
    }
    .canvasall_assignment_wrapper:nth-child(2n){
      background: rgba(255,255,255,0.4);
    }
    .canvasall_assignment_wrapper{
      display: flex;
      padding: 0.5rem;
      border-radius: 0.5rem;
    }
    .canvasall_assignment_wrapper>div{
      flex: 1;
      padding-right: 0.25rem;
      padding-left: 0.25rem;
    }
    .canvasall_assignment_title{
      display: flex;
      align-items: center;
    }
    .canvasall_assignment_title>img{
      height: 1.5rem;
      width: 1.5rem;
      margin-right: 0.5rem;
    }
    .canvasall_assignment_icon {
      min-height: 1.5rem;
      min-width: 1.5rem;
      margin-right: 0.5rem;
    }
    .canvasall_assignment_type_assignment:before {
      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDI4MCAyNTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4MCAyNTkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik03My4zMSwxOThjLTExLjkzLDAtMjIuMjIsOC0yNCwxOC43M2EyNi42NywyNi42NywwLDAsMC0uMywzLjYzdi4zYTIyLDIyLDAsMCwwLDUuNDQsMTQuNjUsMjIuNDcsMjIuNDcsMCwwLDAsMTcuMjIsOEgyMDBWMjI4LjE5aC0xMzRWMjEzLjA4SDIwMFYxOThabTIxLTEwNS43NGg5MC42NFY2Mkg5NC4zWk03OS4xOSwxMDcuMzRWNDYuOTJIMjAwdjYwLjQyWm03LjU1LDMwLjIxVjEyMi40NUgxOTIuNDl2MTUuMTFaTTcxLjY1LDE2LjcxQTIyLjcyLDIyLjcyLDAsMCwwLDQ5LDM5LjM2VjE5MC44OGE0MS4xMiw0MS4xMiwwLDAsMSwyNC4zMi04aDE1N1YxNi43MVpNMzMuODgsMzkuMzZBMzcuNzgsMzcuNzgsMCwwLDEsNzEuNjUsMS42SDI0NS4zNlYxOThIMjE1LjE1djQ1LjMyaDIyLjY2VjI1OC40SDcxLjY1YTM3Ljg1LDM3Ljg1LDAsMCwxLTM3Ljc2LTM3Ljc2WiI+PC9wYXRoPjwvc3ZnPgo=");
    }
    .canvasall_assignment_type_quiz:before {
      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDI4MCAyODAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4MCAyODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik05MS43MiwxMjAuNzVoOTYuNTZWMTA0LjY1SDkxLjcyWm0wLDQ4LjI4aDgwLjQ3VjE1Mi45NEg5MS43MlptMC05Ni41Nmg4MC40N1Y1Ni4zN0g5MS43MlptMTYwLjk0LDM0Ljg4SDIyOC41MlYxMC43OGgtMTc3djk2LjU2SDI3LjM0QTI0LjE3LDI0LjE3LDAsMCwwLDMuMiwxMzEuNDhWMjQ0LjE0YTI0LjE3LDI0LjE3LDAsMCwwLDI0LjE0LDI0LjE0SDI1Mi42NmEyNC4xNywyNC4xNywwLDAsMCwyNC4xNC0yNC4xNFYxMzEuNDhBMjQuMTcsMjQuMTcsMCwwLDAsMjUyLjY2LDEwNy4zNFptMCwxNi4wOWE4LjA2LDguMDYsMCwwLDEsOCw4djUxLjc3bC0zMi4xOSwxOS4zMVYxMjMuNDRaTTY3LjU4LDIwMy45MXYtMTc3SDIxMi40MnYxNzdaTTI3LjM0LDEyMy40NEg1MS40OHY3OS4xM0wxOS4yOSwxODMuMjZWMTMxLjQ4QTguMDYsOC4wNiwwLDAsMSwyNy4zNCwxMjMuNDRaTTI1Mi42NiwyNTIuMTlIMjcuMzRhOC4wNiw4LjA2LDAsMCwxLTgtOFYyMDJsMzAsMThIMjMwLjc1bDMwLTE4djQyLjEyQTguMDYsOC4wNiwwLDAsMSwyNTIuNjYsMjUyLjE5WiI+PC9wYXRoPjwvc3ZnPgo=");
    }
    .canvasall_assignment_type_discussion_topic:before {
      content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgcm90YXRlPSIwIiBzdHlsZT0iaGVpZ2h0OjFlbTt3aWR0aDoxZW0iIHZpZXdCb3g9IjAgMCAxOTIwIDE5MjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnPgo8cGF0aCBkPSJtNjc3LjY1IDE2djMzOC45NGgxMTIuOTR2LTIyNS44OGgxMDE2LjV2NzkwLjQ4aC0yMjZ2MjU5Ljc2bC0yNTkuNjUtMjU5Ljc2aC03OS4xNzJ2LTQ1MS42NWgtNTY0LjU5LTY3Ny42NXYxMDE2LjVoMzM4LjcxdjQxOC45bDQxOC00MTguOWg0ODUuNTN2LTQ1MS44OGgzMi43NTNsNDE5LjEyIDQxOS4xMnYtNDE5LjEyaDIyNS44OHYtMTAxNi41aC0xMjQyLjR6bS0zMzguODYgOTAzLjU2aDU2NC43MXYtMTEyLjk0aC01NjQuNzF2MTEyLjk0em0wIDIyNS44OGgzMzguOTR2LTExMy4wNWgtMzM4Ljk0djExMy4wNXptLTIyNS44NS01NjQuNzRoMTAxNi41djc5MC43aC00MTkuMDFsLTI1OC43NSAyNTkuNjV2LTI1OS42NWgtMzM4Ljcxdi03OTAuN3oiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgo8L2c+Cjwvc3ZnPgo=")
    }
    .canvasall_status_submit,
    .canvasall_status_submit a{
      color: green;
    }
    .canvasall_status_done{
      text-decoration: line-through;
    }
    .canvasall_status_late{
      background: orange !important;
      color: white;
    }
    .canvasall_status_late a{
      color: white;
    }
    .canvasall_status_missing{
      background: red !important;
      color: white;
    }
    .canvasall_status_missing a{
      color: white;
    }
    .canvasall_status_feedback>.canvasall_assignment_title::after{
      content: " (Feedback available)"
    }
  </style>
  <span id="canvasall_fetching_information">Fetching information... please wait...</span>
  <div id="canvasall_main_wrapper">
    <div>
      <div id="canvasall_class_wrapper">
        <!-- Courses, Grades, etc. -->
        <h3>Courses</h3>
        <div id="canvasall_class_grades">
          <div id="canvasall_class_grade_header" class="canvasall_class_grade_wrapper">
            <div><span>Class</span></div>
            <div><span>Grade</span></div>
            <div><span>Professor</span></div>
          </div>
        </div>
      </div>
      <h3>Current Assignments</h3>
      <div>
        <span>Filters:</span>
        <select id="canvasall_assignment_filter_status">
          <option value="">Select</option>
          <option value="submit">Hide Submitted</option>
          <option value="done">Hide Graded</option>
          <option value="late">Hide Late</option>
          <option value="missing">Hide Missing</option>
          <option value="quiz">Hide Quiz</option>
          <option value="assignment">Hide Assignment</option>
        </select>
        <div id="canvasall_assignment_filter_list_chosen">
        </div>
      </div>
      <div id="canvasall_assignments_wrapper">
        <div class="canvasall_assignment_wrapper">
          <div>
            <span>Assignment Name</span>
          </div>
          <div>
            <span>Class</span>
          </div>
          <div>
            <span>Due Date</span>
          </div>
        </div>
      </div>
    </div>
    <div id="canvasall_announcement_wrapper">
      <h3>Announcements</h3>
    </div>
  </div>`;
  iFrameLoader.id = "canvas-all-iframe-loader";
  mainElement.append(iFrameLoader);

  /**
   * courses - Class information
   * classAssignments - Assignments for courses
   * mainFrame - The main iframe
   * ENV - Global variables with useful data
   * currentUserID - The current user id
   */
  log("Getting courses");
  const courses = await getCourses(),
    courseAssignments = [],
    courseGrades = {},
    { ENV } = window,
    { currentUserID } = ENV,
    courseGradeDiv = mainElement.querySelector("#canvasall_class_grades"),
    assignmentsDiv = mainElement.querySelector("#canvasall_assignments_wrapper"),
    announcementsDiv = mainElement.querySelector(
      "#canvasall_announcement_wrapper"
    ),
    statusFilter = mainElement.querySelector(
      "#canvasall_assignment_filter_status"
    ),
    statusFilterList = mainElement.querySelector(
      "#canvasall_assignment_filter_list_chosen"
    ),
    localStorageConfigStr = localStorage.canvasAllConfig ?? "{}",
    localStorageConfig = JSON.parse(localStorageConfigStr);

  function hideType(value) {
    console.log(`Hiding '${value}'`);
    if (value === "") {
      // ignore reset to empty value
      console.log("Ignoring empty value");
      return;
    }
    const elem = statusFilter.querySelector(
        `option[value="${value}"]`
      ),
      temp = document.createElement("template"),
      now = `${Math.random()}`.substring(2);
    if (!elem) {
      console.error("Could not find element");
      return;
    }
    temp.innerHTML = `<style id="canvasall_filter_${now}">
      .canvasall_status_${value}{
        display: none;
      }
    </style>`;
    localStorageConfig[value] = true;
    localStorage.canvasAllConfig = JSON.stringify(localStorageConfig);
    setTimeout(() => {
      document.body.append(temp.content.cloneNode(true));
      statusFilterList.append(elem);
      elem.addEventListener("click", click);
      statusFilter.value = "";
    });
    function click() {
      localStorageConfig[value] = false;
      localStorage.canvasAllConfig = JSON.stringify(localStorageConfig);
      // remove style
      document.querySelector(`#canvasall_filter_${now}`).remove();
      elem.removeEventListener("click", click);
      setTimeout(() => {
        statusFilter.append(elem);
        statusFilter.value = "";
      });
    }
  }

  // Filters
  statusFilter.addEventListener("change", () => {
    hideType(statusFilter.value);
  });

  // Begin writing class information
  for (const [i, course] of Object.entries(courses)) {
    const template = document.createElement("template");
    template.innerHTML = `<div class="canvasall_class_grade_wrapper" canvasall-class-id="${
      course.id
    }">
      <div class="canvasall_class_grade_name">
        <span>${+i + 1}. <a href="/courses/${course.id}">${
      course.name
    }</a></span>
      </div>
      <div class="canvasall_class_grade_score">
        <span>(Loading scores...)</span>
      </div>
      <div class="canvasall_class_grade_instructor">
        <span>(Loading instructors...)</span>
      </div>
    </div>`;
    courseGradeDiv.append(template.content.cloneNode(true));
  }

  log("Getting course assignments and grades");
  let courseCount = 0,
    finishedCollections = 0;
  for (const course of courses) {
    courseCount++;
    getCourseAssignments(course.id, currentUserID).then(assignments => {
      courseAssignments.push.apply(
        courseAssignments,
        assignments
      );
      finishedCollections++;
      if (finishedCollections === courseCount) {
        // Write assignments
        courseAssignments.sort((a, b) => {
          // sort by "due date"
          // also places non-due-date at end. (+1 week)
          const dueA = new Date(
              a.plannable.due_at || b.plannable.created_at || Date.now() + 604800e3
            ),
            dueB = new Date(
              b.plannable.due_at || b.plannable.created_at || Date.now() + 604800e3
            );
          return dueA.getTime() - dueB.getTime();
        });

        log("Compiling assignments");
        for (const assignment of courseAssignments) {
          const template = document.createElement("template");
          if (assignment.plannable_type === "announcement") {
            // Put in announcement thing
            template.innerHTML = `<div class="canvasall_announcement_wrapper">
                <div class="canvasall_announcement_title">
                  <a href="${assignment.html_url}">${assignment.plannable.title}</a>
                </div>
                <div class="canvasall_announcement_class">
                  <a href="/courses/${assignment.course_id}">${
              assignment.context_name
            }</a>
                </div>
                <div class="canvasall_announcement_when">
                  <span>${new Date(assignment.plannable.created_at)
                    .toString()
                    .split(" ")
                    .slice(0, 5)
                    .join(" ")
                    .replace(/:\d{2}$/, "")
                    .replace(/\s(?=\w{3}\s\d{2})/, ", ")
                    .replace(/\d{4}/, "at")}</span>
                </div>
              </div>`;
            announcementsDiv.append(template.content.cloneNode(true));
            continue;
          }
          const divClasses = [],
            { submissions } = assignment;
          if (submissions) {
            const { excused, graded, has_feedback, late, missing, submitted } =
              submissions;
            if (excused || graded) {
              divClasses.push("canvasall_status_done");
            }
            if (submitted) {
              divClasses.push("canvasall_status_submit");
            }
            if (late) {
              divClasses.push("canvasall_status_late");
            }
            if (missing) {
              divClasses.push("canvasall_status_missing");
            }
            if (has_feedback) {
              divClasses.push("canvasall_status_feedback");
            }
          }

          divClasses.push("canvasall_status_" + assignment.plannable_type);
          template.innerHTML = `<div class="canvasall_assignment_wrapper ${divClasses.join(
            " "
          )}" class-id="${assignment.course_id}">
            <div class="canvasall_assignment_title">
              <div class="canvasall_assignment_icon canvasall_assignment_type_${
                assignment.plannable_type
              }"></div>
              <a href="${assignment.html_url}">${assignment.plannable.title}</a>
            </div>
            <div class="canvasall_assignment_class">
              <a href="/courses/${assignment.course_id}">${
            assignment.context_name
          }</a>
            </div>
            <div class="canvasall_assignment_due">
              <span>${
                assignment.plannable.due_at
                  ? new Date(assignment.plannable.due_at)
                      .toString()
                      .split(" ")
                      .slice(0, 5)
                      .join(" ")
                      .replace(/:\d{2}$/, "")
                      .replace(/\s(?=\w{3}\s\d{2})/, ", ")
                      .replace(/\d{4}/, "at")
                  : "No due date"
              }</span>
            </div>
          </div>`;
          assignmentsDiv.append(template.content.cloneNode(true));
        }

        // Restore hide
        for (const [key, value] of Object.entries(localStorageConfig)) {
          if (value && key !== "") {
            hideType(key);
          }
        }

        courseAssignments.splice(0); // Free up memory
        document.querySelector("#canvasall_fetching_information").outerHTML = "";
      }
    });
    // Get grades
    loadFrame(iFrameLoader, `/courses/${course.id}/grades`).then(
      (ClassGradeFrame) => {
        const { document: d, window: w, frame } = ClassGradeFrame;
        let overallGrade = d
            .querySelector(
              "#student-grades-right-content .student_assignment.final_grade > .grade"
            )
            ?.textContent?.replace(/%|\s/g, ""),
          titles = d.querySelectorAll(".title"),
          possiblePoints = d.querySelectorAll(".points_possible"),
          dueDates = d.querySelectorAll(".due");
        courseGrades[course.id] = {
          Grades: overallGrade + "%",
          Titles: titles,
          PossiblePoints: possiblePoints,
          DueDates: dueDates,
        };
        // Write grades
        const gradeDiv = courseGradeDiv.querySelector(
            `[canvasall-class-id="${course.id}"] > .canvasall_class_grade_score`
          ),
          { ENV } = w,
          { grading_scheme } = ENV,
          [letter] =
            (grading_scheme ?? ["N/A", 0]).find((scheme) => {
              try {
                return +overallGrade / 100 >= scheme[1];
              } catch (e) {
                console.error(e);
              }
            }) ?? ["?"];
        gradeDiv.innerHTML =
          overallGrade !== "N/A" && overallGrade
            ? `<span>${letter} (${overallGrade}%)</span>`
            : `<span>N/A</span>`;
        // Done using data from iframe, attempt to clean up memory usage
        overallGrade = titles = possiblePoints = dueDates = null;
        for (const i in courseGrades) {
          delete courseGrades[i];
        }
        w.location = "about:blank";
        setTimeout(() => {
          frame.remove();
        }, 500);
      }
    );
    // Get instructors
    getCourseTeacher(course.id)
      .then((teacher) => {
        const teacherDiv = courseGradeDiv.querySelector(
          `[canvasall-class-id="${course.id}"] > .canvasall_class_grade_instructor`
        );
        teacherDiv.innerHTML = `<span>${teacher.name}</span>`;
      })
      .catch(() => {
        // no teacher, or failed to get teacher
        const teacherDiv = courseGradeDiv.querySelector(
          `[canvasall-class-id="${course.id}"] > .canvasall_class_grade_instructor`
        );
        teacherDiv.innerHTML = "<span>No instructor found.</span>";
      });
  }
}

// /api/v1/users/:user_id/communication_channels
/**
 * getCourses - Gets all the classes of the user
 *
 * @returns {Promise<Array>} A list of class information
 */
function getCourses() {
  return new Promise((res, rej) => {
    const x = new XMLHttpRequest();
    x.open(
      "GET",
      "/api/v1/users/self/favorites/courses?include[]=term&exclude[]=enrollments&sort=nickname"
    );
    x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    x.setRequestHeader(
      "accept",
      "application/json, text/javascript, application/json+canvas-string-ids, */*; q=0.01"
    );
    x.onload = () => {
      res(JSON.parse(x.responseText));
    };
    x.onerror = () => {
      rej();
    };
    x.send();
  });
}

/**
 * GetClassAssignments - Gets the class assignments
 *
 * @param  {String} courseID The class id
 * @param  {String} userID The user id
 * @returns {Promise<Array>} The list of assignments
 */
function getCourseAssignments(courseID, userID) {
  const x = new XMLHttpRequest(),
    now = new Date(),
    offset = now.getTimezoneOffset() / 60,
    nextUrlRegex = /[^<>]*(?=>; rel="next")/;
  now.addDays(-14); // To get assignments from 2 weeks ago
  now.setHours(8 - offset);
  now.setMinutes(0);
  now.setSeconds(0);
  now.setMilliseconds(0);

  function makeHttpRequest(url) {
    return new Promise((res, rej) => {
      x.open("GET", url);
      x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
      x.setRequestHeader(
        "accept",
        "application/json+canvas-string-ids, application/json+canvas-string-ids, application/json, text/plain, */*"
      );
      x.onerror = () => {rej();}
      x.onload = () => {
        res(x);
      }
      x.send();
    });
  }

  async function gatherRecursiveRequests(url, list = []) {
    const response = await makeHttpRequest(url),
      data = JSON.parse(response.responseText),
      linkHeader = response.getResponseHeader("link");
    list.push(...data);
    if (linkHeader) {
      const lastLink = linkHeader.match(nextUrlRegex);
      if (lastLink) {
        return gatherRecursiveRequests(lastLink[0], list);
      } else {
        return list;
      }
    } else {
      return list;
    }
  }

  return gatherRecursiveRequests(`/api/v1/planner/items?start_date=${now.toISOString()}&order=asc&context_codes[]=course_${courseID}`) //&context_codes[]=user_${userID}
    .catch(() => []);
}

/**
 * getCourseTeacher - Gets the teacher of the course
 *
 * @param  {String} courseID The class id
 * @returns {Object} The teacher
 */
function getCourseTeacher(courseID) {
  return new Promise((res, rej) => {
    const x = new XMLHttpRequest();
    x.open(
      "GET",
      `/api/v1/search/recipients?search=&per_page=20&permissions[]=send_messages_all&messageable_only=true&synthetic_contexts=true&context=course_${courseID}_teachers`
    );
    x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    x.setRequestHeader(
      "Accept",
      "application/json, text/javascript, application/json+canvas-string-ids, */*; q=0.01"
    );
    x.onload = () => {
      res(JSON.parse(x.responseText)[0]);
    };
    x.onerror = () => {
      rej();
    };
    x.send();
  });
}

/**
 * loadFrame - Loads an iframe
 *
 * @param  {HTMLElement} iFrameLoader The element to append iframes to
 * @param  {String} src The iframe url to load
 * @returns {Promise<Object>} returns an object with the "window" and "document" of the iframe
 */
function loadFrame(iFrameLoader, src) {
  return new Promise((res) => {
    const mainFrame = document.createElement("iframe");
    mainFrame.src = src || "/";
    iFrameLoader.append(mainFrame);
    mainFrame.addEventListener("load", () => {
      const frameContext = {
        document: mainFrame.contentDocument,
        window: mainFrame.contentWindow,
        frame: mainFrame
      };
      res(frameContext);
    });
  });
}

load();