mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-16 18:14:09 +02:00
Code Issues Releases Wiki Activity

Update product hunt badge

Browse Source
This commit is contained in:
Felix
2020-05-28 14:54:07 -05:00
parent c4d6f8ae20
commit afe8880a0f
3 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/script.js
View File

@@ -11,6 +11,7 @@ const themeForm = document.getElementById('theme-form')
const linkSnippet = document.getElementById('link-snippet')
const stylesheet = document.getElementById('js-stylesheet')
const startupStylesheet = document.getElementById('js-startup-stylesheet')
const productHunt = document.getElementById('product-hunt')
const table = {
fileName: document.getElementById('table-file-name'),
@@ -19,6 +20,10 @@ const table = {
browserSupport: document.getElementById('table-browser-support')
}
const updateProductHunt = (theme) => {
productHunt.src = `https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=${theme}&period=daily`
}
const updateTheme = () => {
const theme = themeForm.theme.value
const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
@@ -40,11 +45,19 @@ const updateTheme = () => {
} else {
table.theme.innerText = `Theme is forced to ${theme}`
table.browserSupport.innerText = 'All browsers (including Internet Explorer)'
updateProductHunt(theme)
}
}
themeForm.addEventListener('input', updateTheme)
const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
updateProductHunt(prefersColorScheme.matches ? 'light' : 'dark')
prefersColorScheme.addEventListener('change', () => {
if (themeForm.theme.value !== 'auto') return
updateProductHunt(prefersColorScheme.matches ? 'light' : 'dark')
})
updateTheme()
startupStylesheet.remove()
@@ -129,7 +142,7 @@ startupStylesheet.remove()
// /** Handles elements external to the version picker that still need to be kept
// * up to date with the current version, e.g. switching images from dark to light. */
// const externalElements = {
// _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),
// _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#product-hunt')),
// _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),
// _removeStartupStylesheet: () => {
// const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')