prehistoric-systems/omni
1
0
Fork 0
mirror of https://github.com/alyssaxuu/omni.git synced 2026-03-11 08:54:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Unique CSS selectors

Browse source
This commit is contained in:
Alyssa X 2022-01-11 16:47:02 +00:00
parent 68c6a8fe11
commit 15e3d6e07d
4 changed files with 77 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/content.css
View file

@ -53,7 +53,7 @@
font-weight: 700;
src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-Bold.ttf');
}
.omni-extension .item-details * {
.omni-extension .omni-item-details * {
line-height: normal;
}
.omni-extension {
@ -87,15 +87,15 @@
transition: all .2s cubic-bezier(.05,.03,.35,1);
display: block;
}
.closing #omni {
.omni-closing #omni {
transform: scale(.9);
opacity: 0;
display: none!important;
}
.closing {
.omni-closing {
pointer-events: none;
}
.omni-extension #overlay {
.omni-extension #omni-overlay {
height: 100%;
width: 100%;
position: fixed;
@ -106,10 +106,10 @@
opacity: .6;
transition: all .1s cubic-bezier(.05,.03,.35,1);
}
.closing #overlay {
.omni-closing #omni-overlay {
opacity: 0!important;
}
.omni-extension #head {
.omni-extension #omni-head {
height: 50px;
line-height: 50px;
width: 95%;
@ -117,22 +117,22 @@
margin-right: auto;
border-bottom: 1px solid var(--border);
}
.omni-extension #name {
.omni-extension #omni-name {
color: var(--text);
font-size: 12px;
font-weight: 600;
float: left;
}
.omni-extension #close {
.omni-extension #omni-close {
color: var(--text-3);
float: right;
font-size: 12px;
font-weight: 500;
}
.omni-extension #close span {
.omni-extension #omni-close span {
margin-left: 3px;
}
.omni-extension .shortcut {
.omni-extension .omni-shortcut {
display: inline-block;
font-size: 13px;
border-radius: 5px;
@ -172,7 +172,7 @@
.omni-extension ::-ms-input-placeholder {
color: var(--placeholder);
}
.omni-extension #list {
.omni-extension #omni-list {
width: 100%;
overflow: auto;
height: 100%;
@ -180,18 +180,18 @@
border-top: 1px solid var(--border);
position: relative;
}
.omni-extension .item {
.omni-extension .omni-item {
height: 60px;
width: 100%;
}
.omni-extension .item:hover {
.omni-extension .omni-item:hover {
cursor: pointer;
}
.omni-extension .item-active {
.omni-extension .omni-item-active {
background-color: var(--select);
position: relative;
}
.omni-extension .item-active:before {
.omni-extension .omni-item-active:before {
height: 100%;
position: absolute;
display: block;
@ -199,7 +199,7 @@
width: 2px;
background-color: var(--accent);
}
.omni-extension .select {
.omni-extension .omni-select {
float: right;
vertical-align: middle;
color: var(--text-3);
@ -209,13 +209,13 @@
margin-top: 20px;
margin-right: 5%;
}
.omni-extension .select span {
.omni-extension .omni-select span {
margin-left: 3px;
}
.omni-extension .item-active .select {
.omni-extension .omni-item-active .omni-select {
display: block!important;
}
.omni-extension .icon {
.omni-extension .omni-icon {
width: 20px;
height: 20px;
margin-left: 5%;
@ -223,7 +223,7 @@
vertical-align: middle;
margin-top: -12px;
}
.omni-extension .emoji-action {
.omni-extension .omni-emoji-action {
display: inline-block;
vertical-align: middle;
margin-top: -12px;
@ -233,13 +233,13 @@
margin-left: 5%;
font-size: 18px;
}
.omni-extension .item-details {
.omni-extension .omni-item-details {
display: inline-block;
margin-left: 10px;
vertical-align: middle;
margin-top: 10px;
}
.omni-extension .item-name {
.omni-extension .omni-item-name {
color: var(--text-2);
font-size: 14px;
font-weight: 500;
@ -248,15 +248,15 @@
text-overflow: ellipsis;
width: 450px;
}
.omni-extension .item-active .item-name {
.omni-extension .omni-item-active .omni-item-name {
color: var(--text)!important;
}
.omni-extension .item-desc {
.omni-extension .omni-item-desc {
color: var(--text-3);
margin-top: 5px;
font-size: 14px;
}
.omni-extension #footer {
.omni-extension #omni-footer {
height: 45px;
line-height: 45px;
border-top: 1px solid var(--border);
@ -264,33 +264,33 @@
margin-left: auto;
margin-right: auto;
}
.omni-extension #results {
.omni-extension #omni-results {
color: var(--text-3);
font-size: 12px;
font-weight: 500;
float: left;
}
.omni-extension #arrows {
.omni-extension #omni-arrows {
color: var(--text-3);
font-size: 12px;
font-weight: 500;
float: right;
}
.omni-extension #arrows span {
.omni-extension #omni-arrows span {
margin-left: 3px;
margin-right: 3px;
}
.omni-extension .keys {
.omni-extension .omni-keys {
float: right;
vertical-align: middle;
font-weight: 500;
margin-top: 20px;
margin-right: 5%;
}
.omni-extension .item-active .keys {
.omni-extension .omni-item-active .omni-keys {
display: none!important;
}
.omni-extension .keys span {
.omni-extension .omni-keys span {
margin-left: 3px;
}
#body-wrap {

14
src/content.html
View file

@ -2,21 +2,21 @@
<head>
</head>
<body>
<div id="omni-extension" class="closing omni-extension">
<div id="omni-extension" class="omni-closing omni-extension">
<div id="omni-wrap">
<div id="omni">
<div id="search">
<div id="omni-search">
<input placeholder="Type a command or search">
</div>
<div id="list">
<div id="omni-list">
</div>
<div id="footer">
<div id="results">153 results</div>
<div id="arrows">Use arrow keys <span class="shortcut">↑</span><span class="shortcut">↓</span> to navigate</div>
<div id="omni-footer">
<div id="omni-results">153 results</div>
<div id="omni-arrows">Use arrow keys <span class="omni-shortcut">↑</span><span class="omni-shortcut">↓</span> to navigate</div>
</div>
</div>
</div>
<div id="overlay"></div>
<div id="omni-overlay"></div>
</div>
</body>
</html>

76
src/content.js
View file

@ -19,48 +19,48 @@ $(document).ready(function(){
actions.forEach(function(action, index){
var keys = "";
if (action.keycheck) {
keys = "<div class='keys'>";
keys = "<div class='omni-keys'>";
action.keys.forEach(function(key){
keys += "<span class='shortcut'>"+key+"</span>";
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='icon'>";
var 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='emoji-action'>"+action.emojiChar+"</span>"
img = "<span class='omni-emoji-action'>"+action.emojiChar+"</span>"
}
if (index != 0) {
$("#omni-extension #list").append("<div class='item' data-type='"+action.type+"'>"+img+"<div class='item-details'><div class='item-name'>"+action.title+"</div><div class='item-desc'>"+action.desc+"</div></div>"+keys+"<div class='select'>Select <span class='shortcut'>⏎</span></div></div>");
$("#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 #list").append("<div class='item item-active' data-type='"+action.type+"'>"+img+"<div class='item-details'><div class='item-name'>"+action.title+"</div><div class='item-desc'>"+action.desc+"</div></div>"+keys+"<div class='select'>Select <span class='shortcut'>⏎</span></div></div>");
$("#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 #results").html(actions.length+" results");
$(".omni-extension #omni-results").html(actions.length+" results");
}
// Add actions to the omni
function populateOmniHistory(actions) {
$("#omni-extension #list").html("");
$("#omni-extension #omni-list").html("");
actions.forEach(function(action, index){
var keys = "";
if (action.keycheck) {
keys = "<div class='keys'>";
keys = "<div class='omni-keys'>";
action.keys.forEach(function(key){
keys += "<span class='shortcut'>"+key+"</span>";
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='icon'>";
var 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='emoji-action'>"+action.emojiChar+"</span>"
img = "<span class='omni-emoji-action'>"+action.emojiChar+"</span>"
}
if (index != 0) {
$("#omni-extension #list").append("<div class='item' data-type='"+action.type+"' data-url='"+action.url+"'>"+img+"<div class='item-details'><div class='item-name'>"+action.title+"</div><div class='item-desc'>"+action.desc+"</div></div>"+keys+"<div class='select'>Select <span class='shortcut'>⏎</span></div></div>");
$("#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.desc+"</div></div>"+keys+"<div class='omni-select'>Select <span class='omni-shortcut'>⏎</span></div></div>");
} else {
$("#omni-extension #list").append("<div class='item item-active' data-type='"+action.type+"' data-url='"+action.url+"'>"+img+"<div class='item-details'><div class='item-name'>"+action.title+"</div><div class='item-desc'>"+action.desc+"</div></div>"+keys+"<div class='select'>Select <span class='shortcut'>⏎</span></div></div>");
$("#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.desc+"</div></div>"+keys+"<div class='omni-select'>Select <span class='omni-shortcut'>⏎</span></div></div>");
}
})
$(".omni-extension #results").html(actions.length+" results");
$(".omni-extension #omni-results").html(actions.length+" results");
}
// Open the omni
@ -71,7 +71,7 @@ $(document).ready(function(){
populateOmni();
$("#omni-extension input").val("");
$("html, body").stop();
$("#omni-extension").removeClass("closing");
$("#omni-extension").removeClass("omni-closing");
window.setTimeout(function(){
$("#omni-extension input").focus();
}, 100);
@ -81,13 +81,13 @@ $(document).ready(function(){
// Close the omni
function closeOmni() {
isOpen = false;
$("#omni-extension").addClass("closing");
$("#omni-extension").addClass("omni-closing");
}
// Hover over an action in the omni
function hoverItem() {
$(".item-active").removeClass("item-active");
$(this).addClass("item-active");
$(".omni-item-active").removeClass("omni-item-active");
$(this).addClass("omni-item-active");
}
// Search for an action in the omni
@ -104,14 +104,14 @@ $(document).ready(function(){
});
} else {
populateOmni();
$("#omni-extension #list .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");
} else {
tempvalue = value.replace("/tabs ", "");
$(this).toggle(($(this).find(".item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".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("/bookmarks")) {
var tempvalue = value.replace("/bookmarks ", "");
@ -119,7 +119,7 @@ $(document).ready(function(){
$(this).toggle($(this).attr("data-type") == "bookmark");
} else {
tempvalue = value.replace("/bookmarks ", "");
$(this).toggle(($(this).find(".item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".item-desc").text().toLowerCase().indexOf(tempvalue) > -1) && $(this).attr("data-type") == "bookmark");
$(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");
}
} else if (value.startsWith("/remove")) {
var tempvalue = value.replace("/remove ", "");
@ -127,7 +127,7 @@ $(document).ready(function(){
$(this).toggle($(this).attr("data-type") == "bookmark" || $(this).attr("data-type") == "tab");
} else {
tempvalue = value.replace("/remove ", "");
$(this).toggle(($(this).find(".item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".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 ", "");
@ -135,19 +135,19 @@ $(document).ready(function(){
$(this).toggle($(this).attr("data-type") == "action");
} else {
tempvalue = value.replace("/actions ", "");
$(this).toggle(($(this).find(".item-name").text().toLowerCase().indexOf(tempvalue) > -1 || $(this).find(".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(".item-name").text().toLowerCase().indexOf(value) > -1 || $(this).find(".item-desc").text().toLowerCase().indexOf(value) > -1);
$(this).toggle($(this).find(".omni-item-name").text().toLowerCase().indexOf(value) > -1 || $(this).find(".omni-item-desc").text().toLowerCase().indexOf(value) > -1);
}
});
}
$(".omni-extension #results").html($("#omni-extension #list .item:visible").length+" results");
$(".omni-extension #omni-results").html($("#omni-extension #omni-list .omni-item:visible").length+" results");
}
// Handle actions from the omni
function handleAction() {
var action = actions.find(x => x.title == $(".item-active .item-name").text());
var 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});
@ -221,19 +221,19 @@ $(document).ready(function(){
if (down[38]) {
// Up key
if ($(".item-active").prevAll("div").not(":hidden").first().length) {
var previous = $(".item-active").prevAll("div").not(":hidden").first();
$(".item-active").removeClass("item-active");
previous.addClass("item-active");
if ($(".omni-item-active").prevAll("div").not(":hidden").first().length) {
var previous = $(".omni-item-active").prevAll("div").not(":hidden").first();
$(".omni-item-active").removeClass("item-active");
previous.addClass("omni-item-active");
previous[0].scrollIntoView({block:"nearest", inline:"nearest"});
}
} else if (down[40]) {
// Down key
if ($(".item-active").nextAll("div").not(":hidden").first().length) {
var next = $(".item-active").nextAll("div").not(":hidden").first();
$(".item-active").removeClass("item-active");
next.addClass("item-active");
if ($(".omni-item-active").nextAll("div").not(":hidden").first().length) {
var 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"});
}
} else if (down[27] && isOpen) {
@ -261,8 +261,8 @@ $(document).ready(function(){
// Events
$(document).on("click", "#open-page-omni-extension-thing", openShortcuts);
$(document).on("mouseover", ".omni-extension .item:not(.item-active)", hoverItem);
$(document).on("mouseover", ".omni-extension .omni-item:not(.omni-item-active)", hoverItem);
$(document).on("input", ".omni-extension input", search);
$(document).on("click", ".item-active", handleAction);
$(document).on("click", ".omni-extension #overlay", closeOmni);
$(document).on("click", ".omni-item-active", handleAction);
$(document).on("click", ".omni-extension #omni-overlay", closeOmni);
});

2
src/manifest.json
View file

@ -2,7 +2,7 @@
"name": "Omni",
"description": "Supercharge Chrome with commands, shortcuts, and more",
"offline_enabled": true,
"version": "1.0.2",
"version": "1.0.3",
"manifest_version": 3,
"action": {
"icons": {