ReverseImageSearch: add support for image modal
This commit is contained in:
parent
4d198e46bc
commit
13961a4ba5
|
@ -36,62 +36,68 @@ function search(src: string, engine: string) {
|
||||||
open(engine + encodeURIComponent(src), "_blank");
|
open(engine + encodeURIComponent(src), "_blank");
|
||||||
}
|
}
|
||||||
|
|
||||||
const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
|
function makeSearchItem(src: string) {
|
||||||
if (!props) return;
|
return (
|
||||||
const { reverseImageSearchType, itemHref, itemSrc } = props;
|
<Menu.MenuItem
|
||||||
|
label="Search Image"
|
||||||
|
key="search-image"
|
||||||
|
id="search-image"
|
||||||
|
>
|
||||||
|
{Object.keys(Engines).map((engine, i) => {
|
||||||
|
const key = "search-image-" + engine;
|
||||||
|
return (
|
||||||
|
<Menu.MenuItem
|
||||||
|
key={key}
|
||||||
|
id={key}
|
||||||
|
label={
|
||||||
|
<Flex style={{ alignItems: "center", gap: "0.5em" }}>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
borderRadius: i >= 3 // Do not round Google, Yandex & SauceNAO
|
||||||
|
? "50%"
|
||||||
|
: void 0
|
||||||
|
}}
|
||||||
|
aria-hidden="true"
|
||||||
|
height={16}
|
||||||
|
width={16}
|
||||||
|
src={new URL("/favicon.ico", Engines[engine]).toString().replace("lens.", "")}
|
||||||
|
/>
|
||||||
|
{engine}
|
||||||
|
</Flex>
|
||||||
|
}
|
||||||
|
action={() => search(src, Engines[engine])}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<Menu.MenuItem
|
||||||
|
key="search-image-all"
|
||||||
|
id="search-image-all"
|
||||||
|
label={
|
||||||
|
<Flex style={{ alignItems: "center", gap: "0.5em" }}>
|
||||||
|
<OpenExternalIcon height={16} width={16} />
|
||||||
|
All
|
||||||
|
</Flex>
|
||||||
|
}
|
||||||
|
action={() => Object.values(Engines).forEach(e => search(src, e))}
|
||||||
|
/>
|
||||||
|
</Menu.MenuItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (!reverseImageSearchType || reverseImageSearchType !== "img") return;
|
const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
|
||||||
|
if (props?.reverseImageSearchType !== "img") return;
|
||||||
|
|
||||||
const src = itemHref ?? itemSrc;
|
const src = props.itemHref ?? props.itemSrc;
|
||||||
|
|
||||||
const group = findGroupChildrenByChildId("copy-link", children);
|
const group = findGroupChildrenByChildId("copy-link", children);
|
||||||
if (group) {
|
group?.push(makeSearchItem(src));
|
||||||
group.push((
|
};
|
||||||
<Menu.MenuItem
|
|
||||||
label="Search Image"
|
const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
|
||||||
key="search-image"
|
if (!props?.src) return;
|
||||||
id="search-image"
|
|
||||||
>
|
const group = findGroupChildrenByChildId("copy-native-link", children) ?? children;
|
||||||
{Object.keys(Engines).map((engine, i) => {
|
group.push(makeSearchItem(props.src));
|
||||||
const key = "search-image-" + engine;
|
|
||||||
return (
|
|
||||||
<Menu.MenuItem
|
|
||||||
key={key}
|
|
||||||
id={key}
|
|
||||||
label={
|
|
||||||
<Flex style={{ alignItems: "center", gap: "0.5em" }}>
|
|
||||||
<img
|
|
||||||
style={{
|
|
||||||
borderRadius: i >= 3 // Do not round Google, Yandex & SauceNAO
|
|
||||||
? "50%"
|
|
||||||
: void 0
|
|
||||||
}}
|
|
||||||
aria-hidden="true"
|
|
||||||
height={16}
|
|
||||||
width={16}
|
|
||||||
src={new URL("/favicon.ico", Engines[engine]).toString().replace("lens.", "")}
|
|
||||||
/>
|
|
||||||
{engine}
|
|
||||||
</Flex>
|
|
||||||
}
|
|
||||||
action={() => search(src, Engines[engine])}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Menu.MenuItem
|
|
||||||
key="search-image-all"
|
|
||||||
id="search-image-all"
|
|
||||||
label={
|
|
||||||
<Flex style={{ alignItems: "center", gap: "0.5em" }}>
|
|
||||||
<OpenExternalIcon height={16} width={16} />
|
|
||||||
All
|
|
||||||
</Flex>
|
|
||||||
}
|
|
||||||
action={() => Object.values(Engines).forEach(e => search(src, e))}
|
|
||||||
/>
|
|
||||||
</Menu.MenuItem>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
|
@ -111,10 +117,12 @@ export default definePlugin({
|
||||||
],
|
],
|
||||||
|
|
||||||
start() {
|
start() {
|
||||||
addContextMenuPatch("message", imageContextMenuPatch);
|
addContextMenuPatch("message", messageContextMenuPatch);
|
||||||
|
addContextMenuPatch("image-context", imageContextMenuPatch);
|
||||||
},
|
},
|
||||||
|
|
||||||
stop() {
|
stop() {
|
||||||
removeContextMenuPatch("message", imageContextMenuPatch);
|
removeContextMenuPatch("message", messageContextMenuPatch);
|
||||||
|
removeContextMenuPatch("image-context", imageContextMenuPatch);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue