diff --git a/dist/docs/script.js b/dist/docs/script.js index 9574a48..e867b29 100644 --- a/dist/docs/script.js +++ b/dist/docs/script.js @@ -1,2 +1,2 @@ -"use strict";var e="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",t={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},n=function(e){var t=e.theme,n=e.isLegacy,r=e.isStandalone;return"".concat(t).concat(n?"-legacy":"").concat(r?".standalone":"",".min.css")},r=function(t){var r=t.theme,s=t.isLegacy,i=t.isStandalone,a=n({theme:r,isLegacy:s,isStandalone:i}),c='');if(!s||i)return c;var o="dark"===r?"light":"dark";return(function(t,n,r){return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n\n')}(n({theme:r,isLegacy:!0,isStandalone:!0}),n({theme:o,isLegacy:!0,isStandalone:!0}),o)+"\n\n"+c).trim()},s={_phImage:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),updateStylesheet:function(e){this._stylesheet.href=e},updateProductHunt:function(e){this._phImage.src=this._phImage.src.replace(/dark|light/,e)},update:function(e,t){var r=e.theme,s=e.isStandalone,i="../"+n(e),a=s?r:t||r;this.updateStylesheet(i),this.updateProductHunt(a)}},i=function(e,t){var n=matchMedia("(prefers-color-scheme: ".concat(e,")"));n.addListener(function(e){return t(e.matches)}),t(n.matches)};new Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:{theme:"dark",isStandalone:!1,isLegacy:!1},preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:n(this.versionOptions),fileSize:(e=this.versionOptions,t[n(e)]||0).toFixed(2),fileSnippet:r(this.versionOptions)};var e}},created:function(){var e=this;i("dark",function(t){return t&&(e.preferedColorScheme="dark")}),i("light",function(t){return t&&(e.preferedColorScheme="light")}),this.preferedColorScheme&&s.updateProductHunt(this.preferedColorScheme)},methods:{copyToClipboard:function(){var e=this;Promise.resolve().then(function(){return clipboard.writeText(e.selectedVersion.fileSnippet)}).then(function(){return e.copyStatus="success"}).catch(function(){return e.copyStatus="failed"}),setTimeout(function(){return e.copyStatus=void 0},1e3)}},watch:{preferedColorScheme:function(e){s.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){s.update(e,this.preferedColorScheme)}}}}); +"use strict";var e=window,t="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",n={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},s=function(e){var t=e.theme,n=e.isLegacy?"-legacy":"",s=e.isStandalone?".standalone":"";return"".concat(t).concat(n).concat(s,".min.css")},r=function(e){var n=e.theme,r=e.isLegacy,i=e.isStandalone,c=s({theme:n,isLegacy:r,isStandalone:i}),a='');return!r||i?a:(function(e){var n=e.theme,r=e.isLegacy,i=e.isStandalone,c="dark"===n?"light":"dark",a=s({theme:c,isLegacy:r,isStandalone:i});return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n\n')}({theme:n,isLegacy:r,isStandalone:!0})+"\n\n"+a).trim()},i={_productHunt:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),_updateProductHunt:function(e){this._productHunt.src=this._productHunt.src.replace(/dark|light/,e)},_updateStylesheet:function(e){this._stylesheet.href="../"+e},update:function(e,t){var n=e.isStandalone?e.theme:t||e.theme;this._updateStylesheet(s(e)),this._updateProductHunt(n)}},c=function(t,n){var s=e.matchMedia("(prefers-color-scheme: ".concat(t,")"));s.addListener(function(e){return n(e.matches)}),n(s.matches)};new e.Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:{theme:"dark",isStandalone:!1,isLegacy:!1},preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:s(this.versionOptions),fileSize:(e=this.versionOptions,n[s(e)]||0).toFixed(2),fileSnippet:r(this.versionOptions)};var e}},created:function(){var e=this;c("dark",function(t){return t&&(e.preferedColorScheme="dark")}),c("light",function(t){return t&&(e.preferedColorScheme="light")}),this.preferedColorScheme&&i._updateProductHunt(this.preferedColorScheme)},methods:{copyToClipboard:function(){var t=this;Promise.resolve().then(function(){return e.clipboard.writeText(t.selectedVersion.fileSnippet)}).then(function(){return t.copyStatus="success"}).catch(function(){return t.copyStatus="failed"}),setTimeout(function(){return t.copyStatus=null},1e3)}},watch:{preferedColorScheme:function(e){i.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){i.update(e,this.preferedColorScheme)}}}}); //# sourceMappingURL=script.js.map diff --git a/dist/docs/script.js.map b/dist/docs/script.js.map index e344f44..498d0b8 100644 --- a/dist/docs/script.js.map +++ b/dist/docs/script.js.map @@ -1 +1 @@ -{"version":3,"sources":["script.js"],"names":["CDN_BASE","FILE_SIZES","dark.min.css","dark.standalone.min.css","dark-legacy.min.css","dark-legacy.standalone.min.css","light.min.css","light.standalone.min.css","light-legacy.min.css","light-legacy.standalone.min.css","getFileName","_ref","theme","isLegacy","isStandalone","concat","getFileSnippet","_ref2","fileName","stylesheetSnippet","altTheme","mainFileName","altFileName","getFilePreloadSnippet","trim","externalElements","_phImage","document","querySelector","_stylesheet","updateStylesheet","href","this","updateProductHunt","src","replace","update","options","preferedColorScheme","visibleTheme","createColorSchemeListener","queryHandler","mediaQuery","matchMedia","addListener","query","matches","Vue","el","filters","capitalize","str","charAt","toUpperCase","slice","data","versionOptions","copyStatus","computed","selectedVersion","fileSize","toFixed","fileSnippet","created","_this","match","methods","copyToClipboard","_this2","Promise","resolve","then","clipboard","writeText","setTimeout","undefined","watch","nextScheme","deep","handler","nextOptions"],"mappings":"AAAA,aASA,IAEMA,EAAW,sDAGXC,EAAa,CACjBC,eAAgB,IAChBC,0BAA2B,KAC3BC,sBAAuB,MACvBC,iCAAkC,KAClCC,gBAAiB,IACjBC,2BAA4B,IAC5BC,uBAAwB,KAAQ,KAAO,KACvCC,kCAAmC,MAI/BC,EAAc,SAAAC,GAAuC,IAApCC,EAAoCD,EAApCC,MAAOC,EAA6BF,EAA7BE,SAAUC,EAAmBH,EAAnBG,aACtC,MAAA,GAAAC,OAAUH,GAAVG,OAAkBF,EAAW,UAAY,IAAzCE,OAA8CD,EAAe,cAAgB,GAA7E,aAgBIE,EAAiB,SAAAC,GAAuC,IAApCL,EAAoCK,EAApCL,MAAOC,EAA6BI,EAA7BJ,SAAUC,EAAmBG,EAAnBH,aACnCI,EAAWR,EAAY,CAAEE,MAAAA,EAAOC,SAAAA,EAAUC,aAAAA,IAC1CK,EAAiB,gCAAAJ,OAAmCf,GAAnCe,OAA8CG,EAA9C,MAEvB,IAAKL,GAAYC,EAAc,OAAOK,EAEtC,IAAMC,EAAqB,SAAVR,EAAmB,QAAU,OAK9C,OAnB4B,SAACS,EAAcC,EAAaF,GACxD,MAAA,sGAAAL,OAEqCf,GAFrCe,OAEgDM,EAFhD,6CAAAN,OAGqCf,GAHrCe,OAGgDO,EAHhD,oCAAAP,OAG8FK,EAH9F,OAgBuBG,CAFIb,EAAY,CAAEE,MAAAA,EAAOC,UAAU,EAAMC,cAAc,IACpDJ,EAAY,CAAEE,MAAOQ,EAAUP,UAAU,EAAMC,cAAc,IACHM,GAE3D,OAASD,GAAmBK,QAGjDC,EAAmB,CACvBC,SAAUC,SAASC,cAAc,mBACjCC,YAAaF,SAASC,cAAc,kBAEpCE,iBAJuB,SAINC,GACfC,KAAKH,YAAYE,KAAOA,GAE1BE,kBAPuB,SAOLrB,GAChBoB,KAAKN,SAASQ,IAAMF,KAAKN,SAASQ,IAAIC,QAAQ,aAAcvB,IAG9DwB,OAXuB,SAWhBC,EAASC,GAAqB,IAC3B1B,EAAwByB,EAAxBzB,MAAOE,EAAiBuB,EAAjBvB,aACTiB,EA7DO,MA6DWrB,EAAY2B,GAC9BE,EAAezB,EAAeF,EAAQ0B,GAAuB1B,EAEnEoB,KAAKF,iBAAiBC,GACtBC,KAAKC,kBAAkBM,KAIrBC,EAA4B,SAAC5B,EAAO6B,GACxC,IAAMC,EAAaC,WAAU,0BAAA5B,OAA2BH,EAA3B,MAC7B8B,EAAWE,YAAY,SAAAC,GAAK,OAAIJ,EAAaI,EAAMC,WACnDL,EAAaC,EAAWI,UAG1B,IAAIC,IAAI,CACNC,GAAI,gBACJC,QAAS,CAAEC,WAAY,SAAAC,GAAG,OAAIA,EAAIC,OAAO,GAAGC,cAAgBF,EAAIG,MAAM,KACtEC,KAAM,CACJC,eAAgB,CAAE5C,MAAO,OAAQE,cAAc,EAAOD,UAAU,GAChEyB,oBAAqB,KACrBmB,WAAY,MAEdC,SAAU,CACRC,gBADQ,WAEN,MAAO,CACLzC,SAAUR,EAAYsB,KAAKwB,gBAC3BI,UAjEYvB,EAiEUL,KAAKwB,eAhE1BvD,EAAWS,EAAY2B,KAAa,GAgEMwB,QAAQ,GACnDC,YAAa9C,EAAegB,KAAKwB,iBAlErB,IAAAnB,IAsElB0B,QAjBM,WAiBI,IAAAC,EAAAhC,KACRQ,EAA0B,OAAQ,SAAAyB,GAAK,OAAIA,IAAUD,EAAK1B,oBAAsB,UAChFE,EAA0B,QAAS,SAAAyB,GAAK,OAAIA,IAAUD,EAAK1B,oBAAsB,WAE7EN,KAAKM,qBAAqBb,EAAiBQ,kBAAkBD,KAAKM,sBAExE4B,QAAS,CACPC,gBADO,WACW,IAAAC,EAAApC,KAChBqC,QAAQC,UACLC,KAAK,WAAA,OAAMC,UAAUC,UAAUL,EAAKT,gBAAgBG,eACpDS,KAAK,WAAA,OAAOH,EAAKX,WAAa,YAFjC,MAGS,WAAA,OAAOW,EAAKX,WAAa,WAClCiB,WAAW,WAAA,OAAON,EAAKX,gBAAakB,GAAY,OAGpDC,MAAO,CACLtC,oBADK,SACeuC,GAClBpD,EAAiBW,OAAOJ,KAAKwB,eAAgBqB,IAE/CrB,eAAgB,CACdsB,MAAM,EACNC,QAFc,SAENC,GACNvD,EAAiBW,OAAO4C,EAAahD,KAAKM","file":"script.js","sourcesContent":["/**\n * Type definition for the version object used throughout the code\n * @typedef {Object} VersionOptions\n * @prop {'dark' | 'light'} theme\n * @prop {boolean} isLegacy\n * @prop {boolean} isStandalone\n */\n\n/** The base URI from where the docs page loads the CSS files. */\nconst DEV_BASE = '../'\n/** The base URI from where instructions show to load the CSS files. */\nconst CDN_BASE = 'https://cdn.jsdelivr.net/gh/kognise/water.css/dist/'\n\n/** An object mapping the (minified + gzipped) fileSize in KB to a fileName. */\nconst FILE_SIZES = {\n 'dark.min.css': 1.4,\n 'dark.standalone.min.css': 1.31,\n 'dark-legacy.min.css': 0.177 + 1.16 + 1.15,\n 'dark-legacy.standalone.min.css': 1.16,\n 'light.min.css': 1.4,\n 'light.standalone.min.css': 1.3,\n 'light-legacy.min.css': 0.178 + 1.16 + 1.15,\n 'light-legacy.standalone.min.css': 1.15,\n}\n\n/** @param {VersionOptions} options */\nconst getFileName = ({ theme, isLegacy, isStandalone }) => {\n return `${theme}${isLegacy ? '-legacy' : ''}${isStandalone ? '.standalone' : ''}.min.css`\n}\n\n/** @param {VersionOptions} options */\nconst getFileSize = options => {\n return FILE_SIZES[getFileName(options)] || 0\n}\n\nconst getFilePreloadSnippet = (mainFileName, altFileName, altTheme) => {\n return `\n\n\n`\n}\n\n/** @param {VersionOptions} options */\nconst getFileSnippet = ({ theme, isLegacy, isStandalone }) => {\n const fileName = getFileName({ theme, isLegacy, isStandalone })\n const stylesheetSnippet = ``\n\n if (!isLegacy || isStandalone) return stylesheetSnippet\n\n const altTheme = theme === 'dark' ? 'light' : 'dark'\n const mainStandaloneFile = getFileName({ theme, isLegacy: true, isStandalone: true })\n const altStandaloneFile = getFileName({ theme: altTheme, isLegacy: true, isStandalone: true })\n const preloadSnippet = getFilePreloadSnippet(mainStandaloneFile, altStandaloneFile, altTheme)\n\n return (preloadSnippet + '\\n\\n' + stylesheetSnippet).trim()\n}\n\nconst externalElements = {\n _phImage: document.querySelector('#js-producthunt'),\n _stylesheet: document.querySelector('#js-stylesheet'),\n\n updateStylesheet(href) {\n this._stylesheet.href = href\n },\n updateProductHunt(theme) {\n this._phImage.src = this._phImage.src.replace(/dark|light/, theme)\n },\n /** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */\n update(options, preferedColorScheme) {\n const { theme, isStandalone } = options\n const href = DEV_BASE + getFileName(options)\n const visibleTheme = isStandalone ? theme : preferedColorScheme || theme\n\n this.updateStylesheet(href)\n this.updateProductHunt(visibleTheme)\n },\n}\n\nconst createColorSchemeListener = (theme, queryHandler) => {\n const mediaQuery = matchMedia(`(prefers-color-scheme: ${theme})`)\n mediaQuery.addListener(query => queryHandler(query.matches))\n queryHandler(mediaQuery.matches)\n}\n\nnew Vue({\n el: '#installation',\n filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) },\n data: {\n versionOptions: { theme: 'dark', isStandalone: false, isLegacy: false },\n preferedColorScheme: null,\n copyStatus: null,\n },\n computed: {\n selectedVersion() {\n return {\n fileName: getFileName(this.versionOptions),\n fileSize: getFileSize(this.versionOptions).toFixed(2),\n fileSnippet: getFileSnippet(this.versionOptions),\n }\n },\n },\n created() {\n createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))\n createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))\n\n if (this.preferedColorScheme) externalElements.updateProductHunt(this.preferedColorScheme)\n },\n methods: {\n copyToClipboard() {\n Promise.resolve()\n .then(() => clipboard.writeText(this.selectedVersion.fileSnippet))\n .then(() => (this.copyStatus = 'success'))\n .catch(() => (this.copyStatus = 'failed'))\n setTimeout(() => (this.copyStatus = undefined), 1000)\n },\n },\n watch: {\n preferedColorScheme(nextScheme) {\n externalElements.update(this.versionOptions, nextScheme)\n },\n versionOptions: {\n deep: true,\n handler(nextOptions) {\n externalElements.update(nextOptions, this.preferedColorScheme)\n },\n },\n },\n})\n"]} \ No newline at end of file +{"version":3,"sources":["script.js"],"names":["w","window","CDN_BASE","FILE_SIZES","dark.min.css","dark.standalone.min.css","dark-legacy.min.css","dark-legacy.standalone.min.css","light.min.css","light.standalone.min.css","light-legacy.min.css","light-legacy.standalone.min.css","getFileName","_ref","theme","legacySuffix","isLegacy","standaloneExt","isStandalone","concat","getFileSnippet","_ref3","fileName","stylesheetSnippet","_ref2","alternativeTheme","alternativeFile","getFilePreloadSnippet","trim","externalElements","_productHunt","document","querySelector","_stylesheet","_updateProductHunt","this","src","replace","_updateStylesheet","href","update","options","preferedTheme","displayedTheme","createColorSchemeListener","scheme","queryHandler","mediaQuery","matchMedia","addListener","query","matches","Vue","el","filters","capitalize","str","charAt","toUpperCase","slice","data","versionOptions","preferedColorScheme","copyStatus","computed","selectedVersion","fileSize","toFixed","fileSnippet","created","_this","match","methods","copyToClipboard","_this2","Promise","resolve","then","clipboard","writeText","setTimeout","watch","nextScheme","deep","handler","nextOptions"],"mappings":"AAAA,aAQA,IAAMA,EAAuCC,OAKvCC,EAAW,sDAGXC,EAAa,CACjBC,eAAgB,IAChBC,0BAA2B,KAC3BC,sBAAuB,MACvBC,iCAAkC,KAClCC,gBAAiB,IACjBC,2BAA4B,IAC5BC,uBAAwB,KAAQ,KAAO,KACvCC,kCAAmC,MAI/BC,EAAc,SAAAC,GAAqE,IAApCC,EAAoCD,EAApCC,MAC7CC,EADiFF,EAA7BG,SAC1B,UAAY,GACtCC,EAFiFJ,EAAnBK,aAE/B,cAAgB,GACrD,MAAA,GAAAC,OAAmCL,GAAnCK,OAA2CJ,GAA3CI,OAA0DF,EAA1D,aAmBIG,EAAiB,SAAAC,GAAqE,IAApCP,EAAoCO,EAApCP,MAAOE,EAA6BK,EAA7BL,SAAUE,EAAmBG,EAAnBH,aACjEI,EAAWV,EAAY,CAAEE,MAAAA,EAAOE,SAAAA,EAAUE,aAAAA,IAC1CK,EAAiB,gCAAAJ,OAAmCjB,GAAnCiB,OAA8CG,EAA9C,MAEvB,OAAKN,GAAYE,EAAqBK,GAfV,SAAAC,GAAqE,IAApCV,EAAoCU,EAApCV,MAAOE,EAA6BQ,EAA7BR,SAAUE,EAAmBM,EAAnBN,aACxEO,EAA6B,SAAVX,EAAmB,QAAU,OAChDY,EAAkBd,EAAY,CAAEE,MAAOW,EAAkBT,SAAAA,EAAUE,aAAAA,IAEzE,MAAA,sGAAAC,OAEqCjB,GAFrCiB,OAEgDP,EAAY,CAAEE,MAAAA,EAAOE,SAAAA,EAAUE,aAAAA,IAF/E,6CAAAC,OAGqCjB,GAHrCiB,OAGgDO,EAHhD,oCAAAP,OAGkGM,EAHlG,OAauBE,CAAsB,CAAEb,MAAAA,EAAOE,SAAAA,EAAUE,cAAc,IACrD,OAASK,GAAmBK,QAKjDC,EAAmB,CACvBC,aAA+CC,SAASC,cAAc,mBACtEC,YAA6CF,SAASC,cAAc,kBACpEE,mBAHuB,SAGiBpB,GACtCqB,KAAKL,aAAaM,IAAMD,KAAKL,aAAaM,IAAIC,QAAQ,aAAcvB,IAEtEwB,kBANuB,SAMmBhB,GACxCa,KAAKF,YAAYM,KA1DJ,MA0DsBjB,GAIrCkB,OAXuB,SAWcC,EAA+BC,GAClE,IAAMC,EAAiBF,EAAQvB,aAAeuB,EAAQ3B,MAAQ4B,GAAiBD,EAAQ3B,MAEvFqB,KAAKG,kBAAkB1B,EAAY6B,IACnCN,KAAKD,mBAAmBS,KAStBC,EAA4B,SAACC,EAAQC,GACzC,IAAMC,EAAa/C,EAAEgD,WAAF,0BAAA7B,OAAuC0B,EAAvC,MACnBE,EAAWE,YAAY,SAAAC,GAAK,OAAIJ,EAAaI,EAAMC,WACnDL,EAAaC,EAAWI,UAS1B,IAAInD,EAAEoD,IAAI,CACRC,GAAI,gBACJC,QAAS,CACPC,WAAY,SAAuBC,GAAvB,OAA+BA,EAAIC,OAAO,GAAGC,cAAgBF,EAAIG,MAAM,KAGrFC,KAAM,CACJC,eAAgB,CAAE/C,MAA6B,OAASI,cAAc,EAAOF,UAAU,GACvF8C,oBAAqB,KACrBC,WAAY,MAEdC,SAAU,CAERC,gBAFQ,WAGN,MAAO,CACL3C,SAAUV,EAAYuB,KAAK0B,gBAC3BK,UA/E2CzB,EA+ErBN,KAAK0B,eA/E4B1D,EAAWS,EAAY6B,KAAa,GA+EhD0B,QAAQ,GACnDC,YAAahD,EAAee,KAAK0B,iBAhFrB,IAA+BpB,IAoFjD4B,QArBQ,WAqBE,IAAAC,EAAAnC,KACRS,EAA0B,OAAQ,SAAA2B,GAAK,OAAIA,IAAUD,EAAKR,oBAAsB,UAChFlB,EAA0B,QAAS,SAAA2B,GAAK,OAAIA,IAAUD,EAAKR,oBAAsB,WAE7E3B,KAAK2B,qBAAqBjC,EAAiBK,mBAAmBC,KAAK2B,sBAEzEU,QAAS,CACPC,gBADO,WACW,IAAAC,EAAAvC,KAChBwC,QAAQC,UACLC,KAAK,WAAA,OAAM7E,EAAE8E,UAAUC,UAAUL,EAAKT,gBAAgBG,eACtDS,KAAK,WAAA,OAAOH,EAAKX,WAAa,YAFjC,MAGS,WAAA,OAAOW,EAAKX,WAAa,WAClCiB,WAAW,WAAA,OAAON,EAAKX,WAAa,MAAO,OAG/CkB,MAAO,CACLnB,oBADK,SACoCoB,GACvCrD,EAAiBW,OAAOL,KAAK0B,eAAgBqB,IAE/CrB,eAAgB,CACdsB,MAAM,EACNC,QAFc,SAEwBC,GACpCxD,EAAiBW,OAAO6C,EAAalD,KAAK2B","file":"script.js","sourcesContent":["// @ts-check\n/** @typedef {'dark' | 'light'} Theme */\n/** @typedef {keyof typeof FILE_SIZES} FileName */\n/** @typedef {'success' | 'failed'} CopyStatus */\n/** @typedef {{ Vue: typeof import('vue').default, clipboard: Clipboard }} Libraries */\n/** @typedef {{ theme: Theme, isLegacy: boolean, isStandalone: boolean }} VersionOptions */\n\n/** Reference to global window, but with properties for loaded libraries. */\nconst w = /** @type {Window & Libraries} */ (window)\n\n/** The base URI from where the docs page loads the CSS files. */\nconst DEV_BASE = '../'\n/** The base URI from where instructions show to load the CSS files. */\nconst CDN_BASE = 'https://cdn.jsdelivr.net/gh/kognise/water.css/dist/'\n\n/** An object mapping the (minified + gzipped) fileSize in KB to a fileName. */\nconst FILE_SIZES = {\n 'dark.min.css': 1.4,\n 'dark.standalone.min.css': 1.31,\n 'dark-legacy.min.css': 0.177 + 1.16 + 1.15,\n 'dark-legacy.standalone.min.css': 1.16,\n 'light.min.css': 1.4,\n 'light.standalone.min.css': 1.3,\n 'light-legacy.min.css': 0.178 + 1.16 + 1.15,\n 'light-legacy.standalone.min.css': 1.15,\n}\n\n/** Takes in version options and returns the respective CSS file name. */\nconst getFileName = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n const legacySuffix = isLegacy ? '-legacy' : ''\n const standaloneExt = isStandalone ? '.standalone' : ''\n return /** @type {FileName} */ (`${theme}${legacySuffix}${standaloneExt}.min.css`)\n}\n\n/** Takes in version options and returns the corresponding file size in KB. */\nconst getFileSize = (/** @type {VersionOptions} */ options) => FILE_SIZES[getFileName(options)] || 0\n\n/** Takes in version options and returns an HTML snippet that preloads the main stylesheet and\n * conditionally preloads the alternative stylesheet (if the alternative theme is active). */\nconst getFilePreloadSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n const alternativeTheme = theme === 'dark' ? 'light' : 'dark'\n const alternativeFile = getFileName({ theme: alternativeTheme, isLegacy, isStandalone })\n\n return `\n\n\n`\n}\n\n/** Takes in version options and returns the code snippet instructing users how to load the file. */\nconst getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n const fileName = getFileName({ theme, isLegacy, isStandalone })\n const stylesheetSnippet = ``\n\n if (!isLegacy || isStandalone) return stylesheetSnippet\n\n const preloadSnippet = getFilePreloadSnippet({ theme, isLegacy, isStandalone: true })\n return (preloadSnippet + '\\n\\n' + stylesheetSnippet).trim()\n}\n\n/** Handles elements external to the version picker that still need to be kept\n * up to date with the current version, e.g. switching images from dark to light. */\nconst externalElements = {\n _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),\n _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),\n _updateProductHunt(/** @type {Theme} */ theme) {\n this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)\n },\n _updateStylesheet(/** @type {FileName} */ fileName) {\n this._stylesheet.href = DEV_BASE + fileName\n },\n\n /** Takes current version + the user's prefered scheme and updates all external elements. */\n update(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {\n const displayedTheme = options.isStandalone ? options.theme : preferedTheme || options.theme\n\n this._updateStylesheet(getFileName(options))\n this._updateProductHunt(displayedTheme)\n },\n}\n\n/**\n * Sets up a media query for the given color scheme and runs the callback on change.\n * @param {Theme} scheme\n * @param {(matches: boolean) => any} queryHandler\n */\nconst createColorSchemeListener = (scheme, queryHandler) => {\n const mediaQuery = w.matchMedia(`(prefers-color-scheme: ${scheme})`)\n mediaQuery.addListener(query => queryHandler(query.matches))\n queryHandler(mediaQuery.matches)\n}\n\n/** @typedef {Object} VueData\n * @prop {VersionOptions} versionOptions\n * @prop {?CopyStatus} copyStatus\n * @prop {?Theme} preferedColorScheme\n */\n\nnew w.Vue({\n el: '#installation',\n filters: {\n capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1),\n },\n /** @type {VueData} */\n data: {\n versionOptions: { theme: /** @type {Theme} */ ('dark'), isStandalone: false, isLegacy: false },\n preferedColorScheme: null,\n copyStatus: null,\n },\n computed: {\n /** @returns {{ fileName: string, fileSize: string, fileSnippet: string }} */\n selectedVersion() {\n return {\n fileName: getFileName(this.versionOptions),\n fileSize: getFileSize(this.versionOptions).toFixed(2),\n fileSnippet: getFileSnippet(this.versionOptions),\n }\n },\n },\n created() {\n createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))\n createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))\n\n if (this.preferedColorScheme) externalElements._updateProductHunt(this.preferedColorScheme)\n },\n methods: {\n copyToClipboard() {\n Promise.resolve()\n .then(() => w.clipboard.writeText(this.selectedVersion.fileSnippet))\n .then(() => (this.copyStatus = 'success'))\n .catch(() => (this.copyStatus = 'failed'))\n setTimeout(() => (this.copyStatus = null), 1000)\n },\n },\n watch: {\n preferedColorScheme(/** @type {Theme} */ nextScheme) {\n externalElements.update(this.versionOptions, nextScheme)\n },\n versionOptions: {\n deep: true,\n handler(/** @type {VersionOptions} */ nextOptions) {\n externalElements.update(nextOptions, this.preferedColorScheme)\n },\n },\n },\n})\n"]} \ No newline at end of file diff --git a/docs/script.js b/docs/script.js index 1a1b4b0..975f01e 100644 --- a/docs/script.js +++ b/docs/script.js @@ -1,10 +1,12 @@ -/** - * Type definition for the version object used throughout the code - * @typedef {Object} VersionOptions - * @prop {'dark' | 'light'} theme - * @prop {boolean} isLegacy - * @prop {boolean} isStandalone - */ +// @ts-check +/** @typedef {'dark' | 'light'} Theme */ +/** @typedef {keyof typeof FILE_SIZES} FileName */ +/** @typedef {'success' | 'failed'} CopyStatus */ +/** @typedef {{ Vue: typeof import('vue').default, clipboard: Clipboard }} Libraries */ +/** @typedef {{ theme: Theme, isLegacy: boolean, isStandalone: boolean }} VersionOptions */ + +/** Reference to global window, but with properties for loaded libraries. */ +const w = /** @type {Window & Libraries} */ (window) /** The base URI from where the docs page loads the CSS files. */ const DEV_BASE = '../' @@ -23,74 +25,90 @@ const FILE_SIZES = { 'light-legacy.standalone.min.css': 1.15, } -/** @param {VersionOptions} options */ -const getFileName = ({ theme, isLegacy, isStandalone }) => { - return `${theme}${isLegacy ? '-legacy' : ''}${isStandalone ? '.standalone' : ''}.min.css` +/** Takes in version options and returns the respective CSS file name. */ +const getFileName = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => { + const legacySuffix = isLegacy ? '-legacy' : '' + const standaloneExt = isStandalone ? '.standalone' : '' + return /** @type {FileName} */ (`${theme}${legacySuffix}${standaloneExt}.min.css`) } -/** @param {VersionOptions} options */ -const getFileSize = options => { - return FILE_SIZES[getFileName(options)] || 0 -} +/** Takes in version options and returns the corresponding file size in KB. */ +const getFileSize = (/** @type {VersionOptions} */ options) => FILE_SIZES[getFileName(options)] || 0 + +/** Takes in version options and returns an HTML snippet that preloads the main stylesheet and + * conditionally preloads the alternative stylesheet (if the alternative theme is active). */ +const getFilePreloadSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => { + const alternativeTheme = theme === 'dark' ? 'light' : 'dark' + const alternativeFile = getFileName({ theme: alternativeTheme, isLegacy, isStandalone }) -const getFilePreloadSnippet = (mainFileName, altFileName, altTheme) => { return ` - -` + +` } -/** @param {VersionOptions} options */ -const getFileSnippet = ({ theme, isLegacy, isStandalone }) => { +/** Takes in version options and returns the code snippet instructing users how to load the file. */ +const getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => { const fileName = getFileName({ theme, isLegacy, isStandalone }) const stylesheetSnippet = `` if (!isLegacy || isStandalone) return stylesheetSnippet - const altTheme = theme === 'dark' ? 'light' : 'dark' - const mainStandaloneFile = getFileName({ theme, isLegacy: true, isStandalone: true }) - const altStandaloneFile = getFileName({ theme: altTheme, isLegacy: true, isStandalone: true }) - const preloadSnippet = getFilePreloadSnippet(mainStandaloneFile, altStandaloneFile, altTheme) - + const preloadSnippet = getFilePreloadSnippet({ theme, isLegacy, isStandalone: true }) return (preloadSnippet + '\n\n' + stylesheetSnippet).trim() } +/** 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 = { - _phImage: document.querySelector('#js-producthunt'), - _stylesheet: document.querySelector('#js-stylesheet'), - - updateStylesheet(href) { - this._stylesheet.href = href + _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')), + _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')), + _updateProductHunt(/** @type {Theme} */ theme) { + this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme) }, - updateProductHunt(theme) { - this._phImage.src = this._phImage.src.replace(/dark|light/, theme) + _updateStylesheet(/** @type {FileName} */ fileName) { + this._stylesheet.href = DEV_BASE + fileName }, - /** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */ - update(options, preferedColorScheme) { - const { theme, isStandalone } = options - const href = DEV_BASE + getFileName(options) - const visibleTheme = isStandalone ? theme : preferedColorScheme || theme - this.updateStylesheet(href) - this.updateProductHunt(visibleTheme) + /** 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 + + this._updateStylesheet(getFileName(options)) + this._updateProductHunt(displayedTheme) }, } -const createColorSchemeListener = (theme, queryHandler) => { - const mediaQuery = matchMedia(`(prefers-color-scheme: ${theme})`) +/** + * Sets up a media query for the given color scheme and runs the callback on change. + * @param {Theme} scheme + * @param {(matches: boolean) => any} queryHandler + */ +const createColorSchemeListener = (scheme, queryHandler) => { + const mediaQuery = w.matchMedia(`(prefers-color-scheme: ${scheme})`) mediaQuery.addListener(query => queryHandler(query.matches)) queryHandler(mediaQuery.matches) } -new Vue({ +/** @typedef {Object} VueData + * @prop {VersionOptions} versionOptions + * @prop {?CopyStatus} copyStatus + * @prop {?Theme} preferedColorScheme + */ + +new w.Vue({ el: '#installation', - filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) }, + filters: { + capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1), + }, + /** @type {VueData} */ data: { - versionOptions: { theme: 'dark', isStandalone: false, isLegacy: false }, + versionOptions: { theme: /** @type {Theme} */ ('dark'), isStandalone: false, isLegacy: false }, preferedColorScheme: null, copyStatus: null, }, computed: { + /** @returns {{ fileName: string, fileSize: string, fileSnippet: string }} */ selectedVersion() { return { fileName: getFileName(this.versionOptions), @@ -103,24 +121,24 @@ new Vue({ createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark')) createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light')) - if (this.preferedColorScheme) externalElements.updateProductHunt(this.preferedColorScheme) + if (this.preferedColorScheme) externalElements._updateProductHunt(this.preferedColorScheme) }, methods: { copyToClipboard() { Promise.resolve() - .then(() => clipboard.writeText(this.selectedVersion.fileSnippet)) + .then(() => w.clipboard.writeText(this.selectedVersion.fileSnippet)) .then(() => (this.copyStatus = 'success')) .catch(() => (this.copyStatus = 'failed')) - setTimeout(() => (this.copyStatus = undefined), 1000) + setTimeout(() => (this.copyStatus = null), 1000) }, }, watch: { - preferedColorScheme(nextScheme) { + preferedColorScheme(/** @type {Theme} */ nextScheme) { externalElements.update(this.versionOptions, nextScheme) }, versionOptions: { deep: true, - handler(nextOptions) { + handler(/** @type {VersionOptions} */ nextOptions) { externalElements.update(nextOptions, this.preferedColorScheme) }, }, diff --git a/package.json b/package.json index 81b1b5a..9f919b0 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ "postcss-color-mod-function": "^3.0.3", "postcss-css-variables": "^0.12.0", "postcss-import": "^12.0.1", - "posthtml-include": "^1.2.0" + "posthtml-include": "^1.2.0", + "vue": "^2.6.10" }, "browserslist": [ "defaults AND not android 4.4.3" diff --git a/yarn.lock b/yarn.lock index 3536cea..aeb7951 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6459,6 +6459,11 @@ vinyl@^2.0.0: remove-trailing-separator "^1.0.1" replace-ext "^1.0.0" +vue@^2.6.10: + version "2.6.10" + resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637" + integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ== + w3c-hr-time@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"