Skip to content

Commit

Permalink
chore(docs): examples
Browse files Browse the repository at this point in the history
  • Loading branch information
egorprnn committed Aug 9, 2021
1 parent 3cf4246 commit c21f25a
Show file tree
Hide file tree
Showing 12 changed files with 263 additions and 13 deletions.
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
/src
/build
/scripts
/examples
.eslintrc.json
.gitignore
tsconfig.json
Expand Down
8 changes: 5 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<img src="https://badge.fury.io/js/discord.js-pages.svg" alt="npm version" height="18">
</a>

| 📖 [Documentation](https://mrzillagold.github.io/discord.js-pages/index.html) |
| ---------------------------------------------------------------------------- |
| 📖 [Documentation](https://mrzillagold.github.io/discord.js-pages/index.html) | [🤖 Examples](https://github.com/MrZillaGold/discord.js-pages) |
| --- | --- |

</p>

Expand All @@ -19,7 +19,7 @@

### Usage 📦
```js
import { PagesBuilder } from 'discord.js-pages';
import { PagesBuilder, PagesManager } from 'discord.js-pages';
import { Client, MessageEmbed } from 'discord.js';

const client = new Client({
Expand All @@ -28,6 +28,8 @@ const client = new Client({
]
});

const pagesManager = new PagesManager();

// Middleware is useful in bots with modular commands
client.on('interactionCreate', (interaction) => {
pagesManager.middleware(interaction);
Expand Down
6 changes: 3 additions & 3 deletions docs/classes/PagesBuilder.html
Original file line number Diff line number Diff line change
Expand Up @@ -3978,9 +3978,9 @@ <h3>set<wbr>Default<wbr>Buttons</h3>
<dl class="tsd-comment-tags">
<dt>example</dt>
<dd><pre><code><span style="color: #001080">builder</span><span style="color: #000000">.</span><span style="color: #795E26">setDefaultButtons</span><span style="color: #000000">([</span><span style="color: #A31515">&#039;first&#039;</span><span style="color: #000000">, {</span>
<span style="color: #000000"> </span><span style="color: #A31515">&#039;stop&#039;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">MessageButton</span><span style="color: #000000">()</span>
<span style="color: #000000"> .</span><span style="color: #795E26">setLabel</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;Stop&#039;</span><span style="color: #000000">)</span>
<span style="color: #000000"> .</span><span style="color: #795E26">setStyle</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;PRIMARY&#039;</span><span style="color: #000000">)</span>
<span style="color: #000000"> </span><span style="color: #001080">stop:</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">MessageButton</span><span style="color: #000000">()</span>
<span style="color: #000000"> .</span><span style="color: #795E26">setLabel</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;Stop&#039;</span><span style="color: #000000">)</span>
<span style="color: #000000"> .</span><span style="color: #795E26">setStyle</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;PRIMARY&#039;</span><span style="color: #000000">)</span>
<span style="color: #000000">}]);</span>
</code></pre>
</dd>
Expand Down
6 changes: 4 additions & 2 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2738,7 +2738,7 @@ <h1 align="center">
<thead>
<tr>
<th>📖 <a href="https://mrzillagold.github.io/discord.js-pages/index.html">Documentation</a></th>
<th>🤖 <a href="docs/examples">Examples</a></th>
<th><a href="https://github.com/MrZillaGold/discord.js-pages">🤖 Examples</a></th>
</tr>
</thead>
</table>
Expand All @@ -2750,7 +2750,7 @@ <h3>Install 📦</h3>
<a href="#usage-📦" id="usage-📦" style="color: inherit; text-decoration: none;">
<h3>Usage 📦</h3>
</a>
<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000">, </span><span style="color: #001080">PagesManager</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Client</span><span style="color: #000000">, </span><span style="color: #001080">MessageEmbed</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js&#039;</span><span style="color: #000000">;</span>

<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">({</span>
Expand All @@ -2759,6 +2759,8 @@ <h3>Usage 📦</h3>
<span style="color: #000000"> ]</span>
<span style="color: #000000">});</span>

<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">pagesManager</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">PagesManager</span><span style="color: #000000">();</span>

<span style="color: #008000">// Middleware is useful in bots with modular commands</span>
<span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;interactionCreate&#039;</span><span style="color: #000000">, (</span><span style="color: #001080">interaction</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #001080">pagesManager</span><span style="color: #000000">.</span><span style="color: #795E26">middleware</span><span style="color: #000000">(</span><span style="color: #001080">interaction</span><span style="color: #000000">);</span>
Expand Down
6 changes: 4 additions & 2 deletions docs/modules.html
Original file line number Diff line number Diff line change
Expand Up @@ -2738,7 +2738,7 @@ <h1 align="center">
<thead>
<tr>
<th>📖 <a href="https://mrzillagold.github.io/discord.js-pages/index.html">Documentation</a></th>
<th>🤖 <a href="docs/examples">Examples</a></th>
<th><a href="https://github.com/MrZillaGold/discord.js-pages">🤖 Examples</a></th>
</tr>
</thead>
</table>
Expand All @@ -2750,7 +2750,7 @@ <h3>Install 📦</h3>
<a href="#usage-📦" id="usage-📦" style="color: inherit; text-decoration: none;">
<h3>Usage 📦</h3>
</a>
<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">PagesBuilder</span><span style="color: #000000">, </span><span style="color: #001080">PagesManager</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js-pages&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Client</span><span style="color: #000000">, </span><span style="color: #001080">MessageEmbed</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;discord.js&#039;</span><span style="color: #000000">;</span>

<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">client</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Client</span><span style="color: #000000">({</span>
Expand All @@ -2759,6 +2759,8 @@ <h3>Usage 📦</h3>
<span style="color: #000000"> ]</span>
<span style="color: #000000">});</span>

<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">pagesManager</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">PagesManager</span><span style="color: #000000">();</span>

<span style="color: #008000">// Middleware is useful in bots with modular commands</span>
<span style="color: #001080">client</span><span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;interactionCreate&#039;</span><span style="color: #000000">, (</span><span style="color: #001080">interaction</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #001080">pagesManager</span><span style="color: #000000">.</span><span style="color: #795E26">middleware</span><span style="color: #000000">(</span><span style="color: #001080">interaction</span><span style="color: #000000">);</span>
Expand Down
64 changes: 64 additions & 0 deletions examples/buttons/customButtons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { Client, MessageEmbed, MessageButton, MessageActionRow } from 'discord.js';
import { PagesBuilder } from 'discord.js-pages';

const client = new Client({
intents: [
'GUILDS'
]
});

client.on('interactionCreate', (interaction) => {
// Custom buttons & select
new PagesBuilder(interaction)
.setTitle('Global title')
.setPages([
new MessageEmbed()
.setDescription('First page'),
new MessageEmbed()
.setDescription('Second page')
])
.setComponents([
new MessageActionRow()
.setComponents(
new MessageButton()
.setCustomId('custom')
.setLabel('Custom button')
.setStyle('PRIMARY')
)
])
// You can add buttons/selects to the end of the list.
// The library itself will find the component in which there is a place or create new for the element and add it.
// Support array.
.addComponents(
new MessageButton()
.setCustomId('awesome')
.setLabel('Awesome button')
.setStyle('SECONDARY')
)
// Add triggers for handling interactions with buttons/selects.
// Support array.
.setTriggers({
name: 'custom',
callback(interactionCallback, button) {
button.setDisabled(true);

interaction.followUp({
content: 'Custom button callback!'
});
}
})
.addTriggers({
name: 'awesome',
callback(interactionCallback, button) {
button.setDisabled(true)
.setLabel('¯\\_(ツ)_/¯');

interaction.followUp({
content: 'Awesome button callback!'
});
}
})
.build();
});

client.login(process.env.TOKEN);
45 changes: 45 additions & 0 deletions examples/buttons/dynamicUpdate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Client, MessageEmbed, MessageButton, MessageActionRow } from 'discord.js';
import { PagesBuilder } from 'discord.js-pages';

const client = new Client({
intents: [
'GUILDS'
]
});

client.on('interactionCreate', (interaction) => {
const link = new MessageButton()
.setLabel('Dynamic link')
.setStyle('LINK');

// Dynamic buttons update
const builder = new PagesBuilder(interaction)
.setTitle('Global title');

builder.setPages([
() => {
link.setURL('https://google.com/');

builder.setComponents(
new MessageActionRow()
.addComponents(link)
);

return new MessageEmbed()
.setDescription('First page');
},
() => {
link.setURL('https://discord.com/');

builder.setComponents(
new MessageActionRow()
.addComponents(link)
);

return new MessageEmbed()
.setDescription('Second page');
}
]);
});

client.login(process.env.TOKEN);
30 changes: 30 additions & 0 deletions examples/buttons/quickActions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Client, MessageEmbed, MessageButton } from 'discord.js';
import { PagesBuilder } from 'discord.js-pages';

const client = new Client({
intents: [
'GUILDS'
]
});

client.on('interactionCreate', (interaction) => {
// Quick actions
new PagesBuilder(interaction)
.setTitle('Global title')
.setPages([
new MessageEmbed()
.setDescription('First page'),
new MessageEmbed()
.setDescription('Second page')
])
// Add buttons with quick pagination actions, also you can customize it.
// There is no need to set customId, the library does it for you.
.setDefaultButtons(['first', {
stop: new MessageButton()
.setLabel('Stop')
.setStyle('PRIMARY')
}])
.build();
});

client.login(process.env.TOKEN);
30 changes: 30 additions & 0 deletions examples/files.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c21f25a

Please sign in to comment.