From 20ff61b942e615150697b2c1950dcfc7b97d3085 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Drouet?= <jeremie.drouet@gmail.com>
Date: Thu, 28 May 2020 10:11:29 +0200
Subject: [PATCH] handle archive feature toggling with css
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
---
 _includes/archive-list.html |  2 +-
 _includes/body.html         |  5 ++-
 _includes/head.html         |  1 -
 _includes/navigation.html   |  2 +-
 _scss/_archive.scss         | 15 ++++++++
 css/style.scss              |  1 +
 js/archive.js               | 69 +++++++++++++++++++++++++------------
 js/docs.js                  | 13 -------
 8 files changed, 67 insertions(+), 41 deletions(-)
 create mode 100644 _scss/_archive.scss

diff --git a/_includes/archive-list.html b/_includes/archive-list.html
index 5aa63588a8..00428e1061 100644
--- a/_includes/archive-list.html
+++ b/_includes/archive-list.html
@@ -1,4 +1,4 @@
-<div class="btn-group" style="visibility: hidden">
+<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     {% for item in site.data.docsarchive.archives %}{% if item.current == true %}Docker {{ item.name }} (current) {% endif %} {% endfor %}<span class="caret"></span>
   </button>
diff --git a/_includes/body.html b/_includes/body.html
index dbe6447914..3a248b36db 100644
--- a/_includes/body.html
+++ b/_includes/body.html
@@ -91,7 +91,7 @@
                             {% endunless %}
                             {% if page.noratings != true %}
                             <div id="ratings-div"
-                                style="color:#b9c2cc; text-align: center; margin-top: 150px; visibility: hidden">
+                                style="color:#b9c2cc; text-align: center; margin-top: 150px;">
                                 <div id="pd_rating_holder_8453675"></div>
                                 <script type="text/javascript">
                                     PDRTJS_settings_8453675 = {
@@ -126,7 +126,7 @@
                                 <div class="feedback-links">
                                     <ul>
                                         {% if edit_url != "" %}
-                                        <li style="visibility: hidden"><a href="{{ edit_url }}"><i
+                                        <li><a href="{{ edit_url }}"><i
                                                     class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this
                                                 page</a></li>{% endif %}
                                         <li><a href="https://github.com/docker/docker.github.io/issues/new?body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})"
@@ -194,7 +194,6 @@
     <script>
         // Default to assuming this is an archive and hiding some stuff
         // See js/archive.js and js/docs.js for logic relating to this
-        var isArchive = true;
         var dockerVersion = 'v{{ site.docker_ce_version }}';
         // In archives, we need to know the page root and we get it from JEKYLL_ENV in the jekyll build command
         var jekyllEnv = '{{ jekyll.environment }}';
diff --git a/_includes/head.html b/_includes/head.html
index b3ae6c937c..97a7aaaa29 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -62,7 +62,6 @@
   <script>
   // Default to assuming this is an archive and hiding some stuff
   // See js/archive.js and js/docs.js for logic relating to this
-  var isArchive = true;
   var dockerVersion = 'v{{ site.docker_ce_version }}';
   </script>
 </head>
diff --git a/_includes/navigation.html b/_includes/navigation.html
index d04f9b3365..d75804614d 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -3,7 +3,7 @@
         <img src="/images/docker-icon.svg" alt="Docker Docs" title="Docker Docs">
     </a>
 </div>
-<div class="search-form" id="search-div" style="visibility: hidden">
+<div class="search-form" id="search-div">
     <form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
         <input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
         <div id="autocompleteContainer">
diff --git a/_scss/_archive.scss b/_scss/_archive.scss
new file mode 100644
index 0000000000..4e70ee4585
--- /dev/null
+++ b/_scss/_archive.scss
@@ -0,0 +1,15 @@
+#ratings-div,
+.ctrl-right .btn-group,
+.feedback-links li:first-of-type,
+.search-form {
+  visibility: hidden;
+}
+
+.not-archive {
+  #ratings-div,
+  .ctrl-right .btn-group,
+  .feedback-links li:first-of-type,
+  .search-form {
+    visibility: visible;
+  }
+}
diff --git a/css/style.scss b/css/style.scss
index 79f34e5e83..78c41e3b12 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -2,6 +2,7 @@
 # Docker Documentation Theme
 ---
 
+@import "archive";
 @import "breakpoint";
 @import "variables";
 @import "night-mode";
diff --git a/js/archive.js b/js/archive.js
index f73bf58fcb..b942d783de 100644
--- a/js/archive.js
+++ b/js/archive.js
@@ -6,28 +6,45 @@ layout: null
 if (window.navigator.onLine) {
   var suppressButterBar = false;
   /* This JSON file contains a current list of all docs versions of Docker */
-  $.getJSON("/js/archives.json", function(result){
-    var outerDivStart = '<div id="archive-butterbar"><div class="container"><div style="text-align: center"><span id="archive-list">This is <b><a href="https://docs.docker.com/docsarchive/" style="color: #254356; text-decoration: underline !important">archived documentation</a></b> for Docker&nbsp;' + dockerVersion + '. Go to the <a style="color: #254356; text-decoration: underline !important" href="https://docs.docker.com/">latest docs</a> or a different version:&nbsp;&nbsp;</span>' +
-                               '<span style="z-index: 1001" class="dropdown">';
-    var listStart = '<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
-    var listEnd = '</ul>';
-    var outerDivEnd = '</span></div></div></div>';
+  $.getJSON("/js/archives.json", function (result) {
+    var outerDivStart =
+      '<div id="archive-butterbar"><div class="container"><div style="text-align: center"><span id="archive-list">This is <b><a href="https://docs.docker.com/docsarchive/" style="color: #254356; text-decoration: underline !important">archived documentation</a></b> for Docker&nbsp;' +
+      dockerVersion +
+      '. Go to the <a style="color: #254356; text-decoration: underline !important" href="https://docs.docker.com/">latest docs</a> or a different version:&nbsp;&nbsp;</span>' +
+      '<span style="z-index: 1001" class="dropdown">';
+    var listStart =
+      '<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
+    var listEnd = "</ul>";
+    var outerDivEnd = "</span></div></div></div>";
     var buttonCode = null;
     var listItems = new Array();
-    $.each(result, function(i, field){
-      if ( field.name == dockerVersion && field.current ) {
+    $.each(result, function (i, field) {
+      if (field.name == dockerVersion && field.current) {
         // We are the current version so we don't need a butterbar
         suppressButterBar = true;
       } else {
-        var prettyName = 'Docker ' + field.name.replace("v", "");
+        var prettyName = "Docker " + field.name.replace("v", "");
         // If this archive has current = true, and we don't already have a button
-        if ( field.current && buttonCode == null ) {
+        if (field.current && buttonCode == null) {
           // Get the button code
-          buttonCode = '<button id="archive-menu" data-toggle="dropdown" class="btn dropdown-toggle" style="border: 1px solid #254356; background-color: #fff; color: #254356;">' + prettyName + '&nbsp;(current) &nbsp;<span class="caret"></span></button>';
+          buttonCode =
+            '<button id="archive-menu" data-toggle="dropdown" class="btn dropdown-toggle" style="border: 1px solid #254356; background-color: #fff; color: #254356;">' +
+            prettyName +
+            '&nbsp;(current) &nbsp;<span class="caret"></span></button>';
           // The link is different for the current release
-          listItems.push('<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/">' + prettyName + '</a></li>');
+          listItems.push(
+            '<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/">' +
+              prettyName +
+              "</a></li>"
+          );
         } else {
-          listItems.push('<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/' + field.name + '/">' + prettyName + '</a></li>');
+          listItems.push(
+            '<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/' +
+              field.name +
+              '/">' +
+              prettyName +
+              "</a></li>"
+          );
         }
       }
     });
@@ -36,19 +53,27 @@ if (window.navigator.onLine) {
     // Also set the isArchive variable to true if it's an archive. It defaults
     // to true, set in _layouts/docs.html. We default to true because it looks
     // better in CSS to show stuff than to hide stuff onLoad.
-    if ( suppressButterBar == false ) {
-      $( 'body' ).prepend(outerDivStart + buttonCode + listStart + listItems.join("") + listEnd + outerDivEnd);
-      isArchive = true;
+    if (suppressButterBar == false) {
+      $("body").prepend(
+        outerDivStart +
+          buttonCode +
+          listStart +
+          listItems.join("") +
+          listEnd +
+          outerDivEnd
+      );
+      $("body").addClass("archive");
       // If the butterbar exists, deal with positioning it
       // Depends on some logic in _layout/docs.html
-      $(document).scroll(function() {
-        if ( $( 'nav' ).hasClass( 'affix' ) ) {
-          $('#archive-butterbar').addClass('fixed').removeClass('top');
+      $(document).scroll(function () {
+        if ($("nav").hasClass("affix")) {
+          $("#archive-butterbar").addClass("fixed").removeClass("top");
         } else {
-          $('#archive-butterbar').addClass('top').removeClass('fixed');
+          $("#archive-butterbar").addClass("top").removeClass("fixed");
         }
       });
     } else {
-      isArchive = false;
-    }  });
+      $("body").addClass("not-archive");
+    }
+  });
 }
diff --git a/js/docs.js b/js/docs.js
index 0d11521ee5..b22b63b533 100644
--- a/js/docs.js
+++ b/js/docs.js
@@ -337,17 +337,4 @@ window.onload = function () {
         var group = $(this).attr("data-group");
         $('.nav-tabs > li > a[data-group="' + group + '"]').tab("show");
     });
-
-    // isArchive is set by logic in archive.js
-    if (isArchive === false) {
-        // Hide elements that are not appropriate for archives
-        // PollDaddy
-        $("#ratings-div").css("visibility", "visible");
-        // Archive drop-down
-        $(".ctrl-right .btn-group").css("visibility", "visible");
-        // Search
-        $(".search-form").css("visibility", "visible");
-        // Page edit link
-        $(".feedback-links li").first().css("visibility", "visible");
-    }
 };