☰

SHKOLO dark mode

Adds a suite of color customization to the SHKOLO school site

// ==UserScript==
// @name        SHKOLO dark mode
// @namespace   Violentmonkey Scripts
// @match       https://app.shkolo.bg/*
// @description Adds a suite of color customization to the SHKOLO school site
// @grant       GM_setValue
// @grant       GM_getValue
// @version     1.52
// @author      RedTTG
// @run-at      document-body
// @license     MIT
// @description 12/3/2021, 10:31:05 AM
// ==/UserScript==

var version = "1.52"

var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');


// DEFAULT COLOR VALUES
var dc_dark = "#202040";
var dc_light = "#404080";
var dc_blind = "#6060A0";
var dc_blinding = "#A0A0FA";
var dc_red = "#F02F2F";
var dc_text = "#ADFEFF";
var dc_text_dark = "#003C3D";
var dc_text_hover = "#00FF44";
var dc_gold = "#B0B000";
var dc_enable_profile_pick = false;
var dc_image_url = "https://app.shkolo.bg/favicon.ico";
// INIT MOD
function initSettingElements() {
  initGMStorage();
}
document.addEventListener("DOMContentLoaded", function(){
  initMenu();
  customProfile();
  if (url.indexOf("customize") > -1){
    initCustomize();
  }
});

// INIT VALUES
function initGMStorage(reset = false) {
  if (!GM_getValue("colorVeryDark") || reset) {
    GM_setValue("colorVeryDark", dc_dark);
  }

  if (!GM_getValue("colorDark") || reset) {
    GM_setValue("colorDark", dc_light);
  }

  if (!GM_getValue("colorLight") || reset) {
    GM_setValue("colorLight", dc_blind);
  }

  if (!GM_getValue("colorVeryLight") || reset) {
    GM_setValue("colorVeryLight", dc_blinding);
  }

  if (!GM_getValue("colorRed") || reset) {
    GM_setValue("colorRed", dc_red);
  }

  if (!GM_getValue("colorText") || reset) {
    GM_setValue("colorText", dc_text);
  }

  if (!GM_getValue("colorTextDark") || reset) {
    GM_setValue("colorTextDark", dc_text_dark);
  }

  if (!GM_getValue("colorTextHover") || reset) {
    GM_setValue("colorTextHover", dc_text_hover);
  }

  if (!GM_getValue("colorGold") || reset) {
    GM_setValue("colorGold", dc_gold);
  }

  if (!GM_getValue("enableProfilePick") || reset) {
    GM_setValue("enableProfilePick", dc_enable_profile_pick);
  }


  if (!GM_getValue("imageURL") || reset) {
    GM_setValue("imageURL", dc_image_url);
  }
}
function initMenu() {
  x = document.getElementsByClassName('sub-menu');
  for(i = 0; i < x.length; i++){
    if (x[i].parentNode.children[0].children[1].textContent != "Администрация"){
      console.log(x[i].parentNode.children[0].children[1].textContent);
      continue;
    }
    var tag = document.createElement('h5');
    var text = document.createTextNode("Черен режим :)");
    tag.appendChild(text);
    tag.classList.add('menu-title');
    x[i].appendChild(tag);
    tag = document.createElement('li');
    var tag2 = document.createElement('a');
    tag2.href = '/customize';
    tag2.id = 'settingsDarkId';
    tag2.classList.add('nav-link');
    var tag3 = document.createElement('i');
    tag3.classList.add('far');
    tag3.classList.add('fa-solid');
    tag3.classList.add('fa-brush');
    text = document.createTextNode(' Опций');
    tag2.appendChild(tag3);
    tag2.appendChild(text);
    tag.appendChild(tag2);
    x[i].appendChild(tag);
  }
}
function initCustomize(reset = false){
  if (reset){
    x = document.getElementsByClassName('customizeMenu');
  } else {
    x = document.getElementsByClassName('page-404');
  }

  var parent;
  for(i = 0; i < x.length; i++){
    parent = x[i].parentNode;
    x[i].parentNode.removeChild(x[i]);
  }
  var tag = document.createElement('div');
  // ADD COLORS
  var index = 0
  tag.appendChild(generateColorPicker(c_dark,                'h3', 'Най-тъмен цвят....',    'c_dark',              index));index++;
  tag.appendChild(generateColorPicker(c_light,               'h3', 'Тъмен цвят....',        'c_light',             index));index++;
  tag.appendChild(generateColorPicker(c_blind,               'h3', 'Светъл цвят....',       'c_blind',             index));index++;
  tag.appendChild(generateColorPicker(c_blinding,            'h3', 'Най-светъл цвят....',   'c_blinding',          index));index++;
  tag.appendChild(generateColorPicker(c_red,                 'h3', 'Червен цвят....',       'c_red',               index));index++;
  tag.appendChild(generateColorPicker(c_gold,                'h3', 'Жълт цвят....',         'c_gold',              index));index++;
  tag.appendChild(generateColorPicker(c_text,                'h3', 'Текст (бял)....',       'c_text',              index));index++;
  tag.appendChild(generateColorPicker(c_text_dark,           'h3', 'Текст (тъмен)....',     'c_text_dark',         index));index++;
  tag.appendChild(generateColorPicker(c_text_hover,          'h3', 'Текст (подчертан)....', 'c_text_hover',        index));index++;
  tag.appendChild(generateBooleanPicker(enable_profile_pick, 'h3', 'Профилна снимка....',   'enable_profile_pick', index, function(x){enable_profile_pick = x.srcElement.checked;initCustomize(true);customProfile();}));index++;
  if (enable_profile_pick){
    tag.appendChild(generateTextPicker(image_url,            'h3', 'Линк за снимка....',    'image_url',           index, function(x){image_url = x.srcElement.value;customProfile();}));index++;
  }
  // ADD SUBMIT BUTTONS
  var button_1 = document.createElement('button'); var button_2 = document.createElement('button'); // Make buttons
  button_1.style.position = 'absolute'; button_2.style.position = 'absolute';
  var max = (20+index*46-(index/3.5));
  var topv = max-index*30;
  var lowv = max-index*15;
  button_1.style.top = topv+'px'; button_2.style.top = lowv+'px';
  button_1.style.left = '350px'; button_2.style.left = '350px';
  var text = document.createTextNode('Save Changes');
  button_1.appendChild(text);
  text = document.createTextNode('Reset');
  button_2.appendChild(text);
  button_1.classList.add('darkButton'); button_2.classList.add('darkButton'); // Add class to buttons
  tag.appendChild(button_1); tag.appendChild(button_2); // Apply buttons to customization menu
  // BUTTON ACTION
  button_1.onclick = function(){customizeSave();refreshPage();};
  button_2.onclick = function(){initGMStorage(true);refreshPage();};
  // FINISH OFF
  tag.classList.add('customizeMenu');
  parent.appendChild(tag);
}

function generateColorPicker(color = "#000000", tag = "h1", text = "Color Picker", id = null, index = 0){
  var input = document.createElement('input');
  var textTag = document.createElement(tag);
  var textNode = document.createTextNode(text);
  textTag.appendChild(textNode);
  input.type = 'color';
  input.value = color;
  input.style.position = 'absolute';
  var y = 40+46.451*index
  input.style.top = y+'px';
  input.style.left = '250px';
  if (id != null){
    input.id = id;
  }
  textTag.appendChild(input);
  textTag.classList.add('colorPicker');
  return textTag
}
function generateBooleanPicker(boolean = false, tag = "h1", text = "Color Picker", id = null, index = 0, onclick = function(){}){
  var input = document.createElement('input');
  var textTag = document.createElement(tag);
  var checkboxTag = document.createElement('label');
  var sliderTag = document.createElement('div');
  var textNode = document.createTextNode(text);
  textTag.appendChild(textNode);
  input.type = 'checkbox';
  input.checked = boolean;
  input.onclick = onclick;
  checkboxTag.style.position = 'absolute';
  var y = 40+46.451*index;
  checkboxTag.style.top = y+'px';
  checkboxTag.style.left = '272px';
  if (id != null){
    input.id = id;
  }
  checkboxTag.appendChild(input);
  checkboxTag.appendChild(sliderTag);
  textTag.appendChild(checkboxTag);
  checkboxTag.classList.add('booleanPickerCheckbox');
  checkboxTag.setAttribute('for', id);
  textTag.classList.add('booleanPicker');
  sliderTag.classList.add('booleanPickerSlider');
  sliderTag.classList.add('booleanPickerSliderRound');
  return textTag
}
function generateTextPicker(value = "holdup", tag = "h1", text = "Color Picker", id = null, index = 0, onchange = function(){}){
  var input = document.createElement('input');
  var textTag = document.createElement(tag);
  var textNode = document.createTextNode(text);
  textTag.appendChild(textNode);
  input.type = 'text';
  input.value = value;
  input.onchange = onchange;
  input.style.position = 'absolute';
  var y = 40+46.451*index
  input.style.top = y+'px';
  input.style.left = '253px';
  if (id != null){
    input.id = id;
  }
  textTag.appendChild(input);
  textTag.classList.add('textPicker');
  return textTag
}

function customizeSave(){
  dc_dark = document.getElementById('c_dark').value;
  dc_light = document.getElementById('c_light').value;
  dc_blind = document.getElementById('c_blind').value;
  dc_blinding = document.getElementById('c_blinding').value;
  dc_red = document.getElementById('c_red').value;
  dc_gold = document.getElementById('c_gold').value;
  dc_text = document.getElementById('c_text').value;
  dc_text_dark = document.getElementById('c_text_dark').value;
  dc_text_hover = document.getElementById('c_text_hover').value;
  dc_enable_profile_pick = document.getElementById('enable_profile_pick').checked;
  if (enable_profile_pick){
  dc_image_url = document.getElementById('image_url').value;} else {
  dc_image_url = image_url;
  }
  initGMStorage(true);
}
function refreshPage(){
  window.location.reload();
}
// LOAD VALUES
initSettingElements()
var c_dark = GM_getValue("colorVeryDark");
var c_light = GM_getValue("colorDark");
var c_blind = GM_getValue("colorLight");
var c_blinding = GM_getValue("colorVeryLight");
var c_red = GM_getValue("colorRed");
var c_text = GM_getValue("colorText");
var c_text_dark = GM_getValue("colorTextDark");
var c_text_hover = GM_getValue("colorTextHover");
var c_gold = GM_getValue("colorGold");
var enable_profile_pick = GM_getValue("enableProfilePick");
var image_url = GM_getValue("imageURL");

// LOAD CSS
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'https://www.redttg.com/shkolo_dark/'+
  argument(c_dark)+       //01
  argument(c_light)+      //02
  argument(c_blind)+      //03
  argument(c_blinding)+   //04
  argument(c_red)+        //05
  argument(c_text)+       //06
  argument(c_text_dark)+  //07
  argument(c_text_hover)+ //08
  argument(c_gold)+       //09
  'dashboard.css';
function argument(color = '#000000'){
  return color.replace('#','')+'/'
}
link.media = 'all';
head.appendChild(link);
//

var url = window.location.href;

// CHECK AND HACK PAGE

if(url.indexOf("dashboard") > -1){
  var x = document.getElementsByClassName("page-header");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_dark;
  }

  x = document.getElementsByClassName("page-footer");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_dark;
  }

  x = document.getElementsByClassName("col-md-12");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_dark;
  }
  x = document.getElementsByClassName("col-sm-6");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_dark;
  }
}
else if(url.indexOf("diary") > -1){
  var x = document.getElementsByClassName("page-header");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_dark;
  }

  x = document.getElementsByClassName("page-footer");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_dark;
  }

  x = document.getElementsByClassName("portlet light  gradesBody");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_light;
    x[i].style.color = c_blind;
  }
}
else if (url.indexOf("test/result") > -1){

}
else if (url.indexOf("app.shkolo.bg") > -1){
  var x = document.getElementsByClassName("tab-content");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_blind;
  }
  x = document.getElementsByClassName("auth-tabs");
  for(i = 0; i < x.length; i++){
    x[i].style.backgroundColor = c_light;
  }
  x = document.getElementsByClassName("or-login-text");
  for(i = 0; i < x.length; i++){
    if (x[i].firstElementChild.nodeName == "H4")
    {
      x[i].firstElementChild.firstElementChild.style.backgroundColor = c_blind;
    }
  }
  x = document.getElementsByClassName("auth-tabs");
  for(i = 0; i < x.length; i++){
    for(kid = 0; kid < x[i].children.length; kid++)
    {
      if (x[i].children[kid].nodeName == "LI")
      {
      x[i].children[kid].firstElementChild.style.backgroundColor = c_light;
      }
    }
  }
  x = document.getElementsByClassName("phone-label");
  for(i = 0; i < x.length; i++){
    x[i].style.setProperty("background-color", c_light, "important");
  }
  //btn btn-xs btn-custom-primary
  x = document.getElementsByClassName("btn-custom-primary");
  for(i = 0; i < x.length; i++){
    x[i].style.setProperty("background-color", c_light, "important");
  }
}
else {
  console.log("Couldn't find dark mode mod for this page of shkolo, anything besides the background and side menus might be broken.");
  console.log("Or it could be it doesn't need javascript, and css is enough, in which case enjoy!");
}


function customProfile() {
  if (enable_profile_pick == '1') {
    var x = document.getElementsByClassName("img-circle avatar small");
    if (!x[0]) { return; }

    original = x[0].src;
    images = document.getElementsByTagName("img");
    for (const img of images) {
      if (img.src === original) { img.src = image_url; }
    }

  }
}

//

console.log("Shkolo dark mode, checking for updates...")

var urls = "https://greasyfork.org/en/scripts/436501-shkolo-dark-mode";

function popup(url) {
    return window.open(url, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=1, height=1, top=0, left=0, visible=none');
}

fetch(urls)
  .then(function(response) {
    return response.text();
  }).then(function(data) {
    if (data.includes("<dd class=\"script-show-version\"><span>"+version+"</span></dd>")){
      console.log("no update found!");
    }
    else {
      console.log("update avaliable!");
      w = popup("https://greasyfork.org/scripts/436501-shkolo-dark-mode/code/SHKOLO dark mode.user.js")
      setTimeout(function () {w.close();console.log('closed?');}, 1000);
      }
});


console.log("Shkolo Dark Mode finished running for this page.");
console.log("Thanks for download!");