From ef5b1a0ee4496f2705dddd7674713fcf910be16e Mon Sep 17 00:00:00 2001 From: Julian Casaburi Date: Sun, 10 Sep 2023 08:00:55 -0300 Subject: [PATCH] Improve styling of popup & content --- content.js | 108 +++++++++++++++++++++++++++++++------------- popup.css | 129 +++++++++++++++++++++++++++++++---------------------- popup.html | 10 +++-- popup.js | 33 ++++++++++++-- 4 files changed, 188 insertions(+), 92 deletions(-) diff --git a/content.js b/content.js index 5a63dc2..2df073e 100644 --- a/content.js +++ b/content.js @@ -2,48 +2,97 @@ const averageWithoutFailsRegex = /(\d+) \(([^)]+)\) Aprobado/g; const averageWithFailsRegex = /(\d+) \(([^)]+)\) Desaprobado/g; +// Create a MutationObserver to watch for changes in the "kernel_contenido" div +const kernelContenido = document.getElementById("kernel_contenido"); +const observer = new MutationObserver(handleKernelContenidoChange); +if (kernelContenido) { + observer.observe(kernelContenido, { childList: true, subtree: true }); + + // Also, check if the "catedras" elements are already present when the page loads + let catedras = document.getElementsByClassName("catedras"); + if (catedras.length > 0) { + extractAndCalculateScores(); + } +} + // Initialize score arrays -const scoresWithoutFails = []; -const scoresWithFails = []; +let scoresWithoutFails = []; +let scoresWithFails = []; // Function to extract and calculate exam scores function extractAndCalculateScores() { - // Extract scores from the page content - extractScoresWithoutFails(document.body.innerText, averageWithoutFailsRegex, scoresWithoutFails); - extractScoresWithFails(document.body.innerText, averageWithFailsRegex, scoresWithFails); + // Extract passed exams from the page content + extractScores(document.body.innerText, averageWithoutFailsRegex, scoresWithoutFails); + + // Copy the content of scoresWithoutFails to scoresWithFails and add the failed exams + scoresWithFails = [...scoresWithoutFails]; + extractScores(document.body.innerText, averageWithFailsRegex, scoresWithFails); // Calculate the average scores const averageWithoutFails = calculateAverage(scoresWithoutFails); const averageWithFails = calculateAverage(scoresWithFails); - // Update or create the averageDivs + // Create a new div element + var averagesDiv = document.createElement("div"); + + // Set the id attribute + averagesDiv.id = "averagesDiv"; + + // Set the inline styles for the new div + averagesDiv.className = "titulo_operacion"; + averagesDiv.style.backgroundColor = "#f1f0f5"; // White background + averagesDiv.style.border = "4px"; + averagesDiv.style.borderRadius = "24px"; + averagesDiv.style.padding = "20px 20px"; + averagesDiv.style.margin = "20px 20px"; + averagesDiv.style.textAlign = "center"; + + // Create a new h2 element for the title + var titleElement = document.createElement("h2"); + + // Create an anchor element + var linkElement = document.createElement("a"); + linkElement.href = "https://github.com/juliancasaburi/siu-guarani-unlp-promedio-extension/"; + + // Set the text content for the anchor element (the title) + linkElement.textContent = "Extensión SIU Guaraní UNLP Promedio"; + + // Apply an inline style to the h2 element + titleElement.style.fontWeight = "bold"; // Example: Making it bold + + // Append the anchor element to the title element + titleElement.appendChild(linkElement); + + // Append the title element to the averagesDiv + averagesDiv.appendChild(titleElement); + + // Get the div with id "listado" + var listadoDiv = document.getElementById("listado"); + + // Get the parent of the "listadoDiv" div + var parentOfListadoDiv = listadoDiv.parentElement; + + // Insert the new div before the "listadoDiv" div + observer.disconnect(); + parentOfListadoDiv.insertBefore(averagesDiv, listadoDiv); + updateOrCreateAverageDiv("averageWithoutFailsDiv", "Promedio sin aplazos: ", averageWithoutFails, "teal"); updateOrCreateAverageDiv("averageWithFailsDiv", "Promedio con aplazos: ", averageWithFails, "firebrick"); // Save both average scores chrome.storage.local.set({ 'averageWithoutFails': averageWithoutFails }); chrome.storage.local.set({ 'averageWithFails': averageWithFails }); -} -// Function to extract scores with fails from the page content and store them in the specified array -function extractScoresWithFails(content, regex, scoresArray) { - const matches = content.match(regex); - if (matches) { - for (const match of matches) { - const score = parseInt(match.match(/\d+/)[0]); - scoresArray.push(score); - } - } + observer.observe(document.getElementById("kernel_contenido"), { childList: true, subtree: true }); } -// Function to extract scores without fails from the page content and store them in the specified array -function extractScoresWithoutFails(content, regex, scoresArray) { +// Function to extract scores from the page content and store them in the specified array +function extractScores(content, regex, scoresArray) { const matches = content.match(regex); if (matches) { for (const match of matches) { const score = parseInt(match.match(/\d+/)[0]); scoresArray.push(score); - scoresWithFails.push(score); } } } @@ -67,7 +116,8 @@ function updateOrCreateAverageDiv(divId, prefix, average, backgroundColor) { // Create an h3 element with the class "titulo-corte" and set its text content const h3Element = document.createElement("h3"); - h3Element.textContent = prefix + average.toFixed(2) + " [Extensión SIU Guaraní UNLP Promedio]"; + h3Element.style.display = "inline"; + h3Element.textContent = prefix + average.toFixed(2); h3Element.classList.add("titulo-corte"); @@ -79,27 +129,21 @@ function updateOrCreateAverageDiv(divId, prefix, average, backgroundColor) { // Append the h3 element to the newAverageDiv averageDiv.appendChild(h3Element); - // Find the div with ID "listado" - const listadoDiv = document.getElementById("listado"); + // Find the div with ID "averagesDiv" + const averagesDiv = document.getElementById("averagesDiv"); - // Insert the new average div before the "listado" div - if (listadoDiv) { - listadoDiv.parentNode.insertBefore(averageDiv, listadoDiv); + // Append the new "averageDiv" to "averagesDiv" + if (averagesDiv) { + averagesDiv.appendChild(averageDiv); } } } // Function to be called when the "kernel_contenido" div changes function handleKernelContenidoChange(mutationsList, observer) { + // check if the "catedras" elements are present let catedras = document.getElementsByClassName("catedras"); if (catedras.length > 0) { extractAndCalculateScores(); } -} - -// Create a MutationObserver to watch for changes in the "kernel_contenido" div -const kernelContenido = document.getElementById("kernel_contenido"); -if (kernelContenido) { - const observer = new MutationObserver(handleKernelContenidoChange); - observer.observe(kernelContenido, { childList: true, subtree: true }); } \ No newline at end of file diff --git a/popup.css b/popup.css index f62aa2d..39ecba7 100644 --- a/popup.css +++ b/popup.css @@ -2,71 +2,92 @@ /* Default light theme styles */ body { - font-family: Arial, sans-serif; - background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */ - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - } - - .popup-container { - background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */ - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); - padding: 20px; - text-align: center; - } - - h1 { - color: #333; - font-size: 24px; - margin: 0; - } - - h2 { - color: #666; - font-size: 18px; - margin: 10px 0; - } - - a { - color: #0078D4; - text-decoration: none; - } - - a:hover { - text-decoration: underline; - } - - .github-link { - margin-top: 20px; - font-size: 18px; - padding: 10px; - } + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + background-color: #f5f5f5; /* Light gray background */ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +/* Style the container */ +.popup-container { + font-family: 'Roboto', sans-serif; + background-color: #ffffff; /* White background */ + border-radius: 8px; /* Rounded corners */ + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */ + padding: 20px; + text-align: center; +} + +/* Style the h1 */ +.popup-container h1 { + color: #333; /* Dark gray text */ + font-size: 28px; + margin-bottom: 10px; +} + +/* Style the h2 elements */ +.popup-container h2 { + font-size: 18px; + color: #666; /* Gray text */ + margin-top: 10px; + border-radius: 10px; /* Rounded background */ + padding: 8px 12px; /* Padding inside the rounded background */ + background-color: #f3f3f3; /* Background color for h2 elements */ + color: #000000; /* Text color inside the rounded background */ +} + +/* Style the GitHub link */ +.github-link { + margin-top: 20px; +} + +.github-link a { + color: #0078D4; /* Blue link color */ + text-decoration: none; + font-weight: bold; +} + +.github-link a:hover { + color: #0056b3; /* Darker blue on hover */ +} + +/* Icon styles (Font Awesome) */ +.github-link i { + font-size: 24px; + margin-right: 8px; + color: #0078D4; /* Blue icon color */ +} /* Dark theme styles when dark mode is enabled */ @media (prefers-color-scheme: dark) { body { - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */ + background-color: #0f0f0f; /* Dark background */ } .popup-container { - background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent dark background */ - color: #fff; /* White text color for dark theme */ + background-color: #0f0f0f; /* Dark background for the container */ + color: #fff; /* White text color */ } - h1 { - color: #fff; /* White text color for dark theme */ + .popup-container h1 { + color: #ddd; /* Light gray text color in dark mode */ } - h2 { - color: #ccc; /* Light gray text color for dark theme */ + .popup-container h2 { + font-size: 18px; + color: #ccc; /* Light gray text color in dark theme */ + margin-top: 10px; + border-radius: 10px; /* Rounded background for dark theme */ + padding: 8px 12px; /* Padding inside the rounded background in dark theme */ + background-color: #242323; /* Background color for h2 elements in dark theme */ + color: #ccc; /* Text color inside the rounded background in dark theme */ } - a { - color: #1E90FF; /* Light blue link color for dark theme */ + .github-link a { + color: #1E90FF; /* Light blue link color in dark mode */ } -} - \ No newline at end of file +} \ No newline at end of file diff --git a/popup.html b/popup.html index c1f68ad..afbeb15 100644 --- a/popup.html +++ b/popup.html @@ -9,8 +9,12 @@

SIU Guaraní UNLP Promedio

-

Sin datos

-

Ir a Reportes -> Historia Académica -> Historia completa

+

Sin datos

+

+ + Ir a Reportes → Historia Académica → Historia completa + +

GitHub Repo @@ -19,4 +23,4 @@

Ir a Reportes -> Historia

- + \ No newline at end of file diff --git a/popup.js b/popup.js index e6885d9..7896e03 100644 --- a/popup.js +++ b/popup.js @@ -1,10 +1,37 @@ function updatePopup() { chrome.storage.local.get(['averageWithoutFails', 'averageWithFails'], function (data) { if(data.averageWithoutFails && data.averageWithFails){ - document.getElementById("averageWithoutFails").innerText = "Promedio sin aplazos: " + data.averageWithoutFails.toFixed(2); - document.getElementById("averageWithFails").innerText = "Promedio con aplazos: " + data.averageWithFails.toFixed(2); + // Get the noData

element + var noData = document.getElementById("noData"); + + // Set up averageWithFails + var text = document.createElement("h2"); + text.style.color = "teal"; // Set text color + text.innerText = "Promedio sin aplazos: " + data.averageWithoutFails.toFixed(2); + + // Replace the averageWithoutFails

element + noData.parentNode.replaceChild(text, noData); + + // Get the instructions

element + var instructions = document.getElementById("instructions"); + + // Set up averageWithtFails + var text = document.createElement("h2"); + text.style.color = "firebrick"; // Set text color + text.innerText = "Promedio con aplazos: " + data.averageWithFails.toFixed(2); + + // Replace the instructions

element + instructions.parentNode.replaceChild(text, instructions); } }); } -document.addEventListener('DOMContentLoaded', updatePopup); \ No newline at end of file +document.addEventListener('DOMContentLoaded', updatePopup); + +document.addEventListener("DOMContentLoaded", function () { + var link = document.getElementById("instructions"); + link.addEventListener("click", function (event) { + event.preventDefault(); + window.open("https://autogestion.guarani.unlp.edu.ar/historia_academica", "_blank"); + }); +}); \ No newline at end of file