Skip to content

Commit 20ff61b

Browse files
jdrouetjdrouet
committed
handle archive feature toggling with css
Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
1 parent 99ec97f commit 20ff61b

8 files changed

Lines changed: 67 additions & 41 deletions

File tree

‎_includes/archive-list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="btn-group" style="visibility: hidden">
1+
<div class="btn-group">
22
<button type="button" class="btn btn-default dropdown-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
33
{% for item in site.data.docsarchive.archives %}{% if item.current == true %}Docker {{ item.name }} (current) {% endif %} {% endfor %}<span class="caret"></span>
44
</button>

‎_includes/body.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ <h2>Next steps</h2>
9191
{% endunless %}
9292
{% if page.noratings != true %}
9393
<div id="ratings-div"
94-
style="color:#b9c2cc; text-align: center; margin-top: 150px; visibility: hidden">
94+
style="color:#b9c2cc; text-align: center; margin-top: 150px;">
9595
<div id="pd_rating_holder_8453675"></div>
9696
<script type="text/javascript">
9797
PDRTJS_settings_8453675 = {
@@ -126,7 +126,7 @@ <h2>Next steps</h2>
126126
<div class="feedback-links">
127127
<ul>
128128
{% if edit_url != "" %}
129-
<li style="visibility: hidden"><a href="{{ edit_url }}"><i
129+
<li><a href="{{ edit_url }}"><i
130130
class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this
131131
page</a></li>{% endif %}
132132
<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 @@ <h2>Next steps</h2>
194194
<script>
195195
// Default to assuming this is an archive and hiding some stuff
196196
// See js/archive.js and js/docs.js for logic relating to this
197-
var isArchive = true;
198197
var dockerVersion = 'v{{ site.docker_ce_version }}';
199198
// In archives, we need to know the page root and we get it from JEKYLL_ENV in the jekyll build command
200199
var jekyllEnv = '{{ jekyll.environment }}';

‎_includes/head.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
<script>
6363
// Default to assuming this is an archive and hiding some stuff
6464
// See js/archive.js and js/docs.js for logic relating to this
65-
var isArchive = true;
6665
var dockerVersion = 'v{{ site.docker_ce_version }}';
6766
</script>
6867
</head>

‎_includes/navigation.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<img src="/images/docker-icon.svg" alt="Docker Docs" title="Docker Docs">
44
</a>
55
</div>
6-
<div class="search-form" id="search-div" style="visibility: hidden">
6+
<div class="search-form" id="search-div">
77
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
88
<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;">
99
<div id="autocompleteContainer">

‎_scss/_archive.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#ratings-div,
2+
.ctrl-right .btn-group,
3+
.feedback-links li:first-of-type,
4+
.search-form {
5+
visibility: hidden;
6+
}
7+
8+
.not-archive {
9+
#ratings-div,
10+
.ctrl-right .btn-group,
11+
.feedback-links li:first-of-type,
12+
.search-form {
13+
visibility: visible;
14+
}
15+
}

‎css/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
# Docker Documentation Theme
33
---
44

5+
@import "archive";
56
@import "breakpoint";
67
@import "variables";
78
@import "night-mode";

‎js/archive.js‎

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,45 @@ layout: null
66
if (window.navigator.onLine) {
77
var suppressButterBar = false;
88
/* This JSON file contains a current list of all docs versions of Docker */
9-
$.getJSON("/js/archives.json", function(result){
10-
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>' +
11-
'<span style="z-index: 1001" class="dropdown">';
12-
var listStart = '<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
13-
var listEnd = '</ul>';
14-
var outerDivEnd = '</span></div></div></div>';
9+
$.getJSON("/js/archives.json", function (result) {
10+
var outerDivStart =
11+
'<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;' +
12+
dockerVersion +
13+
'. 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>' +
14+
'<span style="z-index: 1001" class="dropdown">';
15+
var listStart =
16+
'<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
17+
var listEnd = "</ul>";
18+
var outerDivEnd = "</span></div></div></div>";
1519
var buttonCode = null;
1620
var listItems = new Array();
17-
$.each(result, function(i, field){
18-
if ( field.name == dockerVersion && field.current ) {
21+
$.each(result, function (i, field) {
22+
if (field.name == dockerVersion && field.current) {
1923
// We are the current version so we don't need a butterbar
2024
suppressButterBar = true;
2125
} else {
22-
var prettyName = 'Docker ' + field.name.replace("v", "");
26+
var prettyName = "Docker " + field.name.replace("v", "");
2327
// If this archive has current = true, and we don't already have a button
24-
if ( field.current && buttonCode == null ) {
28+
if (field.current && buttonCode == null) {
2529
// Get the button code
26-
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>';
30+
buttonCode =
31+
'<button id="archive-menu" data-toggle="dropdown" class="btn dropdown-toggle" style="border: 1px solid #254356; background-color: #fff; color: #254356;">' +
32+
prettyName +
33+
'&nbsp;(current) &nbsp;<span class="caret"></span></button>';
2734
// The link is different for the current release
28-
listItems.push('<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/">' + prettyName + '</a></li>');
35+
listItems.push(
36+
'<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/">' +
37+
prettyName +
38+
"</a></li>"
39+
);
2940
} else {
30-
listItems.push('<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/' + field.name + '/">' + prettyName + '</a></li>');
41+
listItems.push(
42+
'<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/' +
43+
field.name +
44+
'/">' +
45+
prettyName +
46+
"</a></li>"
47+
);
3148
}
3249
}
3350
});
@@ -36,19 +53,27 @@ if (window.navigator.onLine) {
3653
// Also set the isArchive variable to true if it's an archive. It defaults
3754
// to true, set in _layouts/docs.html. We default to true because it looks
3855
// better in CSS to show stuff than to hide stuff onLoad.
39-
if ( suppressButterBar == false ) {
40-
$( 'body' ).prepend(outerDivStart + buttonCode + listStart + listItems.join("") + listEnd + outerDivEnd);
41-
isArchive = true;
56+
if (suppressButterBar == false) {
57+
$("body").prepend(
58+
outerDivStart +
59+
buttonCode +
60+
listStart +
61+
listItems.join("") +
62+
listEnd +
63+
outerDivEnd
64+
);
65+
$("body").addClass("archive");
4266
// If the butterbar exists, deal with positioning it
4367
// Depends on some logic in _layout/docs.html
44-
$(document).scroll(function() {
45-
if ( $( 'nav' ).hasClass( 'affix' ) ) {
46-
$('#archive-butterbar').addClass('fixed').removeClass('top');
68+
$(document).scroll(function () {
69+
if ($("nav").hasClass("affix")) {
70+
$("#archive-butterbar").addClass("fixed").removeClass("top");
4771
} else {
48-
$('#archive-butterbar').addClass('top').removeClass('fixed');
72+
$("#archive-butterbar").addClass("top").removeClass("fixed");
4973
}
5074
});
5175
} else {
52-
isArchive = false;
53-
} });
76+
$("body").addClass("not-archive");
77+
}
78+
});
5479
}

‎js/docs.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -337,17 +337,4 @@ window.onload = function () {
337337
var group = $(this).attr("data-group");
338338
$('.nav-tabs > li > a[data-group="' + group + '"]').tab("show");
339339
});
340-
341-
// isArchive is set by logic in archive.js
342-
if (isArchive === false) {
343-
// Hide elements that are not appropriate for archives
344-
// PollDaddy
345-
$("#ratings-div").css("visibility", "visible");
346-
// Archive drop-down
347-
$(".ctrl-right .btn-group").css("visibility", "visible");
348-
// Search
349-
$(".search-form").css("visibility", "visible");
350-
// Page edit link
351-
$(".feedback-links li").first().css("visibility", "visible");
352-
}
353340
};

0 commit comments

Comments
 (0)