standardize use of arrow functions, scoped vars and for loops where possible, content.js

This commit is contained in:
Drew Hutton Yoroshi 2022-01-16 10:32:27 +10:30
parent e191b31d6f
commit cb3c2aedd8

View file

@ -1,88 +1,88 @@
$(document).ready(function(){
var isOpen = false;
var actions = [];
var isFiltered = false;
$(document).ready(() => {
let isOpen = false;
let actions = [];
let isFiltered = false;
// Append the omni into the current page
$.get(chrome.runtime.getURL('/content.html'), function(data) {
$.get(chrome.runtime.getURL('/content.html'), (data) => {
$(data).appendTo('body');
});
// Request actions from the background
chrome.runtime.sendMessage({request:"get-actions"}, function(response) {
chrome.runtime.sendMessage({request:"get-actions"}, (response) => {
actions = response.actions;
populateOmni();
});
// Add actions to the omni
function populateOmni() {
const populateOmni = () => {
$("#omni-extension #omni-list").html("");
actions.forEach(function(action, index){
var keys = "";
for (const [action, index] of actions.entries()) {
let keys = "";
if (action.keycheck) {
keys = "<div class='omni-keys'>";
action.keys.forEach(function(key){
for (const key of action.keys) {
keys += "<span class='omni-shortcut'>"+key+"</span>";
});
}
keys += "</div>";
}
var onload = 'if ("naturalHeight" in this) {if (this.naturalHeight + this.naturalWidth === 0) {this.onerror();return;}} else if (this.width + this.height == 0) {this.onerror();return;}';
var img = "<img src='"+action.favIconUrl+"' alt='favicon' onload='"+onload+"' onerror='this.src=&quot;"+chrome.runtime.getURL("/assets/globe.svg")+"&quot;' class='omni-icon'>";
const onload = 'if ("naturalHeight" in this) {if (this.naturalHeight + this.naturalWidth === 0) {this.onerror();return;}} else if (this.width + this.height === 0) {this.onerror();return;}';
let img = "<img src='"+action.favIconUrl+"' alt='favicon' onload='"+onload+"' onerror='this.src=&quot;"+chrome.runtime.getURL("/assets/globe.svg")+"&quot;' class='omni-icon'>";
if (action.emoji) {
img = "<span class='omni-emoji-action'>"+action.emojiChar+"</span>"
}
if (index != 0) {
if (index !== 0) {
$("#omni-extension #omni-list").append("<div class='omni-item' data-type='"+action.type+"'>"+img+"<div class='omni-item-details'><div class='omni-item-name'>"+action.title+"</div><div class='omni-item-desc'>"+action.desc+"</div></div>"+keys+"<div class='omni-select'>Select <span class='omni-shortcut'>⏎</span></div></div>");
} else {
$("#omni-extension #omni-list").append("<div class='omni-item omni-item-active' data-type='"+action.type+"'>"+img+"<div class='omni-item-details'><div class='omni-item-name'>"+action.title+"</div><div class='omni-item-desc'>"+action.desc+"</div></div>"+keys+"<div class='omni-select'>Select <span class='omni-shortcut'>⏎</span></div></div>");
}
})
}
$(".omni-extension #omni-results").html(actions.length+" results");
}
// Add filtered actions to the omni
function populateOmniFilter(actions) {
const populateOmniFilter = (actions) => {
isFiltered = true;
$("#omni-extension #omni-list").html("");
actions.forEach(function(action, index){
var keys = "";
for (const [action, index] of actions.entries()) {
let keys = "";
if (action.keycheck) {
keys = "<div class='omni-keys'>";
action.keys.forEach(function(key){
for (const key of action.keys) {
keys += "<span class='omni-shortcut'>"+key+"</span>";
});
}
keys += "</div>";
}
var img = "<img src='"+action.favIconUrl+"' alt='favicon' onerror='this.src=&quot;"+chrome.runtime.getURL("/assets/globe.svg")+"&quot;' class='omni-icon'>";
let img = "<img src='"+action.favIconUrl+"' alt='favicon' onerror='this.src=&quot;"+chrome.runtime.getURL("/assets/globe.svg")+"&quot;' class='omni-icon'>";
if (action.emoji) {
img = "<span class='omni-emoji-action'>"+action.emojiChar+"</span>"
}
if (index != 0) {
if (index !== 0) {
$("#omni-extension #omni-list").append("<div class='omni-item' data-type='"+action.type+"' data-url='"+action.url+"'>"+img+"<div class='omni-item-details'><div class='omni-item-name'>"+action.title+"</div><div class='omni-item-desc'>"+action.url+"</div></div>"+keys+"<div class='omni-select'>Select <span class='omni-shortcut'>⏎</span></div></div>");
} else {
$("#omni-extension #omni-list").append("<div class='omni-item omni-item-active' data-type='"+action.type+"' data-url='"+action.url+"'>"+img+"<div class='omni-item-details'><div class='omni-item-name'>"+action.title+"</div><div class='omni-item-desc'>"+action.url+"</div></div>"+keys+"<div class='omni-select'>Select <span class='omni-shortcut'>⏎</span></div></div>");
}
})
}
$(".omni-extension #omni-results").html(actions.length+" results");
}
// Open the omni
function openOmni() {
chrome.runtime.sendMessage({request:"get-actions"}, function(response) {
const openOmni = () => {
chrome.runtime.sendMessage({request:"get-actions"}, (response) => {
isOpen = true;
actions = response.actions;
populateOmni();
$("#omni-extension input").val("");
$("html, body").stop();
$("#omni-extension").removeClass("omni-closing");
window.setTimeout(function(){
window.setTimeout(() => {
$("#omni-extension input").focus();
}, 100);
});
}
// Close the omni
function closeOmni() {
const closeOmni = () => {
isOpen = false;
$("#omni-extension").addClass("omni-closing");
}
@ -94,22 +94,28 @@ $(document).ready(function(){
}
// Autocomplete commands. Since they all start with different letters, it can be the default behavior
function checkShortHand(e, value) {
var el = $(".omni-extension input");
if (e.keyCode != 8) {
if (value == "/t") {
el.val("/tabs ")
} else if (value == "/b") {
el.val("/bookmarks ")
} else if (value == "/h") {
el.val("/history ");
} else if (value == "/r") {
el.val("/remove ");
} else if (value == "/a") {
el.val("/actions ");
const checkShortHand = (e, value) => {
const el = $(".omni-extension input");
if (e.keyCode !== 8) {
switch (value) {
case "/t":
el.val("/tabs ");
break;
case "/b":
el.val("/bookmarks ");
break;
case "/h":
el.val("/history ");
break;
case "/r":
el.val("/remove ");
break;
case "/a":
el.val("/actions ");
break;
}
} else {
if (value == "/tabs" || value == "/bookmarks" || value == "/actions" || value == "/remove" || value == "/history") {
if (value === "/tabs" || value === "/bookmarks" || value === "/actions" || value === "/remove" || value === "/history") {
el.val("");
}
}
@ -117,60 +123,60 @@ $(document).ready(function(){
// Search for an action in the omni
function search(e) {
if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37) {
if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40 || e.keyCode === 13 || e.keyCode === 37) {
return;
}
var value = $(this).val().toLowerCase();
let value = $(this).val().toLowerCase();
checkShortHand(e, value);
value = $(this).val().toLowerCase();
if (value.startsWith("/history")) {
var tempvalue = value.replace("/history ", "");
var query = "";
if (tempvalue != "/history") {
const tempvalue = value.replace("/history ", "");
let query = "";
if (tempvalue !== "/history") {
query = value.replace("/history ", "");
}
chrome.runtime.sendMessage({request:"search-history", query:query}, function(response){
chrome.runtime.sendMessage({request:"search-history", query:query}, (response) => {
populateOmniFilter(response.history);
});
} else if (value.startsWith("/bookmarks")) {
var tempvalue = value.replace("/bookmarks ", "");
if (tempvalue != "/bookmarks" && tempvalue != "") {
var query = value.replace("/bookmarks ", "");
chrome.runtime.sendMessage({request:"search-bookmarks", query:query}, function(response){
const tempvalue = value.replace("/bookmarks ", "");
if (tempvalue !== "/bookmarks" && tempvalue !== "") {
const query = value.replace("/bookmarks ", "");
chrome.runtime.sendMessage({request:"search-bookmarks", query:query}, (response) =>{
populateOmniFilter(response.bookmarks);
});
} else {
populateOmniFilter(actions.filter(x => x.type == "bookmark"));
populateOmniFilter(actions.filter(x => x.type === "bookmark"));
}
} else {
if (isFiltered) {
populateOmni();
isFiltered = false;
}
$("#omni-extension #omni-list .omni-item").filter(function(){
$("#omni-extension #omni-list .omni-item").filter(function() {
if (value.startsWith("/tabs")) {
var tempvalue = value.replace("/tabs ", "");
if (tempvalue == "/tabs") {
$(this).toggle($(this).attr("data-type") == "tab");
let tempvalue = value.replace("/tabs ", "");
if (tempvalue === "/tabs") {
$(this).toggle($(this).attr("data-type") === "tab");
} else {
tempvalue = value.replace("/tabs ", "");
$(this).toggle(($(this).find(".omni-item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(tempvalue) > -1) && $(this).attr("data-type") == "tab");
$(this).toggle(($(this).find(".omni-item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(tempvalue) > -1) && $(this).attr("data-type") === "tab");
}
} else if (value.startsWith("/remove")) {
var tempvalue = value.replace("/remove ", "")
if (tempvalue == "/remove") {
$(this).toggle($(this).attr("data-type") == "bookmark" || $(this).attr("data-type") == "tab");
let tempvalue = value.replace("/remove ", "")
if (tempvalue === "/remove") {
$(this).toggle($(this).attr("data-type") === "bookmark" || $(this).attr("data-type") === "tab");
} else {
tempvalue = value.replace("/remove ", "");
$(this).toggle(($(this).find(".omni-item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(tempvalue) > -1) && ($(this).attr("data-type") == "bookmark" || $(this).attr("data-type") == "tab"));
$(this).toggle(($(this).find(".omni-item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(tempvalue) > -1) && ($(this).attr("data-type") === "bookmark" || $(this).attr("data-type") === "tab"));
}
} else if (value.startsWith("/actions")) {
var tempvalue = value.replace("/actions ", "")
if (tempvalue == "/actions") {
$(this).toggle($(this).attr("data-type") == "action");
let tempvalue = value.replace("/actions ", "")
if (tempvalue === "/actions") {
$(this).toggle($(this).attr("data-type") === "action");
} else {
tempvalue = value.replace("/actions ", "");
$(this).toggle(($(this).find(".omni-item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(tempvalue) > -1) && $(this).attr("data-type") == "action");
$(this).toggle(($(this).find(".omni-item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(tempvalue) > -1) && $(this).attr("data-type") === "action");
}
} else {
$(this).toggle($(this).find(".omni-item-name").text().toLowerCase().indexOf(value) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(value) > -1);
@ -183,8 +189,8 @@ $(document).ready(function(){
}
// Handle actions from the omni
function handleAction(e) {
var action = actions.find(x => x.title == $(".omni-item-active .omni-item-name").text());
const handleAction = (e) => {
const action = actions.find(x => x.title === $(".omni-item-active .omni-item-name").text());
closeOmni();
if ($(".omni-extension input").val().toLowerCase().startsWith("/remove")) {
chrome.runtime.sendMessage({request:"remove", type:action.type, action:action});
@ -218,7 +224,7 @@ $(document).ready(function(){
}
break;
case "fullscreen":
var elem = document.documentElement;
const elem = document.documentElement;
elem.requestFullscreen();
break;
case "new-tab":
@ -238,27 +244,27 @@ $(document).ready(function(){
}
// Fetch actions again
chrome.runtime.sendMessage({request:"get-actions"}, function(response) {
chrome.runtime.sendMessage({request:"get-actions"}, (response) => {
actions = response.actions;
populateOmni();
});
}
// Customize the shortcut to open the Omni box
function openShortcuts() {
const openShortcuts = () => {
chrome.runtime.sendMessage({request:"extensions/shortcuts"});
}
// Check which keys are down
var down = [];
let down = [];
$(document).keydown(function(e) {
$(document).keydown((e) => {
down[e.keyCode] = true;
if (down[38]) {
// Up key
if ($(".omni-item-active").prevAll("div").not(":hidden").first().length) {
var previous = $(".omni-item-active").prevAll("div").not(":hidden").first();
const previous = $(".omni-item-active").prevAll("div").not(":hidden").first();
$(".omni-item-active").removeClass("omni-item-active");
previous.addClass("omni-item-active");
previous[0].scrollIntoView({block:"nearest", inline:"nearest"});
@ -266,7 +272,7 @@ $(document).ready(function(){
} else if (down[40]) {
// Down key
if ($(".omni-item-active").nextAll("div").not(":hidden").first().length) {
var next = $(".omni-item-active").nextAll("div").not(":hidden").first();
const next = $(".omni-item-active").nextAll("div").not(":hidden").first();
$(".omni-item-active").removeClass("omni-item-active");
next.addClass("omni-item-active");
next[0].scrollIntoView({block:"nearest", inline:"nearest"});
@ -278,24 +284,24 @@ $(document).ready(function(){
// Enter key
handleAction(e);
}
}).keyup(function(e) {
}).keyup((e) => {
if (down[18] && down[16] && down[80]) {
if (actions.find(x => x.action == "pin") != undefined) {
if (actions.find(x => x.action === "pin") !== undefined) {
chrome.runtime.sendMessage({request:"pin-tab"});
} else {
chrome.runtime.sendMessage({request:"unpin-tab"});
}
chrome.runtime.sendMessage({request:"get-actions"}, function(response) {
chrome.runtime.sendMessage({request:"get-actions"}, (response) => {
actions = response.actions;
populateOmni();
});
} else if (down[18] && down[16] && down[77]) {
if (actions.find(x => x.action == "mute") != undefined) {
if (actions.find(x => x.action === "mute") !== undefined) {
chrome.runtime.sendMessage({request:"mute-tab"});
} else {
chrome.runtime.sendMessage({request:"unmute-tab"});
}
chrome.runtime.sendMessage({request:"get-actions"}, function(response) {
chrome.runtime.sendMessage({request:"get-actions"}, (response) => {
actions = response.actions;
populateOmni();
});
@ -306,9 +312,9 @@ $(document).ready(function(){
down = [];
});
// Recieve messages from background
// Receive messages from background
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.request == "open-omni") {
if (message.request === "open-omni") {
if (isOpen) {
closeOmni();
} else {