mirror of
https://github.com/coderaiser/cloudcmd.git
synced 2026-08-04 13:43:23 +00:00
feature(modules) menu-io -> supermenu
This commit is contained in:
coderaiser
parent
b7262f954b
commit
9f0d3b2c4e
23 changed files with 125 additions and 977 deletions
|
|
@ -1,32 +0,0 @@
|
|||
{
|
||||
"name": "menu",
|
||||
"version": "1.0.2",
|
||||
"homepage": "https://github.com/coderaiser/menu-io",
|
||||
"authors": [
|
||||
"coderaiser <mnemonic.enemy@gmail.com>"
|
||||
],
|
||||
"description": "Simple css-based multillevel context menu",
|
||||
"main": "menu-io.min.js",
|
||||
"moduleType": [
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"menu"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"gulpfile.js",
|
||||
"node_modules"
|
||||
],
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "f258a85ac333460ef2affc8b8a901be7ce93be2c"
|
||||
},
|
||||
"_source": "https://github.com/coderaiser/menu-io.git",
|
||||
"_target": "~1.0.2",
|
||||
"_originalSource": "menu"
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
2016.03.01, v1.0.2
|
||||
|
||||
fix:
|
||||
- (package) test: lint:css -> npm run lint:css
|
||||
|
||||
feature:
|
||||
- (stylelint) .stylelintrc -> .stylelintrc.yml
|
||||
- (package) ~ -> ^
|
||||
- (package) add stylelint
|
||||
|
||||
|
||||
2016.02.05, v1.0.1
|
||||
|
||||
fix:
|
||||
- (menu) menu cut on left
|
||||
|
||||
|
||||
2016.02.05, v1.0.0
|
||||
|
||||
fix:
|
||||
- (menu) menu cut on small screen
|
||||
|
||||
feature:
|
||||
- (package) add wisdom
|
||||
- (package) add branch
|
||||
|
||||
|
||||
2015.07.22, v0.7.9
|
||||
|
||||
feature:
|
||||
- (menu) rendy v1.1.0
|
||||
|
||||
|
||||
2015.02.20, v0.7.8
|
||||
|
||||
feature:
|
||||
- (menu) z-index: 1 -> 2
|
||||
|
||||
|
||||
2015.02.06, v0.7.7
|
||||
|
||||
feature:
|
||||
- (menu) speed up
|
||||
- (bower) ignore: add gulpfile
|
||||
- (bower) moduleType: add node
|
||||
|
||||
|
||||
2015.01.05, v0.7.5
|
||||
|
||||
fix:
|
||||
- (bower) rm bower_components
|
||||
|
||||
feature:
|
||||
- (jshintrc) add
|
||||
- (menu) rm util.io-part
|
||||
- (util) rm
|
||||
- (package) private
|
||||
- (gitignore) npm-debug.log
|
||||
- (bower) v0.7.4
|
||||
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
(The MIT License)
|
||||
|
||||
Copyright (c) 2014-2015 Coderaiser <mnemonic.enemy@gmail.com>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
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
|
||||
|
||||
Simple css-based context menu made for [Cloud Commander](http://cloudcmd.io).
|
||||
|
||||
Little bit better then other people do :).
|
||||
So to see at work look [here](http://jsfiddle.net/coderaiser/mAUUz/).
|
||||
|
||||
#How come?
|
||||
|
||||
Tired to use js based libraries which use jquery and `.hover` classes insteed of `:hover` pseudo-selectors.
|
||||
|
||||
#Why should I care?
|
||||
|
||||
- `1.6kb` min & gzip for js.
|
||||
- `1kb` min & gzip for css.
|
||||
- no dependencies.
|
||||
- easy to use.
|
||||
- easy to extend.
|
||||
|
||||
# Install
|
||||
With help of [bower](http://bower.io "Bower").
|
||||
```
|
||||
bower install menu
|
||||
```
|
||||
|
||||
#How use?
|
||||
Create `html` page with `js` and `css` connected.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="http://coderaiser.github.io/menu-io/menu.min.css">
|
||||
<script src="http://coderaiser.github.io/menu-io/menu.min.js"></script>
|
||||
```
|
||||
|
||||
Add little JavaScript:
|
||||
|
||||
```js
|
||||
var menu = MenuIO({
|
||||
'item name': function onItemNameClick() {
|
||||
}
|
||||
}
|
||||
```
|
||||
You could use element and (or) options parameters if you need to.
|
||||
|
||||
```js
|
||||
var element = document.body,
|
||||
|
||||
options = {
|
||||
icon : true, /* add class icon-item-name */
|
||||
beforeClose : alert,
|
||||
beforeShow : alert,
|
||||
beforeClick : alert,
|
||||
name : 'name of menu' /* if you want use a couple menu on one element */
|
||||
},
|
||||
|
||||
menu = MenuIO(element, options, {
|
||||
'item name': function onItemNameClick() {
|
||||
});
|
||||
```
|
||||
|
||||
Look for `examples` directory or copy example from bottom:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="http://coderaiser.github.io/menu-io/menu.min.css">
|
||||
<script src="http://coderaiser.github.io/menu-io/menu-io.min.js"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function onLoad() {
|
||||
'use strict';
|
||||
|
||||
window.removeEventListener('load', onLoad);
|
||||
var menu = MenuIO({
|
||||
help: function() {
|
||||
alert('*help');
|
||||
},
|
||||
upload: {
|
||||
github: {
|
||||
gist: function() {
|
||||
alert('*gist');
|
||||
},
|
||||
main: function() {
|
||||
alert('*main');
|
||||
}
|
||||
},
|
||||
dropbox: function() {
|
||||
alert('*dropbox');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
#License
|
||||
MIT
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"name": "menu",
|
||||
"version": "1.0.2",
|
||||
"homepage": "https://github.com/coderaiser/menu-io",
|
||||
"authors": [
|
||||
"coderaiser <mnemonic.enemy@gmail.com>"
|
||||
],
|
||||
"description": "Simple css-based multillevel context menu",
|
||||
"main": "menu-io.min.js",
|
||||
"moduleType": [
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"menu"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"gulpfile.js",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
html, body, .menu-container {
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
var menu, MenuIO;
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var element = document.querySelector('#js-menu-container'),
|
||||
options = {
|
||||
icon: true
|
||||
};
|
||||
|
||||
menu = MenuIO(element, options, {
|
||||
'help': function() {
|
||||
console.log('*help');
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Menu Example
|
||||
</title>
|
||||
<link rel="stylesheet" href="../menu-io.min.css">
|
||||
<link rel="stylesheet" href="example.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="js-menu-container" class="menu-container"></div>
|
||||
<script src="../menu-io.min.js"></script>
|
||||
<script src="menu-data.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Menu Example
|
||||
</title>
|
||||
<link rel="stylesheet" href="../menu-io.css">
|
||||
<link rel="stylesheet" href="example.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="js-menu-container" class="menu-container"></div>
|
||||
<script src="../menu-io.js"></script>
|
||||
<script src="menu-data.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
.menu-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position : absolute;
|
||||
z-index : 2;
|
||||
padding : 0;
|
||||
|
||||
font-size : 14px;
|
||||
|
||||
list-style : none;
|
||||
|
||||
color : #222;
|
||||
|
||||
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: pre;
|
||||
}
|
||||
|
||||
.menu-item::after {
|
||||
content: attr(data-key);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.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: " ";
|
||||
}
|
||||
|
|
@ -1,434 +0,0 @@
|
|||
var MenuIO;
|
||||
|
||||
(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,
|
||||
ElementWidth,
|
||||
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 = typeof menuData === 'object';
|
||||
|
||||
if (!isObj) {
|
||||
name = menuData;
|
||||
menuData = {};
|
||||
menuData[name] = null;
|
||||
}
|
||||
|
||||
ElementMenu = createMenu(menuData);
|
||||
|
||||
ElementEvent.addEventListener('click', onClick);
|
||||
ElementEvent.addEventListener('contextmenu', onContextMenu);
|
||||
}
|
||||
|
||||
function createMenu(menuData) {
|
||||
var menu,
|
||||
items = '',
|
||||
buildItems = function(menuData, path) {
|
||||
var DATA_MENU = 'data-menu="js-submenu"',
|
||||
Data_KEY = 'data-key=',
|
||||
items = '';
|
||||
|
||||
if (path)
|
||||
path += '.';
|
||||
else
|
||||
path = '';
|
||||
|
||||
Object.keys(menuData).forEach(function(name) {
|
||||
var nameIcon,
|
||||
key = '',
|
||||
subitems = '',
|
||||
className = '',
|
||||
attribute = '',
|
||||
pathName = path + name,
|
||||
|
||||
data = menuData[name],
|
||||
isObj = typeof data === 'object';
|
||||
|
||||
if (!isObj) {
|
||||
MenuFuncs[pathName] = data;
|
||||
} else {
|
||||
subitems = rendy(TEMPLATE.MAIN, {
|
||||
items: buildItems(data, pathName)
|
||||
});
|
||||
|
||||
className = ' menu-submenu';
|
||||
attribute = ' ' + DATA_MENU;
|
||||
}
|
||||
|
||||
if (Options.icon) {
|
||||
nameIcon = name
|
||||
.replace(/\(|\)/g, '')
|
||||
.replace(/\s/g, '-')
|
||||
.toLowerCase();
|
||||
|
||||
className += ' icon icon-' + nameIcon;
|
||||
}
|
||||
|
||||
if (Options.keys) {
|
||||
key = Options.keys[name];
|
||||
|
||||
if (key)
|
||||
attribute = ' ' + Data_KEY + key;
|
||||
}
|
||||
|
||||
items += rendy(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);
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
||||
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, notClick,
|
||||
afterClick = Options.afterClick,
|
||||
beforeClick = Options.beforeClick,
|
||||
name = Options.name,
|
||||
|
||||
element = event.target,
|
||||
is = checkResult || checkElement(element, {
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
});
|
||||
|
||||
notClick = exec(beforeClick, name);
|
||||
|
||||
if (is.sub) {
|
||||
event.preventDefault();
|
||||
} else {
|
||||
hideMenuElement();
|
||||
|
||||
if (!notClick && (is.name || is.item)) {
|
||||
itemData = getMenuItemData(element);
|
||||
exec(itemData);
|
||||
exec(afterClick);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
hideMenuElement();
|
||||
showMenuElement(x, y);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function setMenuPosition(x, y) {
|
||||
var isNumberX = typeof x === 'number',
|
||||
isNumberY = typeof y === 'number',
|
||||
heightMenu = getMenuHeight(),
|
||||
widthMenu = getMenuWidth(),
|
||||
heightInner = window.innerHeight,
|
||||
widthInner = window.innerWidth;
|
||||
|
||||
if (widthInner < widthMenu + x) {
|
||||
x -= widthMenu;
|
||||
|
||||
if (x < 0)
|
||||
x = 0;
|
||||
}
|
||||
|
||||
if (heightInner < heightMenu + y) {
|
||||
y -= heightMenu;
|
||||
|
||||
if (y < 0)
|
||||
y = 0;
|
||||
}
|
||||
|
||||
if (isNumberX)
|
||||
ElementMenu.style.left = x + 'px';
|
||||
|
||||
if (isNumberY)
|
||||
ElementMenu.style.top = y - 14 + 'px';
|
||||
}
|
||||
|
||||
function showMenuElement(x, y) {
|
||||
var beforeShow = Options.beforeShow,
|
||||
name = Options.name,
|
||||
params = {
|
||||
x : x,
|
||||
y : y,
|
||||
name : name
|
||||
},
|
||||
|
||||
notShow = exec(beforeShow, params);
|
||||
|
||||
if (!notShow) {
|
||||
ElementMenu.classList.remove('menu-hidden');
|
||||
setMenuPosition(params.x, params.y);
|
||||
}
|
||||
}
|
||||
|
||||
function hideMenuElement() {
|
||||
var notHide = exec(Options.beforeClose);
|
||||
|
||||
if (!notHide)
|
||||
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;
|
||||
}
|
||||
|
||||
function getMenuWidth() {
|
||||
var styleComputed, width;
|
||||
|
||||
if (!ElementWidth) {
|
||||
styleComputed = getComputedStyle(ElementMenu);
|
||||
width = styleComputed.width;
|
||||
|
||||
ElementWidth = parseInt(width, 10);
|
||||
}
|
||||
|
||||
return ElementWidth;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
function exec(callback) {
|
||||
var ret,
|
||||
args = [].slice.call(arguments, 1);
|
||||
|
||||
if (typeof callback === 'function')
|
||||
ret = callback.apply(null, args);
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
/*
|
||||
* rendy v1.1.0
|
||||
* https://github.com/coderaiser/rendy
|
||||
*/
|
||||
|
||||
/**
|
||||
* render template with data
|
||||
*
|
||||
* @param templ
|
||||
* @param data
|
||||
*/
|
||||
function rendy(templ, data) {
|
||||
var result = templ;
|
||||
|
||||
check(templ, data);
|
||||
|
||||
Object
|
||||
.keys(data)
|
||||
.forEach(function(param) {
|
||||
var name = '{{ ' + param + ' }}',
|
||||
str = data[param];
|
||||
|
||||
while(~result.indexOf(name))
|
||||
result = result.replace(name, str);
|
||||
});
|
||||
|
||||
if (~result.indexOf('{{'))
|
||||
result = result.replace(/{{.*?}}/g, '');
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function check(templ, data) {
|
||||
if (typeof templ !== 'string')
|
||||
throw(Error('template should be string!'));
|
||||
|
||||
if (typeof data !== 'object')
|
||||
throw(Error('data should be object!'));
|
||||
}
|
||||
})(window);
|
||||
1
modules/menu/menu-io.min.css
vendored
1
modules/menu/menu-io.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.menu-hidden{display:none}.menu{position:absolute;z-index:2;padding:0;font-size:14px;list-style:none;color:#222;background:#fff;background:rgba(255,255,255,.9);border-color:#317bf9;border-color:rgba(49,123,249,.4);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:#fff;border:0}.menu-item{position:relative;padding:3px 20px;white-space:pre}.menu-item::after{content:attr(data-key);float:right}.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:#317bf9;border-style:solid;border-width:5px 0 5px 5px;content:" "}
|
||||
1
modules/menu/menu-io.min.js
vendored
1
modules/menu/menu-io.min.js
vendored
|
|
@ -1 +0,0 @@
|
|||
var MenuIO;!function(e){"use strict";function t(){function e(e){var t;return e&&(t=n(e),t&&(e=e.parentElement)),e}function t(e){var t;return e&&(t=n(e),t||(e=e.querySelector("[data-menu-path]"))),e}function n(e){var t;return e&&(t=e.hasAttribute("data-menu-path")),t}function a(e){var t=r(e,"js-menu-item");return t}function u(e){var t=r(e,"js-menu");return t}function r(e,t,n){var a,u;return n||(n="data-name"),e&&(u=e.getAttribute(n),u===t&&(a=!0)),a}function i(t){var n,a,u="data-menu",i="js-submenu";return a=e(t),n=r(a,i,u)}this.getItem=e,this.getName=t,this.isName=n,this.isItem=a,this.isMenu=u,this.isSubMenu=i}function n(e){var t,n=[].slice.call(arguments,1);return"function"==typeof e&&(t=e.apply(null,n)),t}function a(e,t){var n=e;return u(e,t),Object.keys(t).forEach(function(e){for(var a="{{ "+e+" }}",u=t[e];~n.indexOf(a);)n=n.replace(a,u)}),~n.indexOf("{{")&&(n=n.replace(/{{.*?}}/g,"")),n}function u(e,t){if("string"!=typeof e)throw Error("template should be string!");if("object"!=typeof t)throw Error("data should be object!")}MenuIO=function(u,r,i){function s(){var e,t="object"==typeof i;t||(e=i,i={},i[e]=null),y=o(i),M.addEventListener("click",c),M.addEventListener("contextmenu",f)}function o(e){var t,n="",u=function(e,t){var n='data-menu="js-submenu"',r="data-key=",i="";return t?t+=".":t="",Object.keys(e).forEach(function(s){var o,m="",c="",f="",l="",d=t+s,h=e[s],b="object"==typeof h;b?(c=a(N.MAIN,{items:u(h,d)}),f=" menu-submenu",l=" "+n):E[d]=h,w.icon&&(o=s.replace(/\(|\)/g,"").replace(/\s/g,"-").toLowerCase(),f+=" icon icon-"+o),w.keys&&(m=w.keys[s],m&&(l=" "+r+m)),i+=a(N.ITEM,{name:s,subitems:c,className:f,attribute:l,path:d})}),i};return n=u(e),t=document.createElement("ul"),t.setAttribute("data-name","js-menu"),t.className="menu menu-hidden",t.innerHTML=n,g.appendChild(t),t}function m(e,t){var n,a=x.getItem(e),u=x.isName(a),r=x.isItem(a),i=x.isSubMenu(a);return u&&r||(a=document.elementFromPoint(t.x,t.y),i=x.isSubMenu(a),u=x.isName(a),r=x.isItem(a)),n={name:u,item:r,sub:i}}function c(e,t){var a,u,r=w.afterClick,i=w.beforeClick,s=w.name,o=e.target,c=t||m(o,{x:e.clientX,y:e.clientY});u=n(i,s),c.sub?e.preventDefault():(h(),u||!c.name&&!c.item||(a=b(o),n(a),n(r)))}function f(e){var t=e.target,n=e.clientX,a=e.clientY,u=m(t,{x:n,y:a});u.name||u.item||u.sub?c(e,u):(h(),d(n,a)),e.preventDefault()}function l(t,n){var a="number"==typeof t,u="number"==typeof n,r=p(),i=v(),s=e.innerHeight,o=e.innerWidth;i+t>o&&(t-=i,0>t&&(t=0)),r+n>s&&(n-=r,0>n&&(n=0)),a&&(y.style.left=t+"px"),u&&(y.style.top=n-14+"px")}function d(e,t){var a=w.beforeShow,u=w.name,r={x:e,y:t,name:u},i=n(a,r);i||(y.classList.remove("menu-hidden"),l(r.x,r.y))}function h(){var e=n(w.beforeClose);e||y.classList.add("menu-hidden")}function b(e){var t,n;return e=x.getName(e),e&&(t=e.getAttribute("data-menu-path")),n=E[t]}function p(){var e,t;return I||(e=getComputedStyle(y),t=e.height,I=parseInt(t,10)),I}function v(){var e,t;return j||(e=getComputedStyle(y),t=e.width,j=parseInt(t,10)),j}if(!(this instanceof MenuIO))return new MenuIO(u,r,i);var y,g,I,j,M,w={},x=new t,E={},N={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>'};i?(g=M=u,w=r):r?(g=M=u,i=r):(g=document.body,M=e,i=u),this.show=d,this.hide=h,s()}}(window);
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
{
|
||||
"name": "menu",
|
||||
"version": "1.0.2",
|
||||
"private": true,
|
||||
"branch": "gh-pages",
|
||||
"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-io.git"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "npm run lint:css && gulp default",
|
||||
"lint:css": "stylelint menu-io.css",
|
||||
"wisdom": "npm test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.8.8",
|
||||
"gulp-concat": "^2.2.0",
|
||||
"gulp-jshint": "^1.5.3",
|
||||
"gulp-minify-css": "^0.3.1",
|
||||
"gulp-recess": "^0.3.0",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-uglify": "^0.2.1",
|
||||
"stylelint": "^4.4.0",
|
||||
"stylelint-config-standard": "^3.0.0"
|
||||
},
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue