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

feat: allow version select via URL query params

Browse Source
This commit is contained in:
Jonas Kuske
2019-06-01 02:18:05 +02:00
parent ba843037d0
commit 2216b32f09
5 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/index.html
View File

@@ -55,7 +55,7 @@
<h1>Water.css</h1>
<p>
Water.css is a just-add-css collection of styles to make simple websites like this just a
Water.css is a drop-in collection of CSS styles to make simple websites like this just a
little bit nicer.
<br />
Now you can write your simple static site with nice semantic html, and Water.css will manage
@@ -204,7 +204,7 @@
>
for how to change it). A URL for the source of the quotation may be given using the
<code>cite</code> attribute, while a text representation of the source can be given using the
<code>&ltcite&gt</code> cite element."
<code>&lt;cite&gt;</code> cite element."
<footer>
<cite>MDN, "The Block Quotation element"</cite>
@@ -246,7 +246,8 @@
src="https://unpkg.com/clipboard-polyfill@2.8.0/build/clipboard-polyfill.promise.js"
defer
></script>
<script src="https://unpkg.com/vue@~2.6.10/dist/vue.min.js" defer></script>
<script src="https://unpkg.com/@ungap/url-search-params@0.1.2/min.js" defer></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js" defer></script>
<script src="https://unpkg.com/favicon-mode-switcher@^1.0.0" defer></script>
<script src="script.js" defer></script>
</body>

22
docs/script.js
View File

@@ -5,8 +5,15 @@
/** @typedef {{ Vue: typeof import('vue').default, clipboard: Clipboard }} Libraries */
/** @typedef {{ theme: Theme, isLegacy: boolean, isStandalone: boolean }} VersionOptions */
/** @typedef {Object} VueData State used by the version picker
* @prop {VersionOptions} versionOptions
* @prop {?CopyStatus} copyStatus
* @prop {?Theme} preferedColorScheme
*/
/** Reference to global window, but with properties for loaded libraries. */
const w = /** @type {Window & Libraries} */ (window)
const queryParams = new URLSearchParams(w.location.search)
/** The base URI from where the docs page loads the CSS files. */
const DEV_BASE = '../'
@@ -90,11 +97,12 @@ const createColorSchemeListener = (scheme, queryHandler) => {
queryHandler(mediaQuery.matches)
}
/** @typedef {Object} VueData
* @prop {VersionOptions} versionOptions
* @prop {?CopyStatus} copyStatus
* @prop {?Theme} preferedColorScheme
*/
const themeFromParams = queryParams.get('theme')
const initialVersionOptions = {
theme: /** @type {Theme} */ (/dark|light/.test(themeFromParams) ? themeFromParams : 'dark'),
isLegacy: queryParams.has('legacy'),
isStandalone: queryParams.has('standalone'),
}
new w.Vue({
el: '#installation',
@@ -103,7 +111,7 @@ new w.Vue({
},
/** @type {VueData} */
data: {
versionOptions: { theme: /** @type {Theme} */ ('dark'), isStandalone: false, isLegacy: false },
versionOptions: initialVersionOptions,
preferedColorScheme: null,
copyStatus: null,
},
@@ -121,7 +129,7 @@ new w.Vue({
createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
if (this.preferedColorScheme) externalElements._updateProductHunt(this.preferedColorScheme)
externalElements.update(this.versionOptions, this.preferedColorScheme)
},
methods: {
copyToClipboard() {