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

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:

7 Likes

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

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

1 Like

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

1 Like

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

2 Likes

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.

1 Like

thanks piotr works great :slight_smile:

1 Like

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.

4 Likes

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

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

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

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.

2 Likes

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:

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:

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)

1 Like

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

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

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:

1 Like

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

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