Custom Javascript Extension

Links: notebook, html, PDF, python, slides, GitHub

This notebook tests a couple of scenarios on how extension notebooks with javascript. not complete

from jyquickhelper import add_notebook_menu
add_notebook_menu()

Custom extension

import os
from notebook.nbextensions import install_nbextension
from jyquickhelper.js.custom import __file__ as loc
path = os.path.dirname(loc)
dest = install_nbextension(path, user=True, destination="jyquickhelper_custom")
dest.split('AppData')[-1]

'\Roaming\jupyter\nbextensions\jyquickhelper_custom'

os.listdir(dest)

['jyquickhelper_custom.css', 'main.js', '__init__.py', '__pycache__']

%%javascript
Jupyter.utils.load_extensions('jyquickhelper_custom')

<IPython.core.display.Javascript object>

%%html

<p class="jyquickhelper">should be red</p>

should be red

This does not really works.

Local extension

from jyquickhelper.js import load_extension
load_extension('renderjson')

Loads extension 'renderjson'.

%%HTML
<script src='renderjson.js'>
var load_jyq_css_renderjson = function(cssfile) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = require.toUrl(cssfile);
    document.getElementsByTagName("head")[0].appendChild(link);
};
</script>

%%html
<div id="testrjs"></div>

%%javascript
document.getElementById("testrjs").innerHTML = "<p>Wait..</p>"

<IPython.core.display.Javascript object>

%%javascript
document.getElementById("testrjs").appendChild(
    renderjson({ hello: [1,2,3,4], there: { a:1, b:2, c:["hello", null] } })
);

<IPython.core.display.Javascript object>