From 2c5e2b8fbfa1bdea1856e5585d8c44cc843ed581 Mon Sep 17 00:00:00 2001 From: janga Date: Mon, 6 Mar 2017 23:14:41 +0530 Subject: [PATCH 1/3] documentation for menu --- index.html | 6 +++--- src/pat/menu/documentation.md | 40 +++++++++++++++++++++++++++++++++++ src/pat/menu/index.html | 3 +-- 3 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 src/pat/menu/documentation.md diff --git a/index.html b/index.html index 273f4bcab..bff68b0f8 100644 --- a/index.html +++ b/index.html @@ -47,9 +47,9 @@

Forms

Date/Time pickerβ Checked flagunknown Checkboxesunknown - Validationβ - Subformunknown - Colour-Pickerunknow + Validationβ + Subformunknown + Colour-Pickerunknown
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 34f7438e7..e9404e14c 100644 --- a/src/pat/menu/index.html +++ b/src/pat/menu/index.html @@ -4,9 +4,8 @@ pat-colour-picker demo page - + -

    Example Menu

    From 56b4e9d17719e723012cf6c8a4601ee100de9eb6 Mon Sep 17 00:00:00 2001 From: janga Date: Thu, 9 Mar 2017 11:19:15 +0530 Subject: [PATCH 2/3] 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 ++++++++++++++++++++++++++++++++++++ 4 files changed, 39 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 e9404e14c..0c4475977 100644 --- a/src/pat/menu/index.html +++ b/src/pat/menu/index.html @@ -17,6 +17,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 3406b6d97..1ca26ccff 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 From 940bc324b7e79dcd859177aa7a5620ec03734110 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 3 Jan 2020 15:02:25 +0100 Subject: [PATCH 3/3] Fix menu pattern. --- index.html | 1 + src/pat/menu/index.html | 18 ++++++- src/pat/menu/menu.js | 101 ++++++++++++++++++++-------------------- src/pat/menu/tests.js | 7 +-- 4 files changed, 69 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index bff68b0f8..0db302fdb 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@

    Behavioural

    Navigation

    Expandable treeunknown Navigationunknown + Menuunknown
    diff --git a/src/pat/menu/index.html b/src/pat/menu/index.html index 0c4475977..1b12522bc 100644 --- a/src/pat/menu/index.html +++ b/src/pat/menu/index.html @@ -5,12 +5,26 @@ pat-colour-picker demo page - + +

    Example Menu

      -
    • First item
      • +
    • First item +
        +
      • Sub First item
        • +
      • Sub Second item
        • +
      • Sub Third item
        • +
      • Sub Fourth item
        • +
      • Sub Fifth item
        • +
      • Sub Sixth item
        • +
      +
    • Second item
    • Third item
    • Fourth item
      • diff --git a/src/pat/menu/menu.js b/src/pat/menu/menu.js index 1ca26ccff..8ad214d46 100644 --- a/src/pat/menu/menu.js +++ b/src/pat/menu/menu.js @@ -1,61 +1,60 @@ define([ + "pat-base", + "pat-parser", "jquery", - "pat-registry" -], function($, patterns) { - var menu = { - name: "menu", - trigger: "ul.pat-menu", - - init: function($root) { - return $root.each(function() { - var $menu = $(this), - timer, - closeMenu, openMenu, - mouseOverHandler, mouseOutHandler; - - openMenu = function($li) { - if (timer) { - clearTimeout(timer); - timer = null; - } - - if (!$li.hasClass("open")) { - $li.siblings("li.open").each(function() { closeMenu($menu);}); - $li.addClass("open").removeClass("closed"); - } - }; +], function(Base, Parser, $) { - closeMenu = function($li) { - $li.find("li.open").addBack().removeClass("open").addClass("closed"); - }; - - mouseOverHandler = function() { - var $li = $(this); - openMenu($li); - }; + var parser = new Parser('menu'); - mouseOutHandler = function() { - var $li = $(this); + parser.addArgument('nav-item-selector', 'li'); // CSS Selector for navigation items. - if (timer) { - clearTimeout(timer); - timer = null; - } - - timer = setTimeout(function() { closeMenu($li); }, 1000); + return Base.extend({ + name: "menu", + trigger: ".pat-menu", + + timer: null, + + init: function($el, opts) { + this.options = parser.parse(this.$el, opts); + var self = this; + $el.find(this.options.navItemSelector).each(function() { + var $it = $(this); + $it.addClass("closed") + .on("mouseover", self.mouseOverHandler.bind(self)) + .on("mouseout", self.mouseOutHandler.bind(self)); + if($it.children(self.options.navItemSelector).length > 0) { + $it.addClass("hasChildren"); }; - - $root.find("li") - .addClass("closed") - .filter(":has(ul)").addClass("hasChildren").end() - .on("mouseover.pat-menu", mouseOverHandler) - .on("mouseout.pat-menu", mouseOutHandler); }); + }, + + openMenu: function(it) { + if (this.timer) { + clearTimeout(this.timer); + this.timer = null; + } + it = $(it); + if (!it.hasClass("open")) { + it.siblings(".open").each(function() { this.closeMenu(this.$el);}.bind(this)); + it.addClass("open").removeClass("closed"); + } + }, + + closeMenu: function(it) { + $(it).find(".open").addBack().removeClass("open").addClass("closed"); + }, + + mouseOverHandler: function(ev) { + this.openMenu(ev.target); + }, + + mouseOutHandler: function(ev) { + if (this.timer) { + clearTimeout(this.timer); + this.timer = null; + } + this.timer = setTimeout(function() { this.closeMenu(ev.target); }.bind(this), 1000); } - }; - patterns.register(menu); + }); }); - -// jshint indent: 4, browser: true, jquery: true, quotmark: double -// vim: sw=4 expandtab diff --git a/src/pat/menu/tests.js b/src/pat/menu/tests.js index 91e2d1581..4cc524c14 100644 --- a/src/pat/menu/tests.js +++ b/src/pat/menu/tests.js @@ -10,7 +10,7 @@ define(["pat-menu"], function(Pattern) { $("#lab").remove(); }); - + describe("init tests", function() { it("adds class closed on init", function() { var $lab = $("#lab"); @@ -24,13 +24,10 @@ define(["pat-menu"], function(Pattern) { 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