Skip to content

Commit ae89e1f

Browse files
mar10mar10
committed
basic structure
1 parent b1b2005 commit ae89e1f

File tree

12 files changed

+412
-5
lines changed

12 files changed

+412
-5
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/.settings
2+
/.project
3+
/node_modules

‎.jshintrc

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"bitwise": true,
3+
"camelcase": true,
4+
"curly": true,
5+
"eqeqeq": true,
6+
"expr": true,
7+
"immed": true,
8+
"latedef": true,
9+
"newcap": true,
10+
"noarg": true,
11+
"nonew": true,
12+
"undef": true,
13+
"unused": false,
14+
15+
"boss": true,
16+
"eqnull": false,
17+
"evil": false,
18+
"smarttabs": true,
19+
20+
"browser": true,
21+
"globals": {
22+
"define": true,
23+
"jQuery": true
24+
}
25+
}

‎.travis.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
node_js:
3+
- 0.8
4+
before_script:
5+
- npm install -g grunt-cli
6+
script: grunt ci --verbose

‎Gruntfile.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*jshint node: true */
2+
3+
"use strict";
4+
5+
module.exports = function (grunt) {
6+
7+
grunt.initConfig({
8+
pkg: grunt.file.readJSON("package.json"),
9+
qunit: {
10+
all: ["test/index.html"]
11+
},
12+
jshint: {
13+
files: [
14+
"Gruntfile.js",
15+
"jquery.contextmenu.js"
16+
],
17+
options: {
18+
jshintrc: ".jshintrc"
19+
}
20+
},
21+
uglify: {
22+
options: {
23+
banner: "/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.license %> */\n"
24+
},
25+
build: {
26+
src: "jquery.contextmenu.js",
27+
dest: "build/jquery.contextmenu-<%= pkg.version %>.min.js"
28+
}
29+
}
30+
});
31+
32+
grunt.loadNpmTasks("grunt-contrib-jshint");
33+
grunt.loadNpmTasks("grunt-contrib-uglify");
34+
grunt.loadNpmTasks("grunt-contrib-qunit");
35+
36+
grunt.registerTask("default", ["jshint", "qunit"]);
37+
grunt.registerTask("ci", ["default"]);
38+
};

‎MIT-LICENSE.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
Copyright 2013 Martin Wendt,
2-
http://wwWendt.de/
1+
Copyright 2013 Martin Wendt and others (see commiter list on GitHub)
2+
https://github.com/mar10/jquery-contextmenu
33

44
Permission is hereby granted, free of charge, to any person obtaining
55
a copy of this software and associated documentation files (the

‎README.md

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,64 @@
1-
jquery-contextmenu
2-
==================
1+
#jquery-contextmenu
32

4-
jQuery plugin that provedies a context menu (based on the jQueryUI menu widget)
3+
A jQuery plugin that provides a context menu (based on the standard [jQueryUI menu] widget).
4+
5+
* themable
6+
* supports delegation (i.e. can be bound to elements that don't exist at the
7+
time the context menu is initialized)
8+
* exposes events from [jQueryUI menu]: `blur`, `create`, `focus`, `select`
9+
10+
11+
## Status
12+
Pre-alpha *not* ready for production
13+
14+
## Demo
15+
16+
See sample-widget.html
17+
18+
19+
## Example
20+
21+
Say we have some HTML elements that we want to attach a popup menu to:
22+
23+
```html
24+
<div id="container">
25+
<div class="hasmenu">AAA</div>
26+
<div class="hasmenu">BBB</div>
27+
<div class="hasmenu">CCC</div>
28+
</div>
29+
```
30+
31+
32+
now we can enable a contextmenu like so:
33+
34+
```js
35+
$("#container").contextmenu({
36+
delegate : ".hasmenu",
37+
menu : "#options",
38+
select : function(event, ui) {
39+
var menuId = ui.item.find(">a").attr("href");
40+
alert("select " + menuId);
41+
}
42+
});
43+
});
44+
```
45+
46+
Of course we also have to provide some HTML markup that defines the context menu
47+
structure (see [jQueryUI menu] for details):
48+
49+
```html
50+
<ul id="options" class="ui-helper-hidden">
51+
<li><a href="#action1">Action 1</a>
52+
<li><a href="#action2">Action 2</a>
53+
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
54+
<li>----
55+
<li><a>Extra</a>
56+
<ul>
57+
<li><a href="#action4">sub4</a>
58+
<li><a href="#action5">sub5</a>
59+
</ul>
60+
</ul>
61+
```
62+
63+
64+
[jQueryUI menu]: http://jqueryui.com/menu/

‎jquery.contextmenu.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*******************************************************************************
2+
* jquery.contextmenu.js plugin.
3+
*
4+
* jQuery plugin that provides a context menu (based on the jQueryUI menu widget).
5+
*
6+
* @see https://github.com/mar10/jquery-contextmenu
7+
*
8+
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de). Licensed MIT.
9+
*/
10+
11+
(function ($) {
12+
function getMenuFromEvent(event){
13+
var menu = $(event.target).closest(":ui-menu"),
14+
$menu = $(menu);
15+
return $menu.data("ui-menu") || $menu.data("menu");
16+
}
17+
$.widget("ui.contextmenu", {
18+
options: {
19+
delegate: "[data-menu]", // selector
20+
menu: null, // selector or jQuery or a function returning such
21+
// Events:
22+
beforeopen: $.noop, // menu about to open; return `false` to prevent opening
23+
blur: $.noop, // menu option lost focus
24+
close: $.noop, // menu was closed
25+
create: $.noop, // menu was initialized
26+
focus: $.noop, // menu option got focus
27+
init: $.noop, // ui-contextmenu was initialized
28+
open: $.noop, // menu was opened
29+
select: $.noop // menu option was selected; return `false` to prevent closing
30+
},
31+
_create: function () {
32+
var self = this;
33+
this.element.delegate(this.options.delegate, "click", $.proxy(this._openMenu, this));
34+
this._trigger("init");
35+
},
36+
/** Return menu jQuery object. */
37+
_getMenu: function(){
38+
// this.options.menu may be a string, jQuery or a function returnig that.
39+
var $menu = this.options.menu;
40+
if( $.isFunction($menu) ){
41+
$menu = $menu();
42+
}
43+
return (typeof $menu === "string") ? $($menu) : $menu;
44+
},
45+
/** Return menu widget instance (works on pre and post jQueryUI 1.9). */
46+
_getMenuWidget: function(){
47+
var $menu = this._getMenu();
48+
return $menu.data("ui-menu") || $menu.data("menu");
49+
},
50+
/** Open dropdown. */
51+
_openMenu: function(event){
52+
if( this._trigger("beforeopen", event) === false ){
53+
return false;
54+
}
55+
var self = this,
56+
$menu = this._getMenu();
57+
// Create - but hide - context-menu
58+
$menu
59+
.hide()
60+
.addClass("ui-contextmenu")
61+
// Create a menu instance that delegates events to our widget
62+
.menu({
63+
blur: $.proxy(this.options.blur, this),
64+
create: $.proxy(this.options.create, this),
65+
focus: $.proxy(this.options.focus, this),
66+
select: function(event, ui){
67+
if( self._trigger("select", event, ui) !== false ){
68+
self._closeMenu.call(self);
69+
}
70+
}
71+
});
72+
// Register global event handlers that close the dropdown-menu
73+
$(document).bind("keydown.contextmenu", function(event){
74+
if( event.which === $.ui.keyCode.ESCAPE ){
75+
self._closeMenu();
76+
}
77+
}).bind("mousedown.contextmenu", function(event){
78+
// Close menu when clicked outside menu
79+
if( !$(event.target).closest(".ui-menu-item").length ){
80+
self._closeMenu();
81+
}
82+
});
83+
$menu
84+
.css({
85+
position: "absolute"
86+
}).position({
87+
my: "left top",
88+
at: "left bottom",
89+
of: event,
90+
collision: "fit"
91+
}).slideDown("fast", function(){
92+
self._trigger("open", event);
93+
});
94+
},
95+
/** Close dropdown. */
96+
_closeMenu: function(){
97+
var self = this,
98+
$menu = this._getMenu();
99+
$menu.fadeOut(function() {
100+
self._trigger("close");
101+
});
102+
},
103+
/**
104+
* Handle $().contextmenu("option", ...) calls.
105+
*/
106+
_setOption: function(key, value){
107+
$.Widget.prototype._setOption.apply(this, arguments);
108+
}
109+
});
110+
} (jQuery));

‎package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "jquery.contextmenu",
3+
"title": "jQuery context menu plugin",
4+
"description": "jQuery plugin that turns a jQueryUI menu widget into a context menu.",
5+
"version": "0.0.1pre",
6+
"homepage": "https://github.com/mar10/contextmenu",
7+
"author": {
8+
"name": "Martin Wendt",
9+
"url": "http://wwwendt.de/"
10+
},
11+
"repository": {
12+
"type": "svn",
13+
"url": "https://github.com/mar10/contextmenu"
14+
},
15+
"bugs": {
16+
"url": "https://github.com/mar10/contextmenu/issues"
17+
},
18+
"licenses": [
19+
{
20+
"type": "MIT",
21+
"url": "https://github.com/mar10/jquery-contextmenu/blob/master/MIT-LICENSE.txt"
22+
}
23+
],
24+
"dependencies": {
25+
"jquery": "~1.8"
26+
},
27+
"keywords": [],
28+
"devDependencies": {
29+
"grunt": "~0.4.1",
30+
"grunt-contrib-jshint": "~0.3.0",
31+
"grunt-contrib-uglify": "~0.2.0",
32+
"grunt-contrib-qunit": "~0.2.0",
33+
"grunt-contrib-concat": "~0.1.3"
34+
},
35+
"scripts": {
36+
"test": "grunt ci --verbose"
37+
}
38+
}

‎sample-widget.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
5+
<title>jquery.contextmenu.js - Demo</title>
6+
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
8+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
9+
10+
<script src="jquery.contextmenu.js" type="text/javascript"></script>
11+
12+
<style type="text/css">
13+
body{
14+
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
15+
font-size: 62.5%;
16+
}
17+
</style>
18+
19+
<!-- Add code to initialize the tree when the document is loaded: -->
20+
<script type="text/javascript">
21+
$(function(){
22+
$("#container").contextmenu({
23+
delegate : ".hasmenu",
24+
menu : "#options",
25+
focus : function(event, ui) {
26+
var menuId = ui.item.find(">a").attr("href");
27+
$("#info").text("focus " + menuId);
28+
},
29+
blur : function(event, ui) {
30+
$("#info").text("");
31+
},
32+
select : function(event, ui) {
33+
var menuId = ui.item.find(">a").attr("href");
34+
alert("select " + menuId);
35+
}
36+
});
37+
});
38+
</script>
39+
</head>
40+
41+
<body class="example">
42+
<h1>jquery.contextmenu.js</h1>
43+
44+
<p><a href="https://github.com/mar10/jquery-contextmenu">Project site</a></p>
45+
46+
<div id="container">
47+
<div class="hasmenu">AAA</div>
48+
<div class="hasmenu">BBB</div>
49+
<div class="hasmenu">CCC</div>
50+
</div>
51+
52+
<ul id="options" class="ui-helper-hidden">
53+
<li><a href="#action1">Action 1</a>
54+
<li><a href="#action2">Action 2</a>
55+
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
56+
<li>----
57+
<li><a>Extra</a>
58+
<ul>
59+
<li><a href="#action4">sub4</a>
60+
<li><a href="#action5">sub5</a>
61+
</ul>
62+
</ul>
63+
64+
<p id="info"></p>
65+
</body>
66+
</html>

‎test/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jquery.contextmenu Test Suite</title>
6+
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css">
7+
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
8+
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
9+
<script src="http://code.jquery.com/qunit/qunit-1.10.0.js"></script>
10+
<script src="../jquery.contextmenu.js"></script>
11+
<script src="tests.js"></script>
12+
</head>
13+
<body>
14+
<h1 id="qunit-header">jquery.contextmenu Test Suite</h1>
15+
<h2 id="qunit-banner"></h2>
16+
<div id="qunit-testrunner-toolbar"></div>
17+
<h2 id="qunit-userAgent"></h2>
18+
<ol id="qunit-tests"></ol>
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)