toc2: sidebar + html export #593
Conversation
|
This looks great! |
|
Boss! This sounds fantastic :)
|
|
Unfortunately, here the sidebar feature doesn't work as advertised: it clings to the side (and jumps to the top left position when I come near the left side), but is not displayed as a sidebar but still as a floating window:
The feature is enabled (IMO that could be enabled as a default: I had to manually click it...) Chrome, windows 7 |
|
Stange. It seems that a style is missing. Have you downloaded/updated main.css? Can you have a look at the console output? |
|
@jfbercher There isn't an error in the console. I use the table beautifier. I reinstalled the package via python setup.py install and I pressed a few times F5 in the opend notebook. Also, chrom tells me that the toc2/main.css file has |
|
It works for me in linux debian. I just ckecked with a fresh install on windows 8, anaconda, chome and it also works without any problem. |
|
Very nice, indeed! Here is the notebook: https://gist.github.com/juhasch/c72e3d0fbb78bcea7cf0bc49e661e2c1 |
|
Can you @JanSchulz or @juhasch send me an example notebbok where the extension doesn't work? eg make a pull request at https://github.com/jfbercher/test and I will investigate. thxs |
|
@jfbercher : See the link in my comment above |
|
I think I got it. |
|
Changed reading of initial config. Hope this will fix. Thanks for the file @juhasch |
|
Looks good, this fixes the docking issue. |
|
Modified extension loading -- in some conditions, there was a recursive call of toc generation. Hope this fixes the hanging issue. |
|
This is fantastic. Great Work! You can make the |
|
@cqcn1991 thanks. As for the css nested ordered lists tip, this deserve attention. But using such approach will affect our current unique ids generation. that relies on the items numbers. Export: If anyone wants to test the html export feature, the current will only work (hopefully) after the PR is merged, because it uses links to the css and js files in the gitgub website. In order to test the functionality, I have added a toc2 template that links to my git account (I will remove it after). Testing can be done via |
Most of the rest of the css and js in a notebook are included, so I would prefer if this is included directly as well.,.. More or less that it would be easier to send html files to my advisor (but I think this isn't possible because require.js, mathjax and jquery are also loaded from a CDN)... |
|
@JanSchulz That's how my original toy version works: If you really want it, you can try it. I also made a |
|
JFYI: it works now :-) Thanks, this is great! |
|
BTW: would it be possible to output the TOC cell as a proper markdown code instead of html? The links in that cell are currently not converted to pdf, so the toc is just for show, but not to be used to access the individual sections... [ok, md links also don't work in PDF: https://github.com/jupyter/nbconvert/issues/11 Damn!] |
|
Ok, one issue still [updated]in the versions of this PR[/]:
-> The scrollbar is at the bottom (=can't scroll down any down; some parts of the scrollbar are below the start menu!), but there is still some more headlines (12, 12.1 and 12.2). Could it be that it takes 100% of the page height, but as the page header already takes a few pixels, some of it is below the visible view port? |
|
@JanSchulz I'm not sure if you are talking about my toy version, or @jfbercher 's official one. My toy version have this problem. The root reason for this is the I think your guess is correct. And that's why I set the height to be 95% insteand of 100%. But it seems still not working under all circunstances. A possible solution may be using |
|
@cqcn1991 Sorry, meant this PR -> updated my comment above... |
| @@ -146,26 +147,14 @@ define(["require", "jquery", "base/js/namespace", 'services/config', | |||
| $([IPython.events]).on("notebook_loaded.Notebook", function(){ // curiously, the event is not always fired or detected | |||
There was a problem hiding this comment.
FYI, the event is always fired, the issue is that depending on the notebook's complexity, the connection speed & lag time, it's possible for the notebook to load before the extension is loaded, in which case you miss the event.
There was a problem hiding this comment.
Yes, thanks. I have realized that in the meantime.
Similarly, the kernel.ready event can also happen before the extension is fully loaded. In the last version, therefore, I load the stuff directly and only update things if these events occur.
@JanSchulz I will upload an update tomorrow for the hidden scrollbar issue.
Navigate menu
I hope that there are not to much errors. Please report. There is a small issue at least with my latex_envs where all cells are refreshed at the startup. Since the building of the toc is fired each time a markdown cell renders, this adds some overload at startup (when latex_envs is loaded before toc2). |
|
This is really good. Great work again, @jfbercher |
|
so are we ok to merge this? |
|
I just tested it and apart from a different highlighter for the TOC entry (looks in my case like brown...), I really like it!
|
|
Just a simple thouht. As builders, some times we can build great features like this. But I'm afraid maybe we need to do more of this? There are a lot of people out there do not know the existence of this thing and other things. |
|
@JanSchulz You can change the background color in |
|
One bad thing: if I have the toc activated (no matter if as sidebar or floating) and use RISE to display it as a slideshow, the sidebar is shown :-( Not sure what can be done here, but probably either we or RISE needs to set some css to hide the toc if the slideshow is active?
At leats the problem is gone if I deactivate the toc via the button... CC: @damianavila |
|
There seems to be another problem with RISE: if I have it as sidebar and disable it and then use RISE; the code area afterwards is moved to the left: -> Could it be that the "disable" button does not remove all css? |
|
In nbextension page, the last item has two dots: |
| ``` | ||
| jupyter nbconvert FILE.ipynb --template toc2 | ||
| ``` | ||
| For the first template (toc), the files toc2.js and main.css (originally located in JUPYTER_DATA_DIR/nbextensions/usability/toc2) must reside in the same directory as intended for the html file. In the second template, these files are linked to the IPython-notebook-extensions github website. Export configuration (parameters) shall be edited directly in the template files (in templates directory JUPYTER_DATA_DIR/templates). An option "Save as HTML (with toc)" is also provided in the File menu and enable to directly convert the actual notebook. This option requires the IPython kernel and is not present with other kernels. |
There was a problem hiding this comment.
Would there be a way to simply include these files in the template/final output? static one page files are best for sending this stuff to my adviser :-)
There was a problem hiding this comment.
@JanSchulz You just have to replace the link in the template by
{% include "FILENAME" ignore missing%}
This assumes that the file is in the same directory as the notebook (full paths do not work in jinja tempates).
I do not do it because anyway you still need an internet connection to get access to jquery. Please make a PR with an extra template if you want
There was a problem hiding this comment.
IMO the default should be to include stuff which is not on a CDN, so that sending the html file will work as long as a user has access to the internet... IMO the "toc must be on my drive" is useless because IMO html exports are to be exchanged with peers and so not on my drive. Or do I misunderstand anything here?
There was a problem hiding this comment.
Perhaps. You do not need to have toc or the notebook installed. Everything will work as long as the user has an internet access.
If you do not have access to internet, you will not have jquery and the toc javascript will not work. This is not true in the notebook since it has a copy of jquery inside. Otherwise you need to have an access to jquery, and most of the time this suppose an internet access.
There was a problem hiding this comment.
You do not need to have toc or the notebook installed. Everything will work as long as the user has an internet access.
+1
|
Yep, RISE makes dirty things all over the place so it does not surprise me that there is a collision with other extensions like this one... one of my ideas for further RISE development is trying to isolate all the RISE-specific changes to avoid this kind of collisions... but not there yet... |
|
Perhaps would it be time to merge and let other users test and make issues/suggestions? |
|
+1 on merging and iterating afterwards... I've run on this branch (only for the toc during interactive work, not the exports), and I didn't experience any problems. |
|
Would it be good if we can make a video or a gif demonstrate this and post it on sites like hackernews and some jupyter network? |
|
as noted, this seems mature enough to merge, and iterate later. |
toc2: new features:
Sidebar
Triggered by @cqcn1991's discussion and work, cf discussion here, a sidebar option is added. The floating toc window can be dragged and docked as a left sidebar. The sidebar can be dragged out as a floating window. These different states are stored and restored when reloading the notebook.
html export
Add html export capability via templates toc.tpl and toc2.tpl.
It is possible to export (most of) table of contents functionalities to html. The idea is to link a relevant part of the javascript
extension and the css, and add a small script in the html file. This is done using a template by
or
For the first template (toc), the files toc2.js and main.css (originally located in JUPYTER_DATA_DIR/nbextensions/usability/toc2) must reside in the same directory as intended for the html file. In the second template, these files are linked to the IPython-notebook-extensions github website. Export configuration (parameters) shall be edited directly in the template files (in templates directory JUPYTER_DATA_DIR/templates).
A "Save as HTML (with toc)" option is also available in the File menu and enable to directly convert the actual notebook. This option requires the IPython kernel and is not present with other kernels. I was not able to find a way to do it for other kernels (even with a customized exporter called from js).
Navigation menu
since I realized that it is not difficult to add menus elements, I had the idea of adding a navigation menu". This menu can live together with the floating window or sidebar. It can be enabled/disabled using the nbextension configuration utility (enabled by default).