☠️ RESET for v2
This commit is contained in:
@@ -1,29 +0,0 @@
|
||||
<script>
|
||||
import { analyticsUpdate } from 'utils/functions'
|
||||
|
||||
// Props
|
||||
export let stores
|
||||
export let id
|
||||
|
||||
// Variables
|
||||
const { page } = stores()
|
||||
|
||||
// Init Google Analytics
|
||||
if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'development') {
|
||||
window.dataLayer = window.dataLayer || []
|
||||
window.gtag = function gtag() {
|
||||
window.dataLayer.push(arguments)
|
||||
}
|
||||
window.gtag('js', new Date())
|
||||
window.gtag('config', id)
|
||||
}
|
||||
|
||||
// Push new page to GA
|
||||
$: analyticsUpdate($page.path, id)
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if process.env.NODE_ENV !== 'development'}
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
@@ -1,24 +0,0 @@
|
||||
<script>
|
||||
export let ogType = 'website'
|
||||
export let twCard = 'summary_large_image'
|
||||
export let url = ''
|
||||
export let title = ''
|
||||
export let description = ''
|
||||
export let image
|
||||
</script>
|
||||
|
||||
<meta property="og:type" content={ogType}>
|
||||
<meta property="og:url" content={url}>
|
||||
<meta property="og:title" content={title}>
|
||||
<meta property="og:description" content={description}>
|
||||
{#if image}
|
||||
<meta property="og:image" content={image}>
|
||||
{/if}
|
||||
|
||||
<meta property="twitter:card" content={twCard}>
|
||||
<meta property="twitter:url" content={url}>
|
||||
<meta property="twitter:title" content={title}>
|
||||
<meta property="twitter:description" content={description}>
|
||||
{#if image}
|
||||
<meta property="twitter:image" content={image}>
|
||||
{/if}
|
||||
@@ -1,77 +0,0 @@
|
||||
<script>
|
||||
import { fly, fade } from 'svelte/transition'
|
||||
import { quartInOut, quartOut } from 'svelte/easing'
|
||||
import { stores } from '@sapper/app'
|
||||
import {
|
||||
pageReady,
|
||||
pageAnimation,
|
||||
firstLoad,
|
||||
animDuration,
|
||||
animDelay,
|
||||
animPanelDelay,
|
||||
animPanelShortDelay
|
||||
} from 'utils/store'
|
||||
// Components
|
||||
import TitleSite from 'atoms/TitleSite'
|
||||
import IconGlobe from 'atoms/IconGlobe'
|
||||
// Animations
|
||||
import { panelBackgroundOut } from 'animations/Transition'
|
||||
|
||||
// Variables
|
||||
const { page } = stores()
|
||||
$: animateIn = $pageAnimation
|
||||
let scope
|
||||
let show = false
|
||||
let previousPage = ''
|
||||
|
||||
// Check if path is excluded
|
||||
const isExcluded = path => path.includes(['/viewer/'])
|
||||
|
||||
// Listen for route change
|
||||
page.subscribe(page => {
|
||||
// Show transition if page is not excluded
|
||||
if (!isExcluded(previousPage) || !isExcluded(page.path)) {
|
||||
// Show transition
|
||||
show = false
|
||||
// Reset pageReady
|
||||
pageReady.set(false)
|
||||
}
|
||||
|
||||
// Update page for viewer navigation checking
|
||||
previousPage = page.path
|
||||
})
|
||||
|
||||
// Listen for when a route is mounted
|
||||
pageReady.subscribe(loaded => {
|
||||
if (loaded) {
|
||||
setTimeout(() => {
|
||||
// Hide transition
|
||||
show = true
|
||||
// Run page animation
|
||||
animateIn()
|
||||
// Scroll to page top
|
||||
window.scrollTo(0,0)
|
||||
// Change loader as the init one shown already
|
||||
firstLoad.set(false)
|
||||
}, $firstLoad ? animPanelDelay : animPanelShortDelay)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if !show}
|
||||
<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
|
||||
<div class="transition__loader"
|
||||
in:fly={{ y: 24, duration: 800, easing: quartOut }}
|
||||
out:fly={{ y: -window.innerHeight/2, duration: animDuration, easing: quartInOut }}
|
||||
>
|
||||
{#if $firstLoad}
|
||||
<TitleSite init={true} />
|
||||
{:else}
|
||||
<IconGlobe width="44" color="#fff" animated="true" />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="transition__background"
|
||||
out:panelBackgroundOut={{ duration: animDuration }}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
27
src/utils/api.ts
Normal file
27
src/utils/api.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
const apiURL: string = process.env.NODE_ENV === 'development' ? `${import.meta.env.VITE_API_GRAPHQL_URL_DEV}` : `${import.meta.env.VITE_API_GRAPHQL_URL_PROD}`
|
||||
|
||||
|
||||
/**
|
||||
* Fetch data from Directus API
|
||||
*/
|
||||
export const fetchAPI = async (query: string) => {
|
||||
try {
|
||||
const res = await fetch(apiURL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${import.meta.env.VITE_API_TOKEN}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query
|
||||
})
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
return data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
0
src/utils/contants.ts
Normal file
0
src/utils/contants.ts
Normal file
@@ -1,240 +0,0 @@
|
||||
|
||||
import { apiEndpoints } from './store'
|
||||
|
||||
|
||||
/*
|
||||
** Get thumbnail from API
|
||||
*/
|
||||
export const getThumbnail = (id, width, height, type = 'crop', quality = 80) => {
|
||||
const ratio = 1.5
|
||||
width = !width ? Math.round(height * ratio) : width
|
||||
height = !height ? Math.round(width / ratio) : height
|
||||
return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Debounce function with a delay
|
||||
** (For scrolling or other resource demanding behaviors)
|
||||
*/
|
||||
export const debounce = (callback, wait, immediate = false) => {
|
||||
let timeout = null
|
||||
return function () {
|
||||
const callNow = immediate && !timeout
|
||||
const next = () => callback.apply(this, arguments)
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(next, wait)
|
||||
if (callNow) next()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Throttle function with a delay
|
||||
** (Throttling enforces a maximum number of times a function can be called over time, as in 'execute this function at most once every 100 milliseconds)
|
||||
*/
|
||||
export function throttle (fn, delay) {
|
||||
let lastCall = 0
|
||||
return function (...args) {
|
||||
const now = (new Date).getTime()
|
||||
if (now - lastCall < delay) return
|
||||
lastCall = now
|
||||
return fn(...args)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Get a DOM element's position
|
||||
*/
|
||||
export const getPosition = (node, scope) => {
|
||||
const root = scope || document
|
||||
let offsetTop = node.offsetTop
|
||||
let offsetLeft = node.offsetLeft
|
||||
while (node && node.offsetParent && node.offsetParent != document && node !== root && root !== node.offsetParent) {
|
||||
offsetTop += node.offsetParent.offsetTop
|
||||
offsetLeft += node.offsetParent.offsetLeft
|
||||
node = node.offsetParent
|
||||
}
|
||||
return { top: offsetTop, left: offsetLeft }
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Wrap string's each letters into a span
|
||||
*/
|
||||
export const charsToSpan = string => {
|
||||
return string
|
||||
.replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
|
||||
.replace(/ /g, '\u00a0')
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Random String Generator
|
||||
*/
|
||||
export const randomString = (length = 6, type = 'A') => {
|
||||
type = type && type.toLowerCase()
|
||||
let str = ''
|
||||
let i = 0
|
||||
const min = type == 'a' ? 10 : 0
|
||||
const max = type == 'n' ? 10 : 62
|
||||
for (; i++ < length;) {
|
||||
let r = Math.random() * (max - min) + min << 0
|
||||
str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Get random array item
|
||||
*/
|
||||
export const getRandomArrayItem = array => {
|
||||
const randomIndex = Math.floor(Math.random() * array.length)
|
||||
return array[randomIndex]
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Date related
|
||||
*/
|
||||
// Format date from an input date
|
||||
export const formatDate = (originDate, format) => {
|
||||
let output
|
||||
const date = new Date(originDate)
|
||||
|
||||
// Date
|
||||
const day = new Intl.DateTimeFormat('default', { day: 'numeric' }).format(date)
|
||||
const day2 = new Intl.DateTimeFormat('default', { day: '2-digit' }).format(date)
|
||||
const mthSh = new Intl.DateTimeFormat('default', { month: 'short' }).format(date)
|
||||
const mthNb = new Intl.DateTimeFormat('default', { month: '2-digit' }).format(date)
|
||||
const year = new Intl.DateTimeFormat('default', { year: 'numeric' }).format(date)
|
||||
const ord = ['th', 'st', 'nd', 'rd'][(day > 3 && day < 21) || day % 10 > 3 ? 0 : day % 10]
|
||||
|
||||
// Full format (MMM Do, YYYY)
|
||||
if (format === 'FULL') {
|
||||
output = `${mthSh} ${day + ord}, ${year}`
|
||||
}
|
||||
|
||||
// Fulltime format (YYYY-MM-DDThh:mm:ss)
|
||||
else if (format === 'DATETIME') {
|
||||
output = date.toISOString()
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
// Relative time from an input date
|
||||
export const relativeTime = (originDate, limit = 0) => {
|
||||
const date = new Date(originDate)
|
||||
const diff = Number(new Date()) - date // - (2 * 3600 * 1000) // 2 hours difference in ms
|
||||
|
||||
// Define units in milliseconds
|
||||
const mn = 60 * 1000
|
||||
const hr = mn * 60
|
||||
const day = hr * 24
|
||||
const mth = day * 30
|
||||
const yr = day * 365
|
||||
|
||||
// Variables
|
||||
let amount
|
||||
let unit
|
||||
let output
|
||||
|
||||
// Difference is seconds
|
||||
if (diff < mn) {
|
||||
amount = Math.round(diff / 1000)
|
||||
unit = 'second'
|
||||
}
|
||||
// Difference is minutes
|
||||
else if (diff < hr) {
|
||||
amount = Math.round(diff / mn)
|
||||
unit = 'minute'
|
||||
}
|
||||
// Difference is hours
|
||||
else if (diff < day) {
|
||||
amount = Math.round(diff / hr)
|
||||
unit = 'hour'
|
||||
}
|
||||
// Difference is days
|
||||
else if (diff < mth) {
|
||||
amount = Math.round(diff / day)
|
||||
unit = 'day'
|
||||
}
|
||||
// Difference is months
|
||||
else if (diff < yr) {
|
||||
amount = Math.round(diff / mth)
|
||||
unit = 'month'
|
||||
}
|
||||
// Difference is years
|
||||
else if (diff > yr) {
|
||||
amount = Math.round(diff / yr)
|
||||
unit = 'year'
|
||||
}
|
||||
|
||||
// Define the output
|
||||
output = `${amount} ${amount > 1 ? `${unit}s` : unit} ago`
|
||||
|
||||
// Detect if the difference is over the limit
|
||||
if (diff > limit) {
|
||||
output = formatDate(date, 'FULL')
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Check if date is older than
|
||||
*/
|
||||
export const dateOlderThan = (originDate, limit) => {
|
||||
const date = new Date(originDate)
|
||||
const diff = Number(new Date()) - date
|
||||
return diff < limit
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Controls Anime.js parallax
|
||||
*/
|
||||
export const parallaxAnime = (element, anime) => {
|
||||
if (element) {
|
||||
const bound = element.getBoundingClientRect()
|
||||
const windowHeight = window.innerHeight
|
||||
if (bound.top < windowHeight && bound.bottom > 0) {
|
||||
anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
|
||||
} else {
|
||||
if (bound.top >= windowHeight) {
|
||||
anime.seek(0)
|
||||
} else if (bound.bottom <= 0) {
|
||||
anime.seek(anime.duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Smooth scroll to anchor on click
|
||||
*/
|
||||
export const smoothScroll = event => {
|
||||
const link = event.target.closest('a')
|
||||
const hash = link.getAttribute('href').split('#')[1]
|
||||
const target = document.getElementById(hash)
|
||||
target.scrollIntoView({ behavior: 'smooth' })
|
||||
history.pushState({}, null, `#${hash}`)
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Google Analytics send page
|
||||
*/
|
||||
export const analyticsUpdate = (page, id = process.env.CONFIG.GA_TRACKER_ID) => {
|
||||
if (typeof gtag !== 'undefined') {
|
||||
window.gtag('config', id, {
|
||||
page_path: page
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
export default `{
|
||||
site {
|
||||
data {
|
||||
description
|
||||
explore_globe
|
||||
explore_list
|
||||
photos_per_page
|
||||
instagram
|
||||
seo_name
|
||||
seo_title_default
|
||||
seo_description_default
|
||||
seo_share_image { full_url }
|
||||
credits_text
|
||||
credits_list
|
||||
newsletter_text
|
||||
newsletter_subtitle
|
||||
newsletter_url
|
||||
}
|
||||
}
|
||||
continents {
|
||||
data {
|
||||
id
|
||||
name
|
||||
rotation_position
|
||||
}
|
||||
}
|
||||
countries {
|
||||
data {
|
||||
id
|
||||
name
|
||||
slug
|
||||
flag { full_url title }
|
||||
continent { id name }
|
||||
}
|
||||
}
|
||||
locations (filter: { status_eq: "published" }) {
|
||||
data {
|
||||
id
|
||||
name
|
||||
slug
|
||||
region
|
||||
country { id name slug }
|
||||
description
|
||||
close
|
||||
coordinates
|
||||
illu_desktop { full_url }
|
||||
illu_desktop_2x { full_url }
|
||||
illu_mobile { full_url }
|
||||
}
|
||||
}
|
||||
photos (filter: { status_eq: "published" }) {
|
||||
data {
|
||||
created_on
|
||||
location { id }
|
||||
city
|
||||
}
|
||||
}
|
||||
}`
|
||||
5
src/utils/polyfills.ts
Normal file
5
src/utils/polyfills.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
/**
|
||||
* Add tabindex outlines when navigating with keyboard
|
||||
* focus-visible polyfill: adds classes when tabbing
|
||||
*/
|
||||
import 'focus-visible'
|
||||
@@ -1,40 +0,0 @@
|
||||
import { writable } from 'svelte/store'
|
||||
|
||||
// Define environment
|
||||
export const dev = process.env.NODE_ENV === 'development'
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Site related
|
||||
========================================================================== */
|
||||
const apiEndpoint = dev ? process.env.CONFIG.API_URL_DEV : process.env.CONFIG.API_URL_PROD
|
||||
export const apiEndpoints = {
|
||||
gql: apiEndpoint + '/gql',
|
||||
rest: apiEndpoint
|
||||
}
|
||||
|
||||
// Data
|
||||
export let site = writable()
|
||||
export let continents = writable()
|
||||
export let countries = writable()
|
||||
export let locations = writable()
|
||||
|
||||
// Derived data
|
||||
export let currentLocation = writable()
|
||||
export let currentPhotos = writable()
|
||||
|
||||
// State
|
||||
export let fullscreen = writable(undefined, () => {})
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Animation related
|
||||
========================================================================== */
|
||||
export let firstLoad = writable(true, () => {})
|
||||
export let pageReady = writable(false, () => {})
|
||||
export let pageAnimation = writable(() => {}, () => {})
|
||||
export const animDelay = 900
|
||||
export const animPanelDelay = 900
|
||||
export const animPanelShortDelay = 600
|
||||
export const animDuration = 1400
|
||||
export const animDurationLong = 1800
|
||||
Reference in New Issue
Block a user