From 148431d52182d9c0810536bc12a76caee09c2e0c Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Tue, 4 Jul 2023 10:35:10 -0500
Subject: [PATCH] DEV: Convert fullscreen modals to component-based API
(#22248)
This PR converts the following modals:
- `fullscreen-code`
- `fullscreen-table`
to make use of the new component-based API
---
.../app/components/modal/fullscreen-code.hbs | 11 ++++++++
.../app/components/modal/fullscreen-code.js | 28 +++++++++++++++++++
.../app/components/modal/fullscreen-table.hbs | 5 ++++
.../app/controllers/fullscreen-code.js | 28 -------------------
.../instance-initializers/post-decorations.js | 6 ++--
.../discourse/app/lib/codeblock-buttons.js | 12 +++++---
.../app/templates/modal/fullscreen-code.hbs | 5 ----
.../app/templates/modal/fullscreen-table.hbs | 3 --
8 files changed, 55 insertions(+), 43 deletions(-)
create mode 100644 app/assets/javascripts/discourse/app/components/modal/fullscreen-code.hbs
create mode 100644 app/assets/javascripts/discourse/app/components/modal/fullscreen-code.js
create mode 100644 app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs
delete mode 100644 app/assets/javascripts/discourse/app/controllers/fullscreen-code.js
delete mode 100644 app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs
delete mode 100644 app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs
diff --git a/app/assets/javascripts/discourse/app/components/modal/fullscreen-code.hbs b/app/assets/javascripts/discourse/app/components/modal/fullscreen-code.hbs
new file mode 100644
index 00000000000..62a5a0f97f1
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/fullscreen-code.hbs
@@ -0,0 +1,11 @@
+
+ <:body>
+
+ {{@model.code}}
+
+
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/fullscreen-code.js b/app/assets/javascripts/discourse/app/components/modal/fullscreen-code.js
new file mode 100644
index 00000000000..08314924fe3
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/fullscreen-code.js
@@ -0,0 +1,28 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import highlightSyntax from "discourse/lib/highlight-syntax";
+import CodeblockButtons from "discourse/lib/codeblock-buttons";
+
+export default class FullscreenCode extends Component {
+ @service siteSettings;
+ @service session;
+
+ @action
+ closeModal() {
+ this.codeBlockButtons.cleanup();
+ this.args.closeModal();
+ }
+
+ @action
+ applyCodeblockButtons(element) {
+ const modalElement = element.querySelector(".modal-body");
+ highlightSyntax(modalElement, this.siteSettings, this.session);
+
+ this.codeBlockButtons = new CodeblockButtons({
+ showFullscreen: false,
+ showCopy: true,
+ });
+ this.codeBlockButtons.attachToGeneric(modalElement);
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs b/app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs
new file mode 100644
index 00000000000..91b6afb656b
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs
@@ -0,0 +1,5 @@
+
+ <:body>
+ {{@model.tableHtml}}
+
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/controllers/fullscreen-code.js b/app/assets/javascripts/discourse/app/controllers/fullscreen-code.js
deleted file mode 100644
index 81108cb5452..00000000000
--- a/app/assets/javascripts/discourse/app/controllers/fullscreen-code.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Controller from "@ember/controller";
-import { afterRender } from "discourse-common/utils/decorators";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import highlightSyntax from "discourse/lib/highlight-syntax";
-import CodeblockButtons from "discourse/lib/codeblock-buttons";
-
-export default Controller.extend(ModalFunctionality, {
- onShow() {
- this._applyCodeblockButtons();
- },
-
- onClose() {
- this.codeBlockButtons.cleanup();
- },
-
- @afterRender
- _applyCodeblockButtons() {
- const modalElement = document.querySelector(".modal-body");
-
- highlightSyntax(modalElement, this.siteSettings, this.session);
-
- this.codeBlockButtons = new CodeblockButtons({
- showFullscreen: false,
- showCopy: true,
- });
- this.codeBlockButtons.attachToGeneric(modalElement);
- },
-});
diff --git a/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js b/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
index c5361315a79..1b831e54236 100644
--- a/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
@@ -9,7 +9,7 @@ import { setTextDirections } from "discourse/lib/text-direction";
import { nativeLazyLoading } from "discourse/lib/lazy-load-images";
import { withPluginApi } from "discourse/lib/plugin-api";
import { create } from "virtual-dom";
-import showModal from "discourse/lib/show-modal";
+import FullscreenTableModal from "discourse/components/modal/fullscreen-table";
export default {
initialize(owner) {
@@ -17,6 +17,7 @@ export default {
const siteSettings = owner.lookup("service:site-settings");
const session = owner.lookup("service:session");
const site = owner.lookup("service:site");
+ const modal = owner.lookup("service:modal");
api.decorateCookedElement(
(elem) => {
return highlightSyntax(elem, siteSettings, session);
@@ -177,8 +178,7 @@ export default {
function generateModal(event) {
const table = event.currentTarget.parentElement.nextElementSibling;
const tempTable = table.cloneNode(true);
-
- showModal("fullscreen-table").set("tableHtml", tempTable);
+ modal.show(FullscreenTableModal, { model: { tableHtml: tempTable } });
}
function generatePopups(tables) {
diff --git a/app/assets/javascripts/discourse/app/lib/codeblock-buttons.js b/app/assets/javascripts/discourse/app/lib/codeblock-buttons.js
index 28ce226e2b0..4c38c2e5e12 100644
--- a/app/assets/javascripts/discourse/app/lib/codeblock-buttons.js
+++ b/app/assets/javascripts/discourse/app/lib/codeblock-buttons.js
@@ -2,11 +2,12 @@ import { cancel } from "@ember/runloop";
import discourseLater from "discourse-common/lib/later";
import Mobile from "discourse/lib/mobile";
import { bind } from "discourse-common/utils/decorators";
-import showModal from "discourse/lib/show-modal";
import I18n from "I18n";
import { guidFor } from "@ember/object/internals";
import { clipboardCopy } from "discourse/lib/utilities";
import { iconHTML } from "discourse-common/lib/icon-library";
+import { getOwner } from "discourse-common/lib/get-owner";
+import FullscreenCodeModal from "discourse/components/modal/fullscreen-code";
// Use to attach copy/fullscreen buttons to a block of code, either
// within the post stream or for a regular element that contains
@@ -172,9 +173,12 @@ export default class CodeblockButtons {
this._copyComplete(button);
}
} else if (action === "fullscreen") {
- showModal("fullscreen-code").setProperties({
- code: text,
- codeClasses: codeEl.className,
+ const modal = getOwner(this).lookup("service:modal");
+ modal.show(FullscreenCodeModal, {
+ model: {
+ code: text,
+ codeClasses: codeEl.className,
+ },
});
}
}
diff --git a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs b/app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs
deleted file mode 100644
index b7c9b8d0d6d..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
- {{this.code}}
-
-
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs b/app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs
deleted file mode 100644
index 6f89a63b6b7..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
- {{this.tableHtml}}
-
\ No newline at end of file