Userscript to display images and iframes in Workflowy

workflowyPlusRefac.js

// ==UserScript==
// @name         WorkflowyPlus Refac
// @namespace    http://confusionstudios.com
// @version      0.2
// @author       Wizmann, DR2050
// @match        https://workflowy.com/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';
// User.js

var contentIndex = 0;

function doParseImageAndIframe() {
    $(this).nextAll(".content-img").remove();
    $(this).nextAll(".content-iframe").remove();
    $(this).nextAll(".show-hide-button").remove();
    var lines = $(this).text().split("\n");
    // var imageRegex = /^\!\[(.*)\]\((.+)\)$/;
    var regex = /^(iframe|image):([^\s]*)$/;
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        var result = line.match(regex);
        if (result !== null) {
            var url = result[2];
            var contentId = "content-" + contentIndex++;
            var nextTitleForButton = "var nextTitle = $('#" + contentId + "').is(':visible') ? 'Hide' : 'Show';"; 
            var onClick = '$(\'#' + contentId + '\').toggle(); '+ nextTitleForButton +'  console.log($(this).html(nextTitle));';
            var button = '<button  class="show-hide-button"  onclick="' + onClick + '">Show</button>';
            if (result[1] === "image") {
                console.log("image " + url + " - contentId: " + contentId);
                $(this).after(button + '<BR><div id="' + contentId + '" class="content-img" style="display: none"><img style="max-width: 400px" src="' + url + '"/></div>');
            } else if (result[1] === "iframe") {
                console.log("iframe " + url + " - contentId: " + contentId);
                $(this).after(button + '<BR><div id="' + contentId + '" class="content-iframe" style="display: none"><iframe width="90%" margin="auto" height="512" src="' + url + '" frameborder="0" allowfullscreen=""></iframe></div>');
            }
        } 
    }
}

function parseImageAndIframe() {
    contentIndex = 0;
    $("div.notes div.content").live("click keyup", doParseImageAndIframe);
    $("div.notes div.content").each(doParseImageAndIframe);
    $("#expandButton").live("click", function() {
        $("div.notes div.content").each(doParseImageAndIframe);
    });
};

console.log("Starting WorkflowyPlus Refac");
$(window).bind("load hashchange", parseImageAndIframe);

Most of goal completed, thanks!

So it looks something like this. Buttons start out with "Show" but then switch to "Hide" when you're showing, and now they're correlated with the thing they are next to.

Circular references! Check the article here.

Is there any way to use this with a link to a locally-stored image file?

@therden, not that I know of: some weird restriction there (Not allowed to load local resource). However, you could use Dropbox shared images. Add raw=1 to the URL.

Just did a new version here:

https://gist.github.com/drosenstark/7afa2a29d3d01bbc8b3e5b2fe66695f3

• No more toggles
• Lazy loading, so only when you need it
• Most of the time the buttons load without you having to touch anything
• Buttons go before