diff --git a/src/js/themes/dataone/css/metacatui.css b/src/js/themes/dataone/css/metacatui.css index 625095593..90614feb4 100644 --- a/src/js/themes/dataone/css/metacatui.css +++ b/src/js/themes/dataone/css/metacatui.css @@ -479,6 +479,10 @@ width: 100%; color: var(--c-neutral-8); } +.toc-view + .markdown { + min-height: 90vh; +} + /* FORM/INPUT CUSTOMIZATIONS -------------------------------------------------- */ .depth { diff --git a/src/js/views/MarkdownView.js b/src/js/views/MarkdownView.js index ada6ecd33..41be210b3 100644 --- a/src/js/views/MarkdownView.js +++ b/src/js/views/MarkdownView.js @@ -88,7 +88,7 @@ define([ "jquery", "underscore", "backbone", * render - Renders the MarkdownView; converts markdown to HTML and * displays it. */ - render: function() { + render: function () { // Show a loading message while we render the markdown to HTML this.$el.html(this.loadingTemplate({ @@ -143,15 +143,10 @@ define([ "jquery", "underscore", "backbone", this.$el.html(this.template({ markdown: htmlFromMD })); if( this.showTOC ){ - this.listenToOnce(this, "TOCRendered", function(){ - this.trigger("mdRendered"); - this.postRender(); - }); this.renderTOC(); - } else { - this.trigger("mdRendered"); - this.postRender(); } + + this.trigger("mdRendered"); }); @@ -162,15 +157,6 @@ define([ "jquery", "underscore", "backbone", }, - postRender: function(){ - if(this.tocView){ - this.tocView.postRender(); - } else { - this.listenToOnce(this, "TOCRendered", function(){ - this.tocView.postRender(); - }); - } - }, /** * listRequiredExtensions - test which extensions are needed, then load @@ -378,7 +364,7 @@ define([ "jquery", "underscore", "backbone", view.$el.addClass("span9"); } - view.trigger("TOCRendered"); + view.tocView.setAffix(); }); diff --git a/src/js/views/TOCView.js b/src/js/views/TOCView.js index bcfeb4dca..1e68b66db 100644 --- a/src/js/views/TOCView.js +++ b/src/js/views/TOCView.js @@ -121,7 +121,6 @@ define(["jquery", } - var view = this; return this; }, @@ -278,11 +277,11 @@ define(["jquery", // Add scroll spy $("body").off("activate"); - $("body").on("activate", function(e){ + $("body").on("activate", function (e) { view.scrollSpyExtras(e); }); $(window).off("resize"); - $(window).on("resize", function(){ + $(window).on("resize", function () { $spy.scrollspy("refresh"); }); @@ -294,19 +293,26 @@ define(["jquery", /** - * affixTOC - description + * Adds and refreshes bootstrap's affix functionality. This function + * should be called after the DOM has been rendered or updated. Renamed + * from postRender to avoid it being called automatically by Backbone. + * @since x.x.x */ - postRender: function(){ + setAffix: function(){ try { var isVisible = this.$el.find(":visible").length > 0; - if(this.affix === true && isVisible){ + if(!isVisible || !this.$el.offset()){ + return; + } + + if (this.affix === true) { this.$el.affix({ offset: this.$el.offset().top }); } - if(this.addScrollspy && isVisible){ + if(this.addScrollspy){ this.renderScrollspy(); } diff --git a/src/js/views/portals/PortalSectionView.js b/src/js/views/portals/PortalSectionView.js index 38da5f54e..afb164607 100644 --- a/src/js/views/portals/PortalSectionView.js +++ b/src/js/views/portals/PortalSectionView.js @@ -144,9 +144,7 @@ define(["jquery", } }); - if(this.markdownView){ - this.markdownView.postRender(); - } + this.markdownView?.tocView?.setAffix(); }, /**