Skip to content

Commit 17e58d4

Browse files
choldgrafcholdgraf
authored
updating hidecode tag word and allowing total HTML removal (jupyter-book#207)
updating hidecode tag word and allowing total HTML removal
2 parents cce2e72 + 0391c92 commit 17e58d4

File tree

11 files changed

+256
-111
lines changed

11 files changed

+256
-111
lines changed

‎jupyter_book/book_template/_config.yml

-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@ url: "https://jupyter.org" # the base hostname & protocol for your site, e.g. ht
2929
#######################################################################################
3030
# Jupyter Book settings
3131

32-
# Notebook content settings
33-
use_hide_code_button : true # If True, a small button appears to the right of each cell that lets you hide its contents.
34-
3532
# Sidebar settings
3633
show_sidebar : true # Show the sidebar. Only set to false if your only wish to host a single page.
3734
collapse_inactive_chapters: true # Whether to collapse the inactive chapters in the sidebar

‎jupyter_book/book_template/_includes/js/hide-cell.html

+65-67
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,80 @@
1-
{% if site.use_hide_code_button %}
21
<script>
3-
/**
4-
Add buttons to hide code cells
5-
*/
6-
7-
8-
var setCodeCellVisibility = function(inputField, kind) {
9-
// Update the image and class for hidden
10-
var id = inputField.getAttribute('data-id');
11-
var codeCell = document.querySelector(`#${id} div.highlight`);
12-
13-
if (kind === "visible") {
14-
codeCell.classList.remove('hidden');
15-
inputField.checked = true;
16-
} else {
17-
codeCell.classList.add('hidden');
18-
inputField.checked = false;
19-
}
20-
}
21-
22-
var toggleCodeCellVisibility = function (event) {
23-
// The label is clicked, and now we decide what to do based on the input field's clicked status
24-
if (event.target.tagName === "LABEL") {
25-
var inputField = event.target.previousElementSibling;
26-
} else {
27-
// It is the span inside the target
28-
var inputField = event.target.parentElement.previousElementSibling;
2+
/**
3+
Add buttons to hide code cells
4+
*/
5+
6+
7+
var setCodeCellVisibility = function (inputField, kind) {
8+
// Update the image and class for hidden
9+
var id = inputField.getAttribute('data-id');
10+
var codeCell = document.querySelector(`#${id} div.highlight`);
11+
12+
if (kind === "visible") {
13+
codeCell.classList.remove('hidden');
14+
inputField.checked = true;
15+
} else {
16+
codeCell.classList.add('hidden');
17+
inputField.checked = false;
18+
}
2919
}
3020

31-
if (inputField.checked === true) {
32-
setCodeCellVisibility(inputField, "visible");
33-
} else {
34-
setCodeCellVisibility(inputField, "hidden");
21+
var toggleCodeCellVisibility = function (event) {
22+
// The label is clicked, and now we decide what to do based on the input field's clicked status
23+
if (event.target.tagName === "LABEL") {
24+
var inputField = event.target.previousElementSibling;
25+
} else {
26+
// It is the span inside the target
27+
var inputField = event.target.parentElement.previousElementSibling;
28+
}
29+
30+
if (inputField.checked === true) {
31+
setCodeCellVisibility(inputField, "visible");
32+
} else {
33+
setCodeCellVisibility(inputField, "hidden");
34+
}
3535
}
36-
}
3736

3837

39-
// Button constructor
40-
const hideCodeButton = id => `<input class="hidebtn" type="checkbox" id="hidebtn${id}" data-id="${id}"><label title="Toggle cell" for="hidebtn${id}" class="plusminus"><span class="pm_h"></span><span class="pm_v"></span></label>`
38+
// Button constructor
39+
const hideCodeButton = id => `<input class="hidebtn" type="checkbox" id="hidebtn${id}" data-id="${id}"><label title="Toggle cell" for="hidebtn${id}" class="plusminus"><span class="pm_h"></span><span class="pm_v"></span></label>`
4140

42-
var addHideButton = function () {
43-
// If a hide button is already added, don't add another
44-
if (document.querySelector('div.hidecode input') !== null) {
45-
return;
46-
}
41+
var addHideButton = function () {
42+
// If a hide button is already added, don't add another
43+
if (document.querySelector('div.hidecode input') !== null) {
44+
return;
45+
}
4746

48-
// Find the input cells and add a hide button
49-
document.querySelectorAll('div.input_area').forEach(function (item, index) {
50-
if (!item.classList.contains("hidecode")) {
51-
// Skip the cell if it doesn't have a hidecode class
52-
return;
53-
}
47+
// Find the input cells and add a hide button
48+
document.querySelectorAll('div.input_area').forEach(function (item, index) {
49+
if (!item.classList.contains("hidecode")) {
50+
// Skip the cell if it doesn't have a hidecode class
51+
return;
52+
}
5453

55-
const id = codeCellId(index)
56-
item.setAttribute('id', id);
57-
// Insert the button just inside the end of the next div
58-
item.querySelector('div').insertAdjacentHTML('beforeend', hideCodeButton(id))
54+
const id = codeCellId(index)
55+
item.setAttribute('id', id);
56+
// Insert the button just inside the end of the next div
57+
item.querySelector('div').insertAdjacentHTML('beforeend', hideCodeButton(id))
5958

60-
// Set up the visibility toggle
61-
hideLink = document.querySelector(`#${id} div.highlight + input + label`);
62-
hideLink.addEventListener('click', toggleCodeCellVisibility)
63-
});
64-
}
59+
// Set up the visibility toggle
60+
hideLink = document.querySelector(`#${id} div.highlight + input + label`);
61+
hideLink.addEventListener('click', toggleCodeCellVisibility)
62+
});
63+
}
6564

6665

67-
// Initialize the hide buttos
68-
var initHiddenCells = function () {
69-
// Add hide buttons to the cells
70-
addHideButton();
66+
// Initialize the hide buttos
67+
var initHiddenCells = function () {
68+
// Add hide buttons to the cells
69+
addHideButton();
7170

72-
// Toggle the code cells that should be hidden
73-
document.querySelectorAll('div.hidecode input').forEach(function (item) {
74-
setCodeCellVisibility(item, 'hidden');
75-
item.checked = true;
76-
})
77-
}
71+
// Toggle the code cells that should be hidden
72+
document.querySelectorAll('div.hidecode input').forEach(function (item) {
73+
setCodeCellVisibility(item, 'hidden');
74+
item.checked = true;
75+
})
76+
}
7877

79-
initFunction(initHiddenCells);
78+
initFunction(initHiddenCells);
8079

81-
</script>
82-
{% endif %}
80+
</script>

‎jupyter_book/book_template/_sass/components/_components.hidecells.scss

-5
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,6 @@ $plusminus-anim-length: .25s;
2626
padding: 0px !important;
2727
}
2828

29-
// Removed entire cells
30-
.removed {
31-
display: none;
32-
}
33-
3429
// Plusminus buttons
3530
// Adapted from https://codepen.io/FluidOfInsanity/pen/EyQGgw
3631

‎jupyter_book/book_template/content/01/3/Plotting_the_Classics.ipynb

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"execution_count": 1,
66
"metadata": {
77
"tags": [
8-
"removecell"
8+
"remove_cell"
99
]
1010
},
1111
"outputs": [],

‎jupyter_book/book_template/content/03/4/Introduction_to_Tables.ipynb

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"metadata": {
77
"collapsed": true,
88
"tags": [
9-
"removecell"
9+
"remove_cell"
1010
]
1111
},
1212
"outputs": [],

‎jupyter_book/book_template/content/features/hiding.ipynb

+170-25
Large diffs are not rendered by default.

‎jupyter_book/book_template/content/features/interactive_cells.ipynb

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
"execution_count": 2,
115115
"metadata": {
116116
"tags": [
117-
"hidecode",
117+
"hide_input",
118118
"interactive"
119119
]
120120
},

‎jupyter_book/book_template/content/features/notebooks.ipynb

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
"execution_count": 3,
114114
"metadata": {
115115
"tags": [
116-
"removecell"
116+
"remove_cell"
117117
]
118118
},
119119
"outputs": [

‎jupyter_book/book_template/scripts/templates/jekyllmd.tpl

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
{%- extends 'markdown.tpl' -%}
22

3-
43
<!-- All code cells -->
54
{%- block codecell %}
6-
<div markdown="1" class="cell code_cell{% if 'removecell' in cell.metadata.tags %} removed{% endif %}">
5+
{% if 'remove_cell' not in cell.metadata.tags and 'removecell' not in cell.metadata.tags %}
6+
<div markdown="1" class="cell code_cell">
77
{{- super() }}
88
</div>
9+
{% endif %}
910
{% endblock codecell %}
1011

1112
<!-- Add class for input area -->
1213
{% block input %}
14+
{%- if 'remove_input' not in cell.metadata.tags %}
1315
{%- if cell.source != '' -%}
14-
<div class="input_area{% if 'hidecode' in cell.metadata.tags %} hidecode{% endif %}" markdown="1">
16+
<div class="input_area{% if 'hide_input' in cell.metadata.tags or 'hidecode' in cell.metadata.tags %} hidecode{% endif %}" markdown="1">
1517
```
1618
{%- if 'magics_language' in cell.metadata -%}
1719
{{ cell.metadata.magics_language}}
1820
{%- elif 'name' in nb.metadata.get('language_info', {}) -%}
1921
{{ nb.metadata.language_info.name }}
2022
{% endif %}
2123
{{- cell.source }}
24+
{% endif %}
2225
```
2326
</div>
2427
{%- endif %}
@@ -67,3 +70,10 @@
6770
{:.output_png}
6871
{{- super() -}}
6972
{% endblock data_png %}
73+
74+
<!-- Markdown cells -->
75+
{% block markdowncell %}
76+
{% if 'remove_cell' not in cell.metadata.tags and 'removecell' not in cell.metadata.tags %}
77+
{{- super() }}
78+
{% endif %}
79+
{%- endblock markdowncell %}

‎jupyter_book/tests/site/content/tests/notebooks.ipynb

+3-3
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
"execution_count": 3,
114114
"metadata": {
115115
"tags": [
116-
"removecell"
116+
"remove_cell"
117117
]
118118
},
119119
"outputs": [
@@ -154,7 +154,7 @@
154154
"execution_count": 4,
155155
"metadata": {
156156
"tags": [
157-
"hidecode"
157+
"hide_input"
158158
]
159159
},
160160
"outputs": [
@@ -193,7 +193,7 @@
193193
"execution_count": 5,
194194
"metadata": {
195195
"tags": [
196-
"hidecode"
196+
"hide_input"
197197
]
198198
},
199199
"outputs": [

‎jupyter_book/tests/test_create.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ def test_notebook(tmpdir):
207207

208208
# Cell hiding etc works
209209
assert is_in(lines, 'hidecode')
210-
assert is_in(lines, 'removed')
210+
assert not is_in(lines, 'none of this should show up in the textbook')
211211

212212
# Static files are copied over
213213
assert op.exists(op.join(path_build_test, '_build', 'tests', 'cool.jpg'))

0 commit comments

Comments
 (0)