WorkFlowy x 2 - a browser bookmarklet to give you a dual panel WorkFlowy view

workflowy x 2.js

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

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?

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