mirror of
https://github.com/alyssaxuu/omni.git
synced 2026-03-11 08:54:35 +00:00
standardize use of arrow functions, scoped vars and for loops where possible, content.js
This commit is contained in:
parent
e191b31d6f
commit
cb3c2aedd8
1 changed files with 87 additions and 81 deletions
168
src/content.js
168
src/content.js
|
|
@ -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=""+chrome.runtime.getURL("/assets/globe.svg")+""' 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=""+chrome.runtime.getURL("/assets/globe.svg")+""' 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=""+chrome.runtime.getURL("/assets/globe.svg")+""' class='omni-icon'>";
|
||||
let img = "<img src='"+action.favIconUrl+"' alt='favicon' onerror='this.src=""+chrome.runtime.getURL("/assets/globe.svg")+""' 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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue