.. _notebookcustomextensionrst:

===========================
Custom Javascript Extension
===========================


.. only:: html

    **Links:** :download:`notebook <notebook_custom_extension.ipynb>`, :downloadlink:`html <notebook_custom_extension2html.html>`, :download:`PDF <notebook_custom_extension.pdf>`, :download:`python <notebook_custom_extension.py>`, :downloadlink:`slides <notebook_custom_extension.slides.html>`, :githublink:`GitHub|_doc/notebooks/notebook_custom_extension.ipynb|*`


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

.. code:: ipython3

    from jyquickhelper import add_notebook_menu
    add_notebook_menu()






.. contents::
    :local:





Custom extension
----------------

.. code:: ipython3

    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]




.. parsed-literal::
    '\\Roaming\\jupyter\\nbextensions\\jyquickhelper_custom'



.. code:: ipython3

    os.listdir(dest)




.. parsed-literal::
    ['jyquickhelper_custom.css', 'main.js', '__init__.py', '__pycache__']



.. code:: javascript

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



.. parsed-literal::
    <IPython.core.display.Javascript object>


.. code:: ipython3

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





.. raw:: html


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



This does not really works.

Local extension
---------------

.. code:: ipython3

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






.. raw:: html

    <script>
    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);
    };
    load_jyq_css_renderjson('renderjson/renderjson.css');
    require(['renderjson/renderjson.js']);

    </script>
    <p>Loads extension 'renderjson'.</p>



.. code:: ipython3

    %%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>





.. raw:: 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>



.. code:: ipython3

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





.. raw:: html

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



.. code:: javascript

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



.. parsed-literal::
    <IPython.core.display.Javascript object>


.. code:: javascript

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



.. parsed-literal::
    <IPython.core.display.Javascript object>