Raw Source Toggle Dropdown

• Minified Source

nearhosk8 / FeedbackIconsB

// ==UserScript==
// @name     FeedbackIconsB
// @description Makes the process of using feedback icons easier
// @include     https://*.instructure.com/courses/*/modules
// @include     https://*.instructure.com/courses/*/assignments/*/edit
// @license MIT
// @version  1
// @grant    none
// ==/UserScript==

var icons = new RegExp(/⚫️|🔴|🔵|⚪️|✅|🏁|🔵⚪️|✅🔵|✅🔴/);

var iconsArr = ["⚫️", "🔵", "⚪️", "🔴", "✅", "🏁", "🔵⚪️", "✅🔵", "✅🔴"];

var selectId = "assignnment-status-select";

//function for replacing old icons with new ones 
function changeName(element, iconArg) {
  var icon =  iconArg || "🔵";

  element.value = icon + element.value.replace(icons, "");
}
//fuction for deleting previous icons
function DeleteIcons(element, iconArg) {
  var icon =  iconArg || "🔵";

  element.value = "" + element.value.replace(icons, "");
}


//button for updating icon
function getButton(element, selectEl) {
  var button = document.createElement("BUTTON");
  
  button.innerText = "Update Icon";
  
  button.style.float = "right";
  
  button.addEventListener('click', (event) => {

    var name = "";
    DeleteIcons(element, "");
  });

  button.addEventListener('click', (event) => {

    var name = selectEl.value;
    changeName(element, selectEl.value);
  });

  
  return button;
}

function getSelect(element) {
  var selectEl = document.createElement("SELECT");

  selectEl.id = selectId;

  var option = document.createElement("option");

  option.text = "⚫️ Not submitted";
  option.value = "⚫️";
  //NOT SUBMITTED YET"
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🔵 Waiting for feedback";
  option.value = "🔵";
  //NEEDS FEEDBACK"
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "⚪️ Can be graded";
  option.value = "⚪️";
  //CAN_BE_GRADED"
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🔴 Reviewed";
  option.value = "🔴";
  //REVIEWED";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "✅ Graded";
  option.value = "✅";
  //GRADED";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🏁 Graded and processed";
  option.value = "🏁";
  //GRADED_AND_PROCESSED";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🔵⚪️ Needs feedback and grade";
  option.value = "🔵⚪️";
  //FEEDBACK_AND_GRADE";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "✅🔵 Graded but needs feedback";
  option.value = "✅🔵";
  //GRADED_BUT_NEED_FEEDBACK";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "✅🔴 Graded and reviewed";
  option.value = "✅🔴";
  //GRADED_AND_REVIEWED";
  selectEl.add(option);

  /*var iconMatch = element.value.match(icons);
  if (iconMatch != null && iconMatch.length > 0) {
    selectEl.selectedIndex = iconsArr.indexOf(iconMatch[0]);
  }
*/
  selectEl.addEventListener('change', (event) => {

    var name = "";
    DeleteIcons(element, "");
  });

  selectEl.addEventListener('change', (event) => {

    var name = event.target.value;
    changeName(element, event.target.value);
  });

  return selectEl;
}


//button for updating icon on assignment edit(just a small css change)
/*
function getButtonTwo(element, selectEl) {
  var button = document.createElement("BUTTON");
  
  button.innerText = "Update Icon";
  
  //button.style.float = "left";
  
  button.addEventListener('click', (event) => {

    var name = "";
    DeleteIcons(element, "");
  });

  button.addEventListener('click', (event) => {

    var name = selectEl.value;
    changeName(element, selectEl.value);
  });

  
  return button;
}

*/
setTimeout(function () {

  var element = document.getElementById("content_tag_title");
  
  var selectEl = document.createElement("SELECT");

 // selectEl.id = selectId;

  var option = document.createElement("option");

  option.text = "⚫️ Not submitted";
  option.value = "⚫️";
  //NOT SUBMITTED YET"
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🔵 Waiting for feedback";
  option.value = "🔵";
  //NEEDS FEEDBACK"
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "⚪️ Can be graded";
  option.value = "⚪️";
  //CAN_BE_GRADED"
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🔴 Reviewed";
  option.value = "🔴";
  //REVIEWED";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "✅ Graded";
  option.value = "✅";
  //GRADED";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🏁 Graded and processed";
  option.value = "🏁";
  //GRADED_AND_PROCESSED";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "🔵⚪️ Needs feedback and grade";
  option.value = "🔵⚪️";
  //FEEDBACK_AND_GRADE";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "✅🔵 Graded but needs feedback";
  option.value = "✅🔵";
  //GRADED_BUT_NEED_FEEDBACK";
  selectEl.add(option);

  option = document.createElement("option");
  option.text = "✅🔴 Graded and reviewed";
  option.value = "✅🔴";
  //GRADED_AND_REVIEWED";
  selectEl.add(option);

  var span = document.createElement("span");

  span.style.marginRight = "8px";

  span.innerHTML = "Change status:";

  var div = document.createElement("div");

  div.style.marginTop = "20px";

  div.appendChild(span);
  
  div.appendChild(selectEl);

  //div.appendChild(getSelect(element));
  
  div.appendChild(getButton(element, selectEl));
  
  

  element.parentNode.appendChild(div);
}, 2000);




setTimeout(function () {

  var element = document.getElementById("assignment_name");

  var span = document.createElement("span");

  span.style.marginRight = "8px";

  span.innerHTML = "Change status:";

  var div = document.createElement("div");

  div.style.marginTop = "20px";

  div.appendChild(span);

  div.appendChild(getSelect(element));

  element.parentNode.appendChild(div);
}, 2000);



function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('button { background-color: #008EE2; cursor: pointer;font-size: 1em;position: relative; border: 1px solid; border-radius: 3px; background-color 0.2s ease-in-out; display: inline-block; padding: 8px 14px; line-height: 20px; text-align: center; vertical-align: middle; border-color:#007EC9; color: white;} button:hover{ background-color: #0087d7}');