fix(web-clipper): bouton rond transparent draggable + toggle affichage + refresh auto sidebar + fix bloc bookmark (v6.2.1)
- bouton flottant rond (44px), semi-transparent blur, hover plus fonce, deplacable souris (pos persistee storage) - option afficher/cacher dans popup extension (showButton) - clipper: notification instantanee des onglets FlowDeck via tabs.sendMessage + polling 15s + BroadcastChannel + visibilitychange - fix bookmark template literal '+title+' -> \/\/\/\/\ (_page_editor_scripts.html) - sync static/extension + zip
This commit is contained in:
+179
-11
@@ -5,18 +5,151 @@
|
||||
window.__fdClipperInjected = true;
|
||||
|
||||
const BTN_ID = "fd-clipper-btn";
|
||||
const STORAGE_KEY = "flowdeck_clipper";
|
||||
let dragState = null;
|
||||
|
||||
function createFloatButton() {
|
||||
async function getCfg() {
|
||||
try {
|
||||
const data = await chrome.storage.local.get(STORAGE_KEY);
|
||||
return data[STORAGE_KEY] || {};
|
||||
} catch (e) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
async function createFloatButton() {
|
||||
const cfg = await getCfg();
|
||||
if (cfg.showButton === false) return;
|
||||
if (document.getElementById(BTN_ID)) return;
|
||||
if (!document.body) return;
|
||||
const btn = document.createElement("button");
|
||||
btn.id = BTN_ID;
|
||||
btn.className = "fd-clipper-btn";
|
||||
btn.textContent = "📌 Clip to FlowDeck";
|
||||
btn.title = "Clip this page to FlowDeck";
|
||||
btn.addEventListener("click", () => openClipper("article"));
|
||||
btn.textContent = "📌";
|
||||
btn.title = "Clip to FlowDeck (glisser pour déplacer)";
|
||||
btn.setAttribute("aria-label", "Clip to FlowDeck");
|
||||
// Apply saved position
|
||||
const pos = cfg.pos;
|
||||
if (pos && typeof pos.left === "number" && typeof pos.top === "number") {
|
||||
btn.style.left = pos.left + "px";
|
||||
btn.style.top = pos.top + "px";
|
||||
btn.style.right = "auto";
|
||||
btn.style.bottom = "auto";
|
||||
}
|
||||
btn.addEventListener("click", (e) => {
|
||||
if (btn.dataset.dragged === "1") {
|
||||
btn.dataset.dragged = "0";
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
openClipper("article");
|
||||
});
|
||||
btn.addEventListener("mousedown", onDragStart);
|
||||
document.body.appendChild(btn);
|
||||
}
|
||||
|
||||
function removeFloatButton() {
|
||||
const el = document.getElementById(BTN_ID);
|
||||
if (el) el.remove();
|
||||
}
|
||||
|
||||
function applyVisibility(show) {
|
||||
if (show === false) {
|
||||
removeFloatButton();
|
||||
} else {
|
||||
const el = document.getElementById(BTN_ID);
|
||||
if (el) el.style.display = "";
|
||||
else createFloatButton();
|
||||
}
|
||||
}
|
||||
|
||||
function onDragStart(e) {
|
||||
if (e.button !== 0) return;
|
||||
const btn = e.currentTarget;
|
||||
const rect = btn.getBoundingClientRect();
|
||||
dragState = {
|
||||
btn: btn,
|
||||
offsetX: e.clientX - rect.left,
|
||||
offsetY: e.clientY - rect.top,
|
||||
startX: e.clientX,
|
||||
startY: e.clientY,
|
||||
moved: false
|
||||
};
|
||||
// Prevent text selection during drag
|
||||
e.preventDefault();
|
||||
document.addEventListener("mousemove", onDragMove);
|
||||
document.addEventListener("mouseup", onDragEnd);
|
||||
btn.classList.add("fd-dragging");
|
||||
}
|
||||
|
||||
function onDragMove(e) {
|
||||
if (!dragState) return;
|
||||
const dx = Math.abs(e.clientX - dragState.startX);
|
||||
const dy = Math.abs(e.clientY - dragState.startY);
|
||||
if (dx > 3 || dy > 3) dragState.moved = true;
|
||||
const btn = dragState.btn;
|
||||
let left = e.clientX - dragState.offsetX;
|
||||
let top = e.clientY - dragState.offsetY;
|
||||
const maxLeft = window.innerWidth - btn.offsetWidth - 4;
|
||||
const maxTop = window.innerHeight - btn.offsetHeight - 4;
|
||||
left = Math.max(4, Math.min(left, maxLeft));
|
||||
top = Math.max(4, Math.min(top, maxTop));
|
||||
btn.style.left = left + "px";
|
||||
btn.style.top = top + "px";
|
||||
btn.style.right = "auto";
|
||||
btn.style.bottom = "auto";
|
||||
}
|
||||
|
||||
async function onDragEnd(e) {
|
||||
document.removeEventListener("mousemove", onDragMove);
|
||||
document.removeEventListener("mouseup", onDragEnd);
|
||||
if (!dragState) return;
|
||||
const btn = dragState.btn;
|
||||
btn.classList.remove("fd-dragging");
|
||||
const moved = dragState.moved;
|
||||
dragState = null;
|
||||
if (moved) {
|
||||
// Suppress next click
|
||||
btn.dataset.dragged = "1";
|
||||
setTimeout(() => { btn.dataset.dragged = "0"; }, 400);
|
||||
const left = parseInt(btn.style.left, 10);
|
||||
const top = parseInt(btn.style.top, 10);
|
||||
if (!isNaN(left) && !isNaN(top)) {
|
||||
try {
|
||||
const data = await chrome.storage.local.get(STORAGE_KEY);
|
||||
const cfg = data[STORAGE_KEY] || {};
|
||||
cfg.pos = { left: left, top: top };
|
||||
await chrome.storage.local.set({ [STORAGE_KEY]: cfg });
|
||||
} catch (_e) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Listen to storage changes (show/hide toggle & position sync across tabs)
|
||||
try {
|
||||
if (chrome.storage && chrome.storage.onChanged) {
|
||||
chrome.storage.onChanged.addListener((changes, area) => {
|
||||
if (area !== "local" || !changes[STORAGE_KEY]) return;
|
||||
const nv = changes[STORAGE_KEY].newValue || {};
|
||||
const ov = changes[STORAGE_KEY].oldValue || {};
|
||||
if (nv.showButton !== ov.showButton) {
|
||||
applyVisibility(nv.showButton !== false);
|
||||
}
|
||||
// Position already handled via direct style; if changed elsewhere sync it
|
||||
if (nv.pos && JSON.stringify(nv.pos) !== JSON.stringify(ov.pos)) {
|
||||
const el = document.getElementById(BTN_ID);
|
||||
if (el && nv.pos.left != null) {
|
||||
el.style.left = nv.pos.left + "px";
|
||||
el.style.top = nv.pos.top + "px";
|
||||
el.style.right = "auto";
|
||||
el.style.bottom = "auto";
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (_e) {}
|
||||
|
||||
function getSelectionHtml() {
|
||||
const sel = window.getSelection();
|
||||
if (!sel || sel.rangeCount === 0 || sel.toString().trim().length < 3) return "";
|
||||
@@ -44,13 +177,12 @@
|
||||
author: document.querySelector('meta[name="author"]')?.content || ""
|
||||
}
|
||||
};
|
||||
// Send to background
|
||||
try {
|
||||
const resp = await chrome.runtime.sendMessage({ action: "clip", data: payload });
|
||||
if (resp && resp.error === "not_authenticated") {
|
||||
alert("FlowDeck: not authenticated. Open FlowDeck settings to connect the clipper.");
|
||||
} else if (resp && resp.status === "ok") {
|
||||
showToast("Clipped to FlowDeck ✓ — page " + resp.page_id);
|
||||
showToast("Clipped to FlowDeck \u2713 \u2014 page " + resp.page_id);
|
||||
} else if (resp && resp.error) {
|
||||
showToast("Clip failed: " + resp.error, true);
|
||||
}
|
||||
@@ -74,10 +206,46 @@
|
||||
setTimeout(() => t.classList.remove("show"), 3000);
|
||||
}
|
||||
|
||||
// Context menu via right-click: if selection exists, inject inline menu
|
||||
document.addEventListener("mouseup", () => {
|
||||
// No heavy UI here; popup/background handles contextMenus API
|
||||
});
|
||||
// Runtime messages: from background (context menu, refresh) or popup
|
||||
try {
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
if (!message || !message.action) return;
|
||||
if (message.action === "clipSelection") {
|
||||
openClipper("selection");
|
||||
try { sendResponse({ ok: true }); } catch (_e) {}
|
||||
return true;
|
||||
}
|
||||
if (message.action === "fdRefreshTree" || message.action === "refreshTree" || message.action === "fdClipCreated") {
|
||||
// FlowDeck page refresh signal (injected on FlowDeck origin)
|
||||
try {
|
||||
if (window.appState && typeof window.appState.refreshSidebarTree === "function") {
|
||||
window.appState.refreshSidebarTree();
|
||||
} else {
|
||||
window.dispatchEvent(new CustomEvent("flowdeck:clip-created", { detail: message.data || {} }));
|
||||
document.dispatchEvent(new CustomEvent("flowdeck:workspace-changed"));
|
||||
// Fallback: try calling global
|
||||
if (window.FlowDeck && window.FlowDeck._toast) {}
|
||||
}
|
||||
// Also try direct fetch fallback
|
||||
const ul = document.getElementById("sidebar-workspace-items");
|
||||
if (ul && window.appState && window.appState.refreshSidebarTree) {
|
||||
window.appState.refreshSidebarTree();
|
||||
}
|
||||
} catch (_e) {}
|
||||
try { sendResponse({ ok: true }); } catch (_e) {}
|
||||
return true;
|
||||
}
|
||||
if (message.action === "toggleButton") {
|
||||
applyVisibility(message.show);
|
||||
try { sendResponse({ ok: true }); } catch (_e) {}
|
||||
return true;
|
||||
}
|
||||
if (message.action === "getSelectionHtml") {
|
||||
try { sendResponse({ html: getSelectionHtml() }); } catch (_e) {}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {}
|
||||
|
||||
// Keyboard shortcut Ctrl+Shift+C
|
||||
document.addEventListener("keydown", (e) => {
|
||||
@@ -87,7 +255,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Expose for popup
|
||||
// Expose for popup / background scripting
|
||||
window.__fdOpenClipper = openClipper;
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
|
||||
Reference in New Issue
Block a user