Responsive anchors

[curtismitchell]

Added anchors to H2 headers that jump to the navigation menu. The anchors only show when the screen size is small and the navigation menu is moved to the top of the page.

The default anchor text is [⬆], but this can be overridden in the config.json file by setting a value for tocAnchor.

[Dynalon]

Thanks for your pull request!

Since this is the first time I am accepting a major contribution I have setup a contributors guidelines in the MDwiki webiste. For code contributions, it is necessary to submit a contributor license agreement beforehand. You can find the instructions and the reasons behind this here:
http://dynalon.github.io/mdwiki/#!contribute/index.md#Contributing_Sourcecode

There are some minor things that I need to change in your code but then I will accept your pull request.

[curtismitchell]

@Dynalon I just submitted the CLA. Should I resubmit the pull request?

[Dynalon]

Thanks for your contribution!

[flpommeton]

I am having some troubles here. I am not familiar with all of the terminology but here goes:

I updated to the latest release 0.6.0 and the default anchor started appearing after each level 3 section header. I thought that clicking on this would return me to the top of the page, but clicking did not do anything. I added "tocAnchor": "top" to the config.json to confirm that I was at least working in the right area and indeed the anchor changed to "top", but still the same results.

Obviously I am confused. This discussion about responsive anchors states they have been added to H2 headers, but they are showing in my H3 headers and are unresponsive. I appreciate every ounce of help, always.

Thanks, Fred

www.appletons.ca

[Dynalon]

You are right, this is a bug. You have disabled the left menu, where the anchor should be to jump. If it is disabled, the jump anchor is not there and it won't work. Didn't think of that. I will fix this ASAP.

[curtismitchell]

Yep - I believe it is two bugs: the one @Dynalon mentioned and the one where H3s are also getting the jump link. The latter could become a feature if we document that as intended behavior. Thoughts?

[flpommeton]

Before I answer the H3 feature question, is there a way to position the "anchor" ahead of the header? It seems awkward having it under the heading.

Now to the H3 feature question: I have not used H1 in my site as I feel it is redundant to name a page. So far I have used H3 exclusively (I just like the look of H3 for my purposes). Could the anchor feature be an option by header level? Getting to top or to the side menu is important.

[curtismitchell]

It can definitely be placed before the header. I think the default spacing in Bootstrap causes it to look a little weird. But, by convention, the links should be before the header.

As for H3s, it could be an option. In my opinion, since H3s are not (by default) presented in the side menu, limiting it to H2s (for now) makes it work much like a "table of contents".

[Dynalon]

Before I merge the pull request, I did some experiments with the placement of the jumplink. I really wanted to have the jump link not below a heading, but right at the end of a paragraph in front of the heading. But there were some problems, like you don't want to have one before the first heading, and there is no real heading for the last paragraph and so on. But I'd still prefer that solution, because you will most likely want to jump back up AFTER you read the paragraph.

[Dynalon]

Just to drop another idea, instead of an auto placement we could add a small gimmick link that can be placed manually whereever you like: [gimmick: jumpTop]()

[curtismitchell]

I like that idea. Could the gimmick take a param that auto adds the gimmick to select tags?

[flpommeton]

I have been a little confused today by the "bleeding" in and out of the anchors as the screen width changes. Is there a reason why this is happening, or why it is good?

[flpommeton]

I would prefer options in the config.json to a gimmick. That may not be a normalized response, but it is the best that I can do.

[Dynalon]

@flpommeton If you mean the "go up" anchors: they are only enabled if you are in "mobile" mode, i.e. if the screen width is small like on a phone or ipad. In that environment, the side menu (which you had disabled for your page) is not visible permanently, but only at the top. So you likely want a link to scroll back to the menu (on top) instead of scrolling all the way back. On regular desktop computer with lot of screen width, the side menu is displayed all the time so no need for a jump link.

You can disable jumplinks alltogether by putting an empty string in the config.json file: "tocAnchor": ""