Last active
November 15, 2020 14:45
-
-
Save drosenstark/66a40d35d32eaa28ec9727e38125fed5 to your computer and use it in GitHub Desktop.
Userscript to display images and iframes in Workflowy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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); |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Circular references! Check the article here.