From e2732ce83bfdb8a13f610c973c03ebbce97770a3 Mon Sep 17 00:00:00 2001
From: Dave Thompson <davet@freestation00.office.fsf.org>
Date: Wed, 18 Jun 2014 10:42:24 -0400
Subject: [PATCH] Add support for language dropdown box.

---
 css/main.css  | 87 ++++++++++++++++++++++++++++++---------------------
 js/scripts.js | 41 +++++++++++++++++++++---
 2 files changed, 87 insertions(+), 41 deletions(-)

diff --git a/css/main.css b/css/main.css
index fa9eb6a..1db7469 100644
--- a/css/main.css
+++ b/css/main.css
@@ -282,7 +282,7 @@ a:focus > img + strong {
 		padding: .25em;
 }
 
-#header ul.os .share {
+#header ul.os .spacer {
 		padding: .25em 0 .25em 4em;
 }
 
@@ -399,61 +399,71 @@ ul.images li > img {
 		height: auto;
 }
 
-
-/* Troubleshooting panel
-*/
+/* Troubleshooting panel and dropdown */
 
 .troubleshooting {
-		margin-top: .8em;
+    margin-top: .8em;
 }
 
-.troubleshooting > h4 {
-		display: inline-block;
-		cursor: pointer;
-		letter-spacing: 2px;
-		padding: .25em .5em;
-		color: #2f5faa;
-		opacity: .5;
-		border: 1px solid #5f8dd3;
-		border-radius: 3px;
+.dropdown > h4 {
+    font-size: .85em;
+    width: 140px;
+    text-align: center;
 }
 
-.troubleshooting > h4:hover,
-.troubleshooting > h4.expanded {
-		opacity: 1;
+.troubleshooting > h4,
+.dropdown > h4 {
+    display: inline-block;
+    cursor: pointer;
+    letter-spacing: 2px;
+    padding: .25em .5em;
+    color: #2f5faa;
+    opacity: .5;
+    border: 1px solid #5f8dd3;
+    border-radius: 3px;
 }
 
-.troubleshooting > h4.expanded {
-		border-bottom: 0;
-		border-radius: 3px 3px 0 0;
+.troubleshooting > h4:hover,
+.troubleshooting > h4.expanded,
+.dropdown > h4:hover,
+.dropdown > h4.expanded {
+    opacity: 1;
 }
 
+.troubleshooting > h4.expanded,
+.dropdown > h4.expanded {
+    border-bottom: 0;
+    border-radius: 3px 3px 0 0;
+}
 
-.troubleshooting > h4:after {
-		content:' ▾';
-		display: inline-block;
+.troubleshooting > h4:after,
+.dropdown > h4:after {
+    content:' ▾';
+    display: inline-block;
     line-height: 1;
-		padding: 0 0.2em;
+    padding: 0 0.2em;
     vertical-align: top;
 }
 
-.troubleshooting > h4.expanded:after {
-		content:' ▴';
-		display: inline-block;
+.troubleshooting > h4.expanded:after,
+.dropdown > h4.expanded:after {
+    content:' ▴';
+    display: inline-block;
     line-height: 1;
-		padding: 0 0.2em;
+    padding: 0 0.2em;
     vertical-align: top;
 }
 
-.troubleshooting dl {
-		padding: .5em;
-		border: 1px solid #5f8dd3;
-		border-radius: 0 3px 3px;
+.troubleshooting dl,
+.dropdown ul {
+    padding: .5em;
+    border: 1px solid #5f8dd3;
+    border-radius: 0 3px 3px;
 }
 
 .main dt,
 .troubleshooting dt {
-		margin-top: 1em;
+    margin-top: 1em;
 }
 
 .main dt:first-child,
@@ -466,6 +476,13 @@ ul.images li > img {
 		display: inline-block;
 }
 
+.dropdown ul {
+    position: absolute;
+    width: 140px;
+    text-align: center;
+    background: #f4eed7;
+}
+
 /* Form elements: newsletter + pgp pathfinder
 */
 
@@ -776,9 +793,7 @@ input[type='reset']:hover {
 				width: 80%;
 				height: auto;
 		}
-		
-		
 
-}
 
 
+}
diff --git a/js/scripts.js b/js/scripts.js
index e00e27a..542de0f 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -1,7 +1,38 @@
-$(document).ready( function() {
-  $(".troubleshooting > dl").css("display", "none");
-  $(".troubleshooting > h4").click(function() {
-    $(this).toggleClass("expanded");
-    $(this).next("dl").slideToggle(400);
+$(document).ready(function() {
+  var SLIDE_DURATION = 400;
+
+  // Allow a slide toggle effect to be performed on the given list
+  // element type when clicking a child h4 for the given css class.
+  // This is used for troubleshooting panels and dropdown menus.
+  function slideToggle(cssClass, listElement) {
+    $(cssClass + " > " + listElement).css("display", "none");
+    $(cssClass + " > h4").click(function() {
+      $(this).toggleClass("expanded")
+        .next(listElement).slideToggle(SLIDE_DURATION);
+
+      return false;
+    });
+  }
+
+  // Transform the language list into a dropdown.  By doing this trick
+  // here instead of simply writing the HTML this way to begin with,
+  // users that do not have javascript enabled will still see the
+  // links in a non-fancy way that doesn't look horrible.
+  var languageList = $("#languages").removeClass("os").detach();
+  var container = $("<li><h4>Language</h4></li>")
+        .addClass("dropdown")
+        .append(languageList);
+
+  $("#menu").prepend(container);
+
+  // Close dropdowns when user clicks anywhere outside.
+  $("body").click(function() {
+    $(".dropdown > h4.expanded")
+      .removeClass("expanded")
+      .next("ul").toggle();
   });
+
+  // Enable dropdowns and troubleshooting panels.
+  slideToggle(".troubleshooting", "dl");
+  slideToggle(".dropdown", "ul");
 });
-- 
2.25.1