Refine "other versions" behavior (#1538)

When you click the "other versions" option it used to take you to the
version link farm page. While it is nice to get all the versions this
loses the one of the nice behaviors of the versions drop down, namely
that it checks if the page you are on exists in the target version and
drops you right on that page if it does.

This change stops it from sending you to the link farm and instead
un-hides another drop down that contains *all* of the versions.

Relates to #1419 and #1536.

Author: nik9000

integtest/spec/all_books_spec.rb

@@ -624,10 +624,17 @@ def self.setup_example(repo, lang, hash)
           <meta name="robots" content="noindex,nofollow" />
         HTML
       end
-      context 'the version drop down' do
+      context 'the live versions drop down' do
         it 'contains only the live branch' do
           expect(body).to include(<<~HTML.strip)
-            <select><option value="master" selected>master (current)</option><option value="other">other versions</option></select>
+            <select id="live_versions"><option value="master" selected>master (current)</option><option value="other">other versions</option></select>
+          HTML
+        end
+      end
+      context 'the other versions drop down' do
+        it 'contains all branches' do
+          expect(body).to include(<<~HTML.strip)
+            <span id="other_versions">other versions: <select><option value="master" selected>master (current)</option><option value="nonlive">nonlive</option></select>
           HTML
         end
       end
@@ -646,13 +653,17 @@ def self.setup_example(repo, lang, hash)
           <meta name="robots" content="noindex,nofollow" />
         HTML
       end
-      context 'the version drop down' do
+      context 'the live versions drop down' do
         it 'contains the deprecated branch' do
           expect(body).to include(<<~HTML.strip)
-            <select><option value="master">master (current)</option><option value="nonlive" selected>nonlive (out of date)</option></select>
+            <select id="live_versions"><option value="master">master (current)</option><option value="nonlive" selected>nonlive (out of date)</option></select>
           HTML
         end
       end
+      it "it doesn't contain the other versions drop down" do
+        # *because* there aren't any versions filtered from the list
+        expect(body).not_to include 'id="other_versions"'
+      end
     end
     page_context "the dead branch's chapter",
                  'html/test/nonlive/chapter.html' do

lib/ES/Book.pm

@@ -329,7 +329,8 @@ sub _update_title_and_version_drop_downs {
 #===================================
     my ( $self, $branch_dir, $branch ) = @_;
 
-    my $title = '<li id="book_title"><span>' . $self->title . ': <select>';
+    my $title = '<li id="book_title"><span>' . $self->title . ': ';
+    $title .= '<select id="live_versions">';
     my $removed_any = 0;
     for my $b ( @{ $self->branches } ) {
         my $live = grep( /^$b$/, @{ $self->{live_branches} } );
@@ -346,7 +347,19 @@ sub _update_title_and_version_drop_downs {
         $title .= '</option>';
     }
     $title .= '<option value="other">other versions</option>' if $removed_any;
-    $title .= '</select></span></li>';
+    $title .= '</select>';
+    if ( $removed_any ) {
+        $title .= '<span id="other_versions">other versions: <select>';
+        for my $b ( @{ $self->branches } ) {
+            $title .= '<option value="' . $b . '"';
+            $title .= ' selected'  if $branch eq $b;
+            $title .= '>' . $self->branch_title($b);
+            $title .= ' (current)' if $self->current eq $b;
+            $title .= '</option>';
+        }
+        $title .= '</select>';
+    }
+    $title .= '</span></li>';
     for ( 'toc.html', 'index.html' ) {
         my $file = $branch_dir->file($_);
         # Ignore missing files because the books haven't been built yet. This

resources/web/docs_js/index.js

@@ -128,14 +128,19 @@ function init_toc(lang_strings) {
   var v_selected = title.find('select option:selected');
   title
     .find('select')
-    .change(function() {
-       var version = title.find('option:selected').val();
-       utils.get_current_page_in_version(version).fail(function() {
-         v_selected.attr('selected', 'selected');
-         alert(lang_strings('This page is not available in the docs for version:')
-               + version);
-       });
-     });
+    .change(function(e) {
+      var version = $(e.target).find('option:selected').val();
+      if (version === "other") {
+        $("#other_versions").show();
+        $("#live_versions").hide();
+        return;
+      }
+      utils.get_current_page_in_version(version).fail(function() {
+        v_selected.attr('selected', 'selected');
+        alert(lang_strings('This page is not available in the docs for version:')
+              + version);
+      });
+    });
 }
 
 // Main function, runs on DOM ready

resources/web/docs_js/utils.js

@@ -7,10 +7,6 @@ export function get_base_url(href) {
 
 const VERSION_REGEX = /[^\/]+\/+([^\/]+\.html)/;
 export function get_current_page_in_version(version) {
-  if (version === "other") {
-    location.href = location.href.replace(VERSION_REGEX, "index.html");
-    return;
-  }
   var url = location.href.replace(VERSION_REGEX, version + "/$1");
   return $.get(url).done(function() {
     location.href = url

resources/web/style/toc.pcss

@@ -105,14 +105,19 @@
   }
 }
 
-/* Right hand TOC */
 #book_title {
-    color: #2b4590;
+  color: #2b4590;
 
-    select {
-        background-color: #fcfcfc;
-        border: none;
-        margin-left: 1px;
-        color: #2b4590;
-    }
+  select {
+    background-color: #fcfcfc;
+    border: none;
+    margin-left: 1px;
+    color: #2b4590;
+    width: 150px;
+  }
+  #other_versions {
+    /* We'll show it if you click "other versions". */
+    display: none;
+  }
 }
+