mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-02-23 05:12:25 +01:00
Code Issues Releases Wiki Activity

feat: remove fallback once dynamic copy is loaded

Browse Source 
+ legacy option defaults to true when opened in legacy browsers
This commit is contained in:
Jonas Kuske 2019-06-07 21:21:59 +02:00
parent 76a4ccbc7c
commit 2bd0bdd22e
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/index.html
View File

@ -15,7 +15,7 @@
<meta name="msapplication-TileColor" content="#00aba9" />
<meta name="msapplication-config" content="./icons/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<!-- Base styles of water.css, so styles don't have to wait until JS is loaded -->
<!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
<!-- <link
rel="preload"
as="style"
@ -33,9 +33,8 @@
/> -->
<!-- TODO: Remove once water.css v2 is hosted so the above links work -->
<link rel="stylesheet" href="../dark.min.css" />
<!-- Dynamic version of water.css, overwrites base styles. JavaScript sets & updates href. -->
<link rel="stylesheet" id="js-startup-stylesheet" href="../dark.min.css" />
<!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
<link rel="stylesheet" id="js-stylesheet" />
<!-- Custom styles for the documentation / version picker -->
<link rel="stylesheet" href="style.css" />

14
docs/script.js
View File

@ -14,6 +14,7 @@
/** Reference to global window, but with properties for loaded libraries. */
const w = /** @type {Window & Libraries} */ (window)
const queryParams = new URLSearchParams(w.location.search)
const supportsCssVars = typeof CSS !== 'undefined' && CSS.supports('color', 'var(--clr)')
/** The base URI from where the docs page loads the CSS files. */
const DEV_BASE = '../'
@ -70,6 +71,10 @@ const getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStand
const externalElements = {
_productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),
_stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),
_removeStartupStylesheet() {
const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')
if (startupStylesheet) document.head.removeChild(startupStylesheet)
},
_updateProductHunt(/** @type {Theme} */ theme) {
this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
},
@ -77,6 +82,11 @@ const externalElements = {
this._stylesheet.href = DEV_BASE + fileName
},
/** Sets up listener to remove startup version of water.css when right one loads, then updates */
init(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
this._stylesheet.addEventListener('load', this._removeStartupStylesheet)
this.update(options, preferedTheme)
},
/** Takes current version + the user's prefered scheme and updates all external elements. */
update(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
const displayedTheme = options.isStandalone ? options.theme : preferedTheme || options.theme
@ -100,7 +110,7 @@ const createColorSchemeListener = (scheme, queryHandler) => {
const themeFromParams = queryParams.get('theme')
const initialVersionOptions = {
theme: /** @type {Theme} */ (/dark|light/.test(themeFromParams) ? themeFromParams : 'dark'),
isLegacy: queryParams.has('legacy'),
isLegacy: queryParams.has('legacy') || !supportsCssVars,
isStandalone: queryParams.has('standalone'),
}
@ -129,7 +139,7 @@ new w.Vue({
createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
externalElements.update(this.versionOptions, this.preferedColorScheme)
externalElements.init(this.versionOptions, this.preferedColorScheme)
},
methods: {
copyToClipboard() {