mirror of
https://github.com/alyssaxuu/omni.git
synced 2026-03-11 08:54:35 +00:00
perf: Render only what is visible
This commit is contained in:
parent
974215bf3f
commit
cfa98f54ed
8 changed files with 41 additions and 13 deletions
|
|
@ -84,7 +84,8 @@ $(document).ready(() => {
|
|||
function populateOmniFilter(actions) {
|
||||
isFiltered = true;
|
||||
$("#omni-extension #omni-list").html("");
|
||||
actions.forEach((action, index) => {
|
||||
const renderRow = (index) => {
|
||||
const action = actions[index]
|
||||
var keys = "";
|
||||
if (action.keycheck) {
|
||||
keys = "<div class='omni-keys'>";
|
||||
|
|
@ -93,17 +94,23 @@ $(document).ready(() => {
|
|||
});
|
||||
keys += "</div>";
|
||||
}
|
||||
var img = "<img src='"+action.favIconUrl+"' alt='favicon' onerror='this.src=""+browser.runtime.getURL("/assets/globe.svg")+""' class='omni-icon'>";
|
||||
var 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) {
|
||||
$("#omni-extension #omni-list").append("<div class='omni-item' data-index='"+index+"' 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>");
|
||||
return $("<div class='omni-item' data-index='"+index+"' 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>")[0]
|
||||
} else {
|
||||
$("#omni-extension #omni-list").append("<div class='omni-item omni-item-active' data-index='"+index+"' 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>");
|
||||
return $("<div class='omni-item omni-item-active' data-index='"+index+"' 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>")[0]
|
||||
}
|
||||
})
|
||||
$(".omni-extension #omni-results").html(actions.length+" results");
|
||||
}
|
||||
actions.length && new VirtualizedList.default($("#omni-extension #omni-list")[0], {
|
||||
height: 400,
|
||||
rowHeight: 60,
|
||||
rowCount: actions.length,
|
||||
renderRow,
|
||||
onMount: () => $(".omni-extension #omni-results").html(actions.length+" results"),
|
||||
});
|
||||
}
|
||||
|
||||
// Open the omni
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
"<all_urls>"
|
||||
],
|
||||
"run_at": "document_end",
|
||||
"js": ["focus.js", "jquery.js", "content.js"],
|
||||
"js": ["focus.js", "jquery.js", "content.js", "virtualized-list.min.js"],
|
||||
"css": ["content.css"]
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -14,5 +14,6 @@
|
|||
|
||||
<script src="jquery.js"></script>
|
||||
<script src="content.js"></script>
|
||||
<script src="virtualized-list.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
6
firefox/virtualized-list.min.js
vendored
Normal file
6
firefox/virtualized-list.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -83,7 +83,8 @@ $(document).ready(() => {
|
|||
function populateOmniFilter(actions) {
|
||||
isFiltered = true;
|
||||
$("#omni-extension #omni-list").html("");
|
||||
actions.forEach((action, index) => {
|
||||
const renderRow = (index) => {
|
||||
const action = actions[index]
|
||||
var keys = "";
|
||||
if (action.keycheck) {
|
||||
keys = "<div class='omni-keys'>";
|
||||
|
|
@ -97,12 +98,18 @@ $(document).ready(() => {
|
|||
img = "<span class='omni-emoji-action'>"+action.emojiChar+"</span>"
|
||||
}
|
||||
if (index != 0) {
|
||||
$("#omni-extension #omni-list").append("<div class='omni-item' data-index='"+index+"' 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>");
|
||||
return $("<div class='omni-item' data-index='"+index+"' 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>")[0]
|
||||
} else {
|
||||
$("#omni-extension #omni-list").append("<div class='omni-item omni-item-active' data-index='"+index+"' 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>");
|
||||
return $("<div class='omni-item omni-item-active' data-index='"+index+"' 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>")[0]
|
||||
}
|
||||
})
|
||||
$(".omni-extension #omni-results").html(actions.length+" results");
|
||||
}
|
||||
actions.length && new VirtualizedList.default($("#omni-extension #omni-list")[0], {
|
||||
height: 400,
|
||||
rowHeight: 60,
|
||||
rowCount: actions.length,
|
||||
renderRow,
|
||||
onMount: () => $(".omni-extension #omni-results").html(actions.length+" results"),
|
||||
});
|
||||
}
|
||||
|
||||
// Open the omni
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
"<all_urls>"
|
||||
],
|
||||
"run_at": "document_end",
|
||||
"js": ["focus.js", "jquery.js", "content.js"],
|
||||
"js": ["focus.js", "jquery.js", "content.js", "virtualized-list.min.js"],
|
||||
"css": ["content.css"]
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -14,5 +14,6 @@
|
|||
|
||||
<script src="jquery.js"></script>
|
||||
<script src="content.js"></script>
|
||||
<script src="virtualized-list.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
6
src/virtualized-list.min.js
vendored
Normal file
6
src/virtualized-list.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue