Merge pull request #2 from Arkshine/compat-modernize

COMPATIBILITY: Modernize the component

.discourse-compatibility

@@ -0,0 +1 @@
+< 3.3.0.beta1-dev: 1e8401edaa432c5babd2393f3eb7a268d6e984d3

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.github/workflows/component-linting.yml

@@ -0,0 +1,11 @@
+name: Discourse Theme
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    uses: discourse/.github/.github/workflows/discourse-theme.yml@v1

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

README.md

@@ -64,4 +64,4 @@ Use the dropdown to select one or more groups. Users in **any** of the groups li
 
 #### `theme`
 
-Toggle the theme of the Discord widget. Select either light/dark to force set a theme or select 'auto' to have the theme automatically be chosen based on the user's system.
+Toggle the theme of the Discord widget. Select either light/dark to force set a theme or select 'auto' to have the theme automatically be chosen based on Discourse scheme.

common/common.scss

@@ -9,6 +9,7 @@
         color: var(--danger);
         font-size: 1.25rem;
         margin-bottom: 0.25rem;
+        width: 100%;
       }
     }
   }

javascripts/discourse/api-initializers/discord-widget.js

@@ -1,53 +1,34 @@
 import { apiInitializer } from "discourse/lib/api";
-import User from "discourse/models/user";
+import DiscordHeaderMenu from "../components/discord-header-menu";
 
-export default apiInitializer("0.11.1", (api) => {
-  // If login is required
-  if (settings.require_login && !api.getCurrentUser()) {
-    return;
-  }
-
-  // If a trust level is required
-  if (User.currentProp("trust_level") < settings.minimum_trust_level) {
-    return;
-  }
+export default apiInitializer("1.28.0", (api) => {
+  const currentUser = api.getCurrentUser();
 
-  // If user must be staff
-  if (settings.require_staff && !api.getCurrentUser().staff) {
+  if (!currentUser && settings.require_login) {
     return;
   }
 
-  // If user must be a group member
-  if (settings.required_groups.length > 0) {
-    const requiredGroups = settings.required_groups
-      .split("|")
-      .map((g) => Number(g));
-
-    const currentUserGroups = api.getCurrentUser().groups.map((g) => g.id);
+  if (currentUser) {
+    if (currentUser.trust_level < settings.minimum_trust_level) {
+      return;
+    }
 
-    if (!currentUserGroups.some((g) => requiredGroups.includes(g))) {
+    if (!currentUser.staff && settings.require_staff) {
       return;
     }
-  }
 
-  api.decorateWidget("header-icons:before", (helper) => {
-    const headerState = helper.widget.parentWidget.state;
-    return helper.attach("header-dropdown", {
-      title: themePrefix("discord_widget.title"),
-      icon: "fab-discord",
-      active: headerState.discordChatVisible,
-      action: "toggleDiscordChat",
-    });
-  });
-
-  api.decorateWidget("header-icons:after", (helper) => {
-    const headerState = helper.widget.parentWidget.state;
-    if (headerState.discordChatVisible) {
-      return [helper.attach("discord-chat-menu")];
+    if (settings.required_groups.length > 0) {
+      const requiredGroups = settings.required_groups
+        .split("|")
+        .map((g) => Number(g));
+
+      const currentUserGroups = currentUser.groups.map((g) => g.id);
+
+      if (!currentUserGroups.some((g) => requiredGroups.includes(g))) {
+        return;
+      }
     }
-  });
+  }
 
-  api.attachWidgetAction("header", "toggleDiscordChat", function () {
-    this.state.discordChatVisible = !this.state.discordChatVisible;
-  });
+  api.headerIcons.add("discord", DiscordHeaderMenu, { before: "search" });
 });

javascripts/discourse/components/discord-header-menu.gjs

@@ -0,0 +1,106 @@
+import { tracked } from "@glimmer/tracking";
+import Component from "@ember/component";
+import { action } from "@ember/object";
+import { bool } from "@ember/object/computed";
+import { inject as service } from "@ember/service";
+import { and, not } from "truth-helpers";
+import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
+import DButton from "discourse/components/d-button";
+import DMenu from "discourse/components/d-menu";
+import MenuPanel from "discourse/components/menu-panel";
+import DiscourseURL from "discourse/lib/url";
+import i18n from "discourse-common/helpers/i18n";
+import PanelMessage from "./panel-message";
+
+export default class DiscordHeaderMenu extends Component {
+  @service site;
+
+  @tracked loading = true;
+
+  @bool("serverId") hasServerId;
+  @bool("serverInviteUrl") hasInviteUrl;
+
+  get serverId() {
+    return settings.discord_server_id.trim();
+  }
+
+  get serverInviteUrl() {
+    return settings.discord_invite_url.trim();
+  }
+
+  get theme() {
+    let theme = settings.theme;
+
+    if (theme === "auto") {
+      theme = getComputedStyle(document.body)
+        .getPropertyValue("--scheme-type")
+        .trim();
+    }
+
+    return theme;
+  }
+
+  @action
+  redirectToUrl() {
+    DiscourseURL.routeTo(this.serverInviteUrl);
+  }
+
+  @action
+  iframeLoaded() {
+    this.loading = false;
+  }
+
+  <template>
+    <li>
+      {{#if (and this.site.mobileView this.hasInviteUrl)}}
+        <DButton
+          @action={{this.redirectToUrl}}
+          @icon="fab-discord"
+          @title={{i18n (themePrefix "discord_widget.title")}}
+          class="icon btn-flat discord-widget"
+        />
+      {{else}}
+        <DMenu
+          @identifier="discord-widget"
+          @icon="fab-discord"
+          @title={{i18n (themePrefix "discord_widget.title")}}
+          @inline="true"
+          class="icon btn-flat discord-widget"
+        >
+          <:content>
+            <MenuPanel @panelClass="discord-panel">
+              {{#if (not this.hasServerId)}}
+                <PanelMessage
+                  @type="warning"
+                  @icon="exclamation-triangle"
+                  @message="discord_widget.no_server_id"
+                />
+              {{else if (and this.site.mobileView (not this.hasInviteUrl))}}
+                <PanelMessage
+                  @type="warning"
+                  @icon="exclamation-triangle"
+                  @message="discord_widget.no_invite_url"
+                />
+              {{else}}
+                <iframe
+                  src="https://discordapp.com/widget?id={{this.serverId}}&theme={{this.theme}}"
+                  sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+                  width="350"
+                  height="500"
+                  allowtransparency="true"
+                  frameborder="0"
+                  id="chatwidget"
+                  name="chatwidget"
+                  onload={{this.iframeLoaded}}
+                  class={{if this.loading "hidden" ""}}
+                  title={{i18n (themePrefix "discord_widget.title")}}
+                ></iframe>
+                <ConditionalLoadingSpinner @condition={{this.loading}} />
+              {{/if}}
+            </MenuPanel>
+          </:content>
+        </DMenu>
+      {{/if}}
+    </li>
+  </template>
+}

javascripts/discourse/components/panel-message.gjs

@@ -0,0 +1,13 @@
+import dIcon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+
+const PanelMessage = <template>
+  <div class="panel-message">
+    <div class="panel-message-type-{{@type}}">
+      {{dIcon @icon}}
+      {{i18n (themePrefix @message)}}
+    </div>
+  </div>
+</template>;
+
+export default PanelMessage;

locales/en.yml

@@ -1,6 +1,23 @@
 en:
   theme_metadata:
     description: "Display a Discord widget on your Discourse forum"
+
+    settings:
+      discord_server_id:
+        description: "The ID of your Discord server. To find your server ID, on your Discord app navigate to: Server Settings > Widget > Server ID"
+      discord_invite_url:
+        description: "The URL of your Discord invite link. To find your invite link, on your Discord app navigate to: Channel Settings > Invites > Create One. Make sure to also Edit Invite link and remove the expiration date."
+      require_login:
+        description: "Require users to be logged in to view the widget"
+      minimum_trust_level:
+        description: "The minimum trust level a user must have to view the widget. Note: the setting above (require_login) must be checked in order for this to work."
+      require_staff:
+        description: "Require users to be staff (admins + moderators) to view the widget. Note: the setting above (require_login) must be checked in order for this to work."
+      required_groups:
+        description: "Require users to be members of a set of predefined groups to see the widget. Note: the setting above (require_login) must be checked in order for this to work."
+      theme:
+        description: "The theme of the widget. Use auto to base the theme off your system theme"
+
   discord_widget:
     title: "Discord Chat"
     no_server_id: "No server ID specified. Please add your Discord server ID in the theme copmonent settings"

package.json

@@ -2,6 +2,9 @@
   "author": "Keegan George",
   "license": "MIT",
   "devDependencies": {
-    "eslint-config-discourse": "latest"
+    "@discourse/lint-configs": "^1.3.7",
+    "ember-template-lint": "^5.13.0",
+    "eslint": "^8.56.0",
+    "prettier": "^2.8.8"
   }
 }