mirror of
https://github.com/sussy-code/smov.git
synced 2025-01-01 16:37:39 +01:00
Implement functionality to open URL in new tab on middle click
Added handleClick function to check for middle mouse button (event.button === 1), opening the URL in a new tab using window.open. Improves user experience by offering an alternative method to open URLs without leaving the current page.
This commit is contained in:
parent
b6c894a87a
commit
5275c56725
1 changed files with 14 additions and 1 deletions
|
@ -1,3 +1,4 @@
|
||||||
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
@ -7,11 +8,23 @@ export function BackLink(props: { url: string }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
event.preventDefault();
|
||||||
|
// Check if center mouse button is clicked
|
||||||
|
if (event.button === 1) {
|
||||||
|
// Open the URL in a new tab
|
||||||
|
window.open(props.url, "_blank");
|
||||||
|
} else {
|
||||||
|
// Navigate normally for other clicks
|
||||||
|
navigate(props.url);
|
||||||
|
}
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => navigate(props.url)}
|
onContextMenu={(e) => e.preventDefault()}
|
||||||
|
onMouseUp={handleClick}
|
||||||
className="py-1 -my-1 px-2 -mx-2 tabbable rounded-lg flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
|
className="py-1 -my-1 px-2 -mx-2 tabbable rounded-lg flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
|
||||||
>
|
>
|
||||||
<Icon className="mr-2" icon={Icons.ARROW_LEFT} />
|
<Icon className="mr-2" icon={Icons.ARROW_LEFT} />
|
||||||
|
|
Loading…
Reference in a new issue