From: Jakub Pawlowicz Date: Tue, 1 Nov 2016 07:56:21 +0000 (+0100) Subject: See #260 - adds UI for changing optimization settings. X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?a=commitdiff_plain;h=2ae3317f714b9db59d3ca0b68990fed61d93c2da;p=clean-css.git See #260 - adds UI for changing optimization settings. Note: it disables advanced optimizations by default. Why: * To give users better control over how optimizations are applied. --- diff --git a/docs/css/home.css b/docs/css/home.css index b9db024a..79bc4415 100644 --- a/docs/css/home.css +++ b/docs/css/home.css @@ -17,6 +17,10 @@ a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, margin-top: 0; } +select { + font-size: 16px; +} + .logo__link { background: url(../img/logo.svg) no-repeat center 55%; display: block; @@ -35,25 +39,26 @@ a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, .drag-target { border: 5px dashed hsl(0, 0%, 90%); margin-bottom: 2rem; + padding: 1rem; + position: relative; +} + +.dropped-files { + list-style: none; min-height: 10rem; } -.drag-target:empty:before { +.dropped-files:empty:before { content: attr(title); color: hsl(0, 0%, 15%); display: block; font-weight: bold; - height: inherit; - padding-top: 3rem; + height: 10rem; + line-height: 12rem; text-align: center; text-transform: uppercase; } -.dropped-files { - list-style: none; - padding: 1rem; -} - .dropped-files__file { padding: 0.25rem 0.5rem; } @@ -97,6 +102,81 @@ a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, margin-left: 0.5rem; } +.settings:not(.settings--collapsed) { + border-top: 3px solid hsl(0, 0%, 90%); + margin-top: 2rem; + padding: 1rem 0 0; +} + +.settings--collapsed { + cursor: pointer; + height: 1rem; +} + +.settings--collapsed:before { + background: url(../img/gear.svg) center center no-repeat; + bottom: 1rem; + content: " "; + display: block; + height: 1.5rem; + right: 1rem; + position: absolute; + width: 1.5rem; +} + +.settings--collapsed > .settings__group { + display: none; +} + +.settings__group { + border: none; +} + +.settings__group { + padding: 0.25rem 0 0.25rem 0.75rem; +} + +.settings__group:not(:last-child) { + border-left: 0.25rem solid hsl(198, 76%, 52%); + margin-bottom: 0.5rem; +} + +.settings__group__wrapper:not(:last-child) { + margin-bottom: 0.25rem; +} + +.settings__option--version { + width: 100%; +} + +.settings__option--checkbox { + vertical-align: 1px; +} + +.settings__option--checkbox:disabled + .settings__label { + color: hsl(0, 0%, 40%); +} + +.settings__option--precision { + text-align: center; + width: 2.5rem; +} + +.settings__option--compatibility { + width: 100%; +} + +.settings__option--keep-special-comments { + 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/img/gear.svg b/docs/img/gear.svg new file mode 100644 index 00000000..0fdc3170 --- /dev/null +++ b/docs/img/gear.svg @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index fe67f79d..0e27e89d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,13 +7,72 @@ +

Go to clean-css project page

-
    +
    +
      +
      +
      + +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      +
      +
      + + +
      +
      + + +
      +
      + +
      +
      + +
      +
      +
      + +
      +
      +

      CSS optimizing happens directly in your browser using a browser-compatible build of clean-css. If you miss any functionality, you are more than welcome to add it!

      diff --git a/docs/js/drag-drop.js b/docs/js/drag-drop.js index 9c2111ac..db157afa 100644 --- a/docs/js/drag-drop.js +++ b/docs/js/drag-drop.js @@ -98,10 +98,11 @@ window.addEventListener('DOMContentLoaded', function () { var dragTarget = document.querySelector('.drag-target') + var dropContainer = document.querySelector('.dropped-files') dragTarget.addEventListener('dragenter', fileDraggedIn, false) dragTarget.addEventListener('dragover', fileDraggedOver, false) - dragTarget.addEventListener('drop', fileDropped(dragTarget), false) + dragTarget.addEventListener('drop', fileDropped(dropContainer), false) Optimizer.oncomplete = optimizationCompleted }) diff --git a/docs/js/optimizer-worker.js b/docs/js/optimizer-worker.js index 83fae5f5..3fc880d6 100644 --- a/docs/js/optimizer-worker.js +++ b/docs/js/optimizer-worker.js @@ -4,7 +4,7 @@ onmessage = function(event) { switch (event.data.command) { case 'optimize': - new CleanCSS().minify(event.data.input, function (error, output) { + new CleanCSS(event.data.options).minify(event.data.input, function (error, output) { postMessage({ command: 'optimized', id: event.data.id, diff --git a/docs/js/optimizer.js b/docs/js/optimizer.js index d379803a..b6460f3b 100644 --- a/docs/js/optimizer.js +++ b/docs/js/optimizer.js @@ -1,4 +1,6 @@ Optimizer = { + options: null, // see setOptionsFrom in settings.js + start: function () { this.worker = new Worker('./js/optimizer-worker.js') this.worker.onmessage = function (event) { @@ -16,7 +18,8 @@ Optimizer = { this.worker.postMessage({ command: 'optimize', id: id, - input: styles + input: styles, + options: this.options }) }, diff --git a/docs/js/settings.js b/docs/js/settings.js new file mode 100644 index 00000000..7e200f2f --- /dev/null +++ b/docs/js/settings.js @@ -0,0 +1,70 @@ +(function () { + 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') + } + } + } + + function hide(settingsForm) { + return function (event) { + event.preventDefault() + settingsForm.classList.add('settings--collapsed') + } + } + + function setOptionsFrom(settingsForm) { + 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, + rebase: false, + restructuring: settingsForm.querySelector('[name=restructuring]').checked, + roundingPrecision: parseInt(settingsForm.querySelector('[name=rounding-precision]').value), + shorthandCompacting: settingsForm.querySelector('[name=shorthand-compacting]').checked + } + } + } + + function keepSpecialCommentsFrom(value) { + if (/^\d+$/.test(value)) { + return parseInt(value) + } else { + return value + } + } + + function toggleAdvancedOptionsIn(settingsForm) { + var checkboxNodes = settingsForm.querySelectorAll('.settings__group--advanced .settings__option--checkbox') + + return function () { + Array.prototype.slice.call(checkboxNodes, 1).forEach(function (node) { + node.disabled = !node.disabled + node.checked = !node.checked + }) + } + } + + window.addEventListener('DOMContentLoaded', function () { + var settingsForm = document.querySelector('.settings') + var applySettingsButton = settingsForm.querySelector('.settings__option--apply') + var advancedOptionNode = settingsForm.querySelector('.settings__option--advanced') + + settingsForm.addEventListener('click', show(settingsForm), false) + applySettingsButton.addEventListener('click', hide(settingsForm), false) + applySettingsButton.addEventListener('click', setOptionsFrom(settingsForm), false) + advancedOptionNode.addEventListener('click', toggleAdvancedOptionsIn(settingsForm), false) + + setOptionsFrom(settingsForm)() + }) +})()