Skip to content
Browse files

Initial working version

  • Loading branch information...
0 parents commit 35659580eba099db7834462e05e8b80fe31e2b9c @colinf committed Aug 9, 2012
Showing with 369 additions and 0 deletions.
  1. +3 −0 .gitignore
  2. +1 −0 .npmignore
  3. +5 −0 History.md
  4. +8 −0 Makefile
  5. +157 −0 Readme.md
  6. +113 −0 index.js
  7. +15 −0 package.json
  8. +67 −0 test/index.html
3 .gitignore
@@ -0,0 +1,3 @@
+node_modules
+test/*.js
+test/*.css
1 .npmignore
@@ -0,0 +1 @@
+test
5 History.md
@@ -0,0 +1,5 @@
+
+0.0.2 / 2012-07-05
+==================
+
+ * fix dialog.effect support
8 Makefile
@@ -0,0 +1,8 @@
+
+test/out.js: index.js
+ component build package.json test/out
+
+clean:
+ rm -f test/out.*
+
+.PHONY: clean
157 Readme.md
@@ -0,0 +1,157 @@
+
+# Listbox Menu
+
+ A Listbox Menu component with structural styling to give you a clean slate.
+
+ ![js listbox menu component](http://f.cl.ly/items/1Z1d3B1j283y3e200g3E/Screen%20Shot%202012-07-31%20at%203.57.10%20PM.png)
+
+## Installation
+
+```
+to-do
+```
+
+## Features
+
+ - events for composition
+ - structural CSS letting you decide on style
+ - fluent API
+ - arrow key navigation
+
+## Events
+
+ - `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
+
+```js
+var Menu = require('menu');
+
+var menu = new Menu;
+
+menu
+.add('Add item')
+.add('Edit item', function(){ console.log('edit'); })
+.add('Remove item', function(){ console.log('remove'); })
+.add('Remove "Add item"', function(){
+ menu.remove('Add item');
+ menu.remove('Remove "Add item"');
+});
+
+menu.on('select', function(item){
+ console.log('selected "%s"', item);
+});
+
+menu.on('Add item', function(){
+ console.log('added an item');
+});
+
+oncontextmenu = function(e){
+ e.preventDefault();
+ menu.moveTo(e.pageX, e.pageY);
+ menu.show();
+};
+```
+
+## API
+
+### Menu()
+
+ Create a new `Menu`:
+
+```js
+var Menu = require('menu');
+var menu = new Menu();
+var menu = Menu();
+```
+
+### Menu#add([slug], text, [fn])
+
+ Add a new menu item with the given `text`, optional `slug` and callback `fn`.
+
+ Using events to handle selection:
+
+```js
+menu.add('Hello');
+
+menu.on('Hello', function(){
+ console.log('clicked hello');
+});
+```
+
+ Using callbacks:
+
+```js
+menu.add('Hello', function(){
+ console.log('clicked hello');
+});
+```
+
+ Using a custom slug, otherwise "hello" is generated
+ from the `text` given, which may conflict with "rich"
+ styling like icons within menu items, or i18n.
+
+```js
+menu.add('add-item', 'Add Item');
+
+menu.on('add-item', function(){
+ console.log('clicked "Add Item"');
+});
+
+menu.add('add-item', 'Add Item', function(){
+ console.log('clicked "Add Item"');
+});
+```
+
+### Menu#remove(slug)
+
+ Remove an item by the given `slug`:
+
+```js
+menu.add('Add item');
+menu.remove('Add item');
+```
+
+ Or with custom slugs:
+
+```js
+menu.add('add-item', 'Add item');
+menu.remove('add-item');
+```
+
+### Menu#has(slug)
+
+ Check if a menu item is present.
+
+```js
+menu.add('Add item');
+
+menu.has('Add item');
+// => true
+
+menu.has('add-item');
+// => true
+
+menu.has('Foo');
+// => false
+```
+
+### Menu#moveTo(x, y)
+
+ Move the menu to `(x, y)`.
+
+### Menu#show()
+
+ Show the menu.
+
+### Menu#hide()
+
+ Hide the menu.
+
+## License
+
+ MIT
113 index.js
@@ -0,0 +1,113 @@
+
+/**
+ * Module dependencies.
+ */
+
+var $ = require('jquery')
+ , Menu = require('menu');
+
+/**
+ * Expose `ListboxMenu`.
+ */
+
+module.exports = ListboxMenu;
+
+/**
+ * Initialize a new `ListboxMenu`.
+ *
+ * Emits:
+ *
+ * - "show" when shown
+ * - "hide" when hidden
+ * - "remove" with the item name when an item is removed
+ * - "select" (item) when an item is selected
+ * - * menu item events are emitted when clicked
+ *
+ * @api public
+ */
+
+function ListboxMenu() {
+ Menu.call(this);
+ this.el.addClass('listbox-menu');
+ this.el.hover(this.deselect.bind(this));
+ this.el.unbind('hover');
+ $('html').unbind('click');
+ this.off('show');
+ this.off('hide');
+
+};
+
+/**
+ * Inherit from `Menu.prototype`.
+ */
+
+ListboxMenu.prototype = new Menu();
+
+/**
+ * Add menu item with the given `text` and optional callback `fn`.
+ *
+ * When the item is clicked `fn()`. When clicked
+ * an event of the name `text` is emitted regardless of
+ * the callback function being present.
+ *
+ * Differs from Menu in that menu is not closed after
+ * click and makes clicked item 'selected'
+ *
+ * @param {String} text
+ * @param {Function} fn
+ * @return {Menu}
+ * @api public
+ */
+
+ListboxMenu.prototype.add = function(text, fn){
+ var slug;
+
+ // slug, text, [fn]
+ if ('string' == typeof fn) {
+ slug = text;
+ text = fn;
+ fn = arguments[2];
+ } else {
+ slug = createSlug(text);
+ }
+
+ var self = this
+ , el = $('<li><a href="#">' + text + '</a></li>')
+ .addClass(slug)
+ .appendTo(this.el)
+ .click(function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ if (self.selectChecker && !self.selectChecker(slug)) {
+ return;
+ }
+ self.deselect();
+ el.addClass('selected');
+ self.emit('select', slug);
+ self.emit(slug);
+ fn && fn();
+ });
+
+ this.items[slug] = el;
+ return this;
+};
+
+ListboxMenu.prototype.setSelectChecker = function(checker) {
+ if (!typeof checker === 'function') {
+ return;
+ }
+ this.selectChecker = checker;
+};
+
+ListboxMenu.prototype.reset = function() {
+ for (var key in this.items) {
+ this.items[key].remove();
+ }
+}
+
+function createSlug(str) {
+ return str
+ .toLowerCase()
+ .replace(/ +/g, '-')
+ .replace(/[^a-z0-9-]/g, '');
+}
15 package.json
@@ -0,0 +1,15 @@
+{
+ "name": "listbox-menu-component",
+ "description": "Listbox Menu component",
+ "version": "0.0.1",
+ "keywords": ["menu", "component"],
+ "dependencies": {
+ "jquery-component": "*",
+ "menu-component": "*"
+ },
+ "component": {
+ "scripts": {
+ "listbox-menu": "index.js"
+ }
+ }
+}
67 test/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE 5>
+<html>
+ <head>
+ <title>Listbox-Menu</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" href="out.css" />
+ </head>
+ <body>
+ <title>Listbox-Menu</title>
+ <script src="out.js"></script>
+ <script>
+ 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('Add item', function(){
+ console.log('added an item');
+ });
+ 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();
+
+ </script>
+ </body>
+</html>

0 comments on commit 3565958

Please sign in to comment.
Something went wrong with that request. Please try again.