add calendar modal

content/events.md

@@ -27,6 +27,63 @@ menu:
   .fc .fc-list-event:hover td {
     background-color: rgba(55, 136, 216, 0.5);
   }
+
+  dialog[open] {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  dialog {
+    opacity: 0;
+    transform: scaleY(0);
+    transition:
+      opacity 0.3s ease-out,
+      transform 0.3s ease-out,
+      overlay 0.3s ease-out allow-discrete,
+      display 0.3s ease-out allow-discrete;
+    /* Equivalent to
+    transition: all 0.7s allow-discrete; */
+    background: var(--body-background);
+    color: var(--card-text-color-main);
+    width: 80%;
+    max-width: 500px;
+    height: 320px;
+    max-height: 90%;
+  }
+
+  /*   Before-open state  */
+  /* Needs to be after the previous dialog[open] rule to take effect,
+      as the specificity is the same */
+  @starting-style {
+    dialog[open] {
+      opacity: 0;
+      transform: scaleY(0);
+    }
+  }
+
+  /* Transition the :backdrop when the dialog modal is promoted to the top layer */
+  dialog::backdrop {
+    background-color: rgb(0 0 0 / 0);
+    transition:
+      display 0.3s allow-discrete,
+      overlay 0.3s allow-discrete,
+      background-color 0.3s;
+    /* Equivalent to
+    transition: all 0.7s allow-discrete; */
+  }
+
+  dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 0.50);
+  }
+
+  /* This starting-style rule cannot be nested inside the above selector
+  because the nesting selector cannot represent pseudo-elements. */
+
+  @starting-style {
+    dialog[open]::backdrop {
+      background-color: rgb(0 0 0 / 0);
+    }
+  }
 </style>
 
 <div id="calendar-js"></div>
@@ -39,3 +96,14 @@ menu:
 [iCal Calendar Subscription Link](webcal://calendar.google.com/calendar/ical/62da059a43acfa2924e50e6aaa43e3aed3728f7eda51af7d7a43f0313404e09c%40group.calendar.google.com/public/basic.ics)
 
 </div>
+
+<dialog id="dialog" class="main-article">
+  <div class="article-category" style="float: right; display: block">
+    <a href="javascript:void(0);" onclick="document.querySelector('#dialog').close();" style="font-weight: bold; border-radius: 30px; font-size: 12px;">X</a>
+  </div>
+  <h3>Narf</h3>
+  <hr style="margin: 0; width: 100%;">
+  <section class="article-content">
+    <p>content</p>
+  </section>
+</dialog

src/cal.js

@@ -19,6 +19,19 @@ const calendar = new Calendar(calendarEl, {
     left: 'prev,next today',
     center: 'title',
     right: 'listWeek,dayGridMonth'
+  },
+  eventClick: (info) => {
+    var e = info.event;
+    var title = e.title + '<br>' + e.start.toLocaleDateString() + ' ' + e.start.toLocaleTimeString();
+    title = title.replace(":00 ", " ");
+    document.querySelector('#dialog h3').innerHTML = title;
+    document.querySelector('#dialog section p').innerHTML = info.event.extendedProps.description || "<strong>no details found</strong>";
+    document.querySelector('#dialog').showModal();
+    setTimeout(() => {
+      document.querySelectorAll('#dialog section a').forEach((item) => {
+        item.target = '_blank';
+      });
+    }, 0);
   }
 });
 

static/overrides.css

@@ -48,3 +48,7 @@ p.j {
 .columns > div:last-child {
   margin-right: 0;
 }
+
+.article-content p a {
+  text-decoration: underline;
+}