├── LICENSE
├── README.md
├── demo
    └── demo.html
├── package.json
└── src
    ├── jquery.nu-context-menu.js
    └── nu-context-menu.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Alex Suyun
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuContextMenu
 2 | A modern context menu with font awesome support for web apps.
 3 | The script is extremely light weight (2.2 kB), and it treats the menu as the primary object.
 4 | This means that a single menu can be attached to multiple elements.
 5 | 
 6 | # Installation 
 7 | ``` npm i jquery-nucontextmenu ```
 8 | 
 9 | # Code Example
10 | ``` javascript
11 | $(function() {
12 |   var context = $('#node')
13 |     .nuContextMenu({
14 | 
15 |       hideAfterClick: true,
16 | 
17 |       items: '.demo-item',
18 | 
19 |       callback: function(key, element) {
20 |         alert('Clicked ' + key + ' on ' + $(element)
21 |           .attr('id'));
22 |       },
23 | 
24 |       menu: [
25 | 
26 |         {
27 |           name: 'archive',
28 |           title: 'Archive',
29 |           icon: 'archive',
30 |         },
31 | 
32 |         {
33 |           name: 'mark',
34 |           title: 'Mark as read',
35 |           icon: 'check',
36 |         },
37 | 
38 |         {
39 |           name: 'void'
40 |         },
41 | 
42 |         {
43 |           name: 'delete',
44 |           title: 'Delete',
45 |           icon: 'trash',
46 |         },
47 |       ]
48 | 
49 |     });
50 | 
51 |   $('#node')
52 |     .append('<div class="demo-item" id="item-5">Item 5</div>');
53 | 
54 |   // Disable context menu
55 |   // context.nuContextMenu('disable');
56 | 
57 |   // Remove context menu
58 |   // context.nuContextMenu('destroy');
59 | 
60 | });
61 | ```
62 | # Screenshots
63 | ![Screenshot] (https://cloud.githubusercontent.com/assets/13611918/10264217/117b0946-69d3-11e5-8914-e00c391065e1.png)
64 | 
65 | # License
66 | The MIT License (MIT)
67 | 
68 | Copyright (c) 2015 Alex Suyun
69 | 
70 | Permission is hereby granted, free of charge, to any person obtaining a copy
71 | of this software and associated documentation files (the "Software"), to deal
72 | in the Software without restriction, including without limitation the rights
73 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
74 | copies of the Software, and to permit persons to whom the Software is
75 | furnished to do so, subject to the following conditions:
76 | 
77 | The above copyright notice and this permission notice shall be included in all
78 | copies or substantial portions of the Software.
79 | 
80 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
81 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
82 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
83 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
84 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
85 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
86 | SOFTWARE.
87 | 


--------------------------------------------------------------------------------
/demo/demo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html lang="en">
  4 | 
  5 | <head>
  6 |   <meta charset="utf-8">
  7 | 
  8 |   <title>nuContextMenu Demo Page</title>
  9 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 10 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
 11 |   <style>
 12 |     .demo-container {
 13 |       display: block;
 14 |       width: 100%;
 15 |       height: auto;
 16 |     }
 17 |     
 18 |     .demo-item {
 19 |       padding: 10px;
 20 |       height: 50px;
 21 |       margin: 10px;
 22 |       background: #eee;
 23 |       border: 1px solid transparent;
 24 |       font-size: 16px;
 25 |       color: #777;
 26 |     }
 27 |     
 28 |     .nu-context-menu {
 29 |       background-clip: padding-box;
 30 |       background-color: #fff;
 31 |       border: 1px solid rgba(0, 0, 0, 0.10);
 32 |       border-radius: 2px;
 33 |       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
 34 |       box-sizing: border-box;
 35 |       display: block;
 36 |       height: 0;
 37 |       opacity: 0;
 38 |       overflow: hidden;
 39 |       position: absolute;
 40 |       width: 0;
 41 |       z-index: 9999;
 42 |     }
 43 |     
 44 |     .nu-context-menu.active {
 45 |       opacity: 1;
 46 |       height: auto;
 47 |       width: auto;
 48 |     }
 49 |     
 50 |     .nu-context-menu ul {
 51 |       font-size: 15px;
 52 |       list-style: none;
 53 |       margin: 2px 0 0;
 54 |       padding: 4px 0;
 55 |       text-align: left;
 56 |     }
 57 |     
 58 |     .nu-context-menu ul li {
 59 |       clear: both;
 60 |       color: #777;
 61 |       cursor: pointer;
 62 |       font-weight: 400;
 63 |       line-height: 1.42857;
 64 |       padding: 2px 20px;
 65 |       white-space: nowrap;
 66 |     }
 67 |     
 68 |     .nu-context-menu ul li:hover {
 69 |       background: #f2f2f2;
 70 |       color: #333;
 71 |     }
 72 |     
 73 |     .nu-context-menu ul hr {
 74 |       background: #e8e8e8;
 75 |       border: 0;
 76 |       color: #e8e8e8;
 77 |       height: 1px;
 78 |       margin: 4px 0;
 79 |     }
 80 |   </style>
 81 | </head>
 82 | 
 83 | <body>
 84 |   <div class="demo-container">
 85 |     <div id="node">
 86 |       <div class="demo-item" id="item-1">Item 1</div>
 87 |       <div class="demo-item" id="item-2">Item 2</div>
 88 |       <div class="demo-item" id="item-3">Item 3</div>
 89 |       <div class="demo-item" id="item-4">Item 4</div>
 90 |     </div>
 91 |   </div>
 92 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 93 |   <script src="../src/jquery.nu-context-menu.js"></script>
 94 |   <script>
 95 |     $(function() {
 96 |       var context = $('#node')
 97 |         .nuContextMenu({
 98 | 
 99 |           hideAfterClick: true,
100 | 
101 |           items: '.demo-item',
102 | 
103 |           callback: function(key, element) {
104 |             alert('Clicked ' + key + ' on ' + $(element)
105 |               .attr('id'));
106 |           },
107 | 
108 |           menu: [
109 | 
110 |             {
111 |               name: 'archive',
112 |               title: 'Archive',
113 |               icon: 'archive',
114 |             },
115 | 
116 |             {
117 |               name: 'mark',
118 |               title: 'Mark as read',
119 |               icon: 'check',
120 |             },
121 | 
122 |             {
123 |               name: 'void'
124 |             },
125 | 
126 |             {
127 |               name: 'delete',
128 |               title: 'Delete',
129 |               icon: 'trash',
130 |             },
131 |           ]
132 | 
133 |         });
134 | 
135 |       $('#node')
136 |         .append('<div class="demo-item" id="item-5">Item 5</div>');
137 |       
138 |     });
139 |   </script>
140 | </body>
141 | 
142 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-nucontextmenu",
 3 |   "version": "0.1.3",
 4 |   "description": "Modern context menu with font awesome support for web apps (jQuery Plugin).",
 5 |   "main": "src/jquery.nu-context-menu.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git@github.com:avxto/nuContextMenu.git"
12 |   },
13 |   "author": "avxto"
14 | }
15 | 


--------------------------------------------------------------------------------
/src/jquery.nu-context-menu.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * nuContextMenu - jQuery Plugin
  3 |  * Copyright (c) 2015, Alex Suyun
  4 |  * Copyrights licensed under The MIT License (MIT)
  5 |  */
  6 | ;
  7 | (function($, window, document, undefined) {
  8 |   
  9 |   'use strict';
 10 |   
 11 |   var plugin = 'nuContextMenu';
 12 |   
 13 |   var defaults = {
 14 |     hideAfterClick: false,
 15 |     contextMenuClass: 'nu-context-menu',
 16 |     activeClass: 'active'
 17 |   };
 18 |   
 19 |   var nuContextMenu = function(container, options) {
 20 |     this.container = $(container);
 21 |     this.options = $.extend({}, defaults, options);
 22 |     this._defaults = defaults;
 23 |     this._name = plugin;
 24 |     this.init();
 25 |   };
 26 |   
 27 |   $.extend(nuContextMenu.prototype, {
 28 |     init: function() {
 29 |       
 30 |       if (this.options.items) {
 31 |         this.items = $(this.options.items);
 32 |       }
 33 |       
 34 |       if (this._buildContextMenu()) {
 35 |         this._bindEvents();
 36 |         this._menuVisible = this._menu.hasClass(this.options.activeClass);
 37 |       }
 38 |     },
 39 |     
 40 |     _getCallback: function() {
 41 |       return ((this.options.callback && typeof this.options.callback ===
 42 |       'function') ? this.options.callback : function() {});
 43 |     },
 44 |     
 45 |     _buildContextMenu: function() {
 46 |       
 47 |       // Create context menu
 48 |       this._menu = $('<div>')
 49 |       .addClass(this.options.contextMenuClass)
 50 |       .append('<ul>');
 51 |       
 52 |       var menuArray = this.options.menu,
 53 |       menuList = this._menu.children('ul');
 54 |       
 55 |       // Create menu items
 56 |       $.each(menuArray, function(index, element) {
 57 |         
 58 |         var item;
 59 |         
 60 |         if (element !== null && typeof element !==
 61 |           'object') {
 62 |           return;
 63 |           }
 64 |           
 65 |           if (element.name === 'void') {
 66 |             item = $('<hr>');
 67 |             menuList.append(item);
 68 |             return;
 69 |           }
 70 |           
 71 |           item = $('<li>')
 72 |           .attr('data-key', element.name)
 73 |           .text(' ' + element.title);
 74 |           
 75 |           if (element.icon) {
 76 |             var icon = $('<i>')
 77 |             .addClass('fa fa-' + element.icon.toString());
 78 |             item.prepend(icon);
 79 |           }
 80 |           
 81 |           menuList.append(item);
 82 |           
 83 |       });
 84 |       
 85 |       $('body')
 86 |       .append(this._menu);
 87 |       
 88 |       return true;
 89 |       
 90 |     },
 91 |     
 92 |     _pDefault: function(event) {
 93 |       event.preventDefault();
 94 |       event.stopPropagation();
 95 |       return false;
 96 |     },
 97 |     
 98 |     _contextMenu: function(event) {
 99 |       
100 |       event.preventDefault();
101 |       
102 |       // Store the value of this
103 |       // So it can be used in the listItem click event
104 |       var _this = this;
105 |       var element = event.target;
106 |       
107 |       if (this._menuVisible || this.options.disable) {
108 |         return false;
109 |       }
110 |       
111 |       var callback = this._getCallback();
112 |       var listItems = this._menu.children('ul')
113 |       .children('li');
114 |       
115 |       listItems.off()
116 |       .on('click', function() {
117 |         
118 |         var key = $(this)
119 |         .attr('data-key');
120 |         callback(key, element);
121 |         if (_this.options.hideAfterClick) {
122 |           _this.closeMenu();
123 |         }
124 |       });
125 |       
126 |       this.openMenu();
127 |       this._menu.css({
128 |         'top': event.pageY + 'px',
129 |         'left': event.pageX + 'px'
130 |       });
131 |       
132 |       return true;
133 |     },
134 |     
135 |     _onMouseDown: function(event) {
136 |       // Remove menu if clicked outside
137 |       if (!$(event.target)
138 |         .parents('.' + this.options.contextMenuClass)
139 |         .length) {
140 |         this.closeMenu();
141 |         }
142 |     },
143 |     
144 |     _bindEvents: function() {
145 |       
146 |       if (this.items) {
147 |         // Make it possible to bind to dynamically created items
148 |         this.container.on('contextmenu', this.options.items,
149 |                           $.proxy(this._contextMenu,
150 |                                   this));
151 |       } else {
152 |         this.container.on('contextmenu', $.proxy(this._contextMenu,
153 |                                                  this));
154 |       }
155 |       
156 |       // Remove menu on click
157 |       $(document)
158 |       .on('mousedown', $.proxy(this._onMouseDown, this));
159 |       
160 |     },
161 |     
162 |     disable: function() {
163 |       this.options.disable = true;
164 |       return true;
165 |     },
166 |     
167 |     destroy: function() {
168 |       if (this.items) {
169 |         this.container.off('contextmenu', this.options.items);
170 |       } else {
171 |         this.container.off('contextmenu');
172 |       }
173 |       this._menu.remove();
174 |       return true;
175 |     },
176 |     
177 |     openMenu: function() {
178 |       this._menu.addClass(this.options.activeClass);
179 |       this._menuVisible = true;
180 |       return true;
181 |     },
182 |     
183 |     closeMenu: function() {
184 |       this._menu.removeClass(this.options.activeClass);
185 |       this._menuVisible = false;
186 |       return true;
187 |     }
188 |     
189 |   });
190 |   
191 |   $.fn[plugin] = function(options) {
192 |     var args = Array.prototype.slice.call(arguments, 1);
193 |     
194 |     return this.each(function() {
195 |       var item = $(this),
196 |                      instance = item.data(plugin);
197 |                      if (!instance) {
198 |                        item.data(plugin, new nuContextMenu(this, options));
199 |                      } else {
200 |                        if (typeof options === 'string' && options[0] !== '_' &&
201 |                          options !== 'init') {
202 |                          instance[options].apply(instance, args);
203 |                          }
204 |                      }
205 |     });
206 |   };
207 |   
208 | })(jQuery, window, document);


--------------------------------------------------------------------------------
/src/nu-context-menu.css:
--------------------------------------------------------------------------------
 1 | .nu-context-menu {
 2 |     background-clip: padding-box;
 3 |     background-color: #fff;
 4 |     border: 1px solid rgba(0,0,0,0.10);
 5 |     border-radius: 2px;
 6 |     box-shadow: 0 2px 2px rgba(0,0,0,0.15);
 7 |     box-sizing: border-box;
 8 |     display: block;
 9 |     height: 0;
10 |     opacity: 0;
11 |     overflow: hidden;
12 |     position: absolute;
13 |     width: 0;
14 |     z-index: 9999;
15 | }
16 | 
17 | .nu-context-menu.active {
18 |     opacity: 1;
19 |     height: auto;
20 |     width: auto;
21 | }
22 | 
23 | .nu-context-menu ul {
24 |     font-size: 15px;
25 |     list-style: none;
26 |     margin: 2px 0 0;
27 |     padding: 4px 0;
28 |     text-align: left;
29 | }
30 | 
31 | .nu-context-menu ul li {
32 |     clear: both;
33 |     color: #777;
34 |     cursor: pointer;
35 |     font-weight: 400;
36 |     line-height: 1.42857;
37 |     padding: 2px 20px;
38 |     white-space: nowrap;
39 | }
40 | 
41 | .nu-context-menu ul li:hover {
42 |     background: #f2f2f2;
43 |     color: #333;
44 | }
45 | 
46 | .nu-context-menu ul hr {
47 |     background: #e8e8e8;
48 |     border: 0;
49 |     color: #e8e8e8;
50 |     height: 1px;
51 |     margin: 4px 0;
52 | }
53 | 


--------------------------------------------------------------------------------