TOC flows off-screen for pages with large number of headers/sub-headers

[djflux]

A page that has a large number of headers and sub-headers will render a table of contents off the bottom of the screen in a sidebar using TOC.

I am using a fixed navbar and a fixed footer in my Tweeki settings. Here are my configs:

Tweeki-sidebar-left: Help,SIDEBAR,LANGUAGES Tweeki-sidebar-right: EDIT-EXT,TALK,TOC Tweeki-navbar-class: navbar navbar-default navbar-fixed-top Tweeki-footer-class: footer-fixed Tweeki-container-class: container-fluid

I tried to TOC in both the left and right sidebar, as well as making the footer sticky and also the container not fixed.

Any tips to make the TOC div have a vertical scrollbar? And possibly auto-scroll the div with scrollspy?

[djflux]

Looks like this guy had a similar issue:

http://blog.bigbasti.com/handling-too-long-scrollspy-menus/

Adding the height and overflow-y CSS doesn't work with 95% for the height but does work for a pixel setting (e.g. height: 600px).

I'm going to try to test a couple of things and may submit a pull request.

[thaider]

See also this answer on Tweeki's discussion page at mediawiki.org:

I see several possibilities for you here. If you want it fancy, that is, if the TOC should always stay in sight but slowly scroll down as you approach the end of the page, you'll have to write your own javascript. This would be rather advanced. One easy solution is to “unfix” the sidebar(s) with this simple line of CSS that you can put into MediaWiki:Common.css:

.sidebar-wrapper { position:absolute }

The sidebar would then move together with the rest of the page. A third possibility – the one I would prefer – would be to group them so that you only have a handful of first-level headings and a number of subheadings that will only be shown in the TOC for the section currently in view.

[djflux]

Thanks for the reply and the ideas.

Using the referenced link in https://github.com/thaider/Tweeki/issues/119#issuecomment-400832424 above I used animatescroll.js and some CSS to make the TOC auto-scroll with the page. Links repeated here for ease of reference:

http://blog.bigbasti.com/handling-too-long-scrollspy-menus/ http://plugins.compzets.com/animatescroll https://github.com/rampatra/animatescroll.js

I added animatescoll.js to Tweeki skin and here is a diff of changes that made it work.

diff --git a/skin.json b/skin.json
index 870bdf0..b40e195 100644
--- a/skin.json
+++ b/skin.json
@@ -98,6 +98,7 @@
                "skins.tweeki.scripts": {
                        "position": "bottom",
                        "scripts": [
+                               "animatescroll.js",
                                "tweeki.js"
                        ],
                        "dependencies": [
diff --git a/tweeki.js b/tweeki.js
index de232ce..12d5b33 100644
--- a/tweeki.js
+++ b/tweeki.js
@@ -134,3 +134,23 @@ jQuery( function( $ ) {
                  }
               });
        });
+
+        /**
+         * This code along with animatescroll.js and some CSS changes to #tweekiTOC
+         * will automatically scroll pages that have long tables of contents.
+         *
+         * animatescroll is available here:
+         *
+         *   https://plugins.compzets.com/animatescroll/
+         *   https://github.com/rampatra/animatescroll.js
+         *
+         * The following code comes from an example here:
+         *
+         *   http://blog.bigbasti.com/handling-too-long-scrollspy-menus/
+         *
+         **/
+        $('#tweekiTOC').on('activate.bs.scrollspy', function () {
+                item = $('#tweekiTOC').find(".active").last();
+                item.animatescroll({element: '#tweekiTOC', padding:20});
+        });
+

I also added the following to MediaWiki:Common.css

/* This is here for pages with a long table of contents */
#tweekiTOC {
    overflow-y: auto;
    height: 600px;
}

I'm working on adding JavaScript to calculate the height of the TOC div and dynamically add the height CSS attribute to the element. Once I get that working I'll drop a pull request and it can be incorporated if you so choose.

Cheers, Flux

[thaider]

Nice work! Just let me know when you're done. Ideally it's an opt-in feature, controlled by a configuration option like $wgTweekiSkinAnimateScrollspy that would be set to false by default.

[djflux]

I was thinking about doing some calculation in the JS that dynamically determines if the navbar and the footer are fixed and animate the scrollspy accordingly. This method reduces the configuration options that the site admin has to remember/know when using the skin.

Is the rationale behind adding the $wgTweekiSkinAnimateScrollspy config option to reduce the page render time at page load or something else?

Let me know your thoughts.

Cheers!

[derklompi]

Still working on this?

[djflux]

I am still working on it. But haven't added the code yet. Other things taking priority right now. I'll update when I have something.

[thaider]

@djflux still owing you an answer to your question above: the rationale was reducing page load and minimizing the risk of interferences and broken javascript. There's always the chance of unintended consequences (e.g. how does the solution work on small screens?). Maybe this chances are so small that we can have autoscroll as default but it should at least be possible to opt out. Let me know if you need help with implementing this...