Initial upload of basic scripts and docs

Author: alixlahuec

README.md

@@ -1,2 +1,6 @@
 # roam-snippets
-A collection of code snippets to extend UX in Roam Research
+An index repository of personal code snippets I use in my Roam Research database
+
+ - **roam-copy-ref** : provides a copy-to-clipboard button to select blocks (made with the lightweight library [clipboard.js](https://clipboardjs.com)). It's the formatted (not raw) content that is copied : bold, italics, etc. are preserved. (I use it to copy formatted literature references, hence the name)
+ - **roam-get-linked-refs-data** : adds a data-... attribute to the top block of each page listed in Linked References, containing the page's title. This is handy for applying a specific formatting to certain results (e.g, don't show the breadcrumbs for results from pages called XXX) or adding some database-related functionality.
+ - **roam-get-paper-data** : adds a data-... attribute to particular page references, containing a piece of information related to that page. This is handy for displaying some page-specific information next to each reference instance, for example, or adding some database-related functionality. (I use it to add information about the full literature citation for every paper I reference, and display it on hover)

roam-copy-ref/README.md

@@ -0,0 +1,2 @@
+##roam-copy-ref
+Provides a copy-to-clipboard button (through lightweight library [clipboard.js](https://clipboardjs.com)) attached to each block nested under the `Citations::` attribute.

roam-copy-ref/roam-copy-ref.js

@@ -0,0 +1,46 @@
+
+/* How to import the clipboard.js library from CDN */
+
+var s = document.createElement("script");
+s.src = "https://unpkg.com/clipboard@2/dist/clipboard.min.js";
+s.id = "clipboard-js";
+s.type = "text/javascript";
+document.getElementsByTagName("head")[0].appendChild(s);
+
+/* How to create a button template */
+var btn = document.createElement("button");
+btn.textContent = "Copy ref";
+btn.classList.add("ref-btn");
+
+/* How to collect reference blocks on the page & add a clone of the button to each block */
+function addCopyButton(refblock) {
+    if (refblock.previousSibling.nodeName != "BUTTON") {
+        var parentDiv = refblock.parentNode;
+        parentDiv.insertBefore(btn.cloneNode(true), refblock);
+    }
+}
+function checkIfRef(button) {
+    if(!(button.closest('.roam-block-container').dataset.pathPageLinks.includes("Citations"))){
+        button.parentNode.removeChild(button);
+    }
+}
+
+setInterval(function(){
+    document.querySelectorAll('.rm-block[data-page-links*="Citations"] > .rm-block-children > .rm-block > .rm-block-main > .roam-block').forEach(addCopyButton);
+    document.querySelectorAll('button.ref-btn').forEach(checkIfRef);
+
+    if(typeof(document.getElementById('clipboard-js')) !== 'undefined')
+    new ClipboardJS('.ref-btn', {
+        target: function(trigger) {
+          return trigger.nextElementSibling;
+        }
+      })
+
+}, 1000)
+
+/* How to use clipboard.js dynamically */
+
+document.addEventListener('hashchange', function () {
+    clipboard.destroy();
+})
+

roam-get-linked-refs-data/README.md

@@ -0,0 +1,2 @@
+##roam-get-linked-refs-data
+Adds a `data-page-title` attribute to the top element for each page listed in the Linked References section. The value is equal to the title of that page in the database, and is accessible directly through JavaScript and CSS.

roam-get-linked-refs-data/roam-get-linked-refs-data.js

@@ -0,0 +1,50 @@
+
+function checkLinkedRefs() {
+    var linkedRefsCaret = document.querySelectorAll('.rm-reference-main .rm-reference-container > .flex-h-box > span > span.bp3-icon-caret-down')[0];
+    var linkedRefsDiv = document.querySelectorAll('.rm-mentions.refs-by-page-view')[0];
+    
+    /* If the Linked References panel is already open, add the data right away */
+    if(linkedRefsCaret.classList.contains("rm-caret-open") & typeof(linkedRefsDiv) !== 'undefined'){
+        let linkedRefsTitles = linkedRefsDiv.querySelectorAll('a span.rm-page__title');
+            linkedRefsTitles.forEach(function (titleSpan) {
+                titleSpan.closest('div.rm-ref-page-view').dataset.pageTitle = titleSpan.textContent;
+            })
+    }
+
+    /* Watch for future events that hide/show Linked References */
+    linkedRefsCaret.addEventListener('click', function () {
+        if (linkedRefsCaret.classList.contains("rm-caret-closed")) {
+
+            while (typeof (linkedRefsDiv) === 'undefined') {
+                setTimeout(function () {
+                    linkedRefsDiv = document.querySelectorAll('.rm-mentions.refs-by-page-view')[0];
+                }, 500)
+            }
+
+            let linkedRefsTitles = linkedRefsDiv.querySelectorAll('a span.rm-page__title');
+            linkedRefsTitles.forEach(function (titleSpan) {
+                titleSpan.closest('div.rm-ref-page-view').dataset.pageTitle = titleSpan.textContent;
+            })
+        }
+    });
+
+}
+
+function isPage(){
+    return(window.location.href.includes("/page/"))
+}
+
+window.onload = function(){
+    console.log('New load event');
+    if(isPage()){
+        checkLinkedRefs();
+    }
+}
+
+window.onhashchange = function(){
+    console.log('New hash change event');
+    if(isPage()){
+        checkLinkedRefs();
+    }
+}
+

roam-get-paper-data/README.md

@@ -0,0 +1,2 @@
+##roam-get-paper-data
+Adds a `data-paper-title` attribute to each page reference that links to a page whose title starts with `@`. The value is equal to the contents of the block with attribute `Title::` located on that page, and is accessible directly in JavaScript and CSS.

roam-get-paper-data/roam-get-paper-data.js

@@ -0,0 +1,39 @@
+
+document.addEventListener('mouseover', (e) => {
+    let target = e.target;
+
+    if (target.classList.contains("rm-page-ref")) {
+        console.log('Checking if this is a paper...');
+        console.log(target);
+
+        let parentDiv = target.parentElement;
+
+        let isPageRef = null;
+        let isPageTag = null;
+
+        if (typeof (parentDiv.dataset.linkTitle) !== 'undefined') {
+            isPageRef = parentDiv.dataset.linkTitle.startsWith("@");
+            console.log('It looks like a page reference ?');
+        }
+        if (typeof (target.dataset.tag) !== 'undefined') {
+            isPageTag = parentDiv.dataset.tag.startsWith("@");
+            console.log('It looks like a tag ?');
+        }
+
+        if (isPageRef | isPageTag) {
+            console.log("Let's look for a paper title...");
+            if (typeof (parentDiv.dataset.paperTitle) === 'undefined') {
+                console.log('This link has no title info yet');
+                let pageName = null;
+                if (isPageRef) { pageName = parentDiv.dataset.linkTitle; }
+                if (isPageTag) { pageName = parentDiv.dataset.tag; }
+
+                let attrTitle = window.roamAlphaAPI.q('[:find ?bString :in $ ?pageName :where [?page :node/title ?pageName] [?page :block/children ?titleBlock] [?titleBlock :block/string ?bString] [?titleBlock :block/refs ?bAttr] [?bAttr :node/title "Title"]]', pageName);
+                if (typeof (attrTitle[0] !== 'undefined')) {
+                    console.log('Now adding the title that was found');
+                    parentDiv.dataset.paperTitle = attrTitle[0][0].replace("Title:: ", "");
+                }
+            }
+        }
+    }
+})