From 24ac4002055fcf6680c7a73af5f41cc6d981f567 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Sat, 30 May 2020 03:58:04 +0200
Subject: [PATCH] feat: add transitions for the code snippets

---
 docs/index.html |  8 ++++++--
 docs/script.js  |  9 +++++----
 docs/style.css  | 27 ++++++++++++++++++++++-----
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 95cbc0a..3fe3f07 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -114,7 +114,7 @@
     </div>
 
     <h2>Installation</h2>
-    <div id="installation" class="version-select">
+    <div id="installation">
       <header class="row version-select-snippet">
         <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
         <button type="button" id="copy-snippet">
@@ -122,7 +122,11 @@
         </button>
       </header>
 
-      <pre><code id="link-snippet">Oh noes, the JavaScript hasn't loaded!</code></pre>
+      <div id="link-snippet-container">
+        <pre id="link-snippet-auto"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/water.css"></code></pre>
+        <pre hidden id="link-snippet-dark"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/dark.css"></code></pre>
+        <pre hidden id="link-snippet-light"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/light.css"></code></pre>
+      </div>
 
       <h3>Options</h3>
       <form id="theme-form">
diff --git a/docs/script.js b/docs/script.js
index 02d72d0..3e79fb0 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,6 +1,5 @@
 'use strict'
 
-const cdnBase = 'https://cdn.jsdelivr.net/npm/water.css@2/dist/'
 const localBase = './water.css/'
 
 const fileSizes = {
@@ -10,10 +9,10 @@ const fileSizes = {
 }
 
 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 linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
 
 const table = {
   fileName: document.getElementById('table-file-name'),
@@ -33,12 +32,14 @@ const updateTheme = () => {
   const theme = themeForm.querySelector('input[name="theme"]:checked').value
 
   const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
-  const cdnUrl = `${cdnBase}${fileName}`
   const localUrl = `${localBase}${fileName}`
 
   stylesheet.href = localUrl
 
-  linkSnippet.innerText = `<link rel="stylesheet" href="${cdnUrl}">`
+  for (const snippet of linkSnippets) {
+    snippet.hidden = snippet.id.indexOf(theme) === -1
+  }
+
   table.fileName.innerText = fileName
   table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb`
 
diff --git a/docs/style.css b/docs/style.css
index 34b20f8..88e1e80 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -6,10 +6,6 @@ html {
   margin-top: 1rem;
 }
 
-.version-select {
-  overflow: hidden;
-}
-
 .version-select-snippet h3 {
   margin: 1rem 2.5rem 1rem 0;
 }
@@ -67,4 +63,25 @@ body > footer {
     Droid Sans,
     Helvetica Neue,
     sans-serif;
-}
\ No newline at end of file
+}
+
+#link-snippet-container {
+  overflow: hidden;
+  display: grid;
+  display: -ms-grid;
+  -ms-grid-columns: 1fr;
+}
+
+#link-snippet-container > pre {
+  overflow: auto;
+  grid-column: 1;
+  grid-row: 1;
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 220ms;
+}
+
+#link-snippet-container > pre[hidden] {
+  display: block;
+  visibility: hidden;
+  transform: scale(0);
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0ms 220ms;
+}