Skip to content

GitLab

Gafam Detector
Gafam Detector
Commit 78bf10cc authored by Oncela's avatar Oncela
Browse files
Options

Replace popup.js

parent 0b043253
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 41 deletions
popup.js
View file @ 78bf10cc
......@@ -3,9 +3,8 @@
var popup = {};
var timer = 6; // Durée d'affichage en seconde (infini si 0)
// Signale à tabs.js que la page est chargée ======================
browser.runtime.sendMessage("ready");
browser.runtime.sendMessage({type:"ready"});
// Réception des messages envoyés par tabs.js ===================
......@@ -17,6 +16,10 @@ browser.runtime.onMessage.addListener( function (message)
// Récupère les noms et couleurs d'entreprises
popup.titles = message.info.companies.titles;
popup.colors = message.info.companies.colors;
popup.logos = message.info.companies.logos;
popup.showing = message.info.showing;
console.log(message);
// Pour chaque requête de la liste transmise par tabs.js
for (var request of message.info.requests)
......@@ -26,12 +29,76 @@ browser.runtime.onMessage.addListener( function (message)
}
}
// S'il s'agit d'un message de mise à jour
// S'il s'agit d'un message de mise à jour des requêtes
if (message.type == "update")
{
// Met à jour les informations sur la requête
popup.update(message.request);
}
// S'il s'agit d'un message de mise à jour du compteur
if (message.type == "counter")
{
// L'élément général qui inclue le compteur
var counter = document.createElement("div");
counter.className = "counter";
popup.companies.get(message.index).info.appendChild(counter);
// Le début du texte
var counter1 = document.createElement("div");
counter1.innerHTML = browser.i18n.getMessage("counter1");
counter.appendChild(counter1);
// Le pourcentage
var counter2 = document.createElement("div");
counter2.className = "prop";
counter2.style.color = popup.colors[message.index];
counter2.innerHTML = "<b style='background: " + popup.colors[message.index] +";'>" + message.prop + "%</b> "+ browser.i18n.getMessage("counter2");
counter.appendChild(counter2);
// La liste des requêtes à afficher
var urlList = "";
for (var u of message.list)
urlList += "<li>"+u+"</li>";
// L'infobulle
var counterDiv = document.createElement("div");
counterDiv.className = "counter_div";
counterDiv.style.backgroundColor = popup.colors[message.index];
counterDiv.style.color = popup.colors[message.index];
counterDiv.innerHTML = browser.i18n.getMessage("counterList", [popup.companies.get(message.index).title, urlList]);
counter.appendChild(counterDiv);
// La fin du texte
var counter2 = document.createElement("div");
counter2.innerHTML = browser.i18n.getMessage("counter3", popup.companies.get(message.index).title);
counter.appendChild(counter2);
// Outro
var outro = document.createElement("div");
outro.innerHTML = browser.i18n.getMessage("outro");
outro.style.color = popup.colors[message.index];
outro.className = "outro";
outro.onclick = function() {window.open("https://laquadrature.net", '_blank');}
popup.companies.get(message.index).info.appendChild(outro);
}
// S'il s'agit d'un message concernant l'état de l'affichage
if (message.type == "display")
{
popup.showing = message.showing;
popup.companies.forEach(function (comp)
{
if (popup.showing)
popup.startDisplay(comp.div);
else
{
comp.div.className = "company";
clearTimeout(comp.div.timeoutID);
}
});
}
});
......@@ -57,8 +124,10 @@ popup.update = function (request)
// Créé l'objet contenant les informations sur l'entreprise
var company =
{
index: request.index,
title: this.titles[request.index], // Nom de l'entreprise
color: this.colors[request.index], // Couleur de l'entreprise
logo: this.logos[request.index],
contents: new Map(), // Liste des ressources proposées
};
......@@ -69,37 +138,39 @@ popup.update = function (request)
company.div = document.createElement("div");
company.div.className = "company";
company.div.style.backgroundColor = company.color;
company.div.style.top = 80 * (this.companies.size) + "px";
company.div.style.top = 15 + 110 * (this.companies.size -1 ) + "px";
this.div.appendChild(company.div);
// Créé l'élément HTML contenant le texte d'annonce
var title = document.createElement("p");
title.className = "company_title";
title.innerHTML = browser.i18n.getMessage("flag", company.title);
company.div.appendChild(title);
// Le logo de l'entreprise
var title = document.createElement("div");
title.className = "title";
title.innerHTML = "<img src='" + browser.extension.getURL(company.logo) +"'>" ;
// title.style.color = company.color;
company.div.appendChild(title);
// Le sous-texte du drapeau
var subtitle = document.createElement("div");
subtitle.className = "subtitle";
subtitle.innerHTML = browser.i18n.getMessage("subtitle");
company.div.appendChild(subtitle);
// Créer un sous-élément HTML qui affichera les détails
var info = document.createElement("div");
info.className = "info";
company.div.appendChild(info);
// Les détails
company.info = document.createElement("div");
company.info.className = "info";
company.div.appendChild(company.info);
// Premier paragraphe des détails (nom du site + nom de l'entreprise)
var intro = document.createElement("p");
var intro = document.createElement("div");
intro.className = "intro";
intro.style.color = company.color;
intro.innerHTML = browser.i18n.getMessage("intro", [window.location.href.replace(/.*?\:\/\/(?:www.)?(.*?)\/.*/, "$1"), company.title]);
info.appendChild(intro);
company.info.appendChild(intro);
// Liste des ressources offertes par l'entreprise
company.list = document.createElement("ul");
company.list.className = "type";
info.appendChild(company.list);
// Suite des détails
var outro = document.createElement("p");
outro.className = "outro";
outro.innerHTML = browser.i18n.getMessage("outro", company.title);
info.appendChild(outro);
company.list = document.createElement("div");
company.list.className = "type_list";
company.list.style.color = company.color;
company.info.appendChild(company.list);
// Si la page a le focus
if (!document.hidden)
......@@ -114,6 +185,9 @@ popup.update = function (request)
// Appelle le lancement de drapeau dès qu'elle prend le focus
document.addEventListener('visibilitychange', function(e) {if (!document.hidden) popup.startDisplay(company.div );});
}
// Informe l'extension qu'une nouvelle page est connue par l'entreprise
browser.runtime.sendMessage({type:"counter", index: company.index, url: window.location.href});
}
// Si le type de ressource n'est pas encore listé ==================
......@@ -127,17 +201,19 @@ popup.update = function (request)
}
// Créé l'élément HTML qui affichera le nombre de fois où le type de ressource a été offert
content.div = document.createElement("li");
content.div.className = "type_count";
content.div = document.createElement("div");
content.div.className = "type";
content.div.style.color = this.colors[request.index];
this.companies.get(request.index).list.appendChild(content.div);
// Créé l'élément HTML qui listera les requêtes concernant le type de ressource
var div = document.createElement("div");
div.className = "type_requests";
div.style.backgroundColor = this.colors[request.index];
this.companies.get(request.index).list.appendChild(div);
// Créé l'élément HTML qui introduit la liste
var intro = document.createElement("p");
var intro = document.createElement("div");
intro.className = "intro";
intro.innerHTML = browser.i18n.getMessage("request", [request.content, new Date(request.date).toLocaleString().slice(0, -3), window.location.href]);
div.appendChild(intro);
......@@ -158,7 +234,8 @@ popup.update = function (request)
content.number ++;
// Met à jour l'élément HTML affichant le nombre de requêtes concernant une ressource
content.div.innerHTML = "<b>" + content.number + "</b> <u>" + content.type + (content.number > 1 ? "s" : "") + "</u>"
content.div.innerHTML = "<b style='color: " + this.colors[request.index] + ";'>" + content.number + "</b>&nbsp;" + content.type + (content.number > 1 ? "s" : "");
content.div.style.background = this.colors[request.index];
// Ajoute l'URL de la requête à la liste de celles associées à un type de ressource
var limit = 100;
......@@ -173,23 +250,26 @@ popup.update = function (request)
// Affichage du drapeau ==================================
popup.startDisplay = function(div)
{
// Attend 10ms pour afficher le drapeau
setTimeout
(
function(div){div.className += " show";},
10,
div
);
// Attend la durée indiquée par popup.timer pour fermer le drapeau
if (timer)
if (popup.showing)
{
// Attend 10ms pour afficher le drapeau
setTimeout
(
function(div){div.className += " fold";},
1000 * timer,
function(d){d.className += " show";},
10,
div
);
// Attend la durée indiquée par popup.timer pour fermer le drapeau
if (timer)
{
div.timeoutID = setTimeout
(
function(d){d.className += " fold";},
1000 * timer,
div
);
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment