Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Listbox Menu component

tree: 5fbb0853ed

Fetching latest commit…

Cannot retrieve the latest commit at this time

Readme.md

Listbox Menu

A Listbox Menu component with structural styling to give you a clean slate.

The Listbox Menu component is built on top of Menu.

js listbox menu component

Installation

component install colinf/listbox-menu

You can find out more about using and installing components here.

Features

  • events for composition
  • structural CSS letting you decide on style
  • fluent API

Events

Events are inherited from Menu as listed below.

  • show when shown
  • hide when hidden
  • remove (item) when an item is removed
  • select (item) when an item is selected
  • * menu item events are emitted when clicked

Example

var listboxMenu = require('listbox-menu');

var data = [
  {
    league: "Scottish Premier League",
    teams: ["Aberdeen", "Celtic", "Dundee", "Dundee Utd", "Hearts", "Hibs", "Inverness CT", "Kilmarnock", "Motherwell", "Ross County", "St Johnstone", "St Mirren"]
  },
  {
    league: "First Division",
    teams: ["Airdrie", "Cowdenbeath", "Dumbarton", "Dunfermline", "Falkirk", "Hamilton", "Livingston", "Morton", "Partick Thistle", "Raith Rovers"]
  },
  {
    league: "Second Division",
    teams: ["Albion Rovers", "Alloa", "Arbroath", "Ayr Utd", "Brechin", "East Fife", "Forfar", "Queen of the South", "Stenhousemuir", "Stranraer"]
  },
  {
    league: "Third Division",
    teams: ["Annan Athletic", "Berwick Rangers", "Clyde", "East Stirlingshire", "Elgin City", "Montrose", "Peterhead", "Queens Park", "Rangers", "Stirling Albion" ]
  }
];

var menu = new listboxMenu();
var submenu = new listboxMenu();
submenu.setSelectChecker(function(item) {
  return confirm("Do you really want to do this?");
});

for (var i = 0; i < data.length; i++) {
  menu.add(i, data[i].league);
};

menu.on('select', function(item){
  var teams;
  submenu.reset();
  teams = data[parseInt(item)].teams;
  for (var i = 0; i < teams.length; i++) {
    submenu.add(teams[i]);
  };
}); 

submenu.on('select', function(item){
  console.log('selected "%s"', item);
});

 menu.moveTo(100, 100);
 submenu.moveTo(275,100);
 menu.show();
 submenu.show();

API

As well as the Menu API, Listbox Menu adds the following.

ListboxMenu()

Create a new ListboxMenu:

var ListboxMenu = require('listbox-menu');
var menu = new ListboxMenu();

ListboxMenu#reset()

Empties all items from the menu.

ListboxMenu#setSelectChecker(fn)

Add a function to the Listbox Menu which will be called when a menu item is clicked. If the function returns false then the select event will be abandoned. This allows functionality such as a confirmation dialog prior to switching to a new menu item.

Summary of Differences from Menu

  • Intended to be used as on-screen navigation menu as opposed to a contect menu
  • Listbox Menu doesn't hide when clicked
  • Selected item is not deselected on hover
  • Allows validation of selection events (via setSelectChecker)
  • Listbox menu currently doesn't support keyboard navigation

License

MIT

Something went wrong with that request. Please try again.