From eabe7b25852f04dcc2ca7324406bfa32ae7fc817 Mon Sep 17 00:00:00 2001
From: jacobherrington <jacobherringtondeveloper@gmail.com>
Date: Fri, 21 Jun 2019 18:19:49 -0500
Subject: [PATCH] Change button copy on theme preview
This commit makes the dark mode preview feel a little more interactive
and it also pulls some duplicated code into one file so that people like
me aren't stumped when they are looking at the wrong page!
---
assets/js/dark-mode-preview.js | 23 +++++++++++++++++++++++
docs/configuration.md | 15 +--------------
docs/customization.md | 15 +--------------
3 files changed, 25 insertions(+), 28 deletions(-)
create mode 100644 assets/js/dark-mode-preview.js
diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js
new file mode 100644
index 00000000..addfb27c
--- /dev/null
+++ b/assets/js/dark-mode-preview.js
@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", function(){
+
+ const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
+ const cssFile = document.querySelector('[rel="stylesheet"]')
+ const originalCssRef = cssFile.getAttribute('href')
+ const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
+ const buttonCopy = ['Return to the light side', 'Preview dark color scheme']
+ const updateButtonText = function(toggleDarkMode) {
+ toggleDarkMode.textContent === buttonCopy[0] ?
+ toggleDarkMode.textContent = buttonCopy[1] :
+ toggleDarkMode.textContent = buttonCopy[0]
+ }
+
+ addEvent(toggleDarkMode, 'click', function(){
+ if (cssFile.getAttribute('href') === originalCssRef) {
+ cssFile.setAttribute('href', darkModeCssRef)
+ updateButtonText(toggleDarkMode)
+ } else {
+ cssFile.setAttribute('href', originalCssRef)
+ updateButtonText(toggleDarkMode)
+ }
+ })
+})
\ No newline at end of file
diff --git a/docs/configuration.md b/docs/configuration.md
index 4a4caef0..cc4b92a6 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -46,20 +46,7 @@ color_scheme: "dark"
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
-<script>
-const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
-const cssFile = document.querySelector('[rel="stylesheet"]')
-const originalCssRef = cssFile.getAttribute('href')
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
-
-addEvent(toggleDarkMode, 'click', function(){
- if (cssFile.getAttribute('href') === originalCssRef) {
- cssFile.setAttribute('href', darkModeCssRef)
- } else {
- cssFile.setAttribute('href', originalCssRef)
- }
-})
-</script>
+<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
diff --git a/docs/customization.md b/docs/customization.md
index f3fe1c03..af9d29e3 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -34,20 +34,7 @@ color_scheme: "dark"
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
-<script>
-const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
-const cssFile = document.querySelector('[rel="stylesheet"]')
-const originalCssRef = cssFile.getAttribute('href')
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
-
-addEvent(toggleDarkMode, 'click', function(){
- if (cssFile.getAttribute('href') === originalCssRef) {
- cssFile.setAttribute('href', darkModeCssRef)
- } else {
- cssFile.setAttribute('href', originalCssRef)
- }
-})
-</script>
+<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
## Specific visual customization
--
GitLab