See #906 - sets optimization options inline.

Why:

* It's not fully intuitive to have an `Apply` button at the bottom of
  the form and require users to find it;
* instead options are set now automatically upon change.

diff --git a/docs/css/home.css b/docs/css/home.css
index da1f82b..6ff531c 100644 (file)
--- a/docs/css/home.css
+++ b/docs/css/home.css
@@ -193,13 +193,6 @@ noscript {
   width: 100%;
 }
 
-.settings__option--apply {
-  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 1228b96..8052674 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -102,7 +102,7 @@
               </select>
             </li>
             <li class="fine-grained-options__option">
-              <select class="settings__option settings__option--select" id="level_1_keep_special_comments" name="level_1[keepSpecialComments]">
+              <select class="settings__option settings__option--select js-settings-option" id="level_1_keep_special_comments" name="level_1[keepSpecialComments]">
                 <option value="*" selected>Special comments: keep all</option>
                 <option value="1">Special comments: remove all but the first one</option>
                 <option value="0">Special comments: remove all</option>
@@ -182,7 +182,7 @@
             </select>
           </div>
           <div class="settings__group__wrapper">
-            <input class="settings__option settings__option--checkbox js-settings-format" type="checkbox" id="format" name="format" />
+            <input class="settings__option settings__option--checkbox js-settings-format js-settings-option" type="checkbox" id="format" name="format" />
             <label class="settings__label" for="format">output formatting</label>
           </div>
           <ul class="fine-grained-options fine-grained-options--hidden js-settings-format-options" data-visibility-class="fine-grained-options--hidden">
@@ -249,9 +249,6 @@
             </li>
           </ul>
         </fieldset>
-        <fieldset class="settings__group">
-          <input class="settings__option settings__option--apply js-settings-apply" type="button" name="" value="Apply"/>
-        </fieldset>
       </form>
     </section>
     <p class="legend">

diff --git a/docs/js/settings.js b/docs/js/settings.js
index ac9e119..8a138ca 100644 (file)
--- a/docs/js/settings.js
+++ b/docs/js/settings.js
@@ -3,10 +3,6 @@
 
   function show(settingsForm) {
     return function (event) {
-      if (event.target.classList.contains('settings__option--apply')) {
-        return
-      }
-
       if (settingsForm.classList.contains('settings--collapsed')) {
         event.preventDefault()
         settingsForm.classList.remove('settings--collapsed')
@@ -22,20 +18,20 @@
     }
   }
 
-  function hide(settingsForm) {
-    return function (event) {
-      event.preventDefault()
-      settingsForm.classList.add('settings--collapsed')
-    }
-  }
-
   function setOptionsFrom(settingsForm) {
     var compatibilityNode = settingsForm.querySelector('.js-settings-compatibility')
     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')
 
-    return function () {
+    return function (event) {
+      var viaInputNode = event && event.target.classList.contains('js-settings-option')
+      var viaLabelNode = event && event.target.control && event.target.control.classList.contains('js-settings-option')
+
+      if (event && !viaInputNode && !viaLabelNode) {
+        return
+      }
+
       Optimizer.options = {
         compatibility: compatibilityNode.value,
         format: formattingEnabled(settingsForm) ?
@@ -121,14 +117,13 @@
     var level1Checkbox = settingsForm.querySelector('.js-settings-level-1')
     var level2Checkbox = settingsForm.querySelector('.js-settings-level-2')
     var formattingCheckbox = settingsForm.querySelector('.js-settings-format')
-    var applySettingsButton = settingsForm.querySelector('.js-settings-apply')
 
     settingsForm.addEventListener('click', show(settingsForm), false)
+    settingsForm.addEventListener('click', setOptionsFrom(settingsForm), false)
+    settingsForm.addEventListener('blur', setOptionsFrom(settingsForm), false)
     level1Checkbox.addEventListener('click', toggleOptions(level1Checkbox), false)
     level2Checkbox.addEventListener('click', toggleOptions(level2Checkbox), false)
     formattingCheckbox.addEventListener('click', toggleOptions(formattingCheckbox), false)
-    applySettingsButton.addEventListener('click', hide(settingsForm), false)
-    applySettingsButton.addEventListener('click', setOptionsFrom(settingsForm), false)
 
     setOptionsFrom(settingsForm)()
   })