See #906 - adds 'reset settings' button.

Why:

* So users can reset settings form to default values if needed.

diff --git a/docs/css/home.css b/docs/css/home.css
index 6ff531c..5acff71 100644 (file)
--- a/docs/css/home.css
+++ b/docs/css/home.css
@@ -193,6 +193,13 @@ noscript {
   width: 100%;
 }
 
+.settings__option--reset {
+  background: transparent;
+  border: 1px solid hsl(0, 0%, 80%);
+  float: right;
+  padding: 0.5rem 1rem;
+}
+
 .clipboard-copy {
   border: none;
   height: 2rem;

diff --git a/docs/index.html b/docs/index.html
index 8052674..ec26797 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -249,6 +249,9 @@
             </li>
           </ul>
         </fieldset>
+        <fieldset class="settings__group">
+          <input class="settings__option settings__option--reset js-settings-reset" type="reset" value="Reset settings to defaults" />
+        </fieldset>
       </form>
     </section>
     <p class="legend">

diff --git a/docs/js/settings.js b/docs/js/settings.js
index 8a138ca..ef46dfe 100644 (file)
--- a/docs/js/settings.js
+++ b/docs/js/settings.js
@@ -1,8 +1,13 @@
 (function () {
   var OPTION_NAME_PATTERN = /^\S+\[(\w+)\]$/
+  var DELAY_RESET_SETTINGS_BY = 250
 
   function show(settingsForm) {
     return function (event) {
+      if (event.target.classList.contains('js-settings-reset')) {
+        return
+      }
+
       if (settingsForm.classList.contains('settings--collapsed')) {
         event.preventDefault()
         settingsForm.classList.remove('settings--collapsed')
@@ -112,6 +117,21 @@
     }
   }
 
+  function resetSettings(settingsForm) {
+    var formatOptionsContainer = settingsForm.querySelector('.js-settings-format-options')
+    var level1OptionsContainer = settingsForm.querySelector('.js-settings-level-1-options')
+    var level2OptionsContainer = settingsForm.querySelector('.js-settings-level-2-options')
+    var setOptions = setOptionsFrom(settingsForm)
+
+    return function () {
+      formatOptionsContainer.classList.add(formatOptionsContainer.dataset.visibilityClass)
+      level1OptionsContainer.classList.remove(level1OptionsContainer.dataset.visibilityClass)
+      level2OptionsContainer.classList.add(level2OptionsContainer.dataset.visibilityClass)
+
+      setTimeout(setOptions, DELAY_RESET_SETTINGS_BY)
+    }
+  }
+
   window.addEventListener('DOMContentLoaded', function () {
     var settingsForm = document.querySelector('.js-settings')
     var level1Checkbox = settingsForm.querySelector('.js-settings-level-1')
@@ -121,6 +141,7 @@
     settingsForm.addEventListener('click', show(settingsForm), false)
     settingsForm.addEventListener('click', setOptionsFrom(settingsForm), false)
     settingsForm.addEventListener('blur', setOptionsFrom(settingsForm), false)
+    settingsForm.addEventListener('reset', resetSettings(settingsForm), false)
     level1Checkbox.addEventListener('click', toggleOptions(level1Checkbox), false)
     level2Checkbox.addEventListener('click', toggleOptions(level2Checkbox), false)
     formattingCheckbox.addEventListener('click', toggleOptions(formattingCheckbox), false)