Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WorkFlowy x 2 - a browser bookmarklet to give you a dual panel WorkFlowy view
javascript:
`
WorkFlowy x 2
=============
- A browser Bookmarklet to give you a dual panel WorkFlowy view
Features / Usage:
- Copy and paste between frames
- Use the left pane as navigation by CMD/CTRL+Clicking bullets to load into the right
- Updates main page title with panel titles
- Saves panels between sessions
Installation:
1. Copy this entire script
2. Create a new bookmark whilst on workflowy.com
3. Paste this script into the URL section of the bookmark dialog
Running:
- Click the bookmarklet whilst on workflowy.com to initialize the two-panel setup
- If not on workflowy.com, click the bookmarklet twice; once to load workflowy.com and again to initialize
`;
/* load */
if (window.location.hostname !== 'workflowy.com') {
console.log('Loading workflowy.com...');
window.location.href = 'https://workflowy.com';
}
/* initialize */
else if (!window.initId) {
console.log('Initializing Workflowy x 2...');
window.initId = setInterval(function () {
var app = document.getElementById('app');
if (app && app.innerHTML !== '') {
/* setup */
document.body.innerHTML = `
<style>
html, body {
display: flex;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
iframe {
flex: 1;
height: 100%;
border: 0;
outline: 1px solid #DDD;
}
</style>
<iframe src="https://workflowy.com"></iframe>
<iframe src="https://workflowy.com"></iframe>
`;
var frames = Array.from(window.frames);
/* load last-saved frames */
var json = localStorage.getItem('frames');
if (json) {
try {
var hrefs = JSON.parse(json);
hrefs.forEach(function (href, index) {
frames[index].location.href = href;
})
}
catch(err) {}
}
/* set up save loop */
setInterval(function () {
var titles = frames.map(frame => frame.document.title.replace(' - WorkFlowy', ''));
var title = 'WorkFlowy: ' + titles.join(' + ');
if (document.title !== title) {
document.title = title;
var hrefs = frames.map(frame => frame.location.href);
localStorage.setItem('frames', JSON.stringify(hrefs));
}
}, 1000);
/* set up frame navigation */
frames[0].addEventListener('load', function () {
console.log('Added navigation functionality: CTRL/CMD-Click bullets to load into right frame');
frames[0].document.body.addEventListener('click', function (event) {
var selector = 'a.bullet';
var t = event.target;
var link = t.matches(selector)
? t
: t.closest(selector);
if (link && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
event.stopImmediatePropagation();
frames[1].location.hash = link.getAttribute('href').substr(1);
}
})
});
/* done! */
clearInterval(window.initId);
console.log('WorkFlowy x 2 is running!');
console.log('For updates, see original script at: https://gist.github.com/davestewart/a86ed576604cee9f8a15bd97451a6974');
}
}, 250);
}
else {
console.log('WorkFlowy x 2 is already ' +(window.saveId ? 'running' : 'initializing')+ '...')
}
void(0);
@waldyrious
Copy link

waldyrious commented Jul 28, 2021

Unfortunately this doesn't work for me. In Firefox, I get this error:

Firefox screenshot
To protect your security, workflowy.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.

...and in Chrome, this is what I see:

Screenshot from 2021-07-28 10-38-48
workflowy.com refused to connect.

Does anyone know of a workaround?

@davestewart
Copy link
Author

davestewart commented Aug 3, 2021

Sorry about the FF issue! I haven't looked at this for a long time.

If you are on Chrome, I released the next version of this as an extension:

@waldyrious
Copy link

waldyrious commented Aug 3, 2021

Cool! That extension of works for me, though I don't seem to be able to have more than two columns. Ctrl+clicking on links in the second column is opening new tabs. Also I don't see the closing button shown in the video. Are these known issues?

@davestewart
Copy link
Author

davestewart commented Aug 4, 2021

I think WF may have changed something recently, as I get the same result.

For the new tabs issue, disable the WorkFlowy setting “Open links in app”

More info here: https://davestewart.co.uk/products/workflowy-multiflow/#appendix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment