From 563617155a50cf526d4901e0f0b3869403a9dbd9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 20 Aug 2024 08:34:53 +0300
Subject: [PATCH] docs(website): add slider demo

---
 demo/slider.html                             |  9 ++-
 website/docs/documentation/api.md            |  2 +-
 website/docs/documentation/events.md         |  2 +-
 website/docs/{guides => gallery}/scroller.md |  1 +
 website/docs/gallery/slider.md               | 75 ++++++++++++++++++++
 website/docs/gallery/slider.module.css       | 28 ++++++++
 website/docs/guides/slider.md                |  5 --
 website/docs/index.md                        |  4 +-
 website/sidebars.ts                          |  2 -
 website/src/css/custom.css                   |  2 +-
 10 files changed, 113 insertions(+), 17 deletions(-)
 rename website/docs/{guides => gallery}/scroller.md (53%)
 create mode 100644 website/docs/gallery/slider.md
 create mode 100644 website/docs/gallery/slider.module.css
 delete mode 100644 website/docs/guides/slider.md

diff --git a/demo/slider.html b/demo/slider.html
index 6ebf1eb..f1d34ca 100644
--- a/demo/slider.html
+++ b/demo/slider.html
@@ -61,10 +61,9 @@
   <script src="scripts/racing-bars.umd.js"></script>
   <script>
     let options = {
-      title: 'A Tale of 11 Years',
-      subTitle: 'Top 10 Surgical Procedures',
+      title: 'World Population',
+      subTitle: 'in millions',
       dateCounterFormat: 'MM/YYYY',
-      caption: 'Aswan Heart Centre',
       autorun: false,
     };
 
@@ -77,12 +76,12 @@
       slider.oninput = function () {
         racer.setDate(dates[slider.value]);
       };
-      document.addEventListener('racingBars/dateChange', (e) => {
+      document.addEventListener('dateChange', (e) => {
         slider.value = dates.indexOf(e.detail.date);
       });
     });
 
-    document.addEventListener('racingBars/dateChange', (e) => {
+    document.addEventListener('dateChange', (e) => {
       console.log(e.target);
       console.log(e.detail.date);
       console.log(e.detail.isFirst);
diff --git a/website/docs/documentation/api.md b/website/docs/documentation/api.md
index c3d9923..88f0f11 100644
--- a/website/docs/documentation/api.md
+++ b/website/docs/documentation/api.md
@@ -229,7 +229,7 @@ setTimeout(() => {
 ```
 
 See the guide on [Chart Controls](../guides/chart-controls.md) for other alternatives of controlling charts.
-See the guides on [Slider](../guides/slider.md) and [Scroller](../guides/scroller.md) for usage examples.
+See the examples for [Slider](../gallery/slider.md) and [Scroller](../gallery/scroller.md) for usage examples.
 
 ## Interfaces
 
diff --git a/website/docs/documentation/events.md b/website/docs/documentation/events.md
index 05d9a7b..c156ea5 100644
--- a/website/docs/documentation/events.md
+++ b/website/docs/documentation/events.md
@@ -7,7 +7,7 @@ title: Events
 When the chart loads and with each frame change (date change), a custom DOM event is fired.
 
 Listening to these events allows getting the current state of the chart and can be used with [chart controls](../guides/chart-controls.md) to interact with the chart.
-See the guide on creating a [slider](../guides/slider.md) for usage examples.
+See the example for creating a [slider](../gallery/slider.md).
 
 - Event type:
   - `"dateChange"`: fires when the date changes.
diff --git a/website/docs/guides/scroller.md b/website/docs/gallery/scroller.md
similarity index 53%
rename from website/docs/guides/scroller.md
rename to website/docs/gallery/scroller.md
index 096e242..6069655 100644
--- a/website/docs/guides/scroller.md
+++ b/website/docs/gallery/scroller.md
@@ -1,5 +1,6 @@
 ---
 title: Scroller
+hide_table_of_contents: true
 ---
 
 TODO...
diff --git a/website/docs/gallery/slider.md b/website/docs/gallery/slider.md
new file mode 100644
index 0000000..c96057f
--- /dev/null
+++ b/website/docs/gallery/slider.md
@@ -0,0 +1,75 @@
+---
+title: Slider
+hide_table_of_contents: true
+---
+
+import RacingBars from '../../src/components/RacingBars';
+import styles from './slider.module.css';
+
+A demo for using the [API](../documentation/api.md#race) to make a chart that can be controller by a slider.
+
+<!--truncate-->
+
+### Chart
+
+export let chartObj;
+
+export const callback = (racer, data) => {
+chartObj = racer;
+const container = document.querySelector('#slider-container');
+container.style.visibility = 'visible';
+const slider = document.getElementById('slider');
+const dates = racer.getAllDates();
+slider.max = dates.length - 1;
+slider.addEventListener('input', () => {
+racer.setDate(dates[slider.value]);
+});
+document.addEventListener('dateChange', (e) => {
+slider.value = dates.indexOf(e.detail.date);
+});
+};
+
+<div>
+  <RacingBars
+    dataUrl="/data/population.csv"
+    dataType="csv"
+    title="Chart Slider Demo"
+    callback={callback}
+    showCode={false}
+    height='window*0.7'
+  />
+</div>
+
+<div id="slider-container" class={styles.slider_container} style={{visibility: 'hidden'}}>
+  <input type="range" min="0" max="100" value="0" id="slider" class={styles.slider} />
+</div>
+
+### Code
+
+```html
+<div id="race"></div>
+<input type="range" min="0" max="100" value="0" id="slider" />
+
+<script type="module">
+  import { race } from 'https://cdn.jsdelivr.net/npm/racing-bars';
+
+  const options = {
+    title: 'Chart Slider Demo',
+  };
+
+  const racer = await race('/data/population.json', '#race', options);
+
+  const slider = document.getElementById('slider');
+  const dates = racer.getAllDates();
+
+  slider.max = dates.length - 1;
+  slider.addEventListener('input', () => {
+    racer.setDate(dates[slider.value]);
+  });
+  document.addEventListener('dateChange', (e) => {
+    slider.value = dates.indexOf(e.detail.date);
+  });
+</script>
+```
+
+<a href="https://livecodes.io/?x=id/yn3ptgz7j4r" target="_blank" class="external">Open in playground</a>
diff --git a/website/docs/gallery/slider.module.css b/website/docs/gallery/slider.module.css
new file mode 100644
index 0000000..5b8d150
--- /dev/null
+++ b/website/docs/gallery/slider.module.css
@@ -0,0 +1,28 @@
+.slider_container {
+  width: 90%;
+  margin: 20px auto;
+}
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;
+  background: #dedddd;
+  outline: none;
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary-light);
+  cursor: pointer;
+}
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary-light);
+  cursor: pointer;
+}
diff --git a/website/docs/guides/slider.md b/website/docs/guides/slider.md
deleted file mode 100644
index 8457754..0000000
--- a/website/docs/guides/slider.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Slider
----
-
-TODO...
diff --git a/website/docs/index.md b/website/docs/index.md
index 77ae0ba..90f88de 100644
--- a/website/docs/index.md
+++ b/website/docs/index.md
@@ -5,8 +5,8 @@ hide_table_of_contents: true
 
 <head>
   <title>RacingBars</title>
-  <meta property="og:title" content="RacingBars">
-  <meta name="twitter:title" content="RacingBars">
+  <meta property="og:title" content="RacingBars" />
+  <meta name="twitter:title" content="RacingBars" />
 </head>
 
 ### **Bar Chart Race Made Easy 🎉**
diff --git a/website/sidebars.ts b/website/sidebars.ts
index c3ce965..910f4ee 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -71,8 +71,6 @@ const sidebars: SidebarsConfig = {
         'guides/changing-options',
         'guides/fill-date-gaps',
         'guides/multiple-charts',
-        'guides/slider',
-        'guides/scroller',
       ],
     },
     {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index a8e6b61..157cb72 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -29,7 +29,7 @@
 }
 
 .gallery .racing-bars {
-  min-height: 400px;
+  min-height: 300px;
   width: 100%;
   height: 80vh;
 }