diff --git a/CHANGELOG.md b/CHANGELOG.md index 580b4c1..5111652 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,20 @@ # Change Log ## [Unreleased] + +## [1.3.1] - 2016-10-26 +### Added +- Error if first argument is not an array or a string +- Tests + +### Changed +- Compressed SVG filters to one line + +### Fixed +- Default SVG filter generating wrong CSS +- Empty SVG element returned if no SVG was generated +- CLI: Saving SVG when no SVG was generated + ## [1.3.0] - 2016-10-25 ### Added - Node module diff --git a/README.md b/README.md index 303f1a8..df0444b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Philter v1.3.0 +# Philter v1.3.1 Philter is a JS plugin giving you the power to control CSS filters with HTML data attributes. Visit the [Demo page](http://specro.github.io/Philter/) for examples. diff --git a/bin/philter.js b/bin/philter.js index 7714ba1..d2c99d8 100644 --- a/bin/philter.js +++ b/bin/philter.js @@ -19,9 +19,11 @@ let html = program.html?program.args[0]:program.args philter(html, {tag:!program.noTag}, (css, svg) => { saveData(program.css, css, 'css', (dir) => { console.log(`CSS saved to ${dir}`) - saveData(program.svg, svg, 'svg', (dir) => { - console.log(`SVG saved to ${dir}`) - }) + if (svg) { + saveData(program.svg, svg, 'svg', (dir) => { + console.log(`SVG saved to ${dir}`) + }) + } }) }) diff --git a/bower.json b/bower.json index 09ce1a2..360c961 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "philter", - "description": "Philter is a jQuery plugin giving you the power to control CSS filters with HTML attributes", + "description": "Philter is a JS plugin giving you the power to control CSS filters with HTML attributes", "main": "dist/philter.js", "moduleType": "globals", "keywords": [ diff --git a/dist/philter/philter.js b/dist/philter/philter.js index b96a7b1..89d6537 100644 --- a/dist/philter/philter.js +++ b/dist/philter/philter.js @@ -1,4 +1,4 @@ -/* Philter v1.3.0 | (c) 2015-2016 Liudas Dzisevicius | MIT License */ +/* Philter v1.3.1 | (c) 2015-2016 Liudas Dzisevicius | MIT License */ (function() { 'use strict'; diff --git a/dist/philter/philter.min.js b/dist/philter/philter.min.js index c6d0f54..e88a90d 100644 --- a/dist/philter/philter.min.js +++ b/dist/philter/philter.min.js @@ -1,2 +1,2 @@ -/* Philter v1.3.0 | (c) 2015-2016 Liudas Dzisevicius | MIT License */ +/* Philter v1.3.1 | (c) 2015-2016 Liudas Dzisevicius | MIT License */ !function(){"use strict";function t(){for(var t=0;t',document.body.appendChild(i),i=document.getElementById("svg")),e=.01*e;var s=new XMLHttpRequest;s.open("GET",this.options.url+"/svg/color.svg"),s.send(null),s.onreadystatechange=function(){if(4===s.readyState)if(200===s.status){var n=s.response;if(n){n=n.replace("color","color-"+r),i.querySelector("defs").innerHTML+=n;var l=i.querySelector('filter[id="color-'+r+'"]').children[0];o(l,{"flood-opacity":e,"flood-color":t})}else console.error(this.errors.falsePath)}else 404===s.status&&console.error(this.errors.falsePath)}.bind(this)}function s(t){var e=document.getElementById("svg");e||(e=document.createElement("div"),e.setAttribute("id","svg"),e.innerHTML='',document.body.appendChild(e),e=document.getElementById("svg"));var r=new XMLHttpRequest;r.open("GET",this.options.url+"/svg/vintage-"+t+".svg"),r.send(null),r.onreadystatechange=function(){if(4===r.readyState)if(200===r.status){var t=r.response;t?e.querySelector("defs").innerHTML+=t:console.error(this.errors.falsePath)}else 404===r.status&&console.error(this.errors.falsePath)}.bind(this)}function n(t){var e={blur:"px","hue-rotate":"deg","drop-shadow":"px",svg:"#",color:"#",vintage:"#","default":"%"};switch(t){case"blur":return e[t];case"hue-rotate":return e[t];case"drop-shadow":return e[t];case"svg":return e[t];case"color":return e[t];case"vintage":return e[t];default:return e["default"]}}function o(t,e){for(var r in e)t.setAttribute(r,e[r])}function l(t,e){var r;for(r in e)e.hasOwnProperty(r)&&(t[r]=e[r]);return t}window.Philter=function(){var r={transitionTime:.5,url:"../js",tag:!0},i=document.createElement("style");this.errors={falsePath:"Philter Error: you probably didn't declare the right path to philter folder!"},this.filterCount={color:0,"vintage-1":0,"vintage-2":0,"vintage-3":0,"vintage-4":0,"vintage-5":0,"vintage-6":0},this.filters=["blur","grayscale","hue-rotate","saturate","sepia","contrast","invert","opacity","brightness","drop-shadow","svg","color","vintage"],this.elements=[],this.styleString="",this.transitionString="",arguments[0]&&"object"==typeof arguments[0]?this.options=l(r,arguments[0]):this.options=r,t.call(this),e.call(this),this.styleString+=this.transitionString+"{transition:filter "+this.options.transitionTime+"s,-webkit-filter "+this.options.transitionTime+"s;}#svg{height:0;}",i.innerHTML=this.styleString,document.head.appendChild(i)}}(); diff --git a/dist/philter/svg/color.svg b/dist/philter/svg/color.svg index 61ca4f0..83c166b 100644 --- a/dist/philter/svg/color.svg +++ b/dist/philter/svg/color.svg @@ -1,4 +1 @@ - - - - + diff --git a/dist/philter/svg/vintage-1.svg b/dist/philter/svg/vintage-1.svg index 5487e83..75cc442 100644 --- a/dist/philter/svg/vintage-1.svg +++ b/dist/philter/svg/vintage-1.svg @@ -1,26 +1 @@ - - - - - - - - - - - - - - - - - - - - - - + diff --git a/dist/philter/svg/vintage-2.svg b/dist/philter/svg/vintage-2.svg index 67113a9..928268f 100644 --- a/dist/philter/svg/vintage-2.svg +++ b/dist/philter/svg/vintage-2.svg @@ -1,27 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/dist/philter/svg/vintage-3.svg b/dist/philter/svg/vintage-3.svg index b78cb1f..3aab285 100644 --- a/dist/philter/svg/vintage-3.svg +++ b/dist/philter/svg/vintage-3.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - + diff --git a/dist/philter/svg/vintage-4.svg b/dist/philter/svg/vintage-4.svg index 63b82cf..fea95b0 100644 --- a/dist/philter/svg/vintage-4.svg +++ b/dist/philter/svg/vintage-4.svg @@ -1,24 +1 @@ - - - - - - - - - - - - - - - - - - - - + diff --git a/dist/philter/svg/vintage-5.svg b/dist/philter/svg/vintage-5.svg index f2e2d22..c2c937e 100644 --- a/dist/philter/svg/vintage-5.svg +++ b/dist/philter/svg/vintage-5.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - + diff --git a/dist/philter/svg/vintage-6.svg b/dist/philter/svg/vintage-6.svg index 44639d1..0461701 100644 --- a/dist/philter/svg/vintage-6.svg +++ b/dist/philter/svg/vintage-6.svg @@ -1,22 +1 @@ - - - - - - - - - - - - - - - - - - + diff --git a/lib/index.js b/lib/index.js index 31d8d98..5d347da 100644 --- a/lib/index.js +++ b/lib/index.js @@ -7,6 +7,9 @@ const isHtml = require('is-html') Promise.promisifyAll(fs) function philter(files, options, cb) { + if (!_.isString(files) && !_.isArray(files)) { + throw new Error('Philter: No HTML or files given') + } if (_.isFunction(options)) { cb = options options = {} @@ -99,7 +102,7 @@ function parseElements($, options, cb) { 'vintage-6': 0 } let css = '' - let svg = '' + let svg = '' let promises = [] let elements = getElements($, filters, options.tag) if (_.isEmpty(elements)) { @@ -159,6 +162,12 @@ function parseElements($, options, cb) { rule.hover += `${key}(${filters[key](values[4], values[5], values[6], values[7])})` } break + case 'svg': + rule.default += filters.svg(values[0]) + if (values[1]) { + rule.hover += filters.svg(values[1]) + } + break default: // setup default rule rule.default += `${key}(${values[0]+filters[key]})` @@ -179,8 +188,14 @@ function parseElements($, options, cb) { rule.hover = '' }) Promise.all(promises).then(() => { - svg += '' - cb(css, svg) + let svgWrapper = '' + if (svg) { + svgWrapper = `${svg}` + } else { + svgWrapper = '' + } + + cb(css, svgWrapper) }) } diff --git a/lib/svg/color.svg b/lib/svg/color.svg index 61ca4f0..83c166b 100644 --- a/lib/svg/color.svg +++ b/lib/svg/color.svg @@ -1,4 +1 @@ - - - - + diff --git a/lib/svg/vintage-1.svg b/lib/svg/vintage-1.svg index 5487e83..75cc442 100644 --- a/lib/svg/vintage-1.svg +++ b/lib/svg/vintage-1.svg @@ -1,26 +1 @@ - - - - - - - - - - - - - - - - - - - - - - + diff --git a/lib/svg/vintage-2.svg b/lib/svg/vintage-2.svg index 67113a9..928268f 100644 --- a/lib/svg/vintage-2.svg +++ b/lib/svg/vintage-2.svg @@ -1,27 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/lib/svg/vintage-3.svg b/lib/svg/vintage-3.svg index b78cb1f..3aab285 100644 --- a/lib/svg/vintage-3.svg +++ b/lib/svg/vintage-3.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - + diff --git a/lib/svg/vintage-4.svg b/lib/svg/vintage-4.svg index 63b82cf..fea95b0 100644 --- a/lib/svg/vintage-4.svg +++ b/lib/svg/vintage-4.svg @@ -1,24 +1 @@ - - - - - - - - - - - - - - - - - - - - + diff --git a/lib/svg/vintage-5.svg b/lib/svg/vintage-5.svg index f2e2d22..c2c937e 100644 --- a/lib/svg/vintage-5.svg +++ b/lib/svg/vintage-5.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - + diff --git a/lib/svg/vintage-6.svg b/lib/svg/vintage-6.svg index 44639d1..0461701 100644 --- a/lib/svg/vintage-6.svg +++ b/lib/svg/vintage-6.svg @@ -1,22 +1 @@ - - - - - - - - - - - - - - - - - - + diff --git a/package.json b/package.json index bb2e65b..bf5c1f8 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "philter", - "version": "1.3.0", + "version": "1.3.1", "description": "Philter is a JS plugin giving you the power to control CSS filters with HTML data attributes. Visit the [Demo page](http://specro.github.io/Philter/) for examples. ## Dependencies Philter comes in two flavors - jQuery and vanilla JS. Choose the one you want just don't forget in jQuery case to include it: ```HTML ``` You could also use Bower which is my preferred method. ## Installation Download the plugin and move the 'philter' directory to your 'js' directory, then include it in your page: ```HTML ``` or in jQuery ```HTML ``` And that's it! You're ready to go! ## How To First initiate the plugin: ```HTML ``` or again in jQuery", - "main": "index.js", + "main": "lib/index.js", "bin": { "philter": "bin/philter.js" }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "mocha --reporter spec -c" }, "repository": { "type": "git", @@ -26,5 +26,9 @@ "fs-extra": "^0.30.0", "is-html": "^1.0.0", "lodash": "^4.16.2" + }, + "devDependencies": { + "chai": "^3.5.0", + "mocha": "^3.1.2" } } diff --git a/test/test.js b/test/test.js new file mode 100644 index 0000000..b74608e --- /dev/null +++ b/test/test.js @@ -0,0 +1,107 @@ +const expect = require('chai').expect; +const philter = require('../lib/index'); + +describe('Module', () => { + it('should return css and svg as strings', function() { + philter('
', (css, svg)=> { + expect(css).to.be.a('string') + expect(svg).to.be.a('string') + }) + }) + it('should return css and svg as strings with tag: false', function() { + philter('
', {tag: false}, (css, svg)=> { + expect(css).to.be.a('string') + expect(svg).to.be.a('string') + }) + }) + it('should throw an Error when no HTML or files are given', function() { + expect(philter.bind(philter, (css, svg) => {})).to.throw('Philter: No HTML or files given') + }) + it('should throw an Error when HTML doesn\'t contain philter data attributes', function() { + expect(philter.bind(philter, '
', (css, svg) => {})).to.throw('Philter: No philter data attributes found') + }) + it('should throw an Error when no callback is given', function() { + expect(philter.bind(philter, '
')).to.throw('Philter: Callback must be a function') + }) +}) + +describe('Filters', () => { + it('blur', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-blur="10"]{filter:blur(10px);}') + expect(svg).to.equal('') + }) + }) + it('grayscale', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-grayscale="10"]{filter:grayscale(10%);}') + expect(svg).to.equal('') + }) + }) + it('hue-rotate', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-hue-rotate="10"]{filter:hue-rotate(10deg);}') + expect(svg).to.equal('') + }) + }) + it('saturate', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-saturate="10"]{filter:saturate(10%);}') + expect(svg).to.equal('') + }) + }) + it('sepia', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-sepia="10"]{filter:sepia(10%);}') + expect(svg).to.equal('') + }) + }) + it('contrast', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-contrast="10"]{filter:contrast(10%);}') + expect(svg).to.equal('') + }) + }) + it('invert', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-invert="10"]{filter:invert(10%);}') + expect(svg).to.equal('') + }) + }) + it('opacity', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-opacity="10"]{filter:opacity(10%);}') + expect(svg).to.equal('') + }) + }) + it('brightness', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-brightness="10"]{filter:brightness(10%);}') + expect(svg).to.equal('') + }) + }) + it('drop-shadow', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-drop-shadow="10 10 10 black"]{filter:drop-shadow(10px 10px 10px black);}') + expect(svg).to.equal('') + }) + }) + it('svg', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-svg="filter"]{filter:url(#filter);}') + expect(svg).to.equal('') + }) + }) + it('color', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-color="black 10"]{filter:url(#color-1);}') + expect(svg.replace(/\r?\n|\r/g, '')).to.equal('') + }) + }) + it('vintage', function() { + philter('
', (css, svg)=> { + expect(css).to.equal('[data-philter-vintage="3"]{filter:url(#vintage-3);}') + expect(svg.replace(/\r?\n|\r/g, '')).to.equal('') + }) + }) +})