From bab61089611ef7d7ac3fde9d3764caee25c0b271 Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Mon, 23 Jan 2017 11:00:36 +0100 Subject: [PATCH] See #858 - updates web interface for clean-css 4. Why: * 4.0 changes lots of options and web users should still be able to apply all of them. --- docs/css/home.css | 23 +++- docs/index.html | 246 +++++++++++++++++++++++++++++++----- docs/js/optimizer-worker.js | 2 +- docs/js/settings.js | 118 +++++++++++++---- 4 files changed, 321 insertions(+), 68 deletions(-) diff --git a/docs/css/home.css b/docs/css/home.css index 35f0f789..da1f82b1 100644 --- a/docs/css/home.css +++ b/docs/css/home.css @@ -169,16 +169,27 @@ noscript { color: hsl(0, 0%, 40%); } -.settings__option--precision { - text-align: center; - width: 2.5rem; +.fine-grained-options { + border-left: 0.25rem solid hsl(198, 16%, 52%); + display: block; + list-style: none; + padding-left: 0.75rem; } -.settings__option--compatibility { - width: 100%; +.fine-grained-options--hidden { + display: none; +} + +.fine-grained-options__option { + margin-bottom: 0.125rem; +} + +.settings__option--number { + text-align: center; + width: 2.5rem; } -.settings__option--keep-special-comments { +.settings__option--select { width: 100%; } diff --git a/docs/index.html b/docs/index.html index 7d7785ba..17c59f0b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,60 +19,238 @@
    -
    +
    - - + +
    - - + +
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + +
      • +
    • + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    - - -
    -
    - - -
    -
    - - + +
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    - - -
    -
    - - -
    -
    - + + + +
    - + +
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + + +
      • +
    - +
    diff --git a/docs/js/optimizer-worker.js b/docs/js/optimizer-worker.js index 2c9ec6a8..cbb9a8d4 100644 --- a/docs/js/optimizer-worker.js +++ b/docs/js/optimizer-worker.js @@ -5,7 +5,7 @@ onmessage = function(event) { case 'initialize': if (!initialized) { initialized = true - importScripts('//jakubpawlowicz.github.io/clean-css-builds/v3.4.24.js') + importScripts('//jakubpawlowicz.github.io/clean-css-builds/v4.0.0.js') } break case 'optimize': diff --git a/docs/js/settings.js b/docs/js/settings.js index 7e200f2f..57d63d2e 100644 --- a/docs/js/settings.js +++ b/docs/js/settings.js @@ -1,8 +1,11 @@ (function () { + var OPTION_NAME_PATTERN = /^\S+\[(\w+)\]$/ + function show(settingsForm) { return function (event) { - if (event.target.classList.contains('settings__option--apply')) + if (event.target.classList.contains('settings__option--apply')) { return + } if (settingsForm.classList.contains('settings--collapsed')) { event.preventDefault() @@ -11,6 +14,14 @@ } } + function toggleOptions(checkboxNode) { + var toggableNode = checkboxNode.parentNode.nextElementSibling + + return function (event) { + toggableNode.classList.toggle(toggableNode.dataset.visibilityClass) + } + } + function hide(settingsForm) { return function (event) { event.preventDefault() @@ -19,51 +30,104 @@ } 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 () { Optimizer.options = { - advanced: settingsForm.querySelector('[name=advanced]').checked, - aggressiveMerging: settingsForm.querySelector('[name=aggressive-merging]').checked, - compatibility: settingsForm.querySelector('[name=compatibility]').value, - keepBreaks: settingsForm.querySelector('[name=keep-breaks]').checked, - keepSpecialComments: keepSpecialCommentsFrom(settingsForm.querySelector('[name=keep-special-comments]').value), - mediaMerging: settingsForm.querySelector('[name=media-merging]').checked, - processImport: false, + compatibility: compatibilityNode.value, + format: formattingEnabled(settingsForm) ? + mapFormatOptions(formatOptionsContainer) : + false, + inline: ['local'], rebase: false, - restructuring: settingsForm.querySelector('[name=restructuring]').checked, - roundingPrecision: parseInt(settingsForm.querySelector('[name=rounding-precision]').value), - shorthandCompacting: settingsForm.querySelector('[name=shorthand-compacting]').checked + level: { + 0: true, + 1: levelEnabled(settingsForm, 1) ? + mapOptionsIn(level1OptionsContainer) : + false, + 2: levelEnabled(settingsForm, 2) ? + mapOptionsIn(level2OptionsContainer) : + false + } } } } - function keepSpecialCommentsFrom(value) { - if (/^\d+$/.test(value)) { - return parseInt(value) - } else { - return value + function formattingEnabled(settingsForm) { + return settingsForm.querySelector('.js-settings-format').checked + } + + function mapFormatOptions(containerNode) { + var allOptions = mapOptionsIn(containerNode) + + return { + breaks: { + afterAtRule: allOptions.afterAtRule, + afterBlockBegins: allOptions.afterBlockBegins, + afterBlockEnds: allOptions.afterBlockEnds, + afterComment: allOptions.afterComment, + afterProperty: allOptions.afterProperty, + afterRuleBegins: allOptions.afterRuleBegins, + afterRuleEnds: allOptions.afterRuleEnds, + beforeBlockEnds: allOptions.beforeBlockEnds, + betweenSelectors: allOptions.betweenSelectors + }, + indentBy: parseInt(allOptions.indentBy), + indentWith: allOptions.indentWith, + spaces: { + aroundSelectorRelation: allOptions.aroundSelectorRelation, + beforeBlockBegins: allOptions.beforeBlockBegins, + beforeValue: allOptions.beforeValue + }, + wrapAt: allOptions.wrapAt.length > 0 ? + parseInt(allOptions.wrapAt) : + false } } - function toggleAdvancedOptionsIn(settingsForm) { - var checkboxNodes = settingsForm.querySelectorAll('.settings__group--advanced .settings__option--checkbox') + function levelEnabled(settingsForm, levelNumber) { + return settingsForm.querySelector('.js-settings-level-' + levelNumber).checked + } - return function () { - Array.prototype.slice.call(checkboxNodes, 1).forEach(function (node) { - node.disabled = !node.disabled - node.checked = !node.checked - }) + function mapOptionsIn(containerNode) { + var allOptionNodes = containerNode.querySelectorAll('.js-settings-option') + + return Array.prototype.slice.call(allOptionNodes, 0) + .reduce(function (accumulator, optionNode) { + var name = optionNode.name + var value = extractValue(optionNode) + var optionName = OPTION_NAME_PATTERN.exec(name)[1] + + accumulator[optionName] = value + + return accumulator + }, {}) + } + + function extractValue(node) { + if (node.type == 'checkbox') { + return node.checked + } else { + return node.value } } window.addEventListener('DOMContentLoaded', function () { - var settingsForm = document.querySelector('.settings') - var applySettingsButton = settingsForm.querySelector('.settings__option--apply') - var advancedOptionNode = settingsForm.querySelector('.settings__option--advanced') + var settingsForm = document.querySelector('.js-settings') + 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) + 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) - advancedOptionNode.addEventListener('click', toggleAdvancedOptionsIn(settingsForm), false) setOptionsFrom(settingsForm)() }) -- 2.34.1