Use plain text; make sure buttons have form #406

openlibhums · Nov 8, 2024 · 87b389d · 87b389d
1 parent bcbf9c8
commit 87b389d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 32 deletions.
diff --git a/components/form/button.html b/components/form/button.html
@@ -1,4 +1,6 @@
 {% comment %}
+  This component must be put inside a form element, since it manages state
+  relative to other nearby buttons.
 {% endcomment %}
 
 {% load component_tags %}

diff --git a/templates/custom/recommend-us-choose-role.html b/templates/custom/recommend-us-choose-role.html
@@ -4,7 +4,7 @@
 {% get_uuid4 as aria_controls %}
 {% component_block "timeline_section" alternate="odd" step=step bg="bg-blue" %}
   <h2 class="text-white">How do you know about the OLH?</h2>
-  <form method="POST">
+  {% component_block "form" form_method="POST" notify_required=False default_button=False %}
     {% csrf_token %}
     <p class="text-white">Are you an...<p>
     <div class="w-full flex flex-wrap gap-4 pt-4 items-center">
@@ -37,7 +37,6 @@ <h2 class="text-white">How do you know about the OLH?</h2>
         <div class="w-36 p-3 text-white">I just want to help!</div>
       </div>
     </div>
-  </form>
-
+  {% endcomponent_block %}
 {% endcomponent_block %}
 <div id="{{ aria_controls }}"></div>
diff --git a/templates/custom/recommend-us-confirm-sent.html b/templates/custom/recommend-us-confirm-sent.html
@@ -5,30 +5,30 @@
 {% get_uuid4 as copy_pid %}
 {% component_block "timeline_section" alternate="odd" step=step bg="bg-blue" %}
   <div class="text-white">
-    <h2 class="text-white">Thank you for supporting open access.</h2>
-    <p>Library support has helped us to make over 
-    {{ request.press.published_articles.count|intcomma }} articles
-    diamond open access so far, saving university libraries an estimated £33.9
-    million since 2015. By recommending us to your librarian, you are helping to keep
-    knowledge free. Thank you.</p>
-    <p>One more thing... Please share this page on social media so others
-    recommend us.</p>
-    {% component_block "button_group" %}
-      {% component_block "button" name="general" id=copy_pid type="button" %}
-        Copy link to this page
+    {% component_block "form" form_method="POST" notify_required=False default_button=False %}
+      <h2 class="text-white">Thank you for supporting open access.</h2>
+      <p>Library support has helped us to make over
+      {{ request.press.published_articles.count|intcomma }} articles
+      diamond open access so far, saving university libraries an estimated £33.9
+      million since 2015. By recommending us to your librarian, you are helping to keep
+      knowledge free. Thank you.</p>
+      <p>One more thing... Please share this page on social media so others
+      recommend us.</p>
+      {% component_block "button_group" %}
+        {% component_block "button" name="general" id=copy_pid type="button" %}
+          Copy link to this page
+        {% endcomponent_block %}
       {% endcomponent_block %}
     {% endcomponent_block %}
   </div>
   <script defer type="module">
     const copyButton = document.querySelector('#{{ copy_pid }}');
     copyButton.addEventListener('click', () => writeToClipboard(window.location.href));
     async function writeToClipboard(text) {
-      try {
-        await navigator.clipboard.writeText(text);
-        copyButton.querySelector('span').innerHTML = 'Copied';
-        copyButton.querySelector('svg').remove();
-      } catch {
-        return
+      await navigator.clipboard.writeText(text);
+      const label = copyButton.querySelector('span').innerHTML;
+      if (label.trim() === 'Copy link to this page') {
+        copyButton.querySelector('span').innerHTML = 'Copy again';
       }
     }
   </script>

diff --git a/templates/custom/recommend-us-generate-email.html b/templates/custom/recommend-us-generate-email.html
@@ -14,7 +14,7 @@ <h2 class="text-white">Voilà.</h2>
     address, <a class="text-white" href="/contact/">contact us</a> and we’ll
     help.</p>
     <div class="text-black bg-white p-6 font-space-mono-regular">
-      <div id="email-text">
+      <div id="email-text" class="whitespace-pre-line">
         {{ email }}
       </div>
     </div>
@@ -51,18 +51,14 @@ <h2 class="text-white">Voilà.</h2>
   </div>
   <script defer type="module">
     const emailText = document.querySelector('#email-text');
+    const textToCopy = emailText?.innerHTML?.trim();
     const copyButton = document.querySelector('#{{ copy_pid }}');
-    copyButton.addEventListener('click', () => setClipboard(emailText.innerHTML));
-    async function setClipboard(text) {
-      const type = "text/html";
-      const blob = new Blob([text], { type });
-      const data = [new ClipboardItem({ [type]: blob })];
-      await navigator.clipboard.write(data);
-      try {
-        copyButton.querySelector('span').innerHTML = 'Copied';
-        copyButton.querySelector('svg').remove();
-      } catch {
-        return
+    copyButton.addEventListener('click', () => writeToClipboard(textToCopy));
+    async function writeToClipboard(text) {
+      await navigator.clipboard.writeText(text);
+      const label = copyButton.querySelector('span').innerHTML;
+      if (label.trim() === 'Copy to clipboard') {
+        copyButton.querySelector('span').innerHTML = 'Copy again';
       }
     }
   </script>