analytics/assets/js/app.js

120 lines
4.3 KiB
JavaScript
Raw Normal View History

2019-09-02 14:29:19 +03:00
import css from "../css/app.css"
import "flatpickr/dist/flatpickr.min.css"
2019-09-02 14:29:19 +03:00
import "./polyfills/closest"
import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
2019-09-02 14:29:19 +03:00
import "phoenix_html"
2020-11-16 16:38:44 +03:00
import 'alpinejs'
2019-09-02 14:29:19 +03:00
const triggers = document.querySelectorAll('[data-dropdown-trigger]')
for (const trigger of triggers) {
trigger.addEventListener('click', function(e) {
e.stopPropagation()
e.currentTarget.nextElementSibling.classList.remove('hidden')
})
}
if (triggers.length > 0) {
document.addEventListener('click', function(e) {
const dropdown = e.target.closest('[data-dropdown]')
if (dropdown && e.target.tagName === 'A') {
dropdown.classList.add('hidden')
}
})
2019-09-02 14:29:19 +03:00
document.addEventListener('click', function(e) {
const clickedInDropdown = e.target.closest('[data-dropdown]')
if (!clickedInDropdown) {
for (const dropdown of document.querySelectorAll('[data-dropdown]')) {
dropdown.classList.add('hidden')
}
}
})
}
2019-10-31 08:39:51 +03:00
const registerForm = document.getElementById('register-form')
if (registerForm) {
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
setTimeout(submitForm, 1000);
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
registerForm.submit();
}
}
2020-02-05 17:08:34 +03:00
plausible('Signup', {callback: submitForm});
2019-10-31 08:39:51 +03:00
})
}
const changelogNotification = document.getElementById('changelog-notification')
if (changelogNotification) {
showChangelogNotification(changelogNotification)
fetch('https://plausible.io/changes.txt', {headers: {'Content-Type': 'text/plain'}})
.then((res) => res.text())
.then((res) => {
localStorage.lastChangelogUpdate = new Date(res).getTime()
showChangelogNotification(changelogNotification)
})
}
function showChangelogNotification(el) {
const lastUpdated = Number(localStorage.lastChangelogUpdate)
const lastChecked = Number(localStorage.lastChangelogClick)
2021-01-26 11:32:03 +03:00
const hasNewUpdateSinceLastClicked = lastUpdated > lastChecked
const notOlderThanThreeDays = Date.now() - lastUpdated < 1000 * 60 * 60 * 72
if ((!lastChecked || hasNewUpdateSinceLastClicked) && notOlderThanThreeDays) {
el.innerHTML = `
<a href="https://plausible.io/changelog" target="_blank">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2021-01-26 11:32:03 +03:00
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
</svg>
<svg class="w-4 h-4 text-pink-500 absolute" style="left: 14px; top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="4" fill="currentColor" />
</svg>
</a>
`
const link = el.getElementsByTagName('a')[0]
link.addEventListener('click', function() {
localStorage.lastChangelogClick = Date.now()
setTimeout(() => { link.remove() }, 100)
})
}
}
const embedButton = document.getElementById('generate-embed')
if (embedButton) {
embedButton.addEventListener('click', function(e) {
const baseUrl = document.getElementById('base-url').value
const embedCode = document.getElementById('embed-code')
const theme = document.getElementById('theme').value.toLowerCase()
const background = document.getElementById('background').value
try {
const embedLink = new URL(document.getElementById('embed-link').value)
embedLink.searchParams.set('embed', 'true')
embedLink.searchParams.set('theme', theme)
if (background) {
embedLink.searchParams.set('background', background)
}
2021-03-16 16:06:58 +03:00
embedCode.value = `<iframe plausible-embed src="${embedLink.toString()}" scrolling="no" frameborder="0" loading="lazy" style="width: 1px; min-width: 100%; height: 1600px;"></iframe>
<div style="font-size: 14px; padding-bottom: 14px;">Stats powered by <a target="_blank" style="color: #4F46E5; text-decoration: underline;" href="https://plausible.io">Plausible Analytics</a></div>
<script async src="${baseUrl}/js/embed.host.js"></script>`
} catch (e) {
2021-03-16 16:06:58 +03:00
console.error(e)
embedCode.value = 'ERROR: Please enter a valid URL in the shared link field'
}
})
}