From c21f25a981fdcea3357c37e48393fa4f70aa41db Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 10 Aug 2021 00:22:09 +1000 Subject: [PATCH] chore(docs): examples --- .npmignore | 1 + README.md | 8 ++-- docs/classes/PagesBuilder.html | 6 +-- docs/index.html | 6 ++- docs/modules.html | 6 ++- examples/buttons/customButtons.js | 64 +++++++++++++++++++++++++++++++ examples/buttons/dynamicUpdate.js | 45 ++++++++++++++++++++++ examples/buttons/quickActions.js | 30 +++++++++++++++ examples/files.js | 30 +++++++++++++++ examples/initialization.js | 44 +++++++++++++++++++++ examples/rootEmbed.js | 30 +++++++++++++++ src/PagesBuilder.ts | 6 +-- 12 files changed, 263 insertions(+), 13 deletions(-) create mode 100644 examples/buttons/customButtons.js create mode 100644 examples/buttons/dynamicUpdate.js create mode 100644 examples/buttons/quickActions.js create mode 100644 examples/files.js create mode 100644 examples/initialization.js create mode 100644 examples/rootEmbed.js diff --git a/.npmignore b/.npmignore index 2898d6b..9f1d1b1 100644 --- a/.npmignore +++ b/.npmignore @@ -4,6 +4,7 @@ /src /build /scripts +/examples .eslintrc.json .gitignore tsconfig.json diff --git a/README.md b/README.md index 892277a..9a33885 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,8 @@ npm version -| 📖 [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) | +| --- | --- |

@@ -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({ @@ -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); diff --git a/docs/classes/PagesBuilder.html b/docs/classes/PagesBuilder.html index 312687c..afa1ef4 100644 --- a/docs/classes/PagesBuilder.html +++ b/docs/classes/PagesBuilder.html @@ -3978,9 +3978,9 @@

setDefaultButtons

example
builder.setDefaultButtons(['first', {
-  'stop': new MessageButton()
-  .setLabel('Stop')
-  .setStyle('PRIMARY')
+  stop: new MessageButton()
+     .setLabel('Stop')
+     .setStyle('PRIMARY')
 }]);
diff --git a/docs/index.html b/docs/index.html index 3f6df04..834b9f7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2738,7 +2738,7 @@

📖 Documentation - 🤖 Examples + 🤖 Examples @@ -2750,7 +2750,7 @@

Install 📦

Usage 📦

 - 
import { PagesBuilder } from 'discord.js-pages';
+			
import { PagesBuilder, PagesManager } from 'discord.js-pages';
 import { Client, MessageEmbed } from 'discord.js';
 
 const client = new Client({
@@ -2759,6 +2759,8 @@ 
Usage 📦

     ]
 });
 
+const pagesManager = new PagesManager();
+
 // Middleware is useful in bots with modular commands
 client.on('interactionCreate', (interaction) => {
     pagesManager.middleware(interaction);
diff --git a/docs/modules.html b/docs/modules.html
index 4e8a8af..1307759 100644
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -2738,7 +2738,7 @@ 

 					
 						
 							📖 Documentation
-							🤖 Examples
+							🤖 Examples
 						
 					
 				
@@ -2750,7 +2750,7 @@ 
Install 📦

 			
 				
Usage 📦

 			
-			
import { PagesBuilder } from 'discord.js-pages';
+			
import { PagesBuilder, PagesManager } from 'discord.js-pages';
 import { Client, MessageEmbed } from 'discord.js';
 
 const client = new Client({
@@ -2759,6 +2759,8 @@ 
Usage 📦

     ]
 });
 
+const pagesManager = new PagesManager();
+
 // Middleware is useful in bots with modular commands
 client.on('interactionCreate', (interaction) => {
     pagesManager.middleware(interaction);
diff --git a/examples/buttons/customButtons.js b/examples/buttons/customButtons.js
new file mode 100644
index 0000000..ad17909
--- /dev/null
+++ b/examples/buttons/customButtons.js
@@ -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);
\ No newline at end of file
diff --git a/examples/buttons/dynamicUpdate.js b/examples/buttons/dynamicUpdate.js
new file mode 100644
index 0000000..ef312c0
--- /dev/null
+++ b/examples/buttons/dynamicUpdate.js
@@ -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);
\ No newline at end of file
diff --git a/examples/buttons/quickActions.js b/examples/buttons/quickActions.js
new file mode 100644
index 0000000..c7695c0
--- /dev/null
+++ b/examples/buttons/quickActions.js
@@ -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);
\ No newline at end of file
diff --git a/examples/files.js b/examples/files.js
new file mode 100644
index 0000000..3c2e284
--- /dev/null
+++ b/examples/files.js
@@ -0,0 +1,30 @@
+import { Client, MessageAttachment, MessageEmbed } from 'discord.js';
+import { PagesBuilder } from 'discord.js-pages';
+
+const client = new Client({
+    intents: [
+        'GUILDS'
+    ]
+});
+
+client.on('interactionCreate', (interaction) => {
+    // To start using the files, you must add them to PagesBuilder, after adding you can use them on each page.
+    new PagesBuilder(interaction)
+        .setPages([
+            new MessageEmbed()
+                .setDescription('First page')
+                .setThumbnail('attachment://discord.png'),
+            new MessageEmbed()
+                .setDescription('Second page')
+        ])
+        // Supports array.
+        .setFiles(
+            new MessageAttachment(
+                Buffer.from('data:image/png;base64,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', 'base64'),
+                'discord.png'
+            )
+        )
+        .build();
+});
+
+client.login(process.env.TOKEN);
\ No newline at end of file
diff --git a/examples/initialization.js b/examples/initialization.js
new file mode 100644
index 0000000..a08e83c
--- /dev/null
+++ b/examples/initialization.js
@@ -0,0 +1,44 @@
+import { Client, MessageEmbed } from 'discord.js';
+import { PagesBuilder, PagesManager } from 'discord.js-pages';
+
+const client = new Client({
+    intents: [
+        'GUILDS'
+    ]
+});
+
+const pagesManager = new PagesManager();
+
+// Middleware is useful in bots with modular commands
+client.on('interactionCreate', (interaction) => {
+    pagesManager.middleware(interaction);
+
+    interaction.pagesBuilder()
+        .setTitle('Global title')
+        .setPages([
+            new MessageEmbed()
+                .setDescription('First page'),
+            new MessageEmbed()
+                .setDescription('Second page')
+        ])
+        .addField('Global field', 'discord.js-pages', true)
+        .setColor('GREEN')
+        .build();
+});
+
+// Also you can create PagesBuilder instance directly
+client.on('interactionCreate', (interaction) => {
+    new PagesBuilder(interaction)
+        .setTitle('Global title')
+        .setPages([
+            new MessageEmbed()
+                .setDescription('First page'),
+            new MessageEmbed()
+                .setDescription('Second page')
+        ])
+        .addField('Global field', 'discord.js-pages', true)
+        .setColor('GREEN')
+        .build();
+});
+
+client.login(process.env.TOKEN);
\ No newline at end of file
diff --git a/examples/rootEmbed.js b/examples/rootEmbed.js
new file mode 100644
index 0000000..3160484
--- /dev/null
+++ b/examples/rootEmbed.js
@@ -0,0 +1,30 @@
+import { Client, MessageEmbed } from 'discord.js';
+import { PagesBuilder } from 'discord.js-pages';
+
+const client = new Client({
+    intents: [
+        'GUILDS'
+    ]
+});
+
+client.on('interactionCreate', (interaction) => {
+    // PagesBuilder extends the MessageEmbed class, it inherits all of its methods and properties.
+    // You can add new properties using methods.
+    //
+    // When you add properties in this way,
+    // they will be prioritized and will replace/supplement the properties of the child MessageEmbed
+    // that are set via the setPages/addPages method.
+    new PagesBuilder(interaction)
+        .setTitle('Global title')
+        .setPages([
+            new MessageEmbed()
+                .setDescription('First page'),
+            new MessageEmbed()
+                .setDescription('Second page')
+        ])
+        .addField('Global field', 'discord.js-pages', true)
+        .setColor('GREEN')
+        .build();
+});
+
+client.login(process.env.TOKEN);
\ No newline at end of file
diff --git a/src/PagesBuilder.ts b/src/PagesBuilder.ts
index ebd76f8..9a2d112 100644
--- a/src/PagesBuilder.ts
+++ b/src/PagesBuilder.ts
@@ -278,9 +278,9 @@ export class PagesBuilder extends MessageEmbed {
      * @example
      * ```
      * builder.setDefaultButtons(['first', {
-     *   'stop': new MessageButton()
-     *   .setLabel('Stop')
-     *   .setStyle('PRIMARY')
+     *   stop: new MessageButton()
+     *      .setLabel('Stop')
+     *      .setStyle('PRIMARY')
      * }]);
      * ```
      */