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);

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