diff options
Diffstat (limited to 'extension/src/components/Bookmark.tsx')
| -rw-r--r-- | extension/src/components/Bookmark.tsx | 165 |
1 files changed, 48 insertions, 117 deletions
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx index 5a406eb..2442e02 100644 --- a/extension/src/components/Bookmark.tsx +++ b/extension/src/components/Bookmark.tsx @@ -3,8 +3,7 @@ import React, {SyntheticEvent, useEffect} from "react"; import {getBrowser} from "../main.tsx"; import {ActiveDrag, Settings} from "./Body.tsx"; import ColorThief from 'colorthief' -import CreateFolderIcon from "../assets/create_folder.svg?react" -import react from "@vitejs/plugin-react"; +import DropTargets from "./DropTargets.tsx"; /** * A component for a single bookmark @@ -12,16 +11,14 @@ import react from "@vitejs/plugin-react"; * @param props.data The BookmarkTreeNode with the data for the bookmark */ function Bookmark(props: {data: BookmarkTreeNode}) { + let [settings, _] = React.useContext(Settings); + let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag); + let [favicon, setFavicon] = React.useState<string | null>(null); let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter"); - let [settings, setSettings] = React.useContext(Settings); let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null) let [bgColorPriority, setBgColorPriority] = React.useState(0); - let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag); - let [dropRight, setDropRight] = React.useState(false); - let [dropLeft, setDropLeft] = React.useState(false); - let [dropCenter, setDropCenter] = React.useState(false); - let [thisDragged, setThisDragged] = React.useState(false); + useEffect(() => { faviconURL(props.data).then(r => { @@ -32,12 +29,6 @@ function Bookmark(props: {data: BookmarkTreeNode}) { }) }, []); - useEffect(() => { - setDropLeft(false); - setDropRight(false); - setDropCenter(false); - }, [activeDrag]); - function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) { if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) { setIconMode("large") @@ -47,27 +38,51 @@ function Bookmark(props: {data: BookmarkTreeNode}) { } } - function handleDragStart(e: React.DragEvent<HTMLAnchorElement>) { - // e.dataTransfer.setData("text/bm-id", props.data.id); - // setActiveDrag(true); - console.log("data", e.dataTransfer.getData("text/bm-id").toString()) - } - - function handleDrag(e: React.DragEvent<HTMLAnchorElement>) { - // e.dataTransfer.setData("text/bm-id", props.data.id); + // Dragging + function handleDrag() { setActiveDrag(props.data); - setThisDragged(true); - // e.dataTransfer.dropEffect = "move"; } function handleDragEnd() { setActiveDrag(null); - setThisDragged(false); + } + + // Dropping + function handleDropLeft() { + console.log("drop left bm") + getBrowser().bookmarks.move(activeDrag!.id, { + parentId: props.data.parentId, + index: props.data.index + }) + location.reload() + } + + function handleDropRight() { + console.log("drop right bm") + getBrowser().bookmarks.move(activeDrag!.id, { + parentId: props.data.parentId, + index: (props.data.index! + 1) + }) + location.reload(); + } + + function handleDropCenter() { + console.log("drop center bm") + chrome.bookmarks.create({ + // type: "folder", + parentId: props.data.parentId, + index: props.data.index, + title: "New Folder" + }).then(r => { + getBrowser().bookmarks.move(props.data.id, {parentId: r.id}); + getBrowser().bookmarks.move(activeDrag!.id, {parentId: r.id}); + location.reload() + }) } return( <div className={"bookmark"}> - <a draggable={settings.editMode} href={props.data.url} onDragStart={handleDragStart} onDrag={handleDrag} onDragEnd={handleDragEnd}> + <a href={props.data.url} draggable={settings.editMode} onDrag={handleDrag} onDragEnd={handleDragEnd}> <div className={"icon-box " + (iconMode)} style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}> {(() => { switch (iconMode) { case "letter": { @@ -88,92 +103,8 @@ function Bookmark(props: {data: BookmarkTreeNode}) { </div> <span>{props.data.title}</span> </a> - {activeDrag && !thisDragged && ( - <div className={"drop-targets"}> - <div - className={"left"} - onDragOver={e => { - e.preventDefault() - setDropLeft(true) - }} - onDragEnter={e =>{ - e.preventDefault() - }} - onDragLeave={_ => { - setDropLeft(false) - }} - onDrop={e => { - getBrowser().bookmarks.move(activeDrag.id, { - parentId: props.data.parentId, - index: props.data.index - }) - location.reload() - }} - style={dropLeft ? undefined : {opacity: 0}} - // hidden={!dropLeft} - > - <div/> - </div> - <div - className={"right"} - onDragOver={e => { - e.preventDefault(); - setDropRight(true); - }} - onDragEnter={e => { - e.preventDefault(); - }} - onDragLeave={_ => { - setDropRight(false) - }} - onDrop={e => { - getBrowser().bookmarks.move(activeDrag.id, { - parentId: props.data.parentId, - index: (props.data.index! + 1) - }) - location.reload() - e.preventDefault() - }} - style={dropRight ? undefined : {opacity: 0}} - // hidden={!dropRight} - > - <div/> - </div> - <div - className={"center"} - onDragOver={e => { - e.preventDefault() - setDropCenter(true) - // console.log("dropped") - }} - onDragEnter={e => { - e.preventDefault() - // console.log("enter") - }} - onDragLeave={_ => { - setDropCenter(false) - // console.log("exit") - }} - onDrop={e => { - e.preventDefault(); - chrome.bookmarks.create({ - // type: "folder", - parentId: props.data.parentId, - index: props.data.index, - title: "New Folder" - }).then(r => { - getBrowser().bookmarks.move(props.data.id, {parentId: r.id}); - getBrowser().bookmarks.move(activeDrag?.id, {parentId: r.id}); - location.reload() - }) - }} - style={dropCenter ? undefined : {opacity: 0}} - // hidden={!dropCenter} - > - <CreateFolderIcon/> - </div> - </div> - )} + {activeDrag && activeDrag !== props.data && + <DropTargets onDropLeft={handleDropLeft} onDropRight={handleDropRight} onDropCenter={handleDropCenter}/>} </div> ); } @@ -211,7 +142,7 @@ function toDataURL(url:string):string { } function djb2(str: string){ - var hash = 5381; + let hash = 5381; for (var i = 0; i < str.length; i++) { hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */ } @@ -219,10 +150,10 @@ function djb2(str: string){ } function hashStringToColor(str: string): [number, number, number] { - var hash = djb2(str); - var r = (hash & 0xFF0000) >> 16; - var g = (hash & 0x00FF00) >> 8; - var b = hash & 0x0000FF; + let hash = djb2(str); + let r = (hash & 0xFF0000) >> 16; + let g = (hash & 0x00FF00) >> 8; + let b = hash & 0x0000FF; return [r, g, b]; } |