toc2 update: Highlight toc headings for section with selected/edited/running cells + fix save issue #795
Conversation
- Fix "impossible to save" issue due to race condition when writing/loading notebook metadata
|
Nice.
It's possible to edit css from javascript, allowing these to be configurable - see ruler nbextension for configurable colors, and code_font_size nbextension for js editing of css rules. |
|
@jcb91 Hum, that is a good idea. |
…lors configuration capability
|
@jcb91 |
|
Awesome, looks great! One question though - looks like maybe a typo using |
| }); | ||
| function create_highlights_css() { | ||
| var sheet = document.createElement('style') | ||
| sheet.innerHTML = `#toc-level0 li > a:hover { display: block; background-color: ${cfg.colors.hoover_highlight} } |
There was a problem hiding this comment.
The backtick is not supported in android browser or internet explorer (see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals#Browser_compatibility), so it might be a good idea to use a more basic string concatenation operation here, as otherwise it'll presumably be a syntax error, causing the whole nbextension to crash & burn, rather than failing mor gracefully.
There was a problem hiding this comment.
Ok, it is nicer to use template strings, but indeed it might crash the extension in IE/Android. I change this to simple concatenation.
| - name: toc2.colors.hoover_highlight | ||
| input_type: color | ||
| description: Hoover color in toc | ||
| default: ["#DAA520"] |
There was a problem hiding this comment.
This is a list of strings (because of the [...]), whereas we only want one color (string). I guess this is a hangover of my example from the ruler nbextension, which does actually use a list of colors. Sorry, not a great example!
There was a problem hiding this comment.
Yep. I asked myself, but did not investigated since it worked immediately as such.
There was a problem hiding this comment.
True, I'm being a bit pedantic here, since as you point out, it works regardless of spelling, as long as it's consistent.
|
right, this looks good, I'm gonna go ahead and merge! |
New feature
As suggested by @dinya in #791, added highlighting of the section that contains the currently edited/selected/executing cell.
Colors can be customized by changing
.toc-item-highlight-selectand.toc-item-highlight-executeclasses in css. (actual highlight colors are gold yellow and red, but the red doen't render well in the gif anim :-< )Fix