From c3061d580c6a26c90c2c4c882da5004639bb5a75 Mon Sep 17 00:00:00 2001 From: David Taylor Date: Tue, 12 Sep 2023 16:32:04 +0100 Subject: [PATCH] DEV: Remove decorateCookedElement id parameters (#23544) These are no longer required per https://github.com/discourse/discourse/pull/23543 --- .../animated-images-pause-on-click.js | 1 - .../codeblock-buttons.js | 1 - .../hashtag-post-decorations.js | 1 - .../image-aspect-ratio.js | 59 ++++--- .../onebox-decorators.js | 11 +- .../instance-initializers/post-decorations.js | 146 ++++++++---------- .../discourse/app/lib/lazy-load-images.js | 9 +- .../discourse/app/widgets/decorator-helper.js | 2 +- .../topic-post-decorate-cooked-test.js | 2 +- .../discourse/initializers/chat-setup.js | 47 +++--- .../discourse/initializers/checklist.js | 2 +- .../javascripts/initializers/lazy-videos.js | 2 +- .../initializers/discourse-local-dates.js | 19 +-- .../discourse/initializers/extend-for-poll.js | 1 - 14 files changed, 126 insertions(+), 177 deletions(-) diff --git a/app/assets/javascripts/discourse/app/instance-initializers/animated-images-pause-on-click.js b/app/assets/javascripts/discourse/app/instance-initializers/animated-images-pause-on-click.js index 576779f55a5..d358b21bb1a 100644 --- a/app/assets/javascripts/discourse/app/instance-initializers/animated-images-pause-on-click.js +++ b/app/assets/javascripts/discourse/app/instance-initializers/animated-images-pause-on-click.js @@ -100,7 +100,6 @@ export default { api.decorateCookedElement(_attachCommands, { onlyStream: true, - id: "animated-images-pause-on-click", }); api.cleanupStream(_cleanUp); diff --git a/app/assets/javascripts/discourse/app/instance-initializers/codeblock-buttons.js b/app/assets/javascripts/discourse/app/instance-initializers/codeblock-buttons.js index c7bf07142da..cf90552e2ac 100644 --- a/app/assets/javascripts/discourse/app/instance-initializers/codeblock-buttons.js +++ b/app/assets/javascripts/discourse/app/instance-initializers/codeblock-buttons.js @@ -43,7 +43,6 @@ export default { }, { onlyStream: true, - id: "codeblock-buttons", } ); diff --git a/app/assets/javascripts/discourse/app/instance-initializers/hashtag-post-decorations.js b/app/assets/javascripts/discourse/app/instance-initializers/hashtag-post-decorations.js index f3221dc88ba..36db2ce9271 100644 --- a/app/assets/javascripts/discourse/app/instance-initializers/hashtag-post-decorations.js +++ b/app/assets/javascripts/discourse/app/instance-initializers/hashtag-post-decorations.js @@ -10,7 +10,6 @@ export default { withPluginApi("0.8.7", (api) => { api.decorateCookedElement((post) => decorateHashtags(post, site), { onlyStream: true, - id: "hashtag-icons", }); }); }, diff --git a/app/assets/javascripts/discourse/app/instance-initializers/image-aspect-ratio.js b/app/assets/javascripts/discourse/app/instance-initializers/image-aspect-ratio.js index 06b7da2b78d..d5985024c1f 100644 --- a/app/assets/javascripts/discourse/app/instance-initializers/image-aspect-ratio.js +++ b/app/assets/javascripts/discourse/app/instance-initializers/image-aspect-ratio.js @@ -14,42 +14,35 @@ export default { initWithApi(api) { const supportsAspectRatio = CSS.supports("aspect-ratio: 1"); - api.decorateCookedElement( - (element) => { - element.querySelectorAll("img").forEach((img) => { - const declaredHeight = parseFloat(img.getAttribute("height")); - const declaredWidth = parseFloat(img.getAttribute("width")); + api.decorateCookedElement((element) => { + element.querySelectorAll("img").forEach((img) => { + const declaredHeight = parseFloat(img.getAttribute("height")); + const declaredWidth = parseFloat(img.getAttribute("width")); - if ( - isNaN(declaredHeight) || - isNaN(declaredWidth) || - img.style.aspectRatio - ) { - return; - } + if ( + isNaN(declaredHeight) || + isNaN(declaredWidth) || + img.style.aspectRatio + ) { + return; + } - if (supportsAspectRatio) { - img.style.setProperty( - "aspect-ratio", - `${declaredWidth} / ${declaredHeight}` - ); - } else { - // For older browsers (e.g. iOS < 15), we need to apply the aspect ratio manually. - // It's not perfect, because it won't recompute on browser resize. - // This property is consumed in `topic-post.scss` for responsive images only. - // It's a no-op for non-responsive images. - const calculatedHeight = - img.width / (declaredWidth / declaredHeight); + if (supportsAspectRatio) { + img.style.setProperty( + "aspect-ratio", + `${declaredWidth} / ${declaredHeight}` + ); + } else { + // For older browsers (e.g. iOS < 15), we need to apply the aspect ratio manually. + // It's not perfect, because it won't recompute on browser resize. + // This property is consumed in `topic-post.scss` for responsive images only. + // It's a no-op for non-responsive images. + const calculatedHeight = img.width / (declaredWidth / declaredHeight); - img.style.setProperty( - "--calculated-height", - `${calculatedHeight}px` - ); - } - }); - }, - { id: "image-aspect-ratio" } - ); + img.style.setProperty("--calculated-height", `${calculatedHeight}px`); + } + }); + }); }, initialize() { diff --git a/app/assets/javascripts/discourse/app/instance-initializers/onebox-decorators.js b/app/assets/javascripts/discourse/app/instance-initializers/onebox-decorators.js index 7517fbd5ee4..bf88e37c970 100644 --- a/app/assets/javascripts/discourse/app/instance-initializers/onebox-decorators.js +++ b/app/assets/javascripts/discourse/app/instance-initializers/onebox-decorators.js @@ -40,14 +40,9 @@ function _cleanUp() { export default { initialize() { withPluginApi("0.8.42", (api) => { - api.decorateCookedElement( - (element) => { - decorateGithubOneboxBody(element); - }, - { - id: "onebox-github-body", - } - ); + api.decorateCookedElement((element) => { + decorateGithubOneboxBody(element); + }); api.cleanupStream(_cleanUp); }); 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 13db688c21a..bc0fdef35b6 100644 --- a/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js +++ b/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js @@ -21,14 +21,9 @@ export default { const modal = owner.lookup("service:modal"); // will eventually just be called lightbox const lightboxService = owner.lookup("service:lightbox"); - api.decorateCookedElement( - (elem) => { - return highlightSyntax(elem, siteSettings, session); - }, - { - id: "discourse-syntax-highlighting", - } - ); + api.decorateCookedElement((elem) => { + return highlightSyntax(elem, siteSettings, session); + }); if (siteSettings.enable_experimental_lightbox) { api.decorateCookedElement( @@ -42,62 +37,50 @@ export default { : null; }, { - id: "experimental-discourse-lightbox", onlyStream: true, } ); api.cleanupStream(lightboxService.cleanupLightboxes); } else { - api.decorateCookedElement( - (elem) => { - return lightbox(elem, siteSettings); - }, - { id: "discourse-lightbox" } - ); + api.decorateCookedElement((elem) => { + return lightbox(elem, siteSettings); + }); } - api.decorateCookedElement( - (elem) => { - const grids = elem.querySelectorAll(".d-image-grid"); + api.decorateCookedElement((elem) => { + const grids = elem.querySelectorAll(".d-image-grid"); - if (!grids.length) { - return; - } + if (!grids.length) { + return; + } - grids.forEach((grid) => { - return new Columns(grid, { - columns: site.mobileView ? 2 : 3, - }); + grids.forEach((grid) => { + return new Columns(grid, { + columns: site.mobileView ? 2 : 3, }); - }, - { id: "discourse-image-grid" } - ); + }); + }); if (siteSettings.support_mixed_text_direction) { - api.decorateCookedElement(setTextDirections, { - id: "discourse-text-direction", - }); + api.decorateCookedElement(setTextDirections, {}); } nativeLazyLoading(api); - api.decorateCookedElement( - (elem) => { - elem.querySelectorAll("audio").forEach((player) => { - player.addEventListener("play", () => { - const postId = parseInt( - elem.closest("article")?.dataset.postId, - 10 - ); - if (postId) { - api.preventCloak(postId); - } - }); + api.decorateCookedElement((elem) => { + elem.querySelectorAll("audio").forEach((player) => { + player.addEventListener("play", () => { + const postId = parseInt( + elem.closest("article")?.dataset.postId, + 10 + ); + if (postId) { + api.preventCloak(postId); + } }); - }, - { id: "discourse-audio" } - ); + }); + }); const caps = owner.lookup("service:capabilities"); if (caps.isSafari || caps.isIOS) { @@ -119,7 +102,7 @@ export default { } }); }, - { id: "safari-video-poster", afterAdopt: true, onlyStream: true } + { afterAdopt: true, onlyStream: true } ); } @@ -136,45 +119,39 @@ export default { wikipedia: "fab-wikipedia-w", }; - api.decorateCookedElement( - (elem) => { - elem.querySelectorAll(".onebox").forEach((onebox) => { - Object.entries(oneboxTypes).forEach(([key, value]) => { - if (onebox.classList.contains(key)) { - onebox - .querySelector(".source") - .insertAdjacentHTML("afterbegin", iconHTML(value)); - } + api.decorateCookedElement((elem) => { + elem.querySelectorAll(".onebox").forEach((onebox) => { + Object.entries(oneboxTypes).forEach(([key, value]) => { + if (onebox.classList.contains(key)) { + onebox + .querySelector(".source") + .insertAdjacentHTML("afterbegin", iconHTML(value)); + } + }); + }); + }); + + api.decorateCookedElement((element) => { + element + .querySelectorAll(".video-container") + .forEach((videoContainer) => { + const video = videoContainer.getElementsByTagName("video")[0]; + video.addEventListener("loadeddata", () => { + discourseLater(() => { + if (video.videoWidth === 0 || video.videoHeight === 0) { + const notice = document.createElement("div"); + notice.className = "notice"; + notice.innerHTML = + iconHTML("exclamation-triangle") + + " " + + I18n.t("cannot_render_video"); + + videoContainer.appendChild(notice); + } + }, 500); }); }); - }, - { id: "onebox-source-icons" } - ); - - api.decorateCookedElement( - (element) => { - element - .querySelectorAll(".video-container") - .forEach((videoContainer) => { - const video = videoContainer.getElementsByTagName("video")[0]; - video.addEventListener("loadeddata", () => { - discourseLater(() => { - if (video.videoWidth === 0 || video.videoHeight === 0) { - const notice = document.createElement("div"); - notice.className = "notice"; - notice.innerHTML = - iconHTML("exclamation-triangle") + - " " + - I18n.t("cannot_render_video"); - - videoContainer.appendChild(notice); - } - }, 500); - }); - }); - }, - { id: "discourse-video-codecs" } - ); + }); function _createButton() { const openPopupBtn = document.createElement("button"); @@ -234,7 +211,6 @@ export default { }, { onlyStream: true, - id: "fullscreen-table", } ); }); diff --git a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js index 8f68218a3bd..0bcd25b2963 100644 --- a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js +++ b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js @@ -5,12 +5,8 @@ function isLoaded(img) { } export function nativeLazyLoading(api) { - api.decorateCookedElement( - (post) => - post.querySelectorAll("img").forEach((img) => (img.loading = "lazy")), - { - id: "discourse-lazy-load", - } + api.decorateCookedElement((post) => + post.querySelectorAll("img").forEach((img) => (img.loading = "lazy")) ); api.decorateCookedElement( @@ -47,7 +43,6 @@ export function nativeLazyLoading(api) { }); }, { - id: "discourse-lazy-load-after-adopt", afterAdopt: true, } ); diff --git a/app/assets/javascripts/discourse/app/widgets/decorator-helper.js b/app/assets/javascripts/discourse/app/widgets/decorator-helper.js index 307a1f876ca..3ecde3c1073 100644 --- a/app/assets/javascripts/discourse/app/widgets/decorator-helper.js +++ b/app/assets/javascripts/discourse/app/widgets/decorator-helper.js @@ -131,7 +131,7 @@ class DecoratorHelper { * cooked.querySelector(".some-container"), * hbs`I will be appended to some-container` * ); - * }, { onlyStream: true, id: "my-id" }); + * }, { onlyStream: true }); * ``` * */ diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-post-decorate-cooked-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-post-decorate-cooked-test.js index a6781d2a68f..5224f653d0c 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/topic-post-decorate-cooked-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/topic-post-decorate-cooked-test.js @@ -47,7 +47,7 @@ acceptance("Acceptance | decorateCookedElement", function () { hbs` with more content from glimmer` ); }, - { id: "render-glimmer-test", onlyStream: true } + { onlyStream: true } ); }); diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js index 295e1ba6f1f..a702751ea0a 100644 --- a/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js +++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js @@ -120,34 +120,31 @@ export default { // we want to decorate the chat quote dates regardless // of whether the current user has chat enabled - api.decorateCookedElement( - (elem) => { - const currentUser = getOwner(this).lookup("service:current-user"); - const currentUserTimezone = currentUser?.user_option?.timezone; - const chatTranscriptElements = - elem.querySelectorAll(".chat-transcript"); + api.decorateCookedElement((elem) => { + const currentUser = getOwner(this).lookup("service:current-user"); + const currentUserTimezone = currentUser?.user_option?.timezone; + const chatTranscriptElements = + elem.querySelectorAll(".chat-transcript"); - chatTranscriptElements.forEach((el) => { - const dateTimeRaw = el.dataset["datetime"]; - const dateTimeEl = el.querySelector( - ".chat-transcript-datetime a, .chat-transcript-datetime span" + chatTranscriptElements.forEach((el) => { + const dateTimeRaw = el.dataset["datetime"]; + const dateTimeEl = el.querySelector( + ".chat-transcript-datetime a, .chat-transcript-datetime span" + ); + + if (currentUserTimezone) { + dateTimeEl.innerText = moment + .tz(dateTimeRaw, currentUserTimezone) + .format(I18n.t("dates.long_no_year")); + } else { + dateTimeEl.innerText = moment(dateTimeRaw).format( + I18n.t("dates.long_no_year") ); + } - if (currentUserTimezone) { - dateTimeEl.innerText = moment - .tz(dateTimeRaw, currentUserTimezone) - .format(I18n.t("dates.long_no_year")); - } else { - dateTimeEl.innerText = moment(dateTimeRaw).format( - I18n.t("dates.long_no_year") - ); - } - - dateTimeEl.dataset.dateFormatted = true; - }); - }, - { id: "chat-transcript-datetime" } - ); + dateTimeEl.dataset.dateFormatted = true; + }); + }); if (!this.chatService.userCanChat) { return; diff --git a/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js b/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js index fa94d9f3f09..46f91cae266 100644 --- a/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js +++ b/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js @@ -7,7 +7,7 @@ function initializePlugin(api) { const siteSettings = api.container.lookup("site-settings:main"); if (siteSettings.checklist_enabled) { - api.decorateCookedElement(checklistSyntax, { id: "checklist" }); + api.decorateCookedElement(checklistSyntax); } } diff --git a/plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js b/plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js index ffee62ef815..d30c5ae2997 100644 --- a/plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js +++ b/plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js @@ -33,7 +33,7 @@ function initLazyEmbed(api) { } }); }, - { onlyStream: true, id: "discourse-lazy-videos" } + { onlyStream: true } ); } diff --git a/plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js b/plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js index 1619388a3b2..61a353e6c4a 100644 --- a/plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js +++ b/plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js @@ -149,19 +149,16 @@ function initializeDiscourseLocalDates(api) { site_name: siteSettings.title, }); - api.decorateCookedElement( - (elem, helper) => { - const dates = elem.querySelectorAll(".discourse-local-date"); + api.decorateCookedElement((elem, helper) => { + const dates = elem.querySelectorAll(".discourse-local-date"); - applyLocalDates(dates, siteSettings); + applyLocalDates(dates, siteSettings); - const topicTitle = helper?.getModel()?.topic?.title; - dates.forEach((date) => { - date.dataset.title = date.dataset.title || topicTitle || defaultTitle; - }); - }, - { id: "discourse-local-date" } - ); + const topicTitle = helper?.getModel()?.topic?.title; + dates.forEach((date) => { + date.dataset.title = date.dataset.title || topicTitle || defaultTitle; + }); + }); api.onToolbarCreate((toolbar) => { toolbar.addButton({ diff --git a/plugins/poll/assets/javascripts/discourse/initializers/extend-for-poll.js b/plugins/poll/assets/javascripts/discourse/initializers/extend-for-poll.js index 109fc1a081d..81ef22a1e63 100644 --- a/plugins/poll/assets/javascripts/discourse/initializers/extend-for-poll.js +++ b/plugins/poll/assets/javascripts/discourse/initializers/extend-for-poll.js @@ -131,7 +131,6 @@ function initializePolls(api) { api.includePostAttributes("polls", "polls_votes"); api.decorateCookedElement(attachPolls, { onlyStream: true, - id: "discourse-poll", }); api.cleanupStream(cleanUpPolls);