Add a versions dropdown to the html sidebar

[michallepicki]

• add javascript_config_path config
• generate versions dropdown using javascript when versionNodes is defined

Closes #964

edit: now you can try it on hexdocs

[michallepicki]

We will probably need to test if the version dropdown looks good on all browsers (I tested Chrome and Firefox on Linux and while there are slight differences, it looks OK).

Also for generating the dropdown and options I just stitched together some functions and jQuery but I saw that we have some fancy templates - we could use them instead.

[josevalim]

Also for generating the dropdown and options I just stitched together some functions and jQuery but I saw that we have some fancy templates - we could use them instead.

Good call. It looks like the template can cleanup that part considerably. Could you please give it a try? :D

[michallepicki]

@josevalim done

[michallepicki]

I tried out a few browsers that I have access to and overall the feature works everywhere.

One issue that I see with the current styling is that the dropdown arrow is placed slightly differently (the gap between version number and the dropdown arrow is different). The biggest difference is between Firefox and Chromium. I don't think this is a big issue even though I am one of the very few people using Firefox on Android.

Firefox 65 Android:

Firefox 65 Linux:

Chromium 71 Linux:

Edge 17 Windows 10:

IE 11 Windows 10:

Safari 11 macOS High Sierra:

Additional issue on IE 11 is not supporting CSS initial value. We could just set the text color to black there but I'm not sure how it would work on systems with dark system theme. Similarily, I don't think this is a big issue and I would leave it as it is. The text is still visible on mouse hover.

[Gazler]

Tries demo

*Clicks asdf*

😢 😢 😢 😢 😢 😢 😢 😢 😢 😢 😢 😢

[OvermindDL1]

Tried the demo, not seeing a dropdown element at all? I'm in elinks and I can normally access dropdowns just fine.

[michallepicki]

@OvermindDL1 Just to be clear, it doesn't work for you on elinks with javascript compiled in and enabled, right?

edit: @Gazler Fine, I removed it

[OvermindDL1]

@michallepicki I'm using ubuntu's and redhat's stock elinks, which I don't think do (although I could compile elinks myself for my home computer, at work I'm restricted to the redhat repo's for software installation except in very few pre-approved situations):

Ubuntu Features:
Standard, IPv6, gzip, bzip2, UTF-8, Periodic Saving, Viewer (Search
History, Timer, Marks), Cascading Style Sheets, Protocol
(Authentication, File, CGI, Finger, FSP, FTP, HTTP, URI rewrite, User
protocols), SSL (GnuTLS), MIME (Option system, Mailcap, Mimetypes
files), LED indicators, Bookmarks, Cookies, Form History, Global
History, Scripting (Lua, Perl), Goto URL History

RedHat Features:
Standard, IPv6, gzip, bzip2, UTF-8, Periodic Saving, Viewer (Search
History, Timer, Marks), Cascading Style Sheets, Protocol
(Authentication, BitTorrent, File, FTP, HTTP, URI rewrite, User
protocols), SSL (OpenSSL), MIME (Option system, Mailcap, Mimetypes
files), LED indicators, Bookmarks, Cookies, ECMAScript (SpiderMonkey),
Form History, Global History, Scripting (Spidermonkey ECMAScript), Goto
URL History

The redhat one lists ECMAScript (SpiderMonkey) but the dropdown box doesn't appear there either, just a static-text version string.

Though the 'expandable menu' doesn't work either, just refreshes the page when I try to access one of them. They really should be embedded lists that are just hidden and shown as desired using pure CSS (I do the same on my sites and they work just fine for 'expandable menus' identically to ex_doc's, except it always shows them all in elinks, meaning they actually work, there's no need for javascript on those...). But that's a side issue anyway.

Optimally, since I tend to be GUI-less much of my workday, I'd really really like programming documentation to actually fully work in a text browser or a simple curl ... | html_to_text | less for at least reading or so, which means no required javascript on things that can be done via standard methods, like expandable menu's can be done purely via html+css (even works on IE11 as I have to test for that at work).

[michallepicki]

@OvermindDL1 As mentioned in the PR description:

• add javascript_config_path config
• generate versions dropdown using javascript when versionNodes is defined

The main goal here is not having to regenerate old documentation when a new package version is published.

Maybe we could use some JavaScript polyfills for this SpiderMonkey version, or maybe instead we could use an iframe? I'm not sure.

[josevalim]

❤️ 💚 💙 💛 💜

[josevalim]

Now we just need to implement this on Hex side of things. :D