yy-menu
Version:
A traditional menu system for web apps inspired by Electron
217 lines (142 loc) • 7.08 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>yy-menu API Documentation</title>
<meta name="description" content="Documentation for yy-menu library" />
<meta name="keywords" content="menu,system,UI,accelerators,Electron,file menu,web app" />
<meta name="keyword" content="menu,system,UI,accelerators,Electron,file menu,web app" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<script src="scripts/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,700" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="styles/main.css">
<script>
var config = {"monospaceLinks":false,"cleverLinks":false,"default":{"outputSourceFiles":true},"applicationName":"yy-menu","footer":"by YOPEY YOPEY LLC (yopeyopey.com)","copyright":"Copyright © 2018 YOPEY YOPEY LLC.","meta":{"title":"yy-menu API Documentation","description":"Documentation for yy-menu library","keyword":["menu","system","UI","accelerators","Electron","file menu","web app"]},"matomo":{"url":"https://analytics.yopeyopey.com/piwik/","id":18}};
</script>
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.yopeyopey.com/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '18']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
</head>
<body>
<div id="wrap" class="clearfix">
<div class="navigation">
<h3 class="applicationName"><a href="index.html">yy-menu</a></h3>
<button id="menuToggle" class="btn btn-link btn-lg menu-toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="search">
<input id="search" type="text" class="form-control input-md" placeholder="Search...">
</div>
<ul class="list">
<li class="item" data-name="global">
<span class="title namespace ">
<span class="namespaceTag">
<span class="glyphicon glyphicon-globe"></span>
</span>
<a href="global.html">Global</a>
</span>
<ul class="members itemMembers">
<span class="subtitle">Members</span>
<li class="parent " data-name="localAccelerator"><a href="global.html#localAccelerator">localAccelerator</a></li>
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Menu#Menu">
<span class="title ">
<a href="Menu_Menu.html">Menu#Menu</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="MenuItem#MenuItem">
<span class="title ">
<a href="MenuItem_MenuItem.html">MenuItem#MenuItem</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
</ul>
</div>
<div class="main">
<h1 class="page-title" data-filename="Viewport">Index</h1>
<h3> </h3>
<section>
<article class="readme content-size"><h1>yy-menu</h1>
<p>A traditional menu system for web apps inspired by Electron. Also includes an implementation of Accelerators to allow keyboard access to the menu (and global keyboard access across the app).</p>
<h2>rationalization</h2>
<p>This came together because I wanted to cross-build and release electron apps as web-apps. I needed a replacement for Electron.Menu, Electron.MenuItem, and Electron.Accelerators. I rarely use Electron anymore, but I still find this library useful for some webapps.</p>
<h2>installation</h2>
<pre><code>npm i yy-menu
</code></pre>
<h2>simple example</h2>
<pre class="prettyprint source lang-js"><code>import { Menu, MenuItem, localAccelerator } from 'yy-menu';
const menu = new Menu();
menu.append(new MenuItem({ label: '&Test', accelerator: 'ctrl+b', click: clickCallback }));
var submenu = new Menu();
submenu.append(new MenuItem({ label: 'Check&box', type: 'checkbox', checked: true }));
menu.append(new MenuItem({ label: 'Sub&menu', submenu: submenu }));
// set menu as the application (i.e., top level) menu
Menu.setApplicationMenu(menu);
// register a keyboard shortcut unrelated to menu
localAccelerator.register('ctrl-a', pressA);
function clickCallback() { console.log('You clicked me!'); }
function pressA() { console.log('you pressed A'); }
</code></pre>
<h2>live demo</h2>
<p><a target="_blank" href="https://davidfig.github.io/yy-menu/">https://davidfig.github.io/yy-menu</a></p>
<h2>API</h2>
<p><a target="_blank" href="https://davidfig.github.io/yy-menu/jsdoc">https://davidfig.github.io/yy-menu/jsdoc</a></p>
<h2>License</h2>
<p>MIT License<br>
(c) 2020 <a target="_blank" href="https://yopeyopey.com/">YOPEY YOPEY LLC</a> by David Figatner</p></article>
</section>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Dec 23 2020 11:20:22 GMT+0800 (Taipei Standard Time)
</div>
</footer>
</div>
</div>
<script>prettyPrint();</script>
<script src="scripts/main.js"></script>
</body>
</html>