-
-
Save drosenstark/66a40d35d32eaa28ec9727e38125fed5 to your computer and use it in GitHub Desktop.
// ==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); |
brilliant!
Thanks Dan... this is awesome!
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.
Most of goal completed, thanks!
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
100% based on this script by Wizmann