documentation and tests for menu

index.html

@@ -24,7 +24,7 @@ <h4>Navigation</h4>
 			<a class="navigation tree" href="/src/pat/expandable-tree/index.html" title="">Expandable tree<sup>unknown</sup></a>
 			<a class="navigation navigation-marker" href="/src/pat/navigation/index.html" title="Navigation markers">Navigation<sup>unknown</sup></a>
 		</div>
-		
+
 		<div class="layout">
 			<h4>Layout</h4>
 			<a class="navigation auto-scale" href="/src/pat/auto-scale/index.html" title="Auto scale">Auto scaling<sup>ß</sup></a>
@@ -35,7 +35,7 @@ <h4>Layout</h4>
 			<a class="navigation syntax-highlight" href="/src/pat/syntax-highlight/index.html" title="Syntax Highlighting">Syntax Highlight</a>
 			<a class="navigation sticky" href="/src/pat/sticky/index.html" title="Syntax Highlighting">Sticky</a>
 		</div>
-		
+
 		<div class="forms">
 			<h4>Forms</h4>
 			<a class="navigation autofocus" href="/src/pat/autofocus/index.html" title="Auto focus">Autofocus<sup>stable</sup></a>
@@ -45,11 +45,12 @@ <h4>Forms</h4>
 			<a class="navigation date-picker" href="/src/pat/date-picker/index.html" title="">Date picker<sup>unknown</sup></a>
 			<a class="navigation checked-flag" href="/src/pat/checked-flag/index.html" title="checkedflag">Checked flag<sup>unknown</sup></a>
 			<a class="navigation checkboxes" href="/src/pat/checklist/index.html" title="checklist">Checkboxes<sup>unknown</sup></a>
-            <a class="navigation validate" href="/src/pat/validation/index.html">Validation<sup>β</sup></a>
-            <a class="navigation subform" href="/src/pat/subform/index.html">Subform<sup>unknown</sup></a>
-            <a class="navigation colour-picker" href="/src/pat/colour-picker/index.html">Colour-Picker<sup>unknow</sup></a>
+      <a class="navigation validate" href="/src/pat/validation/index.html">Validation<sup>β</sup></a>
+      <a class="navigation subform" href="/src/pat/subform/index.html">Subform<sup>unknown</sup></a>
+      <a class="navigation colour-picker" href="/src/pat/colour-picker/index.html">Colour-Picker<sup>unknown</sup></a>
+      <a class="navigation colour-picker" href="/src/pat/chosen/index.html">Chosen<sup>unknown</sup></a>
 		</div>
-		
+
 		<div class="fancy-stuff">
 			<h4>Fancy stuff</h4>
 			<a class="navigation full-calendar" href="/src/pat/calendar/index.html" title="Calendar">Full calendar<sup>β</sup></a>

src/pat/menu/documentation.md

@@ -0,0 +1,40 @@
+## Description
+
+This is a simple pattern which makes sure that only one menu item ( <li> ) has
+the class `open`, with the rest having the class `closed`. This helps designers
+can focus on setting the styles for the classes `open`, and `closed`, and
+and can rely on the classes being set consistently.
+
+### Examples
+
+####This is a very simple list, in which the <li> elements change color and
+####font upon focus.
+
+<ul class="pat-menu">
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+  <li>Fourth item</li>
+  <li>Fifth item</li>
+  <li>Sixth item</li>
+</ul>
+
+On loading,
+<ul class="pat-menu">
+  <li class = 'closed'>First item</li>
+  <li class = 'closed'>Second item</li>
+  <li class = 'closed'>Third item</li>
+  <li class = 'closed'>Fourth item</li>
+  <li class = 'closed'>Fifth item</li>
+  <li class = 'closed'>Sixth item</li>
+</ul>
+
+ If the focus is on the second element,
+ <ul class="pat-menu">
+   <li class = 'closed'>First item</li>
+   <li class = 'open'>Second item</li>
+   <li class = 'closed'>Third item</li>
+   <li class = 'closed'>Fourth item</li>
+   <li class = 'closed'>Fifth item</li>
+   <li class = 'closed'>Sixth item</li>
+ </ul>

src/pat/menu/index.html

@@ -4,7 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<title>pat-colour-picker demo page</title>
 	<link rel="stylesheet" href="/style/common.css" type="text/css">
-	<link rel="stylesheet" type="text/css" href="/src/pat/menu/menu.css">
+	<link rel="stylesheet" type="text/css" href="menu.css">
 	<script src="/main.js" type="text/javascript" charset="utf-8"></script>
 	<script data-main="/src/pat/main" src="/src/bower_components/requirejs/require.js" type="text/javascript" charset="utf-8"></script>
 
@@ -19,6 +19,5 @@ <h3> Example Menu </h3>
     <li>Fifth item</li>
     <li>Sixth item</li>
   </ul>
-
 </body>
 </html>

src/pat/menu/menu.css

@@ -1,10 +1,10 @@
-.open {
+li.open {
   background-color: grey;
   color: white;
   font-size: 20px;
 }
 
-.closed {
+li.closed {
     background-color: beige;
     color: black;
 }

src/pat/menu/menu.js

@@ -39,7 +39,7 @@ define([
 
                     if (timer) {
                         clearTimeout(timer);
-                        timer=null;
+                        timer = null;
                     }
 
                     timer = setTimeout(function() { closeMenu($li); }, 1000);

src/pat/menu/tests.js

@@ -0,0 +1,36 @@
+define(["pat-menu"], function(Pattern) {
+
+    describe("pat-menu", function() {
+
+        beforeEach(function() {
+            $("<div/>", {id: "lab"}).appendTo(document.body);
+        });
+
+        afterEach(function() {
+            $("#lab").remove();
+        });
+
+
+        describe("init tests", function() {
+            it("adds class closed on init", function() {
+                var $lab = $("#lab");
+                $lab.html([
+                    "<ul class=\"pat-menu\">",
+                    "<li>First Item</li>",
+                    "<li>Second Item</li>",
+                    "<li>Third Item</li>",
+                    "</ul>"
+                    ].join("\n"));
+                var $list = $("ul.pat-menu");
+
+                Pattern.init($list);
+
+                expect($($list).children().not(".closed").length).toBe(0);
+            });
+        });
+    });
+
+});
+
+// jshint indent: 4, browser: true, jquery: true, quotmark: double
+// vim: sw=4 expandtab

tests.js

@@ -48,6 +48,7 @@ require([
             "pat/legend/tests",
             "pat/markdown/tests",
             "pat/masonry/tests",
+            "pat/menu/tests",
             "pat/modal/tests",
             "pat/scroll/tests",
             "pat/slides/tests",