profvanselow / Get Canvas Images from People

// ==UserScript==
// @name         Get Canvas Images from People
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  modifies the People tool on Canvas to show larger pictures of users
// @author       Prof. Scott Vanselow
// @match        https://*.instructure.com/courses/*/users
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @updateURL    https://openuserjs.org/meta/profvanselow/Get_Canvas_Images_from_People.meta.js
// @grant        none
// ==/UserScript==

var studentNum = 0;
// style inspired from https://jsfiddle.net/geniuscarrier/jeLfc7wt/5/
var namesAndPhotos = '<!DOCTYPE html><html><head><style>img{ width:100%; max-width:200px; }.left{padding:1em;text-align:left;}.right{padding:1em;}.parent{display:flex;margin:1em 0;border:1px solid #333;align-items:center;div{flex:1;}}</style></head><body><div class="flexbox-container">';

waitForKeyElements (
    ".avatar",
    getAvatar
);

function getAvatar() {
    var x = document.getElementsByClassName("avatar");
    var str = x[studentNum].text;
    var h = x[studentNum++].outerHTML;
    var startOfurl = h.indexOf("url");
    var startOfAddr = startOfurl + 4;
    var endOfAddr = h.indexOf(")");
    var url = h.substring(startOfAddr, endOfAddr);
    namesAndPhotos = namesAndPhotos + '<div class="parent"><div class="left"><p>' + str + '</p></div><div class="right"><img src="' + url + '"></div></div>';
    if (x.length == studentNum)
    {
        namesAndPhotos = namesAndPhotos + '</body></html>';
        writeToPage(namesAndPhotos);
    }
}

function writeToPage(htmlToWrite)
{
    document.write(htmlToWrite);
}