improve datetime display in webcomponent
This commit is contained in:
lesion
parent
5253cee835
commit
3c176ff7af
1 changed files with 248 additions and 209 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<svelte:options tag="gancio-events" />
|
||||||
|
|
||||||
|
<script>
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
export let baseurl = ''
|
export let baseurl = ''
|
||||||
export let title = ''
|
export let title = ''
|
||||||
|
|
@ -7,7 +8,7 @@
|
||||||
export let tags = ''
|
export let tags = ''
|
||||||
export let places = ''
|
export let places = ''
|
||||||
export let theme = 'light'
|
export let theme = 'light'
|
||||||
export let show_recurrent=false
|
export let show_recurrent = false
|
||||||
export let sidebar = 'true'
|
export let sidebar = 'true'
|
||||||
|
|
||||||
export let external_style = ''
|
export let external_style = ''
|
||||||
|
|
@ -15,14 +16,14 @@
|
||||||
let mounted = false
|
let mounted = false
|
||||||
let events = []
|
let events = []
|
||||||
|
|
||||||
function update (v) {
|
function update(v) {
|
||||||
if (!mounted) return
|
if (!mounted) return
|
||||||
const params = []
|
const params = []
|
||||||
if (maxlength) {
|
if (maxlength) {
|
||||||
params.push(`max=${maxlength}`)
|
params.push(`max=${maxlength}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
if(tags) {
|
if (tags) {
|
||||||
params.push(`tags=${tags}`)
|
params.push(`tags=${tags}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -30,246 +31,284 @@
|
||||||
params.push(`places=${places}`)
|
params.push(`places=${places}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
params.push(`show_recurrent=${show_recurrent?'true':'false'}`)
|
params.push(`show_recurrent=${show_recurrent ? 'true' : 'false'}`)
|
||||||
|
|
||||||
fetch(`${baseurl}/api/events?${params.join('&')}`)
|
fetch(`${baseurl}/api/events?${params.join('&')}`)
|
||||||
.then(res => res.json())
|
.then((res) => res.json())
|
||||||
.then(e => {
|
.then((e) => {
|
||||||
events = e
|
events = e
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch((e) => {
|
||||||
console.error('Error loading Gancio API -> ', e)
|
console.error('Error loading Gancio API -> ', e)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function position(event) {
|
function position(event) {
|
||||||
if (event.media[0].focalpoint) {
|
if (event.media && event.media[0].focalpoint) {
|
||||||
const focalpoint = event.media[0].focalpoint
|
const focalpoint = event.media[0].focalpoint
|
||||||
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
|
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
|
||||||
}
|
}
|
||||||
return 'center center'
|
return 'center center'
|
||||||
}
|
}
|
||||||
|
|
||||||
function when (timestamp) {
|
function _when(unix_timestamp, type = 'long') {
|
||||||
return new Date(timestamp*1000)
|
const options =
|
||||||
.toLocaleDateString(undefined,
|
type === 'long'
|
||||||
{
|
? {
|
||||||
weekday: 'long',
|
weekday: 'long',
|
||||||
month: 'long',
|
month: 'long',
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
minute: '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(() => {
|
onMount(() => {
|
||||||
mounted = true
|
mounted = true
|
||||||
update()
|
update()
|
||||||
})
|
})
|
||||||
$: update(maxlength && title && places && tags && theme && show_recurrent && sidebar)
|
$: update(
|
||||||
|
maxlength && title && places && tags && theme && show_recurrent && sidebar
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
<svelte:options tag="gancio-events"/>
|
|
||||||
{#if external_style}<link rel='stylesheet' href='{external_style}' />{/if}
|
{#if external_style}<link rel="stylesheet" href={external_style} />{/if}
|
||||||
{#if events.length}
|
{#if events.length}
|
||||||
<div id='gancioEvents'
|
<div
|
||||||
class:dark="{theme === 'dark'}" class:light="{theme === 'light'}"
|
id="gancioEvents"
|
||||||
class:sidebar="{sidebar === 'true'}" class:nosidebar="{sidebar !== 'true'}">
|
class:dark={theme === 'dark'}
|
||||||
{#if title && sidebar === 'true'}
|
class:light={theme === 'light'}
|
||||||
<a href='{baseurl}' target='_blank' id='header'>
|
class:sidebar={sidebar === 'true'}
|
||||||
<div class='content'>
|
class:nosidebar={sidebar !== 'true'}
|
||||||
<div class='title'>{title}</div>
|
>
|
||||||
<img id='logo' alt='logo' src='{baseurl}/logo.png'/>
|
{#if title && sidebar === 'true'}
|
||||||
</div>
|
<a href={baseurl} target="_blank" id="header">
|
||||||
</a>
|
<div class="content">
|
||||||
{/if}
|
<div class="title">{title}</div>
|
||||||
{#each events as event}
|
<img id="logo" alt="logo" src="{baseurl}/logo.png" />
|
||||||
<a href='{baseurl}/event/{event.slug || event.id}' class='event' title='{event.title}' target='_blank'>
|
|
||||||
{#if sidebar !== 'true'}
|
|
||||||
<div class='img'>
|
|
||||||
{#if event.media.length}
|
|
||||||
<img style="object-position: {position(event)}; aspect-ratio=1.7778;"
|
|
||||||
alt="{event.media[0].name}"
|
|
||||||
src="{baseurl + '/media/thumb/' + event.media[0].url}" loading='lazy'/>
|
|
||||||
{:else}
|
|
||||||
<img style="aspect-ratio=1.7778;"
|
|
||||||
alt="{event.title}"
|
|
||||||
src="{baseurl + '/noimg.svg'}" loading='lazy'/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class='content'>
|
|
||||||
<div class='subtitle'>
|
|
||||||
{when(event.start_datetime)}
|
|
||||||
</div>
|
</div>
|
||||||
<div class='title'>
|
</a>
|
||||||
{event.title}
|
{/if}
|
||||||
</div>
|
{#each events as event}
|
||||||
<span class='place'>@{event.place.name} <span class='subtitle'> {event.place.address}</span></span>
|
<a
|
||||||
{#if event.tags.length}
|
href="{baseurl}/event/{event.slug || event.id}"
|
||||||
<div class='tags'>
|
class="event"
|
||||||
{#each event.tags as tag}
|
title={event.title}
|
||||||
<span class='tag'>#{tag}</span>
|
target="_blank"
|
||||||
{/each}
|
>
|
||||||
|
{#if sidebar !== 'true'}
|
||||||
|
<div class="img">
|
||||||
|
{#if event.media.length}
|
||||||
|
<img
|
||||||
|
style="object-position: {position(event)}; aspect-ratio=1.7778;"
|
||||||
|
alt={event.media[0].name}
|
||||||
|
src={baseurl + '/media/thumb/' + event.media[0].url}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<img
|
||||||
|
style="aspect-ratio=1.7778;"
|
||||||
|
alt={event.title}
|
||||||
|
src={baseurl + '/noimg.svg'}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
<div class="content">
|
||||||
</a>
|
<div class="subtitle">
|
||||||
|
{when(event)}
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
{event.title}
|
||||||
|
</div>
|
||||||
|
<span class="place"
|
||||||
|
>@{event.place.name}
|
||||||
|
<span class="subtitle"> {event.place.address}</span></span
|
||||||
|
>
|
||||||
|
{#if event.tags.length}
|
||||||
|
<div class="tags">
|
||||||
|
{#each event.tags as tag}
|
||||||
|
<span class="tag">#{tag}</span>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#gancioEvents {
|
#gancioEvents {
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
overflow-x: hidden;
|
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||||
width: 100%;
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||||
box-sizing: content-box;
|
'Noto Color Emoji';
|
||||||
margin: 0 auto;
|
overflow-x: hidden;
|
||||||
font-size: 1rem;
|
width: 100%;
|
||||||
}
|
box-sizing: content-box;
|
||||||
|
margin: 0 auto;
|
||||||
.nosidebar {
|
font-size: 1rem;
|
||||||
max-width: 1200px;
|
text-align: left;
|
||||||
}
|
|
||||||
|
|
||||||
#header{
|
|
||||||
padding: 1.2rem 1rem;
|
|
||||||
background-color: var(--bg-odd-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
max-width: 500px;
|
|
||||||
box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event .img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 450px;
|
|
||||||
max-height: 250px;
|
|
||||||
aspect-ratio: 1.7778;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
/* height: 100%; */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
|
||||||
.event {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nosidebar {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
padding: 1.2rem 1rem;
|
||||||
|
background-color: var(--bg-odd-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
max-width: 500px;
|
||||||
|
box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px,
|
||||||
|
rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.event .img {
|
.event .img {
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
|
max-width: 450px;
|
||||||
|
max-height: 250px;
|
||||||
|
aspect-ratio: 1.7778;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
/* height: 100%; */
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.event img {
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 15px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nosidebar .event {
|
@media screen and (max-width: 800px) {
|
||||||
margin-bottom: 2rem;
|
.event {
|
||||||
}
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.event .img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.event img {
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
|
||||||
|
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
||||||
|
}
|
||||||
|
|
||||||
.nosidebar .content {
|
.nosidebar .event {
|
||||||
margin-left: 1rem;
|
margin-bottom: 2rem;
|
||||||
margin-top: 5px;
|
}
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags {
|
.nosidebar .content {
|
||||||
margin-top: 2px;
|
margin-left: 1rem;
|
||||||
}
|
margin-top: 5px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
#logo {
|
.tags {
|
||||||
position: absolute;
|
margin-top: 2px;
|
||||||
top: 10px;
|
}
|
||||||
right: 10px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
#logo {
|
||||||
text-decoration: none;
|
position: absolute;
|
||||||
color: var(--text-color);
|
top: 10px;
|
||||||
display: flex;
|
right: 10px;
|
||||||
padding: 8px 20px;
|
height: 40px;
|
||||||
margin: 0;
|
}
|
||||||
line-height: 1.275rem;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: .875rem;
|
|
||||||
position: relative;
|
|
||||||
transition: background-color .3s cubic-bezier(.25,.8,.5,1), padding .3s;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover .title,
|
a {
|
||||||
a:focus .title,
|
text-decoration: none;
|
||||||
a:active .title {
|
color: var(--text-color);
|
||||||
text-decoration:underline;
|
display: flex;
|
||||||
}
|
padding: 8px 20px;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.275rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
position: relative;
|
||||||
|
transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
|
||||||
|
padding 0.3s;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
.dark {
|
a:hover .title,
|
||||||
--bg-odd-color: #161616;
|
a:focus .title,
|
||||||
--bg-even-color: #222;
|
a:active .title {
|
||||||
--bg-hover-color: #333;
|
text-decoration: underline;
|
||||||
--text-color: white;
|
}
|
||||||
--title-color: white;
|
|
||||||
--line-color: rgba(120, 120, 120, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.light {
|
.dark {
|
||||||
--bg-odd-color: #f5f5f5;
|
--bg-odd-color: #161616;
|
||||||
--bg-even-color: #FAFAFA;
|
--bg-even-color: #222;
|
||||||
--bg-hover-color: #EEE;
|
--bg-hover-color: #333;
|
||||||
--text-color: #222;
|
--text-color: white;
|
||||||
--title-color: black;
|
--title-color: white;
|
||||||
--line-color: rgba(220, 220, 220, 0.9);
|
--line-color: rgba(120, 120, 120, 0.2);
|
||||||
}
|
}
|
||||||
.sidebar a {
|
|
||||||
background-color: var(--bg-even-color);
|
|
||||||
border-bottom:1px solid var(--line-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar a:hover,
|
.light {
|
||||||
.sidebar a:focus,
|
--bg-odd-color: #f5f5f5;
|
||||||
.sidebar a:active {
|
--bg-even-color: #fafafa;
|
||||||
background-color: var(--bg-hover-color);
|
--bg-hover-color: #eee;
|
||||||
padding-left: 15px;
|
--text-color: #222;
|
||||||
padding-right:25px;
|
--title-color: black;
|
||||||
}
|
--line-color: rgba(220, 220, 220, 0.9);
|
||||||
|
}
|
||||||
|
.sidebar a {
|
||||||
|
background-color: var(--bg-even-color);
|
||||||
|
border-bottom: 1px solid var(--line-color);
|
||||||
|
}
|
||||||
|
|
||||||
.place {
|
.sidebar a:hover,
|
||||||
font-weight: 400;
|
.sidebar a:focus,
|
||||||
font-size: 1.2rem;
|
.sidebar a:active {
|
||||||
line-height: 1.4rem;
|
background-color: var(--bg-hover-color);
|
||||||
color: orangered;
|
padding-left: 15px;
|
||||||
}
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.place {
|
||||||
color: var(--title-color);
|
font-weight: 400;
|
||||||
font-weight: bold;
|
font-size: 1.2rem;
|
||||||
font-size: 1.3rem;
|
line-height: 1.4rem;
|
||||||
line-height: 1.1em;
|
color: orangered;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nosidebar .title {
|
.title {
|
||||||
font-size: 1.9em;
|
color: var(--title-color);
|
||||||
line-height: 1.1em;
|
font-weight: bold;
|
||||||
}
|
font-size: 1.3rem;
|
||||||
|
line-height: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
.subtitle {
|
.nosidebar .title {
|
||||||
font-size: 1rem;
|
font-size: 1.9em;
|
||||||
line-height: 1.1em;
|
line-height: 1.1em;
|
||||||
color: var(--title-color);
|
}
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
.subtitle {
|
||||||
margin-right: 10px;
|
font-size: 1rem;
|
||||||
display: inline-block;
|
line-height: 1.1em;
|
||||||
}
|
color: var(--title-color);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
margin-right: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue