From 4c7e1bc2bf7ed97d93649e40351b048a06b5d0fd Mon Sep 17 00:00:00 2001 From: sowgro Date: Fri, 6 Dec 2024 18:36:12 -0500 Subject: improve drag n drop and refactor --- extension/src/components/Bookmark.tsx | 165 ++++++++++------------------------ 1 file changed, 48 insertions(+), 117 deletions(-) (limited to 'extension/src/components/Bookmark.tsx') 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(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) { 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) { - // 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) { - // 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(
- +
{(() => { switch (iconMode) { case "letter": { @@ -88,92 +103,8 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
{props.data.title} - {activeDrag && !thisDragged && ( -
-
{ - 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} - > -
-
-
{ - 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} - > -
-
-
{ - 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} - > - -
-
- )} + {activeDrag && activeDrag !== props.data && + }
); } @@ -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]; } -- cgit v1.2.3 From 1ca4340e46f7fec3d2689cb8a3c60f9018ead048 Mon Sep 17 00:00:00 2001 From: sowgro Date: Tue, 17 Dec 2024 03:16:10 -0500 Subject: backup push: not quite working --- extension/src/components/Bookmark.tsx | 139 +++++++++++++++++++++++----------- 1 file changed, 95 insertions(+), 44 deletions(-) (limited to 'extension/src/components/Bookmark.tsx') diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx index 2442e02..e378b0f 100644 --- a/extension/src/components/Bookmark.tsx +++ b/extension/src/components/Bookmark.tsx @@ -1,33 +1,63 @@ import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; -import React, {SyntheticEvent, useEffect} from "react"; +import React, {SyntheticEvent, useContext, useEffect, useState} from "react"; import {getBrowser} from "../main.tsx"; -import {ActiveDrag, Settings} from "./Body.tsx"; +import {ActiveDrag, ActiveEdit, Settings} from "./Body.tsx"; import ColorThief from 'colorthief' import DropTargets from "./DropTargets.tsx"; +import ContextMenu from "./ContextMenu.tsx"; /** * A component for a single bookmark - * - * @param props.data The BookmarkTreeNode with the data for the bookmark */ -function Bookmark(props: {data: BookmarkTreeNode}) { - let [settings, _] = React.useContext(Settings); +function Bookmark(props: {id: string}) { + let [settings] = React.useContext(Settings); let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag); + const [, setActiveEdit] = useContext(ActiveEdit) let [favicon, setFavicon] = React.useState(null); let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter"); let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null) let [bgColorPriority, setBgColorPriority] = React.useState(0); + const [bmData, setBmData] = useState() + const [renameMode, setRenameMode] = useState(false); + + useEffect(() => { + getBrowser().bookmarks.get(props.id).then(r => { + setBmData(r[0]); + }) + getBrowser().bookmarks.onChanged.addListener((id: string) => { + if (id !== props.id) return; + getBrowser().bookmarks.get(props.id).then(r => { + setBmData(r[0]); + }) + }) + }, []); useEffect(() => { - faviconURL(props.data).then(r => { + if (!bmData) return; + faviconURL(bmData).then(r => { if (r) { setFavicon(r) setIconMode("small"); } }) - }, []); + }, [bmData]); + + useEffect(() => { + let evl = () => { + console.log("clicked") + renameMode && setRenameMode(false); + console.log("evl unregistered") + document.body.removeEventListener('click', evl); + } + if (renameMode) { + console.log("evl registered") + document.body.addEventListener('click', evl); + } + }, [renameMode]); + + if (!bmData) return; function handleImageLoad(e: SyntheticEvent) { if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) { @@ -39,71 +69,92 @@ function Bookmark(props: {data: BookmarkTreeNode}) { } // Dragging - function handleDrag() { - setActiveDrag(props.data); - } + const handleDrag = () => { + setActiveDrag(bmData); + }; - function handleDragEnd() { + const handleDragEnd = () => { setActiveDrag(null); - } + }; // Dropping - function handleDropLeft() { + const handleDropLeft = () => { console.log("drop left bm") getBrowser().bookmarks.move(activeDrag!.id, { - parentId: props.data.parentId, - index: props.data.index + parentId: bmData.parentId, + index: bmData.index }) location.reload() - } + }; - function handleDropRight() { + const handleDropRight = () => { console.log("drop right bm") getBrowser().bookmarks.move(activeDrag!.id, { - parentId: props.data.parentId, - index: (props.data.index! + 1) + parentId: bmData.parentId, + index: (bmData.index! + 1) }) location.reload(); - } + }; - function handleDropCenter() { + const handleDropCenter = () => { console.log("drop center bm") chrome.bookmarks.create({ // type: "folder", - parentId: props.data.parentId, - index: props.data.index, + parentId: bmData.parentId, + index: bmData.index, title: "New Folder" }).then(r => { - getBrowser().bookmarks.move(props.data.id, {parentId: r.id}); + getBrowser().bookmarks.move(bmData.id, {parentId: r.id}); getBrowser().bookmarks.move(activeDrag!.id, {parentId: r.id}); location.reload() }) - } + }; + + const handleDelete = () => { + getBrowser().bookmarks.remove(bmData.id); + location.reload(); + }; + + const handleEdit = (e: React.MouseEvent) => { + e.preventDefault() + setRenameMode(true) + // setActiveEdit(bmData); + }; return(
- -
- {(() => { switch (iconMode) { - case "letter": { - let url = new URL(props.data.url!); - if (bgColorPriority < 1) { - setBgColor(hashStringToColor(url.hostname)); - setBgColorPriority(1); + +
+ {(() => { + switch (iconMode) { + case "letter": { + let url = new URL(bmData.url!); + if (bgColorPriority < 1) { + setBgColor(hashStringToColor(url.hostname)); + setBgColorPriority(1); + } + return ({url.hostname.charAt(0)}) + } + case "small": { + return (Bookmark icon) + } + case "large": { + return (Bookmark icon) } - return ({url.hostname.charAt(0)}) - } - case "small": { - return (Bookmark icon) - } - case "large": { - return(Bookmark icon) } - }})()} + })()}
- {props.data.title} + {renameMode + ? { + getBrowser().bookmarks.update(props.id, {title: e.target.value}) + }}/> + : {bmData.title}} - {activeDrag && activeDrag !== props.data && + {settings.editMode && } + {activeDrag && activeDrag !== bmData && }
); -- cgit v1.2.3