djs-menu-v13

Version:

A module for create simple and complex menu for your Discord Bot

shizey.github.io/djs-menu-v13/

78 lines (73 loc) • 16.7 kB

HTML

<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>djs-menu-v13</title><meta name="description" content="Documentation for djs-menu-v13"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">djs-menu-v13</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility">All<ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1>djs-menu-v13</h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography"> <a href="#djs-menu-v13" id="djs-menu-v13" style="color: inherit; text-decoration: none;"> <h1>djs-menu-v13</h1> </a> <a href="#create-menu-for-your-discord-bot-very-easly" id="create-menu-for-your-discord-bot-very-easly" style="color: inherit; text-decoration: none;"> <h2>Create menu for your Discord Bot very easly</h2> </a> <ul> <li>Make for Discord.js V13 <ul> <li>Work with Interaction</li> </ul> </li> <li>Create simple and complex Menu <ul> <li>with button and select menu</li> </ul> </li> <li>Support event and callbacks <ul> <li>For do whatever you want</li> </ul> </li> </ul> <a href="#usefull-link" id="usefull-link" style="color: inherit; text-decoration: none;"> <h2>Usefull link</h2> </a> <ul> <li><a href="https://shizey.github.io/djs-menu-v13/">Documentation</a></li> <li><a href="https://github.com/Shizey/djs-menu-v13">GitHub Page</a></li> <li><a href="https://www.npmjs.com/package/djs-menu-v13">NPM Page</a></li> </ul> <a href="#how-to-use-it-" id="how-to-use-it-" style="color: inherit; text-decoration: none;"> <h2>How to use it ?</h2> </a> <a href="#first-step" id="first-step" style="color: inherit; text-decoration: none;"> <h3>First step</h3> </a> First you need to install the module with <pre><code class="language-js">npm i djs-menu-v13 </code></pre> Then, import the module in your code <pre><code class="language-js">import {Menu, MenuPage} from 'djs-menu-v13'; // Or with require const {Menu, MenuPage} = require('djs-menu-v13'); </code></pre> For this example, we gonna make two pages : <ul> <li>The first one with a basic embed and a button to go to the second page</li> <li>The second one with a button to return to the first page and a button to exit the menu</li> </ul> First we need to create all the buttons we need : <pre><code class="language-js">const nextPageBtn = { label: 'Go to second page', target: 'secondPage', // The target is the ID of the page that we need to display when this button is clicked style: 'PRIMARY', }; const previousPageBtn = { label: 'Go to first page', target: 'firstPage', style: 'PRIMARY', }; const exitBtn = { label: 'Exit', // You can also put a function to execute when the button is clicked target: (page, interaction, menu) => { menu.stop(); interaction.editReply({ content: 'The menu has just been closed', embeds: [], components: [], }); }, style: 'DANGER', }; </code></pre> Then we need to create two embeds for our pages. You don't have to use an embed to make a page, just a content is enough. <pre><code class="language-js">const firstEmbed = new MessageEmbed() .setColor('GREEN') .setDescription('FIRST PAGE'); const secondEmbed = new MessageEmbed() .setColor('YELLOW') .setDescription('SECOND PAGE'); </code></pre> Now we can create our pages. <pre><code class="language-js">const firstPage = new MenuPage() .addEmbed(firstEmbed) .addButton(nextPageBtn) .setId('secondPage'); // The id that the target in the button will use const secondPage = new MenuPage() .addEmbed(secondEmbed) .addButton(previousPageBtn) .addButton(exitBtn) .setId('secondPage'); </code></pre> And finaly create the menu and start it <pre><code class="language-js">const menu = new Menu(interaction) .addPage(firstPage) .addPage(secondPage) .start('firstPage'); </code></pre> GG you just start your first menu ! Now, you can listen to events emit by your menu <pre><code class="language-js">menu.on('stop', (interaction, reason) => { if (reason === 'noReply' ) { // Don't forget to clear embeds and components generated by the menu interaction.editReply({ embeds: [], components: [], content: 'You did not respond quickly enough', }); } }); menu.on('pageChanged', (page, interaction, pages) => { console.log('the page just changed'); }); </code></pre> <a href="https://github.com/Shizey/djs-menu-v13/blob/main/examples/firstStep.js">Full code example here</a> <a href="#menu-with-select-menu" id="menu-with-select-menu" style="color: inherit; text-decoration: none;"> <h3>Menu with Select Menu</h3> </a> You can also use select menu with buttons. <a href="https://github.com/Shizey/djs-menu-v13/blob/main/examples/selectMenu.js">Check this example to know how</a> </div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-class"><a href="classes/Menu.html" class="tsd-kind-icon">Menu</a></li><li class="tsd-kind-class"><a href="classes/MenuPage.html" class="tsd-kind-icon">MenuPage</a></li><li class="tsd-kind-class"><a href="classes/MenuSelectPage.html" class="tsd-kind-icon">MenuSelectPage</a></li><li class="tsd-kind-type-alias"><a href="modules.html#MenuButton" class="tsd-kind-icon">MenuButton</a></li><li class="tsd-kind-type-alias"><a href="modules.html#MenuSelectChoice" class="tsd-kind-icon">MenuSelectChoice</a></li><li class="tsd-kind-type-alias"><a href="modules.html#SelectChoice" class="tsd-kind-icon">SelectChoice</a></li><li class="tsd-kind-type-alias"><a href="modules.html#SingleButton" class="tsd-kind-icon">SingleButton</a></li><li class="tsd-kind-type-alias"><a href="modules.html#pagesType" class="tsd-kind-icon">pagesType</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-constructor tsd-parent-kind-class">Constructor</li><li class="tsd-kind-property tsd-parent-kind-class">Property</li><li class="tsd-kind-method tsd-parent-kind-class">Method</li></ul></div><h2>Settings</h2>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></footer><div class="container tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></div><div class="overlay"></div><script src="assets/main.js"></script></body></html>