Creating Boxes that can be Drag and Drop Imported as Tiddlers

5

While this isn’t the best code, I’ll leave this here for any who want to do the same / want an example to learn from.

Edit: Here’s a link where you can test it after installing

// ==UserScript==
// @name         GoodReads Quote TW Dragger
// @license      MIT
// @version      1.0
// @description  Adds a draggable block to drag GoodReads quotes to TW
// @author       Gamedungeon
// @match     http*://www.goodreads.com/author/quotes/*
// ==/UserScript==

(function() {
    'use strict';

    var quotes = Array.from(document.getElementsByClassName('quote'));

    quotes.forEach((quote) => {

        const fancy_regex = /[“”]+/g;
        const comma_regex = /[,]+/g;

        const data = {
            tags: "Quotes",
            author: quote.querySelector(".authorOrTitle").innerText.replace(comma_regex, '').trim(),
            title: quote.querySelector(".quoteText").firstChild.nodeValue.replace(fancy_regex, '').trim(),
            source: quote.querySelectorAll(".authorOrTitle")[1]?.innerText.trim()
        };

        var a = quote.querySelector(".action");
        const p = document.createElement("div");

        var custom_style = {
            "border-radius": "3px",
            border: "1px solid #D6D0C4",
            appearance: "none",
            cursor: "pointer",
            display: "inline-block",
            "text-decoration": "none",
            color: "#333333",
            "background-color": "#F4F1EA",
            padding: "4px 12px",
            "margin-top": "10px",
            "font-size": "11px"
        }

        Object.assign(p.style,custom_style);


        p.setAttribute('draggable', true);

        p.addEventListener('dragstart', (event) => {
            event.dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(data)));
            event.stopPropagation();
            return false;
        });

        var text = document.createTextNode("Drag to TW");
        p.appendChild(text);

        a.appendChild(p);
    })

})();
4 Likes