Bug #5/#3, Markdown fix in README; add urlSetAnimationDuration()

* ... to `docs/lib/index` Javascript
nfreear · Apr 4, 2020 · 05dc072 · 05dc072
1 parent 9d3e85c
commit 05dc072
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ This is the current status, based on what I've managed to test so far!
 [sutarto-2012]: https://doi.org/10.1080%2F10803548.2012.11076959
 "A.P. Sutarto, M.N.A Wahab & N.M. Zin (2012) Resonant Breathing Biofeedback Training for Stress Reduction Among Manufacturing Operators, Internat. J. of Occupational Safety and Ergonomics, 18:4, 549-561, DOI: 10.1080/10803548.2012.11076959; Retrieved 04-April-2020"
 [moss-2004]: https://bfe.org/articles/issue1_final.pdf
-"Moss D. Heart rate variability (HRV) biofeedback. Psychophysiology Today. 2004;(1):4–11. Retrieved 04-April-2020.""
+"Moss D. Heart rate variability (HRV) biofeedback. Psychophysiology Today. 2004;(1):4–11. Retrieved 04-April-2020."
 [eddie]: https://eddiestern.com/the-breathing-app/
 [android]: https://play.google.com/store/apps/details?id=org.ayny.breathingapp#
   "The Breathing App, on Google Play for Android."

diff --git a/docs/lib/animate.css b/docs/lib/animate.css
@@ -15,7 +15,7 @@
   100% { r: 5%;  } /* 1s - hold */
 }
 
-/* A duration of 10 seconds equates to 6 breathes per second ;).
+/* A duration of 10 seconds equates to 6 breaths per minute ;).
 
    See: [moss-2004] & [sutarto-2012] in the README.
 */

diff --git a/docs/lib/app-about.html b/docs/lib/app-about.html
@@ -11,7 +11,7 @@
 }
 
 .app-about {
-  background: #fff;
+  background: #e8e8e8;
   border-top: 3px solid black;
   color: #333;
   bottom: 0;
@@ -53,7 +53,7 @@
 }
 
 .app-about .close-btn {
-  background: #ccc;
+  background: #d8d8d8;
   border: 2px solid #888;
   border-radius: 50%;
   color: #222;
@@ -64,6 +64,8 @@
   margin: 1rem;
   height: 3.6rem;
   width: 3.6rem;
+
+  padding-bottom: .3rem;
 }
 
 .app-about .close-btn:hover,

diff --git a/docs/lib/index.js b/docs/lib/index.js
@@ -21,6 +21,8 @@ const $BREATH = document.querySelector('#breath');
 ga('create', 'UA-8330079-9', 'auto');
 ga('send', 'pageview');
 
+urlSetAnimationDuration();
+
 let isPlaying = false;
 
 ['click', 'keypress'].map(evName => {
@@ -29,6 +31,23 @@ let isPlaying = false;
   $PAUSE_BTN.addEventListener(evName, ev => togglePlayPause(ev));
 });
 
+/**
+ * A duration of 10 seconds equates to 6 breaths per minute ;).
+ *   12s ~~ 5 breaths/min.
+ *   10s ~~ 6 bpm.
+ *    8s ~~ 7.5 bpm.
+ *
+ *  @see [moss-2004] & [sutarto-2012] in the README.
+ */
+function urlSetAnimationDuration () {
+  const M_DUR = window.location.search.match(/duration=(\d{1,2}(\.\d)?s)/);
+  const DURATION = M_DUR ? M_DUR[1] : '10s';
+
+  console.warn('animation-duration:', DURATION);
+
+  $BREATH.style.animationDuration = DURATION;
+}
+
 function togglePlayPause (ev) {
   ev.preventDefault();