Skip to content
Browse files

Changed `ContextMenu` to `Menu`

  • Loading branch information...
1 parent ef4fa96 commit d506b24509accc214a5b5b0d7a90bbbd87c3bcdf @tj tj committed Feb 4, 2012
View
2 Makefile
@@ -5,7 +5,7 @@ COMPONENTS = emitter \
confirmation \
color-picker \
notification \
- context-menu \
+ menu \
card
ui:
View
10 build/ui.css
@@ -220,7 +220,7 @@
.notification.scale.hide {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-}#context-menu {
+}.menu {
display: none;
position: absolute;
top: 0;
@@ -232,23 +232,23 @@
border: 1px solid rgba(0,0,0,0.2);
}
-#context-menu li {
+.menu li {
list-style: none;
}
-#context-menu li a {
+.menu li a {
display: block;
padding: 5px 30px 5px 12px;
text-decoration: none;
border-top: 1px solid #eee;
color: #2e2e2e;
}
-#context-menu li:first-child a {
+.menu li:first-child a {
border-top: none;
}
-#context-menu li a:hover {
+.menu li a:hover {
background: #f1faff;
}
View
56 build/ui.js
@@ -1105,62 +1105,61 @@ Notification.prototype.remove = function(){
;(function(exports, html){
/**
- * Expose `ContextMenu`.
+ * Expose `Menu`.
*/
-exports.ContextMenu = ContextMenu;
+exports.Menu = Menu;
/**
- * Create a new `ContextMenu`.
+ * Create a new `Menu`.
*
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
exports.menu = function(){
- return new ContextMenu;
+ return new Menu;
};
/**
- * Initialize a new `ContextMenu` with content
- * for face `front` and `back`.
+ * Initialize a new `Menu`.
*
- * Emits "flip" event.
+ * Emits:
+ *
+ * - "show" when shown
+ * - "hide" when hidden
+ * - "remove" with the item name when an item is removed
*
- * @param {Mixed} front
- * @param {Mixed} back
* @api public
*/
-function ContextMenu(front, back) {
+function Menu() {
var self = this;
ui.Emitter.call(this);
this.items = {};
this.el = $(html).appendTo('body');
- $('html').click(function(){
- self.hide();
- });
+ $('html').click(function(){ self.hide(); });
};
/**
* Inherit from `Emitter.prototype`.
*/
-ContextMenu.prototype = new ui.Emitter;
+Menu.prototype = new ui.Emitter;
/**
* Add menu item with the given `text` and callback `fn`.
*
* When the item is clicked `fn()` will be invoked
- * and the `ContextMenu` is immediately closed.
+ * and the `Menu` is immediately closed.
*
* @param {String} text
* @param {Function} fn
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.add = function(text, fn){
+Menu.prototype.add = function(text, fn){
if (1 == arguments.length) return this.items[text];
var self = this
, el = $('<li><a href="#">' + text + '</a></li>')
@@ -1181,13 +1180,14 @@ ContextMenu.prototype.add = function(text, fn){
* Remove menu item with the given `text`.
*
* @param {String} text
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.remove = function(text){
+Menu.prototype.remove = function(text){
var item = this.items[text];
if (!item) throw new Error('no menu item named "' + text + '"');
+ this.emit('remove', text);
item.remove();
delete this.items[text];
return this;
@@ -1201,7 +1201,7 @@ ContextMenu.prototype.remove = function(text){
* @api public
*/
-ContextMenu.prototype.has = function(text){
+Menu.prototype.has = function(text){
return !! this.items[text];
};
@@ -1210,11 +1210,11 @@ ContextMenu.prototype.has = function(text){
*
* @param {Number} x
* @param {Number} y
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.moveTo = function(x, y){
+Menu.prototype.moveTo = function(x, y){
this.el.css({
top: y,
left: x
@@ -1225,11 +1225,11 @@ ContextMenu.prototype.moveTo = function(x, y){
/**
* Show the menu.
*
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.show = function(){
+Menu.prototype.show = function(){
this.emit('show');
this.el.show();
return this;
@@ -1238,11 +1238,11 @@ ContextMenu.prototype.show = function(){
/**
* Hide the menu.
*
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.hide = function(){
+Menu.prototype.hide = function(){
this.emit('hide');
this.el.hide();
return this;
@@ -1263,7 +1263,7 @@ function slug(str) {
.replace(/[^a-z0-9-]/g, '');
}
-})(ui, "<div id=\"context-menu\">\n</div>");
+})(ui, "<div class=\"menu\">\n</div>");
;(function(exports, html){
/**
View
21 docs/index.html
@@ -523,14 +523,19 @@ <h2 id="context-menu-section"><a href="#">ContextMenu</a></h2>
<p>A <code>ContextMenu</code> is comprised of textual menu items and arbitrary callback functions. To add an item invoke <code>ContextMenu#add()</code>, and to remove pass the same text to <code>ContextMenu#remove()</code>. Give it a try! right click on this page.</p>
<pre><code>var menu = ui.menu()
- .add('Add item', function(){ console.log('add'); })
- .add('Edit item', function(){ console.log('edit'); })
- .add('Remove item', function(){ console.log('remove'); })
- .add('Remove "Add item"', function(){
- menu
- .remove('Add item')
- .remove('Remove "Add item"');
- })</code>
+.add('Add item', function(){ console.log('add'); })
+.add('Edit item', function(){ console.log('edit'); })
+.add('Remove item', function(){ console.log('remove'); })
+.add('Remove "Add item"', function(){
+ menu
+ .remove('Add item')
+ .remove('Remove "Add item"');
+});
+
+oncontextmenu = function(e){
+ e.preventDefault();
+ menu.moveTo(e.pageX, e.pageY).show();
+};</code>
</pre>
</section>
</section>
View
6 docs/style.css
@@ -63,18 +63,18 @@ body {
background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
background: -moz-linear-gradient(bottom, #fff 20%, #eee);
}
-#context-menu {
+.menu {
font-size: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
}
-#context-menu li:first-child a {
+.menu li:first-child a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
-#context-menu li:last-child a {
+.menu li:last-child a {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
View
2 lib/components/context-menu/context-menu.html
@@ -1,2 +0,0 @@
-<div id="context-menu">
-</div>
View
10 lib/components/context-menu/context-menu.css → lib/components/menu/menu.css
@@ -1,4 +1,4 @@
-#context-menu {
+.menu {
display: none;
position: absolute;
top: 0;
@@ -10,22 +10,22 @@
border: 1px solid rgba(0,0,0,0.2);
}
-#context-menu li {
+.menu li {
list-style: none;
}
-#context-menu li a {
+.menu li a {
display: block;
padding: 5px 30px 5px 12px;
text-decoration: none;
border-top: 1px solid #eee;
color: #2e2e2e;
}
-#context-menu li:first-child a {
+.menu li:first-child a {
border-top: none;
}
-#context-menu li a:hover {
+.menu li a:hover {
background: #f1faff;
}
View
2 lib/components/menu/menu.html
@@ -0,0 +1,2 @@
+<div class="menu">
+</div>
View
54 lib/components/context-menu/context-menu.js → lib/components/menu/menu.js
@@ -1,61 +1,60 @@
/**
- * Expose `ContextMenu`.
+ * Expose `Menu`.
*/
-exports.ContextMenu = ContextMenu;
+exports.Menu = Menu;
/**
- * Create a new `ContextMenu`.
+ * Create a new `Menu`.
*
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
exports.menu = function(){
- return new ContextMenu;
+ return new Menu;
};
/**
- * Initialize a new `ContextMenu` with content
- * for face `front` and `back`.
+ * Initialize a new `Menu`.
*
- * Emits "flip" event.
+ * Emits:
+ *
+ * - "show" when shown
+ * - "hide" when hidden
+ * - "remove" with the item name when an item is removed
*
- * @param {Mixed} front
- * @param {Mixed} back
* @api public
*/
-function ContextMenu(front, back) {
+function Menu() {
var self = this;
ui.Emitter.call(this);
this.items = {};
this.el = $(html).appendTo('body');
- $('html').click(function(){
- self.hide();
- });
+ $('html').click(function(){ self.hide(); });
};
/**
* Inherit from `Emitter.prototype`.
*/
-ContextMenu.prototype = new ui.Emitter;
+Menu.prototype = new ui.Emitter;
/**
* Add menu item with the given `text` and callback `fn`.
*
* When the item is clicked `fn()` will be invoked
- * and the `ContextMenu` is immediately closed.
+ * and the `Menu` is immediately closed.
*
* @param {String} text
* @param {Function} fn
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.add = function(text, fn){
+Menu.prototype.add = function(text, fn){
if (1 == arguments.length) return this.items[text];
var self = this
, el = $('<li><a href="#">' + text + '</a></li>')
@@ -76,13 +75,14 @@ ContextMenu.prototype.add = function(text, fn){
* Remove menu item with the given `text`.
*
* @param {String} text
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.remove = function(text){
+Menu.prototype.remove = function(text){
var item = this.items[text];
if (!item) throw new Error('no menu item named "' + text + '"');
+ this.emit('remove', text);
item.remove();
delete this.items[text];
return this;
@@ -96,7 +96,7 @@ ContextMenu.prototype.remove = function(text){
* @api public
*/
-ContextMenu.prototype.has = function(text){
+Menu.prototype.has = function(text){
return !! this.items[text];
};
@@ -105,11 +105,11 @@ ContextMenu.prototype.has = function(text){
*
* @param {Number} x
* @param {Number} y
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.moveTo = function(x, y){
+Menu.prototype.moveTo = function(x, y){
this.el.css({
top: y,
left: x
@@ -120,11 +120,11 @@ ContextMenu.prototype.moveTo = function(x, y){
/**
* Show the menu.
*
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.show = function(){
+Menu.prototype.show = function(){
this.emit('show');
this.el.show();
return this;
@@ -133,11 +133,11 @@ ContextMenu.prototype.show = function(){
/**
* Hide the menu.
*
- * @return {ContextMenu}
+ * @return {Menu}
* @api public
*/
-ContextMenu.prototype.hide = function(){
+Menu.prototype.hide = function(){
this.emit('hide');
this.el.hide();
return this;

0 comments on commit d506b24

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