Merge pull request #2213 from NCEAS/bugfix-2195-portal-TOC

Prevent weird TOC placement in portals
NCEAS · Oct 26, 2023 · 0cc61ef · 0cc61ef
2 parents 18e585c + acc05af
commit 0cc61ef
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -144,9 +144,7 @@ define(["jquery",
               }
           });
 
-          if(this.markdownView){
-            this.markdownView.postRender();
-          }
+          this.markdownView?.tocView?.setAffix();
         },
 
         /**