Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Userscript to display images and iframes in Workflowy
// ==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);
@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Jun 13, 2016

Use tags like image:http://images.medicinenet.com/images/slideshow/bad_bugs_s20.jpg and iframe:https://gist.github.com/drosenstark/66a40d35d32eaa28ec9727e38125fed5 instead of Markdown. Is this smart? That depends on what you want to do.

@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Jun 13, 2016

100% based on this script by Wizmann

@Wizmann

This comment has been minimized.

Copy link

@Wizmann Wizmann commented Jun 14, 2016

brilliant!

@frankman777

This comment has been minimized.

Copy link

@frankman777 frankman777 commented Jun 14, 2016

Thanks Dan... this is awesome!

@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Jun 14, 2016

Thanks! I might try to move this forward soon. Basically the goal is simple: To get the button to say "Show iFrame" or "Show Image" and then switch to "Hide" when appropriate. To do this, though, the button will need to be tied to the id of the iframe or image, so it's a bit of a rework. And since I don't know Javascript at all, everything takes longer.

@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Jun 14, 2016

Most of goal completed, thanks!

@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Jun 14, 2016

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.

screenshot

@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Jun 15, 2016

Circular references! Check the article here.

@therden

This comment has been minimized.

Copy link

@therden therden commented Jun 19, 2016

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

@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Aug 2, 2016

@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.

@drosenstark

This comment has been minimized.

Copy link
Owner Author

@drosenstark drosenstark commented Aug 2, 2016

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment