membershipworks/templates/membershipworks/upcoming_events.dj.html

@@ -8,11 +8,11 @@
     <div id="preview">
       <!-- wp:image {"align":"center","id":2319} -->
       <figure class="wp-block-image aligncenter">
-        {# djlint:off H006 #}
         <img src="https://claremontmakerspace.org/wp-content/uploads/2019/03/CMS-Logo-b-y-g-300x168.png"
+             width="300"
+             height="168"
              alt="CMS Logo"
              class="wp-image-2319" />
-        {# djlint:on #}
       </figure>
       <!-- /wp:image -->
 
@@ -65,28 +65,21 @@
             {% with url="https://claremontmakerspace.org/events/#!event/register/"|add:event.url %}
               <!-- wp:group {"tagName":"section","layout":{"type":"constrained"}} -->
               <section class="wp-block-group">
-
-                {% if "lgo" in event %}
-                  <!-- wp:image {"width":"400px","height":"auto","sizeSlug":"large","linkDestination":"media","align":"{% cycle 'left' 'right' %}"} -->
-                  <figure class="wp-block-image {% cycle 'alignleft' 'alignright' %} size-large is-resized">
-                    <a href="{{ url }}">
-                      {# djlint:off H006 #}
-                      <img src="{{ event.lgo.l }}"
-                           alt="Image for {{ event.ttl|nh3:"" }}"
-                           style="width:400px;
-                                  height:auto" />
-                      {# djlint:on #}
-                    </a>
-                  </figure>
-                  <!-- /wp:image -->
-                {% endif %}
-
                 <!-- wp:heading {"align":"center"} -->
                 <h2 class="wp-block-heading">
-                  <a href="{{ url }}">{{ event.ttl|nh3 }}</a>
+                  <a href="{{ url }}">
+                    {% if "lgo" in event %}
+                      {# djlint:off H006 #}
+                      <img class="{% cycle 'alignleft' 'alignright' %}"
+                           width="400"
+                           alt="Image for {{ event.ttl|nh3:"" }}"
+                           src="{{ event.lgo.l }}">
+                      {# djlint:on #}
+                    {% endif %}
+                    <span>{{ event.ttl|nh3 }}</span>
+                  </a>
                 </h2>
                 <!-- /wp:heading -->
-
                 <!-- wp:paragraph -->
                 <p>
                   {# wordpress is very annoying with spacing here #}
@@ -117,7 +110,7 @@
       {% endfor %}
 
       <!-- wp:paragraph -->
-      <p>Happy Makin’!</p>
+      <p style="clear: both;">Happy Makin’!</p>
       <!-- /wp:paragraph -->
       <!-- wp:paragraph -->
       <p>
@@ -139,14 +132,34 @@
 {% block script %}
   <script>
     async function copyToClipboard(event) {
-      // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
-      const data = new ClipboardItem({
-        "text/plain": new Blob(
-          [document.getElementById("preview").innerHTML], {
+      const rich = document.getElementById("preview").innerHTML;
+      const plain = document.getElementById("preview").innerHTML;
+
+      // from https://stackoverflow.com/a/77305170
+      if (typeof ClipboardItem !== "undefined") {
+        // Shiny new Clipboard API, not fully supported in Firefox.
+        // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#browser_compatibility
+        const html = new Blob([rich], {
+          type: "text/html"
+        });
+        const text = new Blob([plain], {
           type: "text/plain"
-          })
+        });
+        const data = new ClipboardItem({
+          "text/html": html,
+          "text/plain": text
         });
         await navigator.clipboard.write([data]);
+      } else {
+        const cb = e => {
+          e.clipboardData.setData("text/html", rich);
+          e.clipboardData.setData("text/plain", plain);
+          e.preventDefault();
+        };
+        document.addEventListener("copy", cb);
+        document.execCommand("copy");
+        document.removeEventListener("copy", cb);
+      }
 
       bootstrap.Popover.getInstance(event.target).show();
       setTimeout(() => bootstrap.Popover.getInstance(event.target).hide(), 1000);