webcomponent datetime format helpers

webcomponents/src/GancioEvent.svelte

@@ -1,16 +1,19 @@
+<svelte:options tag="gancio-event" />
+
 <script>
   import { onMount } from 'svelte'
+  import { when } from './helpers'
   export let baseurl = 'https://demo.gancio.org'
   export let id
 
   let mounted = false
   let event
 
-  function update (id, baseurl) {
+  function update(id, baseurl) {
     if (mounted) {
       fetch(`${baseurl}/api/event/${id}`)
-        .then(res => res.json())
-        .then(e => event = e)
+        .then((res) => res.json())
+        .then((e) => (event = e))
     }
   }
 
@@ -20,85 +23,82 @@
   })
   $: update(id, baseurl)
 
-  function when (event) {
-    return new Date(event.start_datetime*1000)
-      .toLocaleDateString(undefined,
-        {
-          weekday: 'long',
-          month: 'short',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        })
-  }
-
   function thumbnail(event) {
     return `${baseurl}/media/thumb/${event.media[0].url}`
   }
 
   function position(event) {
     if (event.media[0].focalpoint) {
-        const focalpoint = event.media[0].focalpoint
-        return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
-      }
-      return 'center center'    
+      const focalpoint = event.media[0].focalpoint
+      return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
+    }
+    return 'center center'
+  }
+</script>
+
+{#if event}
+  <a
+    href="{baseurl}/event/{event.slug || event.id}"
+    class="card"
+    target="_blank"
+  >
+    {#if event.media.length}
+      <img
+        src={thumbnail(event)}
+        alt={event.media[0].name}
+        style="object-position: {position(event)}; aspect-ratio=1.7778;"
+      />
+    {/if}
+    <div class="container">
+      <strong>{event.title}</strong>
+      <div>{when(event)}</div>
+      <div class="place">@{event.place.name}</div>
+    </div>
+  </a>
+{/if}
+
+<style>
+  .card {
+    display: block;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
+      sans-serif;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+    border-radius: 5px; /* 5px rounded corners */
+    max-width: 500px;
+    text-decoration: none;
+    color: white;
+    background-color: #1e1e1e;
+    overflow: hidden;
   }
 
-</script>
-<svelte:options tag="gancio-event"/>
-{#if event}
-<a href='{baseurl}/event/{event.slug || event.id}' class='card' target='_blank'>
-  {#if event.media.length}
-  <img src="{thumbnail(event)}" alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;">
-  {/if}
-  <div class="container">
-    <strong>{event.title}</strong>
-    <div>{when(event)}</div>
-    <div class='place'>@{event.place.name}</div>
-  </div>
-</a>
-{/if}
-<style>
-.card {
-  display: block;
-  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-  transition: 0.3s;
-  border-radius: 5px; /* 5px rounded corners */
-  max-width: 500px;
-  text-decoration: none;
-  color: white;
-  background-color: #1e1e1e;
-  overflow: hidden;
-}
+  /* Add rounded corners to the top left and the top right corner of the image */
+  img {
+    border-radius: 5px 5px 0 0;
+    max-height: 250px;
+    min-height: 160px;
+    width: 100%;
+    object-fit: cover;
+    object-position: top;
+  }
 
-/* Add rounded corners to the top left and the top right corner of the image */
-img {
-  border-radius: 5px 5px 0 0;
-  max-height: 250px;
-  min-height: 160px;
-  width: 100%;
-  object-fit: cover;
-  object-position: top;
-}
+  .card:hover .container {
+    padding-left: 20px;
+  }
 
-.card:hover .container {
-  padding-left: 20px;
-}
+  /* On mouse-over, add a deeper shadow */
+  .card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  }
 
-/* On mouse-over, add a deeper shadow */
-.card:hover {
-  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-}
+  /* Add some padding inside the card container */
+  .container {
+    transition: padding-left 0.2s;
+    padding: 16px;
+  }
 
-/* Add some padding inside the card container */
-.container {
-  transition: padding-left .2s;
-  padding: 16px;
-}
-
-.place {
-  font-weight: 600;
-  color: #ff6e40;
-}
+  .place {
+    font-weight: 600;
+    color: #ff6e40;
+  }
 </style>

webcomponents/src/GancioEvents.svelte

@@ -2,6 +2,7 @@
 
 <script>
   import { onMount } from 'svelte'
+  import { when } from './helpers'
   export let baseurl = ''
   export let title = ''
   export let maxlength = false
@@ -51,31 +52,6 @@
     return 'center center'
   }
 
-  function _when(unix_timestamp, type = 'long') {
-    const options =
-      type === 'long'
-        ? {
-            weekday: 'long',
-            month: 'long',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-          }
-        : { hour: '2-digit', minute: '2-digit' }
-    const d = new Date(unix_timestamp * 1000).toLocaleString(undefined, options)
-    return d
-  }
-
-  function when(event) {
-    if (event.multidate) {
-      return _when(event.start_datetime) + ' - ' + _when(event.end_datetime)
-    }
-    return (
-      _when(event.start_datetime) +
-      (event.end_datetime ? '-' + _when(event.end_datetime, 'short') : '')
-    )
-  }
-
   onMount(() => {
     mounted = true
     update()

webcomponents/src/helpers.js

@@ -0,0 +1,24 @@
+function formatDatetime(timestamp, type = 'long') {
+  const options =
+    type === 'long'
+      ? {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      }
+      : { hour: '2-digit', minute: '2-digit' }
+  return new Date(timestamp * 1000).toLocaleString(undefined, options)
+}
+
+
+export function when(event) {
+  if (event.multidate) {
+    return formatDatetime(event.start_datetime) + ' - ' + formatDatetime(event.end_datetime)
+  }
+  return (
+    formatDatetime(event.start_datetime) +
+    (event.end_datetime ? '-' + formatDatetime(event.end_datetime, 'short') : '')
+  )
+}