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


#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.


#21

New version available, with new feature: Customisable separators

installation / update as always: https://greasyfork.org/scripts/30048-dynalist-powerpack

Every option is described in settings, I’ll not repeat it here. You can click on item with separator or move cursor with arrow keys to edit it without deactivating other separators.

Some examples:

Deactivated

Activated


#22

this is awesome @piotr !

I never knew I wanted this but this is something I’d definitely use to make my documents easier to read

Also by the way, I think this chrome extension is handy for grabbing out youtube embed codes (for the enable embedded powerpack feature)

I might make my own version of rawbytez’ clip to dynalist embed code, but instead it will be a clip youtube embed code + shortcut key setting

Couldn’t find anything other than this for youtube embed link extraction but it doesn’t have built in shortcut support / default settings


#23

By the way @piotr , I have a suggestion for improvement on “customizable seperators”

Actually two different features related to it (not sure if it can be done though)

1. Assign the seperator directly on the content bulletpoint (above or below it)

The extension you had has to be a dedicated bulletpoint for the seperator

Why not merge the content so it does the following? mockup:

The line could be specified to go above or below the bulletpoint

Javascript would have to modify the CSS height of that bulletpoint though

2. Customized CSS per tag designation

There’s a add on external feature in workflowy where you could assign a tag on the parent bulletpoint, and all childpoint / their childbulletpoints would get a customized CSS feel.

This is really handy if you really wanted to focus in on one area only in your document without using zoom functions (its very similar to the dynalist “On-Focus” css node-outter thing we discussed about before.

Workflowy, its called the “Workflowy Painter” and “Workflowy Colorful tags” and a user here modified the script to change parent / child behavior:

see this image:

at this blogpost

https://workflowy.zendesk.com/hc/en-us/articles/202609829-Color-Formatting

just food for thought :slight_smile:


#24

This is amazing. Thank you @Piotr!


#25

Excellent, I can now Embed my Google Calendar including Dynalist calendar syncs.

Thanks @Piotr