Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update widgets CDN for ipywidgets 7 w/fallback #792

Merged
merged 1 commit into from
Aug 7, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions nbconvert/nbconvertapp.py
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,9 @@ def _postprocessor_class_changed(self, change):
if new:
self.postprocessor_factory = import_item(new)

ipywidgets_base_url = Unicode("https://unpkg.com/",
help="URL base for ipywidgets package").tag(config=True)


export_format = Unicode(
'html',
Expand Down Expand Up @@ -361,6 +364,8 @@ def init_single_notebook_resources(self, notebook_filename):

resources['output_files_dir'] = output_files_dir

resources['ipywidgets_base_url'] = self.ipywidgets_base_url

return resources

def export_single_notebook(self, notebook_filename, resources, input_buffer=None):
Expand Down
33 changes: 29 additions & 4 deletions nbconvert/templates/html/full.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,38 @@
{% set nb_title = nb.metadata.get('title', '') or resources['metadata']['name'] %}
<title>{{nb_title}}</title>

{%- if "widgets" in nb.metadata -%}
<script src="https://unpkg.com/jupyter-js-widgets@2.0.*/dist/embed.js"></script>
{%- endif-%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

{% block ipywidgets %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(nitpick mode on) maybe the ipy is a bit python-specific.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just followed the convention of nbviewer (https://github.com/jupyter/nbviewer/pull/738/files#diff-613fc8ba3406aefaf7062016d832bbfbR84). I'm not sure how transferrable templates are between the two, but I figured I would try to make things as similar as possible.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

{%- if "widgets" in nb.metadata -%}
<script>
(function() {
function addWidgetsRenderer() {
var mimeElement = document.querySelector('script[type="application/vnd.jupyter.widget-view+json"]');
var scriptElement = document.createElement('script');
var widgetRendererSrc = '{{ resources.ipywidgets_base_url }}@jupyter-widgets/html-manager@*/dist/embed-amd.js';
var widgetState;

// Fallback for older version:
try {
widgetState = mimeElement && JSON.parse(mimeElement.innerHTML);

if (widgetState && (widgetState.version_major < 2 || !widgetState.version_major)) {
widgetRendererSrc = '{{ resources.ipywidgets_base_url }}jupyter-js-widgets@*/dist/embed.js';
}
} catch(e) {}

scriptElement.src = widgetRendererSrc;
document.body.appendChild(scriptElement);
}

document.addEventListener('DOMContentLoaded', addWidgetsRenderer);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What could be interesting would be to add an argument to addWidgetsRenderer for the version of the html manager to load and try to infer it from the content of nb.metadata.widget (this could be done in a separate PR though.)

}());
</script>
{%- endif -%}
{% endblock ipywidgets %}

{% for css in resources.inlining.css -%}
<style type="text/css">
{{ css }}
Expand Down