Skip to content

Commit 22ac896

Browse files
jcb91jcb91
committed
[toc2] simplify setting panel height
by placing panel inside #site and using display:flex also allows simpler handlers for resize events
1 parent 4151a88 commit 22ac896

File tree

2 files changed

+67
-107
lines changed

2 files changed

+67
-107
lines changed

‎src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -74,32 +74,35 @@ padding-left: 20px;
7474
margin: 0;
7575
}
7676

77-
.float-wrapper {
77+
#toc-wrapper {
78+
z-index: 100;
7879
position: fixed !important;
80+
display: flex;
81+
flex-direction: column;
82+
overflow: hidden;
83+
padding: 10px;
84+
border-style: solid;
85+
border-width: thin;
86+
background-color: #fff; /* default - alterable via nbextension-configurator */
87+
}
88+
89+
#toc-wrapper .toc {
90+
flex-grow: 1;
91+
}
92+
93+
.float-wrapper {
7994
top: 120px;
80-
max-width:600px;
81-
right: 20px;
82-
border: thin solid rgba(0, 0, 0, 0.38);
95+
left: 20px;
96+
border-color: rgba(0, 0, 0, 0.38);
8397
border-radius: 5px;
84-
padding:10px;
85-
background-color: #fff; /* default - alterable via nbextension-configurator */
8698
opacity: .8;
87-
z-index: 100;
88-
overflow: hidden;
8999
}
90100

91101
.sidebar-wrapper {
92-
height: 100%;
93-
left: 5px;
94-
padding: 10px;
95-
position: fixed !important;
102+
top: 0;
103+
bottom: 0;
96104
width: 212px;
97-
max-width: 28%;
98-
background-color: #fff; /* default - alterable via nbextension-configurator */
99-
border-style: solid;
100105
border-color: #eeeeee; /* default - alterable via nbextension-configurator */
101-
opacity: .99;
102-
overflow: hidden;
103106
}
104107

105108
#toc-wrapper.closed {

‎src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.js

Lines changed: 47 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -185,15 +185,6 @@
185185
nb_inner.css(inner_css);
186186
}
187187

188-
function setSideBarHeight(cfg, st) {
189-
if (cfg.sideBar) {
190-
var headerVisibleHeight = $('#header').is(':visible') ? $('#header').height() : 0
191-
$('#toc-wrapper').css('top', liveNotebook ? headerVisibleHeight : 0)
192-
$('#toc-wrapper').css('height', $('#site').height());
193-
$('#toc').css('height', $('#toc-wrapper').height() - $('#toc-header').height())
194-
}
195-
}
196-
197188
var makeUnmakeMinimized = function (cfg, animate) {
198189
var open = cfg.sideBar || cfg.toc_section_display;
199190
var new_css, wrap = $('#toc-wrapper');
@@ -218,7 +209,33 @@
218209
return open;
219210
};
220211

212+
var makeUnmakeSidebar = function (cfg, save_size) {
213+
var make_sidebar = cfg.sideBar;
214+
var view_rect = (liveNotebook ? document.getElementById('site') : document.body).getBoundingClientRect();
215+
var wrap = $('#toc-wrapper')
216+
.toggleClass('sidebar-wrapper', make_sidebar)
217+
.toggleClass('float-wrapper', !make_sidebar)
218+
.resizable('option', 'handles', make_sidebar ? 'e' : 'all');
219+
wrap.children('.ui-resizable-se').toggleClass('ui-icon', !make_sidebar);
220+
wrap.children('.ui-resizable-e').toggleClass('ui-icon ui-icon-grip-dotted-vertical', make_sidebar);
221+
if (make_sidebar) {
222+
if (save_size) {
223+
oldTocSize = wrap.css(['height', 'width']);
224+
}
225+
wrap.css({top: view_rect.top, height: '', left: 0});
226+
}
227+
else {
228+
wrap.css({height: oldTocSize.height, width: oldTocSize.width});
229+
}
230+
setNotebookWidth(cfg);
231+
};
232+
221233
var create_toc_div = function(cfg, st) {
234+
235+
var callbackPageResize = function (evt) {
236+
setNotebookWidth(cfg);
237+
};
238+
222239
var toc_wrapper = $('<div id="toc-wrapper"/>')
223240
.css('display', 'none')
224241
.append(
@@ -246,67 +263,24 @@
246263
).append(
247264
$("<div/>").attr("id", "toc").addClass('toc')
248265
)
249-
250-
$("body").append(toc_wrapper);
251-
252-
// On header/menu/toolbar resize, resize the toc itself
253-
// (if displayed as a sidebar)
254-
if (liveNotebook) {
255-
events.on("resize-header.Page", function() {
256-
setSideBarHeight(cfg, st);
257-
});
258-
events.on("toggle-all-headers", function() {
259-
setSideBarHeight(cfg, st);
260-
});
261-
}
266+
.prependTo(liveNotebook ? '#site' : document.body);
262267

263268
// enable dragging and save position on stop moving
264-
$('#toc-wrapper').draggable({
265-
269+
toc_wrapper.draggable({
266270
drag: function(event, ui) {
267-
268-
// If dragging to the left side, then transforms in sidebar
269-
if ((ui.position.left <= 0) && (cfg.sideBar == false)) {
270-
cfg.sideBar = true;
271-
st.oldTocHeight = $('#toc-wrapper').css('height');
272-
if (liveNotebook) {
273-
IPython.notebook.metadata.toc['sideBar'] = true;
274-
IPython.notebook.set_dirty();
275-
}
276-
toc_wrapper.removeClass('float-wrapper').addClass('sidebar-wrapper');
277-
setNotebookWidth(cfg, st)
278-
var headerVisibleHeight = $('#header').is(':visible') ? $('#header').height() : 0
279-
ui.position.top = liveNotebook ? headerVisibleHeight : 0;
271+
var make_sidebar = ui.position.left < 20; // 20 is snapTolerance
272+
if (make_sidebar) {
273+
ui.position.top = (liveNotebook ? document.getElementById('site') : document.body).getBoundingClientRect().top;
280274
ui.position.left = 0;
281-
if (liveNotebook) {
282-
$('#toc-wrapper').css('height', $('#site').height());
283-
} else {
284-
$('#toc-wrapper').css('height', '96%');
285-
}
286-
$('#toc').css('height', $('#toc-wrapper').height() - $('#toc-header').height());
287275
}
288-
if (ui.position.left <= 0) {
289-
ui.position.left = 0;
290-
var headerVisibleHeight = $('#header').is(':visible') ? $('#header').height() : 0
291-
ui.position.top = liveNotebook ? headerVisibleHeight : 0;
292-
}
293-
if ((ui.position.left > 0) && (cfg.sideBar == true)) {
294-
cfg.sideBar = false;
295-
if (liveNotebook) {
296-
IPython.notebook.metadata.toc['sideBar'] = false;
297-
IPython.notebook.set_dirty();
298-
}
299-
if (st.oldTocHeight == undefined) st.oldTocHeight = Math.max($('#site').height() / 2, 200)
300-
$('#toc-wrapper').css('height', st.oldTocHeight);
301-
toc_wrapper.removeClass('sidebar-wrapper').addClass('float-wrapper');
302-
setNotebookWidth(cfg, st)
303-
$('#toc').css('height', $('#toc-wrapper').height() - $('#toc-header').height()); //redraw at begin of of drag (after resizing height)
304-
276+
if (make_sidebar !== cfg.sideBar) {
277+
var was_minimized = cfg.toc_section_display;
278+
cfg.toc_section_display = setMd('toc_section_display', true);
279+
cfg.sideBar = setMd('sideBar', make_sidebar);
280+
makeUnmakeMinimized(cfg);
281+
makeUnmakeSidebar(cfg, was_minimized);
305282
}
306283
}, //end of drag function
307-
start: function(event, ui) {
308-
$(this).width($(this).width());
309-
},
310284
stop: function(event, ui) { // on save, store toc position
311285
if (liveNotebook) {
312286
IPython.notebook.metadata.toc['toc_position'] = {
@@ -321,20 +295,18 @@
321295
// Ensure position is fixed (again)
322296
$('#toc-wrapper').css('position', 'fixed');
323297
},
324-
containment: 'body',
298+
containment: 'parent',
325299
snap: 'body, #site',
300+
snapTolerance: 20,
326301
});
327302

328-
$('#toc-wrapper').resizable({
303+
toc_wrapper.resizable({
329304
resize: function(event, ui) {
330305
if (cfg.sideBar) {
331306
setNotebookWidth(cfg, st)
332-
} else {
333-
$('#toc').css('height', $('#toc-wrapper').height() - $('#toc-header').height());
334307
}
335308
},
336309
start: function(event, ui) {
337-
$(this).width($(this).width());
338310
if (!cfg.sideBar) {
339311
cfg.toc_section_display = setMd('toc_section_display', true);
340312
makeUnmakeMinimized(cfg);
@@ -352,17 +324,17 @@
352324
$('#toc').css('height', $('#toc-wrapper').height() - $('#toc-header').height())
353325
IPython.notebook.set_dirty();
354326
}
355-
}
327+
},
328+
containment: 'parent',
329+
minHeight: 100,
330+
minWidth: 165,
356331
})
357332

358-
$("body").append(toc_wrapper);
359-
360333
// On header/menu/toolbar resize, resize the toc itself
361334
// (if displayed as a sidebar)
335+
$(window).on('resize', callbackPageResize);
362336
if (liveNotebook) {
363-
events.on("resize-header.Page toggle-all-headers", function() {
364-
setSideBarHeight(cfg, st);
365-
});
337+
events.on("resize-header.Page toggle-all-headers", callbackPageResize);
366338
}
367339

368340
// restore toc position at load
@@ -433,7 +405,7 @@
433405
} else {
434406
toc_wrapper.addClass('float-wrapper');
435407
}
436-
}
408+
};
437409

438410
//----------------------------------------------------------------------------
439411
// on scroll - mark the toc item corresponding to the first header visible in
@@ -568,7 +540,6 @@
568540
return
569541
}
570542

571-
572543
var toc_wrapper = $("#toc-wrapper");
573544
if (toc_wrapper.length === 0) { // toc window doesn't exist at all
574545
create_toc_div(cfg, st); // create it
@@ -671,20 +642,6 @@
671642

672643
events[cfg.collapse_to_match_collapsible_headings ? 'on' : 'off'](
673644
'collapse.CollapsibleHeading uncollapse.CollapsibleHeading', callback_toc2_collapsible_headings);
674-
675-
$(window).resize(function() {
676-
$('#toc').css({
677-
maxHeight: $(window).height() - 30
678-
});
679-
$('#toc-wrapper').css({
680-
maxHeight: $(window).height() - 10
681-
});
682-
setSideBarHeight(cfg, st),
683-
setNotebookWidth(cfg, st);
684-
});
685-
686-
$(window).trigger('resize');
687-
688645
};
689646

690647
var toggle_toc = function(cfg, st) {

0 commit comments

Comments
 (0)