diff --git a/Canvas Course Event Manager.user.js b/Canvas Course Event Manager.user.js index cf89785..061dba7 100644 --- a/Canvas Course Event Manager.user.js +++ b/Canvas Course Event Manager.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Canvas Course Event Manager // @namespace https://github.com/sukotsuchido/CanvasUserScripts -// @version 0.55 +// @version 1.1 // @description A Canvas UserScript to manage course events // @author Chad Scott (ChadScott@katyisd.org) // @include https://*.instructure.com/calendar* @@ -10,6 +10,10 @@ // ==/UserScript== (function() { 'use strict'; + + // Prevent jQuery conflicts with Canvas added by xc0009 + var $j = jQuery.noConflict(true); + var assocRegex3 = new RegExp('^/calendar'); var errors = []; var courseId = ''; @@ -19,13 +23,14 @@ var wholeName = ''; var array =[]; var user = ''; - /* role setup */ + var roles = ENV.current_user_roles; var buttonRoles = ["admin", "teacher", "root_admin"]; var test1 = buttonRoles.some(el => roles.includes(el)); - if( (test1 === true) && (assocRegex3.test(window.location.pathname))){ + if ((test1 === true) && (assocRegex3.test(window.location.pathname))) { add_button(); } + function add_button() { var parent = document.querySelector('aside#right-side'); if (parent) { @@ -45,134 +50,132 @@ } } } + function getCourses(){ - // Reset global variable errors - errors= []; - var url = "/api/v1/users/self/courses?include[]=term&per_page=75"; // change self to specific user number for testing - $.ajax({ - 'async': true, - 'type': "GET", - 'global': true, - 'dataType': 'JSON', - 'data': JSON.stringify(courses), - 'contentType': "application/json", - 'url': url, - 'success': function(courses){ + errors = []; + var url = "/api/v1/users/self/courses?include[]=term&per_page=75"; + $j.ajax({ + async: true, + type: "GET", + global: true, + dataType: 'JSON', + data: JSON.stringify(courses), + contentType: "application/json", + url: url, + success: function(courses){ allCourses = Array.from(courses.reduce((m, t) => m.set(t.id, t), new Map()).values()); var toAppend = ''; var select = document.getElementById('event_course'); - select.options.length = 0; // clear out existing items - $.each(allCourses, function(i, o){ + select.options.length = 0; + $j.each(allCourses, function(i, o){ if(o.name !== undefined){ toAppend += ''; } }); - var blank =''; - blank += ''; - $('#event_course').append(blank); - $('#event_course').append(toAppend); + var blank = ''; + $j('#event_course').append(blank); + $j('#event_course').append(toAppend); } }); } + function getEvents(){ - // Reset global variable errors - errors= []; + errors = []; courseId = document.getElementById('event_course').value; var url = "/api/v1/users/self/calendar_events?per_page=150&all_events=true&context_codes[]=course_"+courseId; - $.ajax({ - 'async': true, - 'type': "GET", - 'global': true, - 'dataType': 'JSON', - 'data': JSON.stringify(courses), - 'contentType': "application/json", - 'url': url, - 'success': function (data, textStatus, request) { + $j.ajax({ + async: true, + type: "GET", + global: true, + dataType: 'JSON', + data: JSON.stringify(courses), + contentType: "application/json", + url: url, + success: function (data) { var toAppend; var clear = document.getElementById('inner_table'); if (clear.innerHTML !== null){ clear.innerHTML = ""; } - $.each(data,function(i,o){ - //start date + $j.each(data, function(i, o){ var date = new Date(o.start_at); - var day = date.getDate(); - var year = date.getFullYear(); - var month = date.getMonth()+1; - var dateStr = month+"/"+day+"/"+year; - //end date + var dateStr = (date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear(); + var date2 = new Date(o.end_at); - var day2 = date2.getDate(); - var year2 = date2.getFullYear(); - var month2 = date2.getMonth()+1; - var dateStr2 = month2+"/"+day2+"/"+year2; + var dateStr2 = (date2.getMonth()+1)+"/"+date2.getDate()+"/"+date2.getFullYear(); + toAppend += ''+o.title+''+dateStr+''+dateStr2+''; }); - $('#table_header').append(toAppend); + $j('#table_header').append(toAppend); } }); } + function deleteEvents(){ - $.each(array, function(index,item){ - var eventId = item; - var url = "/api/v1/calendar_events/"+eventId; - $.ajax({ - 'async': true, - 'type': "DELETE", - 'global': true, - 'dataType': 'JSON', - 'data': JSON.stringify(), - 'contentType': "application/json", - 'url': url, - 'success': open_success_dialog + $j.each(array, function(index, item){ + var url = "/api/v1/calendar_events/" + item; + $j.ajax({ + async: true, + type: "DELETE", + global: true, + dataType: 'JSON', + data: JSON.stringify(), + contentType: "application/json", + url: url, + success: open_success_dialog }); }); window.location.reload(true); } + function removeDates(){ - $.each(array, function(index,item){ - var eventId = item; - var url = "/api/v1/calendar_events/"+eventId+"?calendar_event[start_at]=null&calendar_event[end_at]=null"; - $.ajax({ - 'async': true, - 'type': "PUT", - 'global': true, - 'dataType': 'JSON', - 'data': JSON.stringify(), - 'contentType': "application/json", - 'url': url, - 'success': open_success_dialog + $j.each(array, function(index, item){ + var url = "/api/v1/calendar_events/" + item + "?calendar_event[start_at]=null&calendar_event[end_at]=null"; + $j.ajax({ + async: true, + type: "PUT", + global: true, + dataType: 'JSON', + data: JSON.stringify(), + contentType: "application/json", + url: url, + success: open_success_dialog }); }); window.location.reload(true); } + function createDialog() { var el = document.querySelector('#events_dialog'); if (!el) { el = document.createElement('div'); el.id = 'events_dialog'; - //Parent Course selection + var el2 = document.createElement('div'); el2.classList.add('ic-Form-control'); el.appendChild(el2); + var label = document.createElement('label'); label.htmlFor = 'event_course'; label.textContent = 'Step 1: Select Course:'; label.classList.add('ic-Label'); el2.appendChild(label); + var select = document.createElement('select'); select.id = 'event_course'; select.classList.add('ic-Input'); select.onchange = getEvents; el2.appendChild(select); - //Events Table + var table = document.createElement('TABLE'); table.id = 'table_header'; table.style.width = '100%'; table.classList.add("ic-Table", "ic-Table--hover-row", "ic-Table--striped"); el.appendChild(table); + var tr = document.createElement('TR'); table.appendChild(tr); + var th = document.createElement('TH'); var input = document.createElement('input'); input.type = 'checkbox'; @@ -182,6 +185,7 @@ th.appendChild(input); th.classList.add('ic-Checkbox-group'); tr.appendChild(th); + th = document.createElement('TH'); th.textContent = 'Event Title'; tr.appendChild(th); @@ -191,173 +195,198 @@ th = document.createElement('TH'); th.textContent = 'End Date'; tr.appendChild(th); + var tbody = document.createElement('tbody'); tbody.id = 'inner_table'; - tbody.onchange= setEvents; + tbody.onchange = setEvents; table.appendChild(tbody); + var notice = document.createElement('div'); notice.id = 'app'; - /*notice.id = 'notice'; - notice.style = 'text-align: right'; - notice.style.padding = '5px'; - notice.style.font ='bold 14px arial,serif'; - notice.textContent ='First 100 Events Only'; - */ el.appendChild(notice); - //HR + var hr = document.createElement('HR'); el.appendChild(hr); - //selected action list + var el3 = document.createElement('div'); - el3.innerHTML ='
For Selected Events:
'; + el3.innerHTML = '
For Selected Events:
'; el.append(el3); - //message flash + var msg = document.createElement('div'); msg.id = 'events_msg'; - //msg.classList.add('ic-flash-warning'); msg.style.display = 'none'; el.appendChild(msg); + var parent = document.querySelector('body'); parent.appendChild(el); } - $('#select-all').click(function(event) { - var state = this.checked; $(':checkbox').each(function() { this.checked = state; }); + + $j('#select-all').click(function(event) { + var state = this.checked; + $j(':checkbox').each(function() { + this.checked = state; + }); }); } + function setEvents() { - array = $.map($('input[name="events"]:checked'), function(c){return c.value; }); + array = $j.map($j('input[name="events"]:checked'), function(c) { + return c.value; + }); } + function openDialog() { try { createDialog(); - $('#events_dialog').dialog({ - 'title' : 'Manage Course Events', - 'autoOpen' : false, - 'closeOnEscape': false, - 'open': getCourses(), function () { $(".ui-dialog-titlebar-close").hide(); $(".ui-dialog").css("top", "10px");}, - 'buttons' : [ { - 'text' : 'Cancel', - 'click' : function() { - $(this).dialog('destroy').remove(); + $j('#events_dialog').dialog({ + title: 'Manage Course Events', + autoOpen: false, + closeOnEscape: false, + open: function () { + getCourses(); + $j(".ui-dialog-titlebar-close").hide(); + $j(".ui-dialog").css("top", "10px"); + }, + buttons: [{ + text: 'Cancel', + click: function() { + $j(this).dialog('destroy').remove(); errors = []; updateMsgs(); } },{ - 'text' : 'Submit', - 'class': 'Button Button--primary', - 'click' : submitButton - - } ], - 'modal' : true, - 'resizable' : false, - 'height' : '600', - 'width' : '40%', - 'scrollable' : true + text: 'Submit', + class: 'Button Button--primary', + click: submitButton + }], + modal: true, + resizable: false, + height: 600, + width: '40%', + scrollable: true }); - if (!$('#events_dialog').dialog('isOpen')) { - $('#events_dialog').dialog('open'); + + if (!$j('#events_dialog').dialog('isOpen')) { + $j('#events_dialog').dialog('open'); } + } catch (e) { console.log(e); } } - function submitButton(){ + + function submitButton() { var action = document.querySelector('input[name="action"]:checked').value; - if(action == "delete_events"){ + if (action === "delete_events") { deleteEvents(); - }else{ + } else { removeDates(); } } + function successDialog(){ var el = document.querySelector('#success_dialog'); if (!el) { el = document.createElement('div'); el.id = 'success_dialog'; + var div1 = document.createElement('div'); div1.classList.add('ic-flash-success'); el.appendChild(div1); + var div2 = document.createElement('div'); div2.classList.add('ic-flash__icon'); div2.classList.add('aria-hidden="true"'); div1.appendChild(div2); + var icon = document.createElement('i'); icon.classList.add('icon-check'); div2.appendChild(icon); + var msg = document.createTextNode("The action completed successfully!"); div1.appendChild(msg); + var button = document.createElement('button'); button.type = 'button'; button.classList.add("Button", "Button--icon-action", "close_link"); el.appendChild(button); + icon = document.createElement('i'); icon.classList.add('ic-icon-x'); icon.classList.add('aria-hidden="true"'); button.appendChild(icon); + var parent = document.querySelector('body'); parent.appendChild(el); } } - function open_success_dialog(){ + + function open_success_dialog() { try { successDialog(); - $('#success_dialog').dialog({ - 'autoOpen' : false, - 'closeOnEscape': false, - 'open': function () { $(".ui-dialog-titlebar").hide(); $(".ui-widget-content").css("background", "rgba(255, 255, 255, 0)"); $(".ui-dialog.ui-widget-content").css("box-shadow", "none");}, - 'modal' : true, - 'resizable' : false, - 'height' : 'auto', - 'width' : '40%', + $j('#success_dialog').dialog({ + autoOpen: false, + closeOnEscape: false, + open: function () { + $j(".ui-dialog-titlebar").hide(); + $j(".ui-widget-content").css("background", "rgba(255, 255, 255, 0)"); + $j(".ui-dialog.ui-widget-content").css("box-shadow", "none"); + }, + modal: true, + resizable: false, + height: 'auto', + width: '40%', }); - if (!$('#success_dialog').dialog('isOpen')) { - $('#success_dialog').dialog('open'); + if (!$j('#success_dialog').dialog('isOpen')) { + $j('#success_dialog').dialog('open'); } } catch (e) { console.log(e); } } + function updateMsgs() { var msg = document.getElementById('events_msg'); - if (!msg) { - return; - } - if (msg.hasChildNodes()) { - msg.removeChild(msg.childNodes[0]); + if (!msg) return; + + while (msg.firstChild) { + msg.removeChild(msg.firstChild); } - if (typeof errors === 'undefined' || errors.length === 0) { + + if (!errors || errors.length === 0) { msg.style.display = 'none'; } else { var div1 = document.createElement('div'); div1.classList.add('ic-flash-error'); - var div2; - div2 = document.createElement('div'); - div2.classList.add('ic-flash__icon'); - div2.classList.add('aria-hidden="true"'); + + var div2 = document.createElement('div'); + div2.classList.add('ic-flash__icon', 'aria-hidden="true"'); div1.appendChild(div2); - var icon; - icon = document.createElement('i'); + + var icon = document.createElement('i'); icon.classList.add('icon-warning'); div2.appendChild(icon); + var ul = document.createElement('ul'); - for (var i = 0; i < errors.length; i++) { - var li; - li = document.createElement('li'); - li.textContent = errors[i]; + errors.forEach(function(error) { + var li = document.createElement('li'); + li.textContent = error; ul.appendChild(li); - } + }); div1.appendChild(ul); - var button; - button = document.createElement('button'); + + var button = document.createElement('button'); button.type = 'button'; button.classList.add("Button", "Button--icon-action", "close_link"); - div1.appendChild(button); + icon = document.createElement('i'); - icon.classList.add('ic-icon-x'); - icon.classList.add('aria-hidden="true"'); + icon.classList.add('ic-icon-x', 'aria-hidden="true"'); button.appendChild(icon); + + div1.appendChild(button); msg.appendChild(div1); msg.style.display = 'inline-block'; } } })(); +