From 8ad470aaf5434005db4c59106dcbcf4cbc8cf49b Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 3 Dec 2024 00:02:21 -0500
Subject: Push drag and drop code so far
---
extension/src/components/Bookmark.tsx | 92 ++++++++++++++++++++++++++++++++++-
1 file changed, 90 insertions(+), 2 deletions(-)
(limited to 'extension/src/components/Bookmark.tsx')
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index d1c1756..fc73387 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -1,8 +1,9 @@
import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
import React, {SyntheticEvent, useEffect} from "react";
import {getBrowser} from "../main.tsx";
-import {Settings} from "./Body.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";
/**
@@ -15,6 +16,10 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
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 [activeDrag, setActiveDrag] = React.useContext(ActiveDrag);
+ let [dropRight, setDropRight] = React.useState(false);
+ let [dropLeft, setDropLeft] = React.useState(false);
+ let [dropCenter, setDropCenter] = React.useState(false);
useEffect(() => {
faviconURL(props.data).then(r => {
@@ -33,9 +38,15 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
}
}
+ function handleDrag(e: React.DragEvent<HTMLAnchorElement>) {
+ e.dataTransfer.dropEffect = "move";
+ e.dataTransfer.setData("bm-id", props.data.id);
+ setActiveDrag(true);
+ }
+
return(
<div className={"bookmark"}>
- <a draggable={settings.editMode} href={props.data.url}>
+ <a draggable={settings.editMode} href={props.data.url} onDrag={handleDrag} onDragEnd={_ => setActiveDrag(false)}>
<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": {
@@ -55,6 +66,83 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
</div>
<span>{props.data.title}</span>
</a>
+ {activeDrag && (
+ <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(e.dataTransfer.getData("bm-id"), {
+ parentId: props.data.parentId,
+ index: props.data.index
+ })
+ console.log("dropped")
+ }}
+ 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(e.dataTransfer.getData("bm-id"), {
+ parentId: props.data.parentId,
+ index: (props.data.index! + 1)
+ })
+ e.preventDefault()
+ console.log("dropped right", e.dataTransfer.getData("bm-id"))
+ }}
+ 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();
+ console.log("dropped")
+ }}
+ style={dropCenter ? undefined : {opacity: 0}}
+ // hidden={!dropCenter}
+ >
+ <CreateFolderIcon/>
+ </div>
+ </div>
+ )}
</div>
);
}
--
cgit v1.2.3