From bd42f45d281bfa2f0a158f32d001f1a5e05d565f Mon Sep 17 00:00:00 2001 From: janga Date: Mon, 6 Mar 2017 23:14:41 +0530 Subject: [PATCH 1/2] documentation for menu --- index.html | 13 ++++++------ src/pat/menu/documentation.md | 40 +++++++++++++++++++++++++++++++++++ src/pat/menu/index.html | 2 +- 3 files changed, 48 insertions(+), 7 deletions(-) create mode 100644 src/pat/menu/documentation.md diff --git a/index.html b/index.html index 120efde9e..4d24d5c5d 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

Navigation

Expandable treeunknown Navigationunknown - +

Layout

Auto scalingß @@ -35,7 +35,7 @@

Layout

Syntax Highlight Sticky
- +

Forms

Autofocusstable @@ -45,11 +45,12 @@

Forms

Date pickerunknown Checked flagunknown Checkboxesunknown - Validationβ - Subformunknown - Colour-Pickerunknow + Validationβ + Subformunknown + Colour-Pickerunknown + Chosenunknown
- +

Fancy stuff

Full calendarβ diff --git a/src/pat/menu/documentation.md b/src/pat/menu/documentation.md new file mode 100644 index 000000000..49e971471 --- /dev/null +++ b/src/pat/menu/documentation.md @@ -0,0 +1,40 @@ +## Description + +This is a simple pattern which makes sure that only one menu item (
  • ) 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
  • elements change color and +####font upon focus. + +
      +
    • First item
      • +
    • Second item
      • +
    • Third item
      • +
    • Fourth item
      • +
    • Fifth item
      • +
    • Sixth item
      • +
    + +On loading, +
      +
    • First item
      • +
    • Second item
      • +
    • Third item
      • +
    • Fourth item
      • +
    • Fifth item
      • +
    • Sixth item
      • +
    + + If the focus is on the second element, +
      +
    • First item
      • +
    • Second item
      • +
    • Third item
      • +
    • Fourth item
      • +
    • Fifth item
      • +
    • Sixth item
      • +
    diff --git a/src/pat/menu/index.html b/src/pat/menu/index.html index 24745e58f..396496480 100644 --- a/src/pat/menu/index.html +++ b/src/pat/menu/index.html @@ -4,7 +4,7 @@ pat-colour-picker demo page - + From e4ed95a89347d87b140ebaa750506c3c3a0273be Mon Sep 17 00:00:00 2001 From: janga Date: Thu, 9 Mar 2017 11:19:15 +0530 Subject: [PATCH 2/2] Add tests for menu --- src/pat/menu/index.html | 1 - src/pat/menu/menu.css | 4 ++-- src/pat/menu/menu.js | 2 +- src/pat/menu/tests.js | 36 ++++++++++++++++++++++++++++++++++++ tests.js | 1 + 5 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 src/pat/menu/tests.js diff --git a/src/pat/menu/index.html b/src/pat/menu/index.html index 396496480..c376e766b 100644 --- a/src/pat/menu/index.html +++ b/src/pat/menu/index.html @@ -19,6 +19,5 @@

    Example Menu

  • Fifth item
  • Sixth item
    • - diff --git a/src/pat/menu/menu.css b/src/pat/menu/menu.css index addb32d2a..dea4e6e25 100644 --- a/src/pat/menu/menu.css +++ b/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; } diff --git a/src/pat/menu/menu.js b/src/pat/menu/menu.js index 21b94dbbf..8aead48ee 100644 --- a/src/pat/menu/menu.js +++ b/src/pat/menu/menu.js @@ -39,7 +39,7 @@ define([ if (timer) { clearTimeout(timer); - timer=null; + timer = null; } timer = setTimeout(function() { closeMenu($li); }, 1000); diff --git a/src/pat/menu/tests.js b/src/pat/menu/tests.js new file mode 100644 index 000000000..91e2d1581 --- /dev/null +++ b/src/pat/menu/tests.js @@ -0,0 +1,36 @@ +define(["pat-menu"], function(Pattern) { + + describe("pat-menu", function() { + + beforeEach(function() { + $("
    ", {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([ + "
      ", + "
    • First Item
      • ", + "
    • Second Item
      • ", + "
    • Third Item
      • ", + "
    " + ].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 diff --git a/tests.js b/tests.js index 629c32c9a..bbb6f0663 100644 --- a/tests.js +++ b/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",