Open in new tab, sorting, embedding, separators and other "improvements"


#1

Hi!

I think that Dynalist is the best in class of software for helping with organising projects and life, but there are some minor things which are a little bit annoying in my workflow. So instead of bothering devs who should concentrate on more important things, I decided to change it myself. This stuff is working for me (Mac + Chrome, and quick test in Firefox), but I naturally can’t test it in every possible way, so it’ll be no guarantee that this will work for you. (you can always ask and I’ll try to help)

First script I’d like to share is to modify icons on the left pane (for files and bookmarks) so they become clickable links. If you move cursor over icon it will change to link icon, and if you click it, new tab with this content will be opened.

I thought about making folder icon clickable too, so all its direct children could be open with one click, but it’s a little bit to close to arrow item for expanding/collapsing and this could lead to accidental clicks and necessary opening of multiple new tabs if you miss. And if you want to quickly open more than one file then you can simply click on each icon with ctrl (or whatever key your browser uses to open tab in background).

EDIT: PowerPack is ready, so don’t install script from this post, instead scroll to Open in new tab, sorting, embedding, separators and other “improvements” for more functionality :zap: And here is guide to install browser extension which will handle powerpack script: https://greasyfork.org/en

Anyway, you can install script from here https://greasyfork.org/en/scripts/29966-dynavisiblelinks (refresh tab with Dynalist after that)

More scripts to come and I will publish all of them in this one topic. I think that in the future I will somehow pack them in one ‘powerpack’ with ability to enable only part of them if you don’t want all. If you created something yourself, please share it! I would also appreciate hints on how can I improve my code, I’m software developer, but not JS developer and I’m using this as an opportunity to learn JS :slight_smile:


Quick Way to Get Things into Dynalist on Mobile
Have tag pane and file pane displayed at the same time
#2

Thanks @Piotr. This could be useful. I tried this on Chrome for Windows 10, but it didn’t work.


#3

Alright, let’s debug! When you’re working with one of your documents in dynalist - does your TM extension icon looks like that?

Or is it grayed out without number? This will tell us if script is injected to the site.

And please check that it’s ON for sure, this is how it should look when you click on TM extension icon when you are on dynalist.io/d/whicheverlinktoyourdocument

If you don’t see that, please click on “Dashboard” (look at left column on screenshot above), there will be list of all installed scripts, tell me if you see my script on the list


#4

Worked at Windows 7 Pro, Chrome 58 (64-bit)!
Thanks a lot, @Piotr :slight_smile:


#5

Thanks @Piotr. Very nice work on this JavaScript.

I love these little tweaks that can be applied to Dynalist. This community-based approach reminds a lot of the Workflowy community. I look forward to any other scripts that you develop.

Cheers,

Fred


#6

Thanks. It turned out my Tampermonkey was disabled. It said “enabled”, but didn’t have the green tick. It all works fine now. Well done.


#7

thanks piotr works great :slight_smile:


#8

PowerPack is ready to install :blush:
You should remove/disable previous script, if you want to install PowerPack. Next releases will be easier to update for you, because from now every new functionality will be added to this one script (it will not make any difference performance-wise - features are not working until you enable them).

Currently it includes:

  • links in left pane
  • embedding iframes - videos, maps, other dynalist documents, other websites, and whatever can be embedded with iframe (but be reasonable with that, if you put 10 videos in one document and all will be rendered in the same time, your browser will be angry at you)

As you can see on the video below, there’s icon on top left corner, click on it to show popup with settings. Settings are stored forever in your browser, unless you deliberately remove them by clearing browser cache. This is today’s work, so I didn’t test it for few days as before, but as you can see it’s working without any bugs

:zap: :zap: :zap: https://greasyfork.org/pl/scripts/30048-dynalist-powerpack :zap: :zap: :zap:

BTW. if you embed other Dynalist document it will be rendered with/without this weird blank space on the left - it depends on current state of left pane visibility. You can click in embedded document and hit your shortcut to close file/bookmark pane and it will occupy full space. As you can see, you can also edit those embedded documents, but wait few seconds before closing tab to be sure that changes are synced.

EDIT. you can see in the video that I collapsed first node with YT video. When something is collapsed, it’s not loaded, so you can store even 1000 videos/maps/whatever in one document, just be sure that in one moment max few are expanded when embedding is enabled in the settings.


#9

That’s quite amazing. I’ll have to think about how we can use dynalist within dynalist!


#10

Yeah, inception :slight_smile: You can select item, cut/copy it, and paste it in this embedded document. Or do this other way around. It will work even with collapsed items. And all formatting will be preserved. Unfortunately drag and drop between two documents will not work with such hacks, you need to use shortcuts or ui menus.

Some technical notes about iframes:

  • you can set width to be either in pixels width="700" or in percents, for example this will occupy all horizontal space within current item width="100%"
  • naturally you can’t embed everything. Some websites, like your bank, will not allow you to do that. There will be no error, you will see only box with blank space
  • you can use this template to embed websites: <iframe width="50%" height="415" src="http://example.com/" frameborder="0"></iframe>
  • youtube and other websites with shareable content are almost always already providing iframe code when you want to share their content, so just look for button to share, and copy that

#11

this is amazing piotr :smiley:

I always wanted embedded youtube links and the option to control the iframe options too

Is there a possibility of putting the iframe option into a hotkey as well? (e.g. press a hotkey to turn on / off the iframe view)?

also great idea on embedding dynalist inside of dynalist, I’m not sure if I’m going to use it (too many computer resources used), but its definitely something I’ll play around with :slight_smile:

Also I wrote a list earlier of what you could embed with the iframes in this post previously, if you guys want ideas (bottom of the post)

I think for what I will be using this embed code support for now is only going to use youtube and possibly airtable + airtable forms for now , and maybe codepen.io. I’ll probably use run some search paramters like “<iframe width” so I know where I put my embed codes in document


#12

Yes, today I was working with enabling shortcut, you can set shortcut in settings :slight_smile:

And also with this update https://greasyfork.org/pl/scripts/30048-dynalist-powerpack (all you need to do is click on green update button and confirm) it’s possible to create kanban style iframes :slight_smile:

you can set it like that (all in one item!):

after enabling:

and settings now looks like that:

EDIT: Once again - be careful with changing something in these embedded documents. It will be saved and synced like your main document, but sync status on the top-right is only showing status of main document. If you close tab before embedded stuff is synced, you will not see any confirmation about that and changes will be lost. Dynalist sometimes sync immediately after you modify anything, and sometimes needs even 5-10 seconds for that.


#13

By the way, I was testing out some of the embed codes found on soundcloud / codepen.io etc

I noticed a lot of their iframe codes has width=100%

This means you can’t edit the bulletpoint at all (the other solution is just to change the iframe width code though)

Perhaps something in options to set a width to 99% max to allow for a 1% right click → edit code?

example:

I think sometimes you would want to edit the iframe, othertimes you don’t though

Also down the road maybe an option to turn on / off individual select iframe codes maybe too :smiley:

E.g.

option to turn off /on

  • youtube only
  • soundcloud / clypit
  • Codepen.io
  • Google maps
  • Google forms
  • Airtable / airtable forms

Not a high priority but if I find the need I might just modify your code myself :stuck_out_tongue:


#14

I’ll look into that, for now you can click on parent node and press arrow down and it should change to not-rendered code :slight_smile:


#15

That works too :slight_smile:

Actually if i can edit it this way I’d rather not the iframes be right-side-clickable for things like codepen.io (basically the version 2 code works for me)


#16

Also by the way

I hide all my embed codes by CTRL+ENTER so I don’t have to see them. When I want to see my embedded iframes I do this:

  • Checked items “Show” → no hotkey exists yet in dynalist
  • Enable the powerpack embedded iframes (ctrl+shift+e hotkey)

This way, if I watch a 20 course youtube thing, I don’t want to see my embedded codes anywhere or iframes. But every now and then I might want to quickly look at every video really quick + all my notes really quickly, so I’ll turn this “show checked items” and then “enable powerpack embedded iframes”

Assuming this is using a youtube video and / or public video, lynda.com videos are all private

I’ll know I’ll have embedded iframes on my open course -youtube playlists since I’ll actively set it up this way

Better yet I could leave all the embed codes /tamperscript on by default and just use dynalist’s show/hide thing to enable it as well


#17

For people who would like to have Github gists embedded into Dynalist. Github doesn’t provide iframe code, but it’s possible to use their method with some magic to do it anyway.

This is template:
<iframe src="data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%20src%3D%22https://gist.github.com/XXXX_USERNAME_XXXX/XXXX_ID_XXXX.js%22%3E%3C%2Fscript%3E%3C%2Fbody%3E" width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>

With this example https://gist.github.com/igor04/9cc607e60021031da553
XXXX_USERNAME_XXXX needs to be changed to igor04
XXXX_ID_XXXX needs to be changed to 9cc607e60021031da553

Now it will work


#18

works great just tried it :slight_smile:

Also, I wrote a phraseexpress command for it too (Basically highlight over the github gist URL, bind hotkey, to output the iframe code)

{#clipboard -cut}<iframe src="data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%20src%3D%22{#insertclipboard}.js%22%3E%3C%2Fscript%3E%3C%2Fbody%3E" width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>

Example:


#19

Piotr is there a way to have the embed code “lock”

so if you click the right side pane it doesn’t automatically go to node-unrendered mode?

The issue is that with youtube videos its resetting it unintentionally when you click to the right of it, causing unnecessary use of computer resources.

perhaps this setting would be better, actually

Content can still be edited using the ↓ down arrow though giving it enough flexibility for people to adjust the frame width code for different size monitors (I prefer my youtube videos at 900 wide x 508 wide on a 24" screen)

Not sure if this can be done though, just a suggestion


#20

Yes, it’s done, I will update script soon with this and another functionality.