Fix “Show more” not switching to “Show less” on public pages (#13174)

* Fix “Show more” not switching to “Show less” on public pages

Fixes #13169

* Fix initial text of CW button on public pages when CW are unfolded by default

1 files changed, 22 insertions, 14 deletions

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 8ba4f6ee0..85789c8aa 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -118,6 +118,28 @@ function main() {
 
     delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
     delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
+
+    delegate(document, '.status__content__spoiler-link', 'click', function() {
+      const contentEl = this.parentNode.parentNode.querySelector('.e-content');
+
+      if (contentEl.style.display === 'block') {
+        contentEl.style.display = 'none';
+        this.parentNode.style.marginBottom = 0;
+        this.textContent = (new IntlMessageFormat(messages['status.show_more'] || 'Show more', locale)).format();
+      } else {
+        contentEl.style.display = 'block';
+        this.parentNode.style.marginBottom = null;
+        this.textContent = (new IntlMessageFormat(messages['status.show_less'] || 'Show less', locale)).format();
+      }
+
+      return false;
+    });
+
+    [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => {
+      const contentEl = spoilerLink.parentNode.parentNode.querySelector('.e-content');
+      const message = (contentEl.style.display === 'block') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more');
+      spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
+    });
   });
 
   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
@@ -128,20 +150,6 @@ function main() {
     return false;
   });
 
-  delegate(document, '.status__content__spoiler-link', 'click', function() {
-    const contentEl = this.parentNode.parentNode.querySelector('.e-content');
-
-    if (contentEl.style.display === 'block') {
-      contentEl.style.display = 'none';
-      this.parentNode.style.marginBottom = 0;
-    } else {
-      contentEl.style.display = 'block';
-      this.parentNode.style.marginBottom = null;
-    }
-
-    return false;
-  });
-
   delegate(document, '.modal-button', 'click', e => {
     e.preventDefault();