From: Jakub Pawlowicz Date: Fri, 21 Oct 2016 16:05:00 +0000 (+0200) Subject: See #260 - adds a very basic browser client. X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?a=commitdiff_plain;h=2d4a733fd605f098c7b7a31a7911d69a3d8f5aff;p=clean-css.git See #260 - adds a very basic browser client. Why: * So there's an easy way to minify files without installing clean-css module; --- diff --git a/docs/css/home.css b/docs/css/home.css new file mode 100644 index 00000000..cf5de0d6 --- /dev/null +++ b/docs/css/home.css @@ -0,0 +1,63 @@ +a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, nav, ol, p, section, span, textarea, ul { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-left: 0; + padding-top: 0; + margin-left: 0; + margin-top: 0; +} + +.logo__link { + background: url(../img/logo.svg) no-repeat center 55%; + display: block; + height: 10rem; + outline: none; + overflow: hidden; + text-indent: -999rem; +} + +.content { + line-height: 1.35rem; + margin: 0 5% 5rem; + width: 90%; +} + +.drag-target { + border: 5px dashed hsl(0, 0%, 90%); + margin-bottom: 2rem; + min-height: 10rem; +} + +.drag-target:empty:before { + content: attr(title); + color: hsl(0, 0%, 15%); + display: block; + font-weight: bold; + height: inherit; + padding-top: 3rem; + text-align: center; + text-transform: uppercase; +} + +.dropped-files { + list-style: none; + padding: 1rem; +} + +.dropped-files__file:not(:last-child) { + margin-bottom: 0.5rem; +} + +.dropped-files__file:not(.dropped-files__file--optimized) > .dropped-files__file__save { + display: none; +} + +.footer { + text-align: center; + margin-bottom: 2rem; +} + +.footer__heart { + color: hsl(0, 100%, 45%); +} diff --git a/docs/css/vendor/normalize.css b/docs/css/vendor/normalize.css new file mode 100644 index 00000000..ed7b6575 --- /dev/null +++ b/docs/css/vendor/normalize.css @@ -0,0 +1,83 @@ +nav, +section { + display: block; +} + +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +a { + background: transparent; +} + +a:focus { + outline: thin dotted; +} + +a:active, +a:hover { + outline: 0; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +b, +strong { + font-weight: bold; +} + +img { + border: 0; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +button, +input { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +button, +input { + line-height: normal; +} + +button { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} diff --git a/docs/img/logo.svg b/docs/img/logo.svg new file mode 100644 index 00000000..440672b6 --- /dev/null +++ b/docs/img/logo.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..e8214f78 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,31 @@ + + + + + clean-css: fast and efficient CSS optimizer + + + + + + +

+ 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 new file mode 100644 index 00000000..24f9d423 --- /dev/null +++ b/docs/js/drag-drop.js @@ -0,0 +1,75 @@ +(function () { + var uniqueID = (function () { + var UID = new Date().getTime() + + return function () { + return (UID++).toString(36) + } + })() + + function fileDraggedIn(event) { + event.preventDefault() + event.dataTransfer.dropEffect = 'copy' + } + + function fileDraggedOver(event) { + event.preventDefault() + event.dataTransfer.dropEffect = 'copy' + } + + function fileDropped(dropContainer) { + var templateNode = document.querySelector('.dropped-file-template') + + return function (event) { + event.preventDefault() + + for (var i = 0, l = event.dataTransfer.files.length; i< l; i++) { + var file = event.dataTransfer.files[i] + + process(file, dropContainer, templateNode) + } + } + } + + function process(file, dropContainer, templateNode) { + var optimizationId = uniqueID() + var importedNode = document.importNode(templateNode.content, true) + var fileNode = importedNode.querySelector('.dropped-files__file') + var nameNode = importedNode.querySelector('.dropped-files__file__name') + var reader + + fileNode.classList.add('dropped-files__file--' + optimizationId) + nameNode.innerText = file.name + + if (file.type == 'text/css') { + reader = new FileReader() + reader.onload = function (event) { + Optimizer.process(optimizationId, event.target.result) + } + reader.readAsText(file) + } else { + fileNode.classList.add('dropped-files__file--invalid') + } + + dropContainer.appendChild(importedNode) + } + + function optimizationCompleted(optimizationId, output) { + var fileNode = document.querySelector('.dropped-files__file--' + optimizationId) + var downloadNode = fileNode.querySelector('.dropped-files__file__save') + var stylesBlob = new Blob([output.styles]) + + fileNode.classList.add('dropped-files__file--optimized') + downloadNode.href = URL.createObjectURL(stylesBlob) + } + + window.addEventListener('DOMContentLoaded', function () { + var dragTarget = document.querySelector('.drag-target') + + dragTarget.addEventListener('dragenter', fileDraggedIn, false) + dragTarget.addEventListener('dragover', fileDraggedOver, false) + dragTarget.addEventListener('drop', fileDropped(dragTarget), false) + + Optimizer.oncomplete = optimizationCompleted + }) +})() diff --git a/docs/js/optimizer-worker.js b/docs/js/optimizer-worker.js new file mode 100644 index 00000000..251ee220 --- /dev/null +++ b/docs/js/optimizer-worker.js @@ -0,0 +1,18 @@ +onmessage = function(event) { + if (!event.data) + return + + switch (event.data.command) { + case 'optimize': + new CleanCSS().minify(event.data.input, function (error, output) { + postMessage({ + command: 'optimized', + id: event.data.id, + error: error, + output: output + }) + }) + } +} + +importScripts('//jakubpawlowicz.github.io/clean-css-builds/v3.4.20.js') diff --git a/docs/js/optimizer.js b/docs/js/optimizer.js new file mode 100644 index 00000000..74cbcbdf --- /dev/null +++ b/docs/js/optimizer.js @@ -0,0 +1,23 @@ +Optimizer = { + start: function () { + this.worker = new Worker('./js/optimizer-worker.js') + this.worker.onmessage = function (event) { + switch (event.data.command) { + case 'optimized': + Optimizer.oncomplete(event.data.id, event.data.output) + } + } + }, + + process: function (id, styles) { + this.worker.postMessage({ + command: 'optimize', + id: id, + input: styles + }) + }, + + oncomplete: function () { /* noop */ } +} + +Optimizer.start()