Merge pull request #5 from sveenxx/develop

Build 1.2.0

demo/index.html

@@ -15,7 +15,8 @@
         (async function () {
             const discord = await DiscordWidget.init(
                 document.querySelector("#discord"),
-                "600381707073486871"
+                "600381707073486871",
+                { connectButton: false }
             );
         })()
     </script>

dist/interfaces/widget.d.ts

@@ -1,6 +1,6 @@
 export declare type WidgetOptions = {
-    connectButton: boolean;
-    styles: Record<string, unknown>;
+    connectButton?: boolean;
+    styles?: Record<string, unknown>;
 };
 export declare type Guild = {
     id: string;

dist/options.d.ts

@@ -0,0 +1,8 @@
+import { WidgetOptions } from "./interfaces/";
+export declare class Options {
+    /**
+     *
+     */
+    connectButton: boolean;
+    constructor(options?: Partial<WidgetOptions>);
+}

dist/templates/widget.d.ts

@@ -1 +1,2 @@
-export declare const getWidget: (guild: any) => any;
+import { WidgetOptions, Guild } from "../interfaces/";
+export declare const getWidget: (guild: Guild, options: WidgetOptions) => string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-widget",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "♻️ Customize discord widget for your website",
   "main": "dist/discord-widget.js",
   "jsnext:main": "dist/discord-widget.js",

src/interfaces/widget.ts

@@ -1,6 +1,6 @@
 export type WidgetOptions = {
-    connectButton: boolean;
-    styles: Record<string, unknown>;
+    connectButton?: boolean;
+    styles?: Record<string, unknown>;
 };
 
 export type Guild = {

src/options.ts

@@ -0,0 +1,14 @@
+import { WidgetOptions } from "./interfaces/";
+
+export class Options {
+    /**
+     *
+     */
+    connectButton = true;
+
+    constructor(options: Partial<WidgetOptions> = {}) {
+        Object.keys(options).forEach((prop) => {
+            this[prop] = options[prop];
+        });
+    }
+}

src/style.ts

@@ -79,7 +79,8 @@ const WIDGET_STYLE = `
     }
 
     .widget-footer {
-        min-height: 30px;
+        height: 42px;
+        box-sizing: border-box;
         background-color: #202225;
         padding: 6px 6px 6px 20px;
         -webkit-box-shadow: 0 -1px 18px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 20%);
@@ -106,7 +107,7 @@ const WIDGET_STYLE = `
     }
 
     .widget-join-button {
-        color: #fff;
+        color: #fff!important;
         text-decoration: none;
         border: 1px solid #212325;
         border-radius: 4px;

src/templates/widget.ts

@@ -1,9 +1,12 @@
 import { template } from "../template";
 import { getMemeberList } from "./widgetMemberList";
+import { WidgetOptions, Guild } from "../interfaces/";
 
-export const getWidget = (guild) =>
-    template(guild, (data) =>
-        `
+export const getWidget = (guild: Guild, options: WidgetOptions): string =>
+    template(
+        guild,
+        (data) =>
+            `
         <div class="widget-header">
             <a class="widget-logo" href="http://discord.com" target="_blank"></a>
             <span class="widget-status"><strong>${
@@ -26,9 +29,11 @@ export const getWidget = (guild) =>
         </div>
         <div class="widget-footer">
             <span class="widget-footer-text">Free voice chat from Discord</span>
-            <a class="widget-join-button" href="${
-                data.instant_invite
-            }" target="_blank">Connect</a>
+            ${
+                !options.connectButton
+                    ? ``
+                    : `<a class="widget-join-button" href="${data.instant_invite}" target="_blank">Connect</a>`
+            }
         </div>
-    `.replaceAll(",", "")
+    `
     );

src/templates/widgetMemberList.ts

@@ -2,9 +2,10 @@ import { template } from "../template";
 
 export const getMemeberList = (guild) =>
     template(guild, (data) =>
-        data.members.map(
-            (member) =>
-                `
+        data.members
+            .map(
+                (member) =>
+                    `
     <div class="widget-member">                         
         <div>
             <div class="widget-member-avatar">
@@ -23,5 +24,6 @@ export const getMemeberList = (guild) =>
         }
     </div>
 `
-        )
+            )
+            .join("")
     );

src/widget.ts

@@ -1,6 +1,7 @@
 import * as I from "./interfaces/";
 import { WidgetOptions, Guild } from "./interfaces/";
 import { getWidget } from "./templates";
+import { Options } from "./options";
 
 export class Widget implements I.Widget {
     /**
@@ -24,7 +25,7 @@ export class Widget implements I.Widget {
         options?: WidgetOptions | undefined
     ) {
         this.element = element;
-        this.options = options;
+        this.options = new Options(options);
         this.guild = guild;
 
         /**
@@ -36,14 +37,12 @@ export class Widget implements I.Widget {
          * Mark as discord widget
          */
         contentElement.setAttribute("data-discord-widget", "true");
-
         contentElement.className = "discord-widget";
 
         /**
          * Create template
          */
-
-        contentElement.innerHTML = getWidget(this.guild);
+        contentElement.innerHTML = getWidget(this.guild, this.options);
 
         this.element.appendChild(contentElement);
     }