BetterSEQTA-Plus/public/popup/info.js

// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.

const onoffselection = document.querySelector("#onoff");
const notificationcollector = document.querySelector("#notification");
const lessonalert = document.querySelector("#lessonalert");
const aboutsection = document.querySelector("#aboutsection");
const shortcutsection = document.querySelector("#shortcutsection");
const miscsection = document.querySelector('#miscsection');
const mainpage = document.querySelector("#mainpage");
const colorpicker = document.querySelector("#colorpicker");
const animatedbk = document.querySelector('#animatedbk');
const customshortcutbutton = document.getElementsByClassName('custom-shortcuts-button')[0];
const customshortcutdiv = document.getElementsByClassName('custom-shortcuts-container')[0];
const customshortcutsubmit = document.getElementsByClassName('custom-shortcuts-submit')[0];
const customshortcutinputname = document.querySelector('#shortcutname');
const customshortcutinputurl = document.querySelector('#shortcuturl');

const shortcutmenuitemselection = document.getElementsByClassName('menushortcut')[0];

const applybutton = document.querySelector('#applychanges')

const navbuttons = document.getElementsByClassName("navitem");
const menupages = document.getElementsByClassName("menu-page")

const allinputs = document.getElementsByTagName('input');

const menupage = document.querySelector("#menupage");

const shortcutpage = document.querySelector("#shortcutpage");

const miscpage = document.querySelector('#miscpage');

var shortcutbuttons = document.getElementsByClassName("shortcutitem");

const github = document.getElementById("github");

const version = document.getElementById('version');
const domainbutton = document.getElementById('domain-button');

var validURL = false;
var validName = false;

function openGithub() {
  chrome.tabs.create({ url: "https://github.com/SethBurkart123/BetterThanBetterSeqta" });
}


function openPage(page) {
  mainpage.style.left = "-350px";
  page.style.right = '0px';
}

function backToMainMenu() {
  mainpage.style.left = "0px";

  menupage.style.right = "-350px";
  shortcutpage.style.right = "-350px";
  miscpage.style.right = "-350px";
}

function resetActive() {
  for (let i = 0; i < navbuttons.length; i++) {
    navbuttons[i].classList.remove('activenav');
  }
  for (let i = 0; i < menupages.length; i++) {
    menupages[i].classList.add('hiddenmenu');
  }

}

function FindSEQTATab() {
  chrome.tabs.query({}, function (tabs) {
    for (let tab of tabs) {
      if (tab.title.includes("SEQTA Learn")) {
        chrome.tabs.reload(tab.id);
      }
    }
  });
}
/*
Store the currently selected settings using chrome.storage.local.
*/
function storeSettings() {
  chrome.storage.local.set({ onoff: onoffselection.checked }, function () {
    FindSEQTATab();
  });
}

function storeNotificationSettings() {
  chrome.storage.local.set(
    { notificationcollector: notificationcollector.checked });
  chrome.storage.local.set({ lessonalert: lessonalert.checked });
  chrome.storage.local.set({ animatedbk: animatedbk.checked });
}


function StoreAllSettings() {
  chrome.storage.local.get(["shortcuts"], function (result) {
    var shortcuts = Object.values(result)[0];
    for (var i = 0; i < shortcutbuttons.length; i++) {
      shortcuts[i].enabled = shortcutbuttons[i].checked;
    }
    chrome.storage.local.set({ shortcuts: shortcuts });
  });

  FindSEQTATab();
}
/*
Update the options UI with the settings values retrieved from storage,
or the default settings if the stored settings are empty.
*/
function updateUI(restoredSettings) {
  if (typeof restoredSettings.onoff == 'undefined') {
    chrome.runtime.sendMessage({ type: "setDefaultStorage" });

    chrome.storage.local.get(null, function (result) {
      updateUI(result);
    });
  } else {
    onoffselection.checked = restoredSettings.onoff;
    notificationcollector.checked = restoredSettings.notificationcollector;
    lessonalert.checked = restoredSettings.lessonalert;
    animatedbk.checked = restoredSettings.animatedbk;
    chrome.storage.local.get(["shortcuts"], function (result) {
      var shortcuts = Object.values(result)[0];
      for (var i = 0; i < shortcutbuttons.length; i++) {
        shortcutbuttons[i].checked = shortcuts[i].enabled;
      }
      chrome.storage.local.set({ shortcuts: shortcuts });
    });
  }
}

var stringtoHTML = function (str) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(str, "text/html");
  return doc.body;
};

function CreateShortcutDiv(name) {

  div = stringtoHTML(`
  <div class="item-container menushortcuts" data-customshortcut="${name}">
    <div class="text-container">
      <h1 class="addonitem" style="font-size: 8px !important;font-weight: 300;">Custom</h1>
      <h1 class="addonitem">${name}</h1>  
    </div>
    <svg id="delete-${name}" style="width:24px;height:24px;margin: 9px;cursor:pointer;" viewBox="0 0 24 24">
    <path fill="#ffffff" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"></path></svg>
  </div>`).firstChild;

  shortcutmenuitemselection.append(div);

  const deletebutton = document.getElementById(`delete-${name}`);
  deletebutton.addEventListener('click', function () {
    DeleteCustomShortcut(name);
    applybutton.style.left = "4px";
  });
}

function AddCustomShortcuts() {
  chrome.storage.local.get(["customshortcuts"], function (result) {
    var customshortcuts = Object.values(result)[0];
    for (let i = 0; i < customshortcuts.length; i++) {
      const element = customshortcuts[i];
      CreateShortcutDiv(
        element.name,
      )
    }
  });
}

function DeleteCustomShortcut(name) {
  item = document.querySelector(`[data-customshortcut="${name}"]`);
  item.remove();
  chrome.storage.local.get(["customshortcuts"], function (result) {
    var customshortcuts = Object.values(result)[0];
    for (let i = 0; i < customshortcuts.length; i++) {
      if (customshortcuts[i].name == name) {
        customshortcuts.splice(i, 1);
      }
    }
    chrome.storage.local.set({ customshortcuts: customshortcuts });
  });

}

function CustomShortcutMenu() {
  customshortcutinputname.value = '';
  customshortcutinputurl.value = '';
  validURL = false;
  validName = false;
  customshortcutsubmit.classList.remove("customshortcut-submit-valid");
  if (customshortcutdiv.classList.contains('custom-shortcuts-container-shown')) {
    customshortcutdiv.classList.remove('custom-shortcuts-container-shown')
  } else {
    customshortcutdiv.classList.add('custom-shortcuts-container-shown')
  };
}

function CreateCustomShortcut() {
  const shortcutname = customshortcutinputname.value;
  var shortcuturl = customshortcutinputurl.value;

  if (!(shortcuturl.includes('http'))) {
    shortcuturl = "https://" + shortcuturl;
  }

  chrome.storage.local.get(["customshortcuts"], function (result) {
    var customshortcuts = Object.values(result)[0];
    customshortcuts.push({ name: shortcutname, url: shortcuturl, icon: (shortcutname[0]).toUpperCase() });
    chrome.storage.local.set({ customshortcuts: customshortcuts });
  });

  CreateShortcutDiv(
    shortcutname
  );

}

function onError(e) {
  console.error(e);
}
/*
On opening the options page, fetch stored settings and update the UI with them.
*/
chrome.storage.local.get(null, function (result) {
  document.getElementsByClassName('clr-field')[0].style.color = result.selectedColor;
  colorpicker.value = result.selectedColor;
  console.log(result);
  updateUI(result);
});

/*
On blur, save the currently selected settings.
*/
document.addEventListener("DOMContentLoaded", function () {
  version.innerHTML = `v${chrome.runtime.getManifest().version}`;
  github.addEventListener("click", openGithub);

  domainbutton.addEventListener('click', function (event) {
    chrome.runtime.sendMessage({ type: "addPermissions" });
  })

  aboutsection.addEventListener("click", () => { resetActive(); aboutsection.classList.add('activenav'); menupage.classList.remove('hiddenmenu') });

  shortcutsection.addEventListener("click", () => { resetActive(); shortcutsection.classList.add('activenav'); shortcutpage.classList.remove('hiddenmenu') });

  miscsection.addEventListener("click", () => { resetActive(); miscsection.classList.add('activenav'); miscpage.classList.remove('hiddenmenu') });

  customshortcutbutton.addEventListener("click", () => { CustomShortcutMenu(); })
  customshortcutsubmit.addEventListener("click", () => { if (validName && validURL) { CreateCustomShortcut(); CustomShortcutMenu() } });

  var sameName = false;
  customshortcutinputname.addEventListener("input", function () {
    sameName = false;
    chrome.storage.local.get(["customshortcuts"], function (result) {
      var customshortcuts = Object.values(result)[0];
      for (let i = 0; i < customshortcuts.length; i++) {
        if (customshortcuts[i].name == customshortcutinputname.value) {
          sameName = true;
        }
      }

      if (customshortcutinputname.value.length > 0 && customshortcutinputname.value.length < 22 && !sameName) {
        validName = true;
      } else {
        validName = false;
      }

      if (validName && validURL) {
        customshortcutsubmit.classList.add("customshortcut-submit-valid");
      }
      else {
        customshortcutsubmit.classList.remove("customshortcut-submit-valid");
      }
    });
  });

  customshortcutinputurl.addEventListener("input", function () {
    if (customshortcutinputurl.value.length > 0 && customshortcutinputurl.value.includes('.')) {
      validURL = true;
    } else {
      validURL = false;
    }

    if (validName && validURL) {
      customshortcutsubmit.classList.add("customshortcut-submit-valid");
    }
    else {
      customshortcutsubmit.classList.remove("customshortcut-submit-valid");
    }
  })

  AddCustomShortcuts();
});

onoffselection.addEventListener("change", storeSettings);
notificationcollector.addEventListener(
  "change",
  storeNotificationSettings
);
lessonalert.addEventListener("change", storeNotificationSettings)

animatedbk.addEventListener("change", storeNotificationSettings)

for (let i = 0; i < allinputs.length; i++) {
  if (allinputs[i].id != 'colorpicker' && allinputs[i].id != "shortcuturl" && allinputs[i].id != "shortcutname") {
    allinputs[i].addEventListener("change", () => { applybutton.style.left = "4px" })
  }
}

applybutton.addEventListener('click', () => { StoreAllSettings(); applybutton.style.left = "-150px" })


colorpicker.addEventListener("input", function () {
  var colorPreview = document.querySelector('#clr-color-preview')
  if (colorPreview.style.color) {
    var hex = colorPreview.style.color.split("(")[1].split(")")[0];
    hex = hex.split(",");
    var b = hex.map(function (x) {             //For each array element
      x = parseInt(x).toString(16);      //Convert to a base16 string
      return (x.length == 1) ? "0" + x : x;  //Add zero if we get only one character
    })
    b = "#" + b.join("");

    chrome.storage.local.set({ selectedColor: b })
  }


})