Mirrors/cloudcmd
1
0
Fork 0
mirror of https://github.com/coderaiser/cloudcmd.git synced 2026-01-23 02:35:49 +00:00
Code Issues Projects Releases Wiki Activity

feature(menu) change menu module

Browse source
This commit is contained in:
coderaiser 2014-05-13 06:50:08 -04:00
parent 75e0d491aa
commit 2a58236024
15 changed files with 569 additions and 2353 deletions
Download patch file Download diff file Expand all files Collapse all files

4
HELP.md
View file

@ -89,7 +89,7 @@ Hot keys
| `End` | to end of list
| `Space` | select current file (and get size of directory)
| `Insert` | select current file (and move to next)
| `Shift + F10` | context menu
| `F9` | context menu
| `~` | console
| `Ctrl + Click` | open file on new tab
@ -335,7 +335,6 @@ To extend capabilities of file manager next modules used:
- [Diff-Match-Patch] [Diff-Match-PatchURL]
- [Minify] [MinifyURL]
- [FancyBox] [FancyBoxURL]
- [jQuery-contextMenu] [jQuery-contextMenuURL]
- [jq-console] [jq-consoleURL]
- [github] [githubURL]
- [dropbox-js] [dropbox-jsURL]
@ -349,7 +348,6 @@ To extend capabilities of file manager next modules used:
[Diff-Match-PatchURL]: https://code.google.com/p/google-diff-match-patch/ "Diff-Match-Patch"
[MinifyURL]: http://coderaiser.github.io/minify "Minify"
[FancyBoxURL]: //github.com/fancyapps/fancyBox "FancyBox"
[jQuery-contextMenuURL]: //github.com/medialize/jQuery-contextMenu "jQuery-contextMenu"
[jq-consoleURL]: //github.com/replit/jq-console "jq-console"
[githubURL]: //github.com/michael/github "github"
[dropbox-jsURL]: //github.com/dropbox/dropbox-js "dropbox-js"

306
lib/client/menu.js
View file

@ -1,7 +1,4 @@
/* object contains jQuery-contextMenu
* https://github.com/medialize/jQuery-contextMenu
*/
var CloudCmd, Util, DOM, CloudFunc, $;
var CloudCmd, Util, DOM, CloudFunc, MenuIO;
(function(CloudCmd, Util, DOM, CloudFunc) {
'use strict';
@ -11,11 +8,12 @@ var CloudCmd, Util, DOM, CloudFunc, $;
function MenuProto(position) {
var Name = 'Menu',
Info = DOM.CurrentInfo,
Loading = false,
Loading = true,
Key = CloudCmd.Key,
Events = DOM.Events,
MenuSeted = false,
Menu = this,
MenuContext,
Position = CloudCmd.MousePosition,
Images = DOM.Images,
UploadToItemNames;
@ -26,125 +24,113 @@ var CloudCmd, Util, DOM, CloudFunc, $;
Loading = true;
Util.loadOnLoad([
DOM.jqueryLoad,
load,
setUploadToItemNames,
//setUploadToItemNames,
Menu.show
]);
Events.addKey(listener);
}
this.show = function() {
Key.unsetBind();
this.hide = function() {
MenuContext.hide();
};
this.show = function() {
var fm, options, menuData,
x = (position || Position).x,
y = (position || Position).y;
if (!Loading) {
if (!MenuSeted) {
$.contextMenu(getConfig());
MenuSeted = true;
}
Key.unsetBind();
MenuContext.show(x, y);
} else {
fm = DOM.getFM();
options = {
icon : true,
beforClose : Key.setBind,
beforShow : Key.unsetBind
};
menuData = getMenuData();
MenuContext = MenuIO(fm, options, menuData);
Images.hide();
$('li').contextMenu(position || Position);
position = null;
MenuContext.show(x, y);
Loading = false;
position = null;
}
};
/* function read data from modules.json
* and build array of menu items of "upload to"
* menu
*/
function setUploadToItemNames(callback) {
CloudCmd.getModules(function(pModules) {
var lStorageObj = Util.findObjByNameInArr( pModules, 'storage' );
UploadToItemNames = Util.getNamesFromObjArray( lStorageObj ) || [];
function getMenuData() {
var show = function(name) {
CloudCmd[name].show();
},
menuData = {
'View' : Util.bind(show, 'View'),
'Edit' : Util.bind(show, 'Edit'),
'Rename' : function() {
setTimeout(DOM.renameCurrent, 100);
},
'Delete' : DOM.promptDelete,
'(Un)Select All': DOM.toggleAllSelectedFiles,
'Zip file' : DOM.zipFile,
'Unzip file' : DOM.unzipFile,
'Upload To' : {},
'Download' : download,
'New' : {
'File' : DOM.promptNewFile,
'Directory' : DOM.promptNewDir,
'From FilePicker' : getFromPicker
}
};
getUploadTo(function(menuUpload) {
menuData['Upload To'] = menuUpload;
});
return menuData;
}
function getUploadTo(callback) {
CloudCmd.getModules(function(modules) {
var menu = {},
storage = Util.findObjByNameInArr(modules, 'storage'),
items = Util.getNamesFromObjArray(storage) || [];
items.forEach(function(name) {
menu[name] = Util.bind(uploadTo, name);
});
Util.exec(callback);
callback(menu);
});
}
/**
* function get menu item object for Upload To
*/
function getUploadToItems(items) {
var str, func,
type = Util.getType(name),
obj = {};
switch(type) {
case 'array':
items.forEach(function(item) {
str = item;
obj[str] = getUploadToItems(str);
function uploadTo(name) {
Info.getData(function(data) {
var name = Info.name;
CloudCmd.execFromModule(name, 'uploadFile', {
name: name,
data: data
});
break;
case 'string':
func = function() {
Info.getData(function(data) {
var name = Info.name;
CloudCmd.execFromModule(items, 'uploadFile', {
name: name,
data: data
});
});
});
Util.log('Uploading to ' + name + '...');
};
break;
}
return func || obj;
}
/**
* get menu item
*/
function getItem(name, callback) {
var ret,
icon = Util.convertName(name);
ret = {
name : name,
icon : icon
};
if (Util.isFunction(callback))
ret.callback = callback;
else if (Util.isObject(callback))
if (callback.name)
ret.items = callback;
else
ret.items = getAllItems(callback);
return ret;
Util.log('Uploading to ' + name + '...');
}
/**
* get all menu items
* pItems = [{pName, pFunc}]
*/
function getAllItems(pItems) {
var lRet = {},
lName,
lFunc;
function getFromPicker() {
Images.showLoad({
top: true
});
if (pItems)
for (lName in pItems) {
lFunc = pItems[lName];
lRet[lName] = getItem(lName, lFunc);
}
return lRet;
}
CloudCmd.execFromModule('FilePicker', 'saveFile', function(name, data) {
var path = DOM.getCurrentDirPath() + name;
DOM.RESTful.write(path, data, CloudCmd.refresh);
});
}
/**
* download menu item callback
*/
function downloadFromMenu() {
function download() {
var element,
TIME = 1000,
date = Date.now(),
@ -169,73 +155,6 @@ var CloudCmd, Util, DOM, CloudFunc, $;
}, TIME);
}
/**
* function return configureation for menu
*/
function getConfig () {
var ret,
show = function(name) {
var module = CloudCmd[name],
ret = Util.exec(module);
if (!ret)
Util.exec(module.show);
},
menuItems = {
'View' : Util.bind(show, 'View'),
'Edit' : Util.bind(show, 'Edit'),
'Rename' : function() {
setTimeout(DOM.renameCurrent, 100);
},
'Delete' : DOM.promptDelete,
'(Un)Select All': DOM.toggleAllSelectedFiles,
'Zip file' : DOM.zipFile,
'Unzip file' : DOM.unzipFile
};
if (UploadToItemNames.length)
menuItems['Upload to'] = getUploadToItems(UploadToItemNames);
menuItems.Download = downloadFromMenu;
menuItems.New = {
'File' : DOM.promptNewFile,
'Directory' : DOM.promptNewDir,
'From FilePicker' : function() {
Images.showLoad({
top: true
});
CloudCmd.execFromModule('FilePicker', 'saveFile', function(name, data) {
var path = DOM.getCurrentDirPath() + name;
DOM.RESTful.write(path, data, CloudCmd.refresh);
});
}
};
ret = {
// define which elements trigger this menu
selector: 'li',
// define the elements of the menu
items : getAllItems(menuItems),
events :{
hide: function() {
var event = window.event;
if (!event || !event.keyCode)
clickProcessing();
else if (event.keyCode)
listener(event);
}
}
};
return ret;
}
/** function loads css and js of Menu
* @param callback
*/
@ -244,68 +163,29 @@ var CloudCmd, Util, DOM, CloudFunc, $;
var dir = CloudCmd.LIBDIRCLIENT + 'menu/',
files = [
dir + 'contextMenu.js',
dir + 'contextMenu.css'
dir + 'menu-io.js',
dir + 'menu-io.css'
];
DOM.anyLoadInParallel(files, function() {
setCSS();
Util.timeEnd(Name + ' load');
Loading = false;
Images.hide();
Util.exec(callback);
});
}
function setCSS() {
DOM.cssSet({
id : 'menu-css',
inner: '.context-menu-item.icon-edit {' +
'background-image: none;' +
'}' +
'.context-menu-item.icon-delete {' +
'background-image: none;' +
'}'
});
}
function clickProcessing() {
var element, isCurrent, parent, name,
layer = DOM.getById('context-menu-layer');
if (layer) {
DOM.hide(layer);
element = DOM.getCurrentByPosition(Position);
if (element) {
parent = element.parentElement;
name = parent && parent.getAttribute('data-name');
if (name === 'js-files') {
isCurrent = DOM.isCurrentFile(element);
if (!isCurrent)
DOM.setCurrentFile(element);
}
}
}
Key.setBind();
}
function listener(event) {
var current,
F9 = Key.F9,
var F9 = Key.F9,
ESC = Key.ESC,
key = event.keyCode,
isBind = Key.isBind();
if (isBind && key === F9) {
current = DOM.getCurrentFile();
$(current).contextmenu();
MenuContext.show(Position);
DOM.preventDefault(event);
} else if (key === ESC)
Key.setBind();
MenuContext.hide();
}
init();

365
lib/client/menu/README.md
View file

@ -1,322 +1,69 @@
# jQuery contextMenu plugin & polyfill #
Menu [![Build Status][BuildStatusIMGURL]][BuildStatusURL]
====
[BuildStatusURL]: https://travis-ci.org/coderaiser/menu-io "Build Status"
[BuildStatusIMGURL]: https://api.travis-ci.org/coderaiser/menu-io.png?branch=gh-pages
$.contextMenu is a management facility for - you guessed it - context menus. It was designed for an application where there are hundreds of elements that may show a context menu - so intialization speed and memory usage are kept fairly small. It also allows to register context menus without providing actual markup, as $.contextMenu generates DOMElements as needed.
Simple css-based context menu made for [Cloud Commander](http://cloudcmd.io).
[features](http://medialize.github.com/jQuery-contextMenu/index.html) -
[demo](http://medialize.github.com/jQuery-contextMenu/demo.html) -
[documentation](http://medialize.github.com/jQuery-contextMenu/docs.html)
Little bit better then other people do :).
So to see at work look [here](http://jsfiddle.net/coderaiser/mAUUz/).
#How come?
## Dependencies ##
Tired to use js based libraries which use jquery and `.hover` classes insteed of `:hover` pseudo-selectors.
* jQuery 1.7 (using new .on().off() event API)
* jQuery UI position (optional but recommended)
#Why should I care?
## Usage ##
- `1.6kb` min & gzip for js.
- `1kb` min & gzip for css.
- no dependencies (just part of [util.io](http://coderaiser.github.io/util.io)).
- easy to use.
- easy to extend.
register contextMenu from javascript:
#How use?
Create `html` page with `js` and `css` connected.
```javascript
$.contextMenu({
// define which elements trigger this menu
selector: ".with-cool-menu",
// define the elements of the menu
items: {
foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }},
bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }}
```html
<link rel="stylesheet" href="http://coderaiser.github.io/menu/menu.min.css">
<script src="http://coderaiser.github.io/menu/menu.min.js"></script>
```
Add little JavaScript:
```js
var menu = Menu({
'item name': function onItemNameClick() {
}
// there's more, have a look at the demos and docs...
});
}
```
have a look at the [demos](http://medialize.github.com/jQuery-contextMenu/demo.html).
Look for `examples` directory or copy example from bottom:
## HTML5 Compatibility ##
Firefox 8 implemented contextmenu using the &lt;menuitem&gt; tags for menu-structure. The specs however state that &lt;command&gt; tags should be used for this purpose. $.contextMenu accepts both.
Firefox 8 does not yet fully implement the contextmenu specification ([Ticket #617528](https://bugzilla.mozilla.org/show_bug.cgi?id=617528)). The elements
[a](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command),
[button](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command),
[input](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-input-element-to-define-a-command) and
[option](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-option-element-to-define-a-command)
usable as commands are being ignored altogether. It also doesn't (optically) distinguish between checkbox/radio and regular commands ([Bug #705292](https://bugzilla.mozilla.org/show_bug.cgi?id=705292)).
* [contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
* [command specs](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html)
* [Browser support according to caniuse.com](http://caniuse.com/#search=context%20menu)
Note: While the specs note &lt;option&gt;s to be renderd as regular commands, $.contextMenu will render an actual &lt;select&gt;. import contextMenu from HTML5 &lt;menu&gt;:
```javascript
$.contextMenu("html5");
```html
<link rel="stylesheet" href="http://coderaiser.github.io/menu/menu.min.css">
<script src="http://coderaiser.github.io/menu/menu.min.js"></script>
<script>
window.addEventListener('load', function onLoad() {
'use strict';
window.removeEventListener('load', onLoad);
var menu = Menu({
help: function() {
alert('*help');
},
upload: {
github: {
gist: function() {
alert('*gist');
},
main: function() {
alert('*main');
}
},
dropbox: function() {
alert('*dropbox');
}
}
});
});
</script>
```
## Interaction Principles ##
You're (obviously) able to use the context menu with your mouse. Once it is opened, you can also use the keyboard to (fully) navigate it.
* ↑ (up) previous item in list, will skip disabled elements and wrap around
* ↓ (down) next item in, will skip disabled elements and wrap around
* → (right) dive into sub-menu
* ← (left) rise from sub-menu
* ↵ (return) invoke command
* ⇥ (tab) next item or input element, will skip disabled elements and wrap around
* ⇪ ⇥ (shift tab) previous item or input element, will skip disabled elements and wrap around
* ⎋ (escape) close menu
* ⌴ (space) captured and ignore to avoid page scrolling (for consistency with native menus)
* ⇞ (page up) captured and ignore to avoid page scrolling (for consistency with native menus)
* ⇟ (page down) captured and ignore to avoid page scrolling (for consistency with native menus)
* ↖ (home) first item in list, will skip disabled elements
* ↘ (end) last item in list, will skip disabled elements
Besides the obvious, browser also react to alphanumeric key strokes. Hitting <code>r</code> in a context menu will make Firefox (8) reload the page immediately. Chrome selects the option to see infos on the page, Safari selects the option to print the document. Awesome, right? Until trying the same on Windows I did not realize that the browsers were using the access-key for this. I would've preferred typing the first character of something, say "s" for "save" and then iterate through all the commands beginning with s. But that's me - what do I know about UX? Anyways, $.contextMenu now also supports accesskey handling.
## Minify ##
use [Google Closure Compiler](http://closure-compiler.appspot.com/home):
```
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name contextMenu.js
// @code_url http://medialize.github.com/jQuery-contextMenu/jquery-1.8.2.min.js
// @code_url http://medialize.github.com/jQuery-contextMenu/src/jquery.ui.position.js
// @code_url http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.js
// ==/ClosureCompiler==
```
## Authors ##
* [Rodney Rehm](https://github.com/rodneyrehm)
* [Christiaan Baartse](https://github.com/christiaan) (single callback per menu)
* [Addy Osmani](https://github.com/addyosmani) (compatibility with native context menu in Firefox 8)
## License ##
$.contextMenu is published under the [MIT license](http://www.opensource.org/licenses/mit-license) and [GPL v3](http://opensource.org/licenses/GPL-3.0).
## Changelog ##
### 1.6.5 (January 20th 2013) ###
* fixing "opening a second menu can break the layer" - ([Issue #105](https://github.com/medialize/jQuery-contextMenu/issues/105))
### 1.6.4 (January 19th 2013) ###
* fixing [jQuery plugin manifest](https://github.com/medialize/jQuery-contextMenu/commit/413b1ecaba0aeb4e50f97cee35f7c367435e7830#commitcomment-2465216), again. yep. I'm that kind of a guy. :(
### 1.6.3 (January 19th 2013) ###
* fixing [jQuery plugin manifest](https://github.com/medialize/jQuery-contextMenu/commit/413b1ecaba0aeb4e50f97cee35f7c367435e7830#commitcomment-2465216)
### 1.6.2 (January 19th 2013) ###
* fixing "menu won't close" regression introduced by 1.6.1
### 1.6.1 (January 19th 2013) ###
* fixing potential html parsing problem
* upgrading to jQuery UI position v1.10.0
* replaced `CRLF` by `LF` (no idea how this happened in the first place...)
* adding `options.reposition` to dis/allow simply relocating a menu instead of rebuilding it ([Issue #104](https://github.com/medialize/jQuery-contextMenu/issues/104))
### 1.6.0 (December 29th 2012) ###
* adding [DOM Element bound context menus](http://medialize.github.com/jQuery-contextMenu/demo/on-dom-element.html) - ([Issue 88](https://github.com/medialize/jQuery-contextMenu/issues/88))
* adding class `context-menu-active` to define state on active trigger element - ([Issue 92](https://github.com/medialize/jQuery-contextMenu/issues/92))
* adding [demo for TouchSwipe](http://medialize.github.com/jQuery-contextMenu/demo/trigger-swipe.html) activation
* adding export of internal functions and event handlers - ([Issue 101](https://github.com/medialize/jQuery-contextMenu/issues/101))
* fixing key "watch" might translate to Object.prototype.watch in callbacks map - ([Issue 93](https://github.com/medialize/jQuery-contextMenu/issues/93))
* fixing menu and submenu width calculation - ([Issue 18](https://github.com/medialize/jQuery-contextMenu/issues/18))
* fixing unused variables - ([Issue 100](https://github.com/medialize/jQuery-contextMenu/issues/100))
* fixing iOS "click" compatibility problem - ([Issue 83](https://github.com/medialize/jQuery-contextMenu/issues/83))
* fixing separators to not be clickable - ([Issue 85](https://github.com/medialize/jQuery-contextMenu/issues/85))
* fixing issues with fixed positioned triggers ([Issue 95](https://github.com/medialize/jQuery-contextMenu/issues/95))
* fixing word break problem - ([Issue 80](https://github.com/medialize/jQuery-contextMenu/issues/80))
### 1.5.25 (October 8th 2012) ###
* upgrading to jQuery 1.8.2 ([Issue 78](https://github.com/medialize/jQuery-contextMenu/issues/78))
* upgrading to jQuery UI position 1.9.0 RC1 ([Issue 78](https://github.com/medialize/jQuery-contextMenu/issues/78))
### 1.5.24 (August 30th 2012) ###
* adding context menu options to input command events ([Issue 72](https://github.com/medialize/jQuery-contextMenu/issues/72), dtex)
* code cosmetics for JSLint
### 1.5.23 (August 22nd 2012) ###
* fixing reposition/close issue on scrolled documents ([Issue 69](https://github.com/medialize/jQuery-contextMenu/issues/69))
* fixing jQuery reference ([Issue 68](https://github.com/medialize/jQuery-contextMenu/issues/68))
### 1.5.22 (July 16th 2012) ###
* fixing issue with animation and remove on hide (Issue #64)
### 1.5.21 (July 14th 2012) ###
* fixing backdrop would not remove on destroy (Issue #63)
### 1.5.20 (June 26th 2012) ###
Note: git tag of version is `v1.6.20`?!
* fixing backdrop would not position properly in IE6 (Issue #59)
* fixing nested input elements not accessible in Chrome / Safari (Issue #58)
### 1.5.19 ###
Note: git tag of version is missing...?!
* fixing sub-menu positioning when `$.ui.position` is not available (Issue #56)
### 1.5.18 ###
Note: git tag of version is missing...?!
* fixing html5 `<menu>` import (Issue #53)
### 1.5.17 (June 4th 2012) ###
* fixing `options` to default to `options.trigger = "right"`
* fixing variable name typo (Within Issue #51)
* fixing menu not closing while opening other menu (Within Issue #51)
* adding workaround for `contextmenu`-bug in Firefox 12 (Within Issue #51)
### 1.5.16 (May 29th 2012) ###
* added vendor-prefixed user-select to CSS
* fixed issue with z-indexing when `<body>` is used as a trigger (Issue #49)
### 1.5.15 (May 26th 2012) ###
* allowing to directly open another element's menu while a menu is shown (Issue #48)
* fixing autohide option that would not properly hide the menu
### 1.5.14 (May 22nd 2012) ###
* options.build() would break default options (Issue #47)
* $.contextMenu('destroy') would not remove backdrop
### 1.5.13 (May 4th 2012) ###
* exposing $trigger to dynamically built custom menu-item types (Issue #42)
* fixing repositioning of open menu (formerly accidental re-open)
* adding asynchronous example
* dropping ignoreRightClick in favor of proper event-type detection
### 1.5.12 (May 2nd 2012) ###
* prevent invoking callback of first item of a sub-menu when clicking on the sub-menu-item (Issue #41)
### 1.5.11 (April 27th 2012) ###
* providing `opt.$trigger` to show event (Issue #39)
### 1.5.10 (April 21st 2012) ###
* ignoreRightClick would not prevent right click when menu is already open (Issue #38)
### 1.5.9 (March 10th 2012) ###
* If build() did not return any items, an empty menu was shown (Issue #33)
### 1.5.8 (January 28th 2012) ###
* Capturing Page Up and Page Down keys to ignore like space (Issue #30)
* Added Home / End keys to jump to first / last command of menu (Issue #29)
* Bug hitting enter in an &lt;input&gt; would yield an error (Issue #28)
### 1.5.7 (January 21st 2012) ###
* Non-ASCII character in jquery.contextMenu.js caused compatibility issues in Rails (Issue #27)
### 1.5.6 (January 8th 2012) ###
* Bug contextmenu event was not passed to build() callback (Issue #24)
* Bug sub-menu markers would not display properly in Safari and Chrome (Issue #25)
### 1.5.5 (January 6th 2012) ###
* Bug Internet Explorer would not close menu when giving input elements focus (Issue #23)
### 1.5.4 (January 5th 2012) ##
* Bug not set z-index of sub-menus might not overlap the main menu correctly (Issue #22)
### 1.5.3 (January 1st 2012) ###
* Bug `console.log is undefined`
### 1.5.2 (December 25th 2012) ###
* Bug sub-menus would not properly update their disabled states (Issue #16) [again…]
* Bug sub-menus would not properly adjust width accoring to min-width and max-width (Issue #18)
### 1.5.1 (December 18th 2011) ###
* Bug sub-menus would not properly update their disabled states (Issue #16)
### 1.5 (December 13th 2011) ###
* Added [dynamic menu creation](http://medialize.github.com/jQuery-contextMenu/demo/dynamic-create.html) (Issue #15)
### 1.4.4 (December 12th 2011) ###
* Bug positioning &lt;menu&gt; when trigger element is `position:fixed` (Issue #14)
### 1.4.3 (December 11th 2011) ###
* Bug key handler would caputure all key strokes while menu was visible (essentially disabling F5 and co.)
### 1.4.2 (December 6th 2011) ###
* Bug opt.$trigger was not available to disabled callbacks
* jQuery bumped to 1.7.1
### 1.4.1 (November 9th 2011) ###
* Bug where &lt;menu&gt; imports would not pass action (click event) properly
### 1.4 (November 7th 2011) ###
* Upgraded to jQuery 1.7 (changed dependecy!)
* Added internal events `contextmenu:focus`, `contextmenu:blur` and `contextmenu:hide`
* Added custom &lt;command&gt; types
* Bug where `className` wasn't properly set on &lt;menu&gt;
### 1.3 (September 5th 2011) ###
* Added support for accesskeys
* Bug where two sub-menus could be open simultaneously
### 1.2.2 (August 24th 2011) ###
* Bug in HTML5 import
### 1.2.1 (August 24th 2011) ###
* Bug in HTML5 detection
### 1.2 (August 24th 2011) ###
* Added compatibility to &lt;menuitem&gt; for Firefox 8
* Upgraded to jQuery 1.6.2
### 1.1 (August 11th 2011) ###
* Bug #1 TypeError on HTML5 action passthru
* Bug #2 disbaled callback not invoked properly
* Feature #3 auto-hide option for hover trigger
* Feature #4 option to use a single callback for all commands, rather than registering the same function for each item
* Option to ignore right-click (original "contextmenu" event trigger) for non-right-click triggers
### 1.0 (July 7th 2011) ###
* Initial $.contextMenu handler

142
lib/client/menu/contextMenu.css
View file

@ -1,142 +0,0 @@
/*!
* jQuery contextMenu - Plugin for simple contextMenu handling
*
* Version: git-master
*
* Authors: Rodney Rehm, Addy Osmani (patches for FF)
* Web: http://medialize.github.com/jQuery-contextMenu/
*
* Licensed under
* MIT License http://www.opensource.org/licenses/mit-license
* GPL v3 http://opensource.org/licenses/GPL-3.0
*
*/
.context-menu-list {
margin:0;
padding:0;
min-width: 120px;
max-width: 250px;
display: inline-block;
position: absolute;
list-style-type: none;
border: 1px solid #DDD;
background: #EEE;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.context-menu-item {
padding: 2px 2px 2px 24px;
background-color: #EEE;
position: relative;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.context-menu-separator {
padding-bottom:0;
border-bottom: 1px solid #DDD;
}
.context-menu-item > label > input,
.context-menu-item > label > textarea {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.context-menu-item.hover {
cursor: pointer;
background-color: #39F;
}
.context-menu-item.disabled {
color: #666;
}
.context-menu-input.hover,
.context-menu-item.disabled.hover {
cursor: default;
background-color: #EEE;
}
.context-menu-submenu:after {
content: ">";
color: #666;
position: absolute;
top: 0;
right: 3px;
z-index: 1;
}
/* icons
#protip:
In case you want to use sprites for icons (which I would suggest you do) have a look at
http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
.context-menu-item.icon:before {}
*/
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
.context-menu-item.icon-cut { background-image: url(images/cut.png); }
.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
.context-menu-item.icon-add { background-image: url(images/page_white_add.png); }
.context-menu-item.icon-quit { background-image: url(images/door.png); }
/* vertically align inside labels */
.context-menu-input > label > * { vertical-align: top; }
/* position checkboxes and radios as icons */
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
margin-left: -17px;
}
.context-menu-input > label > span {
margin-left: 5px;
}
.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.context-menu-input > label > textarea {
height: 100px;
}
.context-menu-item > .context-menu-list {
display: none;
/* re-positioned by js */
right: -5px;
top: 5px;
}
.context-menu-item.hover > .context-menu-list {
display: block;
}
.context-menu-accesskey {
text-decoration: underline;
}

1686
lib/client/menu/contextMenu.js
View file

File diff suppressed because it is too large Load diff

BIN
lib/client/menu/images/cut.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 648 B

BIN
lib/client/menu/images/door.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 412 B

BIN
lib/client/menu/images/page_white_add.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 442 B

BIN
lib/client/menu/images/page_white_copy.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 309 B

BIN
lib/client/menu/images/page_white_delete.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 536 B

BIN
lib/client/menu/images/page_white_edit.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 618 B

BIN
lib/client/menu/images/page_white_paste.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 620 B

68
lib/client/menu/menu-io.css Normal file
View file

@ -0,0 +1,68 @@
.menu-hidden {
display:none;
}
.menu {
position : absolute;
z-index : 1;
padding : 0;
font-family : sans-serif;
font-size : 14px;
list-style : none;
background : rgb(255,255,255);
background : rgba(255,255,255, 0.9);
border-color : rgb(49,123,249);
border-color : rgba(49,123,249,.40);
border-style : solid;
border-width : 1px;
border-radius : 5px;
-webkit-user-select : none;
-moz-user-select : none;
-ms-user-select : none;
-o-user-select : none;
user-select : none;
}
.menu-button {
background: white;
border: 0;
}
.menu-item {
position: relative;
padding: 3px 20px;
white-space: nowrap;
}
.menu-item:hover {
background-color: #e3f2ff;
}
.menu-item > .menu {
top: 0;
left: 100%;
display: none;
}
.menu-item:hover > .menu {
display: block;
}
.menu-submenu > label:after {
display: block;
float: right;
width: 0;
height: 0;
margin-top: 3px;
margin-right: -10px;
border-color: transparent;
border-left-color: rgb(49,123,249);
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
}

324
lib/client/menu/menu-io.js Normal file
View file

@ -0,0 +1,324 @@
var MenuIO, Util;
(function (window) {
'use strict';
MenuIO = function(element, options, menuData) {
if (!(this instanceof MenuIO)) {
return new MenuIO(element, options, menuData);
}
var ElementMenu,
Element,
Options = {},
ElementFuncs = new ElementFuncsProto(),
ElementHeight,
ElementEvent,
MenuFuncs = {},
TEMPLATE = {
MAIN: '<ul data-name="js-menu" class="menu menu-hidden">' +
'{{ items }}' +
'</ul>',
ITEM: '<li data-name="js-menu-item" class="menu-item{{ className }}"{{ attribute }}>' +
'<label data-menu-path="{{ path }}">{{ name }}</label>' +
'{{ subitems }}' +
'</li>'
};
if (menuData) {
Element =
ElementEvent = element;
Options = options;
} else if (options) {
Element =
ElementEvent = element;
menuData = options;
} else {
Element = document.body;
ElementEvent = window;
menuData = element;
}
function init() {
var name, isObj = Util.isObject(menuData);
if (!isObj) {
name = menuData;
menuData = {};
menuData[name] = null;
}
ElementMenu = createMenu(menuData);
ElementEvent.addEventListener('click', onClick);
ElementEvent.addEventListener('contextmenu', onContextMenu);
}
function createMenu(menuData) {
var elementMenu,
menu = '',
items = '',
buildItems = function(menuData, path) {
var DATA_MENU = 'data-menu="js-submenu"',
items = '';
if (path)
path += '.';
else
path = '';
Object.keys(menuData).forEach(function(name) {
var nameIcon,
subitems = '',
className = '',
attribute = '',
pathName = path + name,
data = menuData[name],
isObj = Util.isObject(data);
if (!isObj) {
MenuFuncs[pathName] = data;
} else {
subitems = Util.render(TEMPLATE.MAIN, {
items: buildItems(data, pathName)
});
className = ' menu-submenu';
attribute = ' ' + DATA_MENU;
}
if (Options.icon) {
nameIcon = Util.convertName(name);
className += ' icon icon-' + nameIcon;
}
items += Util.render(TEMPLATE.ITEM, {
name : name,
subitems : subitems,
className : className,
attribute : attribute,
path : pathName
});
});
return items;
};
items = buildItems(menuData);
menu = document.createElement('ul');
menu.setAttribute('data-name', 'js-menu');
menu.className = 'menu menu-hidden';
menu.innerHTML = items;
Element.appendChild(menu);
elementMenu = Element.querySelector('[data-name="js-menu"]');
return elementMenu;
}
this.show = showMenuElement;
this.hide = hideMenuElement;
function checkElement(target, position) {
var is,
element = ElementFuncs.getItem(target),
isName = ElementFuncs.isName(element),
isItem = ElementFuncs.isItem(element),
isSub = ElementFuncs.isSubMenu(element);
if (!isName || !isItem) {
element = document.elementFromPoint(position.x, position.y);
isSub = ElementFuncs.isSubMenu(element);
isName = ElementFuncs.isName(element);
isItem = ElementFuncs.isItem(element);
}
is = {
name : isName,
item : isItem,
sub : isSub,
};
return is;
}
function onClick(event, checkResult) {
var itemData,
element = event.target,
is = checkResult || checkElement(element, {
x: event.clientX,
y: event.clientY
});
if (is.sub) {
event.preventDefault();
} else {
hideMenuElement();
if (is.name || is.item) {
itemData = getMenuItemData(element);
Util.exec(itemData);
}
}
}
function onContextMenu(event) {
var element = event.target,
x = event.clientX,
y = event.clientY,
is = checkElement(element, {
x: x,
y: y
});
if (is.name || is.item || is.sub)
onClick(event, is);
else
showMenuElement(x, y);
event.preventDefault();
}
function setMenuPosition(x, y) {
var isNumberX = Util.isNumber(x),
isNumberY = Util.isNumber(y),
heightMenu = getMenuHeight(),
heightInner = window.innerHeight;
if (heightInner < heightMenu + y)
y -= heightMenu;
if (isNumberX)
ElementMenu.style.left = x + 'px';
if (isNumberY)
ElementMenu.style.top = y - 15 + 'px';
}
function showMenuElement(x, y) {
Util.exec(Options.beforShow);
ElementMenu.classList.remove('menu-hidden');
setMenuPosition(x, y);
}
function hideMenuElement() {
Util.exec(Options.beforClose);
ElementMenu.classList.add('menu-hidden');
}
function getMenuItemData(element) {
var path, data;
element = ElementFuncs.getName(element);
if (element) {
path = element.getAttribute('data-menu-path');
}
data = MenuFuncs[path];
return data;
}
function getMenuHeight() {
var styleComputed, height;
if (!ElementHeight) {
styleComputed = getComputedStyle(ElementMenu);
height = styleComputed.height;
ElementHeight = parseInt(height, 10);
}
return ElementHeight;
}
init();
};
function ElementFuncsProto() {
this.getItem = getItem;
this.getName = getName;
this.isName = isName;
this.isItem = isItem;
this.isMenu = isMenu;
this.isSubMenu = isSubMenu;
function getItem(element) {
var isNameElement;
if (element) {
isNameElement = isName(element);
if (isNameElement)
element = element.parentElement;
}
return element;
}
function getName(element) {
var is;
if (element) {
is = isName(element);
if (!is)
element = element.querySelector('[data-menu-path]');
}
return element;
}
function isName(element) {
var itIs;
if (element)
itIs = element.hasAttribute('data-menu-path');
return itIs;
}
function isItem(element) {
var itIs = checkElementsName(element, 'js-menu-item');
return itIs;
}
function isMenu(element) {
var itIs = checkElementsName(element, 'js-menu');
return itIs;
}
function checkElementsName(element, nameElement, attribute) {
var itIs, name;
if (!attribute)
attribute = 'data-name';
if (element) {
name = element.getAttribute(attribute);
if (name === nameElement)
itIs = true;
}
return itIs;
}
function isSubMenu(element) {
var itIs, item,
attribute = 'data-menu',
value = 'js-submenu';
item = getItem(element);
itIs = checkElementsName(item, value, attribute);
return itIs;
}
}
})(window);

27
lib/client/menu/package.json Normal file
View file

@ -0,0 +1,27 @@
{
"name": "menu",
"version": "0.4.5",
"author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
"description": "Simple css-based multillevel context menu",
"homepage": "http://coderaiser.github.io/menu",
"repository": {
"type": "git",
"url": "git://github.com/coderaiser/menu.git"
},
"scripts": {
"test": "gulp default"
},
"devDependencies": {
"gulp": "3.6.x",
"gulp-rename": "~1.2.0",
"gulp-minify-css": "~0.3.1",
"gulp-uglify": "~0.2.1",
"gulp-concat": "~2.2.0",
"gulp-jshint": "~1.5.3",
"gulp-recess": "~0.3.0"
},
"license": "MIT",
"engines": {
"node": ">=0.4.x"
}
}