See #260 - shows short optimization summary.

Why:

* To let user know how much smaller output content is.

diff --git a/docs/css/home.css b/docs/css/home.css
index 002132b..b9db024 100644 (file)
--- a/docs/css/home.css
+++ b/docs/css/home.css
@@ -86,6 +86,11 @@ a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li,
   display: none;
 }
 
+.dropped-files__file__summary {
+  color: hsl(0, 0%, 45%);
+  font-style: italic;
+}
+
 .dropped-files__file__action {
   display: inline-block;
   float: right;

diff --git a/docs/index.html b/docs/index.html
index 47a7750..fe67f79 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,6 +25,7 @@
   <template class="dropped-file-template">
     <li class="dropped-files__file">
       <span class="dropped-files__file__name"></span>
+      <span class="dropped-files__file__summary"></span>
       <a class="dropped-files__file__action dropped-files__file__action--save" href="#" download="test.css">save</a>
       <a class="dropped-files__file__action dropped-files__file__action--copy" href="#" data-success-label="done!" data-error-label="oops! see console for details" data-original-label="copy to clipboard">copy to clipboard</a>
     </li>

diff --git a/docs/js/drag-drop.js b/docs/js/drag-drop.js
index 34cb6a5..9c2111a 100644 (file)
--- a/docs/js/drag-drop.js
+++ b/docs/js/drag-drop.js
@@ -58,13 +58,15 @@
     dropContainer.appendChild(importedNode)
   }
 
-  function optimizationCompleted(optimizationId, output) {
+  function optimizationCompleted(optimizationId, output, saved) {
     var fileNode = document.querySelector('.dropped-files__file--' + optimizationId)
+    var summaryNode = fileNode.querySelector('.dropped-files__file__summary')
     var downloadNode = fileNode.querySelector('.dropped-files__file__action--save')
     var copyToClipboardNode = fileNode.querySelector('.dropped-files__file__action--copy')
     var stylesBlob = new Blob([output.styles])
 
     fileNode.classList.add('dropped-files__file--optimized')
+    summaryNode.innerText = ' - saved ' + formatAsKb(saved, 1) + ' kB'
     downloadNode.href = URL.createObjectURL(stylesBlob)
 
     copyToClipboardNode.addEventListener('click', function (event) {
@@ -88,6 +90,12 @@
     })
   }
 
+  function formatAsKb(value, precision) {
+    var factor = Math.pow(10.0, precision)
+
+    return parseInt((value / 1024.0) * factor) / factor
+  }
+
   window.addEventListener('DOMContentLoaded', function () {
     var dragTarget = document.querySelector('.drag-target')
 

diff --git a/docs/js/optimizer-worker.js b/docs/js/optimizer-worker.js
index 251ee22..83fae5f 100644 (file)
--- a/docs/js/optimizer-worker.js
+++ b/docs/js/optimizer-worker.js
@@ -9,7 +9,8 @@ onmessage = function(event) {
           command: 'optimized',
           id: event.data.id,
           error: error,
-          output: output
+          output: output,
+          saved: event.data.input.length - output.styles.length
         })
       })
   }

diff --git a/docs/js/optimizer.js b/docs/js/optimizer.js
index 0a2349e..d379803 100644 (file)
--- a/docs/js/optimizer.js
+++ b/docs/js/optimizer.js
@@ -4,7 +4,7 @@ Optimizer = {
     this.worker.onmessage = function (event) {
       switch (event.data.command) {
         case 'optimized':
-          Optimizer.oncomplete(event.data.id, event.data.output)
+          Optimizer.oncomplete(event.data.id, event.data.output, event.data.saved)
       }
     }
     this.worker.onerror = function (event) {