1
0
mirror of https://github.com/MailHops/mailhops-plugin.git synced 2025-05-15 13:50:08 -07:00
This commit is contained in:
Andrew Van Tassel 2021-03-23 01:51:47 -06:00
parent 8b12a00e11
commit 3b26c08e07
9 changed files with 152 additions and 30 deletions

View File

@ -1,5 +1,11 @@
# Change Log
## 4.2.0 - 2021-03-23
- Added dark/light mode option.
- Fixed display if html characters exist in ASN name.
- Changed default for travel_time_junk option to off.
## 4.1.0 - 2020-11-12
- Added daily message cache.

View File

@ -5,10 +5,13 @@
<meta charset="utf-8" />
<title>MailHops</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<div class="popup-page" style="max-width: 400px;">
<div id="hop-message" class="ui message">
<body id="mh-body">
<div class="popup-page" style="max-width: 405px;">
<div id="mh-pop-segment" class="ui segment">
<div id="hop-message" class="ui message" style="width: 100%;">
<div id="hop-message-header" class="header" style="text-align: center;"></div>
</div>
@ -23,6 +26,8 @@
<button type="button" class="ui blue button" id="mh-reload-button">Reload</button>
<button type="button" class="ui icon button" id="mh-options-button" style="float: right;">Options</button>
</div>
</div>
</div>
<script src="/js/utils.js"></script>

View File

@ -5,7 +5,10 @@
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
</head>
<body style="padding: 20px; margin-bottom: 20px; height: 100%;">
<body>
<div id="mh-main-segment" class="ui segment" style="padding: 20px; margin-bottom: 20px; height: 100%;">
<img src="/images/mailhops-logo.png" width="300"/>
<div class="ui divider"></div>
@ -20,7 +23,7 @@
<p>There was a problem with your request. Please try again.</p>
</div>
<div class="ui two top attached unstackable steps">
<div id="mh-steps" class="ui two top attached unstackable steps">
<div id="step_one" class="step active">
<i class="key icon"></i>
<div class="content">
@ -36,10 +39,10 @@
</div>
</div>
</div>
<div class="ui attached segment">
<div id="mh-segment" class="ui attached segment">
<div id="step_api_keys" class="content">
<form class="ui form">
<form id="mh-form" class="ui form">
<div class="field">
<label>MailHops API Key</label>
<input type="text" id="mailhop.api_key" placeholder="Enter your MailHops API Key"/>
@ -77,10 +80,26 @@
</p>
</div>
<div id="step_settings" style="display: none;">
<div id="step_settings" class="ui form" style="display: none;">
<div class="grouped fields">
<label style="font-weight: bold;">Distance Unit</label>
<div class="field">
<label>Theme Unit</label>
<div class="ui radio checkbox">
<input type="radio" id="theme_dark" name="theme" value="dark" />
<label for="theme_dark">Dark</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="theme_light" name="theme" value="light" />
<label for="theme_light">Light</label>
</div>
</div>
</div>
<br/>
<div class="grouped fields">
<div class="field">
<label>Distance Unit</label>
<div class="ui radio checkbox">
<input type="radio" id="unit_mi" name="unit" value="mi" />
<label for="unit_mi">Miles and &deg;F</label>
@ -94,10 +113,9 @@
</div>
</div>
<br/>
<div class="grouped fields">
<label style="font-weight: bold;">Travel Time Junk</label>
<p>Flag messages as junk if travel time takes longer than normal.</p>
<div class="grouped fields">
<div class="field">
<label>Travel Time Junk</label>
<div class="ui radio checkbox">
<input type="radio" id="travel_time_junk_on" name="travel_time_junk" value="on" />
<label for="travel_time_junk_on">On</label>
@ -109,6 +127,7 @@
<label for="travel_time_junk_off">Off</label>
</div>
</div>
<p>Flag messages as junk if travel time takes longer than normal.</p>
</div>
<div style="text-align: center; padding: 10px;">
<button class="ui primary button" id="mh-save-options">Save</button>
@ -117,6 +136,7 @@
</div>
<script src="/js/preferences.js"></script>
</div>
</body>
</html>

7
css/styles.css Normal file
View File

@ -0,0 +1,7 @@
#mh-body {
background-color: #FFF;
}
#mh-body.inverted {
background-color: #121212;
}

View File

@ -10,16 +10,17 @@ const MailHops = {
loading: false,
previousId: null,
options: {
version: 'MailHops Plugin 4.1.1',
version: 'MailHops Plugin 4.2.0',
api_key: '',
owm_key: '',
lang: 'en',
unit: 'mi',
unit: 'mi',
theme: 'light',
api_http: 'https://',
api_host: 'api.Mailhops.com',
debug: false,
country_tag: false,
travel_time_junk: true,
travel_time_junk: false,
country_filter: []
},
message: {
@ -66,7 +67,10 @@ MailHops.init = function(id, headers)
}
if (data.unit) {
MailHops.options.unit = data.unit;
}
}
if (data.theme) {
MailHops.options.theme = data.theme;
}
if (typeof data.travel_time_junk != 'undefined') {
MailHops.options.travel_time_junk = data.travel_time_junk == 'on' ? true : false;
}

View File

@ -17,6 +17,7 @@ function updateContent(msg) {
document.getElementById("mh-reload-button").addEventListener("click", async function () {
let data = await browser.storage.local.get('messages');
if (data.messages && data.messages.list[msg.message.hash]) {
console.log(data.messages);
delete data.messages.list[msg.message.hash];
browser.storage.local.set({
messages: data.messages
@ -38,9 +39,33 @@ function updateContent(msg) {
const route = msg.response.route || [];
const sender = msg.message.sender || null;
const unit = msg.options.unit || "mi";
const theme = msg.options.theme || "light";
let client = null;
let items = [];
// update theme
if (theme == "dark") {
if (!document.getElementById("hop-message").classList.contains("inverted")) {
document.getElementById('mh-body').classList.add('inverted');
document.getElementById('hop-message').classList.add('brown');
document.getElementById('hop-list').classList.add('inverted');
document.getElementById('mh-pop-segment').classList.add('inverted');
document.getElementById('mh-map-button').classList.add('inverted');
document.getElementById('mh-reload-button').classList.add('inverted');
document.getElementById('mh-options-button').classList.add('inverted');
}
} else {
if (document.getElementById("hop-message").classList.contains("inverted")) {
document.getElementById('mh-body').classList.remove('inverted');
document.getElementById('hop-message').classList.remove('brown');
document.getElementById('hop-list').classList.remove('inverted');
document.getElementById('mh-pop-segment').classList.remove('inverted');
document.getElementById('mh-map-button').classList.remove('inverted');
document.getElementById('mh-reload-button').classList.remove('inverted');
document.getElementById('mh-options-button').classList.remove('inverted');
}
}
for (var i = 0; i < route.length; i++) {
var header = 'Private';
var icon = '/images/local.png';
@ -72,9 +97,9 @@ function updateContent(msg) {
if (route[i].host)
description += route[i].host;
if (route[i].whois && route[i].whois.descr)
description += route[i].whois.descr;
description += MailHopsUtils.htmlEncode(route[i].whois.descr);
if (route[i].whois && route[i].whois.netname)
description += route[i].whois.netname;
description += MailHopsUtils.htmlEncode(route[i].whois.netname);
var weather = '';
if (route[i].weather) {
@ -85,7 +110,7 @@ function updateContent(msg) {
var asn = '';
if (route[i].asn) {
asn = '<br/>ASN Org: ' + route[i].asn.autonomous_system_organization;
asn = '<br/>ASN Org: ' + MailHopsUtils.htmlEncode(route[i].asn.autonomous_system_organization);
asn += ' (<a href="https://dnschecker.org/asn-whois-lookup.php?query='+route[i].asn.autonomous_system_number+'" target="_blank" title="ASN Lookup">' + route[i].asn.autonomous_system_number + '</a>)'
}
@ -99,12 +124,7 @@ function updateContent(msg) {
}
}
// append child
items.push('<div class="item">\
<div class="content">\
<div class="header"><img src="'+ icon + '" /> ' + header + weather +' <label class="ui circular label icon" style="float: right;">'+ (i + 1) +'</label></div>\
<div class="description">'+ description + asn + '</div>\
</div>\
</div>');
items.push('<div class="item"><div class="content"><div class="header"><img src="'+ icon + '" /> ' + header + weather +' <label class="ui circular label icon" style="float: right;">'+ (i + 1) +'</label></div><div class="description">'+ description + asn + '</div></div></div>');
}
// header
document.getElementById('hop-message-header').innerHTML = `${route.length} Hops`;

View File

@ -2,6 +2,7 @@ const MailHopPreferences = {
api_key: '', //api key
valid_api_key: false,
unit: 'mi',
theme: 'light',
owm_key: '', //OpenWeatherMap.org api key
init: async function(){
@ -9,6 +10,8 @@ const MailHopPreferences = {
this.api_key = document.getElementById("mailhop.api_key");
this.owm_key = document.getElementById("mailhop.owm_key");
if (!this.api_key) return;
document.getElementById("mh-save").addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
@ -60,14 +63,44 @@ const MailHopPreferences = {
document.getElementById("unit_km").setAttribute('checked', 'checked');
} else {
document.getElementById("unit_mi").setAttribute('checked', 'checked');
}
}
if (data.theme) {
if (data.theme == "dark")
document.getElementById("theme_dark").setAttribute('checked', 'checked');
else
document.getElementById("theme_light").setAttribute('checked', 'checked');
} else {
document.getElementById("theme_light").setAttribute('checked', 'checked');
}
if (typeof data.travel_time_junk != 'undefined') {
if (data.travel_time_junk == 'on')
document.getElementById("travel_time_junk_on").setAttribute('checked', 'checked');
else
document.getElementById("travel_time_junk_off").setAttribute('checked', 'checked');
} else {
document.getElementById("travel_time_junk_on").setAttribute('checked', 'checked');
document.getElementById("travel_time_junk_off").setAttribute('checked', 'checked');
}
if (data.theme && data.theme == "dark") {
if (!document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.add("inverted");
document.getElementById("mh-steps").classList.add("inverted");
document.getElementById("mh-segment").classList.add("inverted");
document.getElementById("mh-form").classList.add("inverted");
document.getElementById("step_settings").classList.add("inverted");
document.getElementById("mh-save").classList.add("inverted");
document.getElementById("mh-save-options").classList.add("inverted");
}
} else {
if (document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.remove("inverted");
document.getElementById("mh-steps").classList.remove("inverted");
document.getElementById("mh-segment").classList.remove("inverted");
document.getElementById("mh-form").classList.remove("inverted");
document.getElementById("step_settings").classList.remove("inverted");
document.getElementById("mh-save").classList.remove("inverted");
document.getElementById("mh-save-options").classList.remove("inverted");
}
}
await this.saveAPIKey(true);
@ -98,10 +131,34 @@ const MailHopPreferences = {
api_key: self.api_key.value.trim(),
owm_key: self.owm_key.value.trim(),
unit: document.querySelector('input[name="unit"]:checked').value,
theme: document.querySelector('input[name="theme"]:checked').value,
travel_time_junk: document.querySelector('input[name="travel_time_junk"]:checked').value,
});
if(!init)
document.getElementById("saved_message").style.display = 'block';
document.getElementById("saved_message").style.display = 'block';
this.theme = document.querySelector('input[name="theme"]:checked').value
if (this.theme == "dark") {
if (!document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.add("inverted");
document.getElementById("mh-steps").classList.add("inverted");
document.getElementById("mh-segment").classList.add("inverted");
document.getElementById("mh-form").classList.add("inverted");
document.getElementById("step_settings").classList.add("inverted");
document.getElementById("mh-save").classList.add("inverted");
document.getElementById("mh-save-options").classList.add("inverted");
}
} else {
if (document.getElementById("mh-main-segment").classList.contains("inverted")) {
document.getElementById("mh-main-segment").classList.remove("inverted");
document.getElementById("mh-steps").classList.remove("inverted");
document.getElementById("mh-segment").classList.remove("inverted");
document.getElementById("mh-form").classList.remove("inverted");
document.getElementById("step_settings").classList.remove("inverted");
document.getElementById("mh-save").classList.remove("inverted");
document.getElementById("mh-save-options").classList.remove("inverted");
}
}
return true;
},

View File

@ -192,5 +192,8 @@ getDistance: function(from, to, unit) {
}
}
return null;
},
htmlEncode: function (text) {
return text.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
}
};

View File

@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "__MSG_appName__",
"description": "__MSG_appDesc__",
"version": "4.1.1",
"version": "4.2.0",
"author": "Hopsware LLC",
"developer": {
"name": "Andrew Van Tassel",