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
This commit is contained in:
Isaac Janzen 2023-07-04 10:35:10 -05:00 committed by GitHub
parent a579bd6b28
commit 148431d521
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 43 deletions

View File

@ -0,0 +1,11 @@
<DModal
@closeModal={{this.closeModal}}
{{did-insert this.applyCodeblockButtons}}
class="fullscreen-code-modal"
>
<:body>
<pre>
<code class={{@model.codeClasses}}>{{@model.code}}</code>
</pre>
</:body>
</DModal>

View File

@ -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);
}
}

View File

@ -0,0 +1,5 @@
<DModal @closeModal={{@closeModal}} class="fullscreen-table-modal">
<:body>
{{@model.tableHtml}}
</:body>
</DModal>

View File

@ -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);
},
});

View File

@ -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) {

View File

@ -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,
},
});
}
}

View File

@ -1,5 +0,0 @@
<DModalBody>
<pre>
<code class={{this.codeClasses}}>{{this.code}}</code>
</pre>
</DModalBody>

View File

@ -1,3 +0,0 @@
<DModalBody>
{{this.tableHtml}}
</DModalBody>