Merge pull request #10911 from jdrouet/archive-with-css

handle archive feature toggling with css

_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>

_includes/body.html

@@ -33,7 +33,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 = {
@@ -68,7 +68,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 }})"
@@ -136,7 +136,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 }}';

_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>

_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">

_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;
+  }
+}

css/style.scss

@@ -2,6 +2,7 @@
 # Docker Documentation Theme
 ---
 
+@import "archive";
 @import "breakpoint";
 @import "variables";
 @import "night-mode";

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){
+  $.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>' +
+    var outerDivStart =
-                               '<span style="z-index: 1001" class="dropdown">';
+      '<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;' +
-    var listStart = '<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
+      dockerVersion +
-    var listEnd = '</ul>';
+      '. 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>' +
-    var outerDivEnd = '</span></div></div></div>';
+      '<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){
+    $.each(result, function (i, field) {
-      if ( field.name == dockerVersion && field.current ) {
+      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 ) {
+    if (suppressButterBar == false) {
-      $( 'body' ).prepend(outerDivStart + buttonCode + listStart + listItems.join("") + listEnd + outerDivEnd);
+      $("body").prepend(
-      isArchive = true;
+        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() {
+      $(document).scroll(function () {
-        if ( $( 'nav' ).hasClass( 'affix' ) ) {
+        if ($("nav").hasClass("affix")) {
-          $('#archive-butterbar').addClass('fixed').removeClass('top');
+          $("#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");
-    }  });
+    }
+  });
 }

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");
-    }
 };