Release v1.4.0

.npmignore

@@ -0,0 +1 @@
+dist

CHANGELOG.md

@@ -1,7 +1,14 @@
 # Change Log
-
 ## [Unreleased]
 
+## [1.4.0] - 2016-11-08
+### Added
+- Custom filters
+
+### Fixed
+- Color filter not merging with source graphic
+- Uploading browser dist to npm
+
 ## [1.3.1] - 2016-10-26
 ### Added
 - Error if first argument is not an array or a string
@@ -26,32 +33,32 @@
 
 ## [1.2.0] - 2016-03-03
 ### Added
-- 6 new vintage SVG filters (vanilla JS version only).
+- 6 new vintage SVG filters (vanilla JS version only)
 
 ### Changed
-- Transition CSS rules are now applied only to Philter elements.
+- Transition CSS rules are now applied only to Philter elements
 
 ### Fixed
-- Inconsistent height on SVG filters.
-- CSS rules being applied to the first selector of the element and breaking on elements with same selectors.
-- SVG adding to body height.
-- Filter count increasing faster than data is being returned from the server causing wrong filter ids.
+- Inconsistent height on SVG filters
+- CSS rules being applied to the first selector of the element and breaking on elements with same selectors
+- SVG adding to body height
+- Filter count increasing faster than data is being returned from the server causing wrong filter ids
 
 ## [1.1.2] - 2016-02-28
 ### Added
-- Bower compatibility.
+- Bower compatibility
 
 ## [1.1.1] - 2015-12-15
 ### Added
-- Plugin version in vanilla JavaScript.
-- Option to remove 'philter' from data attributes to make markup shorter.
+- Plugin version in vanilla JavaScript
+- Option to remove 'philter' from data attributes to make markup shorter
 
 ### Fixed
-- False element width or height being set on custom SVG filters.
+- False element width or height being set on custom SVG filters
 
 ## [1.1.0] - 2015-11-07
 ### Changed
-- Changed classes to data attributes to describe filters.
+- Changed classes to data attributes to describe filters
 
 ### Removed
-- Describing filters with classes. The old version still can be found in dist directory.
+- Describing filters with classes The old version still can be found in dist directory

README.md

@@ -1,4 +1,6 @@
-# Philter v1.3.1
+# Philter v1.4.0
+[![npm](https://img.shields.io/npm/v/philter.svg)](https://www.npmjs.com/package/philter) [![dependencies](https://david-dm.org/specro/philter.svg)](https://david-dm.org/specro/philter)
+
 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.
 
@@ -33,29 +35,34 @@ You can pass 3 parameters to Philter:
 ```js
 const philter = require('philter')
 
-philter(['index.html', 'post.html'], { tag: true } (css, svg) => {
+philter(['index.html', 'post.html'], { tag: true, customFilterDir: '', customFilters: [] } (css, svg) => {
   console.log('CSS: ', css)
   console.log('SVG: ', svg)
 })
 ```
-Node has only the tag option.
+You can also pass 3 parameters to philter:
+* tag - boolean - This enables the 'philter' part in data-philter-<filter>. If you don't use any plugins which use data attributes or they won't collide with Philter, you can set this to false to omit this part and shorten your markup.
+* customFilterDir - string - Directory where custom filters are stored.
+* customFilters - array - Array of custom filter names.
 
 ### CLI
 ```shell
-philter index.html post.html -c ./css
+philter index.html post.html -c index.html -s index.html
 ```
 
 ```
 Usage: philter [options] <file ...>
 
 Options:
 
-  -h, --help       output usage information
-  -V, --version    output the version number
-  -n, --no-tag     No "philter" in data attributes
-  -s, --svg <dir>  SVG directory or svg/html file to append to
-  -c, --css <dir>  CSS directory or css/html file to append to
-  -H, --html       Pass HTML instead of filenames
+  -h, --help                     output usage information
+  -V, --version                  output the version number
+  -n, --no-tag                   No "philter" in data attributes
+  -s, --svg <dir>                SVG directory or svg/html file to append to
+  -c, --css <dir>                CSS directory or css/html file to append to
+  -H, --html                     Pass HTML instead of filenames
+  -D, --custom-filter-dir <dir>  Custom SVG filter directory
+  -F, --custom-filters <list>    Custom filters
 
 ```
 
@@ -106,12 +113,13 @@ Here's a list of filters that you can use and their limitations in Philter.
 * invert
 * opacity
 * brightness
-* drop-shadow - Supports only black color in browser version. Requires 4 values. The 4th value instead of color is opacity 0 to 100%.
+* drop-shadow - Requires 4 values. In the browser the 4th value instead of color is opacity 0 to 100%, color is locked to black.
 * svg - Custom SVG filter. Requires 1 value - filter ID.
 * color - Requires 2 values. Color and opacity.
 * vintage - Requires an integer from 1 to 6.
+* custom - Requires a string - custom filter name.
 
-Drop shadow filter supports only black color because with it's already long class it would be even longer with rgba implementation.
+Drop shadow filter in browser supports only black color because with it's already long class it would be even longer with rgba implementation.
 ### Vintage
 There are 6 vintage filters:
 * Rises contrast. Brings out details and colors.
@@ -121,6 +129,13 @@ There are 6 vintage filters:
 * Close to 2 but mixed with violet. Gives a sweet/daydream look.
 * Grayscale but better (IMO :))
 
+### Custom
+You can use filters that you wrote by yourself in NPM/CLI version by using the custom tag like this:
+```html
+data-philter-cutom="<custom-filter-name>"
+```
+If using custom filters you must supply the directory where they're stored and custom filter names in the options. The file of the filter must have that name and its id must be that same name.
+
 ## Compatibility
 Philter was developed and tested on Chrome 46+, Firefox 41+, Opera 34+ and Edge 20+. The default CSS filters should be compatible with most versions of browsers that support filters. The custom filters are supported only by Firefox, Chrome and Opera. You may notice glitching on Edge when more than one hover element is on the page and loss of some filters when they are stacked on one element.
 ## Issues

bin/philter.js

@@ -6,24 +6,35 @@ const fs = require('fs-extra')
 const path = require('path')
 const program = require('commander')
 
+function list(val) {
+  return val.split(',')
+}
+
 program
 .version('1.2.0')
 .usage('[options] <file ...>')
 .option('-n, --no-tag', 'No "philter" in data attributes')
 .option('-s, --svg <dir>', 'SVG directory or svg/html file to append to')
 .option('-c, --css <dir>', 'CSS directory or css/html file to append to')
 .option('-H, --html', 'Pass HTML instead of filenames')
+.option('-D, --custom-filter-dir <dir>', 'Custom SVG filter directory')
+.option('-F, --custom-filters <list>', 'Comma-separated custom filter list', list)
 .parse(process.argv)
 
+if (program.customFilters && !program.customFilterDir) {
+  throw new Error('Philter: Custom filter directory not found')
+}
 let html = program.html?program.args[0]:program.args
-philter(html, {tag:!program.noTag}, (css, svg) => {
+let customFilterDir = program.customFilterDir?program.customFilterDir:''
+let customFilters = program.customFilters?program.customFilters:[]
+philter(html, {tag:!program.noTag, customFilterDir:customFilterDir, customFilters:customFilters}, (css, svg) => {
   saveData(program.css, css, 'css', (dir) => {
     console.log(`CSS saved to ${dir}`)
     if (svg) {
       saveData(program.svg, svg, 'svg', (dir) => {
         console.log(`SVG saved to ${dir}`)
       })
-    }  
+    }
   })
 })
 

dist/philter/philter.js

@@ -1,4 +1,4 @@
-/* Philter v1.3.1 | (c) 2015-2016 Liudas Dzisevicius | MIT License */
+/* Philter v1.4.0 | (c) 2015-2016 Liudas Dzisevicius | MIT License */
 (function() {
 
   'use strict';

lib/index.js

@@ -18,7 +18,9 @@ function philter(files, options, cb) {
     throw new Error('Philter: Callback must be a function')
   }
   options = _.defaults(options, {
-    tag: true
+    tag: true,
+    customFilterDir: '',
+    customFilters: []
   })
 
   if (isHtml(files)) {
@@ -77,7 +79,7 @@ function getElements($, filters, tag) {
 * @param {Function} cb Callback
 */
 function parseElements($, options, cb) {
-  const filters = {
+  let filters = {
     'blur': 'px',
     'grayscale': '%',
     'hue-rotate': 'deg',
@@ -90,7 +92,8 @@ function parseElements($, options, cb) {
     'drop-shadow': (h, v, blur, color) => `${h}px ${v}px ${blur}px ${color}`,
     'svg': (url) => `url(#${url})`,
     'color': (nr) => `url(#color-${nr})`,
-    'vintage': (nr) => `url(#vintage-${nr})`
+    'vintage': (nr) => `url(#vintage-${nr})`,
+    'custom': {}
   }
   let filterCount = {
     'color': 0,
@@ -104,7 +107,17 @@ function parseElements($, options, cb) {
   let css = ''
   let svg = ''
   let promises = []
+  if (!_.isEmpty(options.customFilters)) {
+    if (!options.customFilterDir) {
+      throw new Error('Philter: No custom filter directory found')
+    }
+    _.forEach(options.customFilters, (value) => {
+      filters.custom[value] = `url(#${value})`
+      filterCount[value] = 0
+    })
+  }
   let elements = getElements($, filters, options.tag)
+
   if (_.isEmpty(elements)) {
     throw new Error('Philter: No philter data attributes found')
   }
@@ -168,6 +181,24 @@ function parseElements($, options, cb) {
             rule.hover += filters.svg(values[1])
           }
           break
+        case 'custom':
+          filterCount[values[0]]++
+          rule.default += filters.custom[values[0]]
+          if (filterCount[values[0]] === 1) {
+            getCustomFilter(options.customFilterDir+values[0], promises, (filter) => {
+              svg += filter
+            })
+          }
+          if (values[1]) {
+            filterCount[values[1]]
+            rule.hover += custom.filters[values[1]]
+            if (filterCount[values[1]] === 1) {
+              getCustomFilter(options.customFilterDir+values[1], promises, (filter) => {
+                svg += filter
+              })
+            }
+          }
+          break
         default:
           // setup default rule
           rule.default += `${key}(${values[0]+filters[key]})`
@@ -239,4 +270,20 @@ function getVintageFilter(id, promises, cb) {
   )
 }
 
-module.exports = philter;
+/**
+* Load custom SVG filter
+* @param {String} file SVG file directory
+* @param {Array} promises List of readFileAsync promises
+* @param {Function} cb Callback
+*/
+function getCustomFilter(dir, promises, cb) {
+  promises.push(
+    fs.readFileAsync(dir + '.svg', 'utf-8').then((data) => {
+      cb(data)
+    }).catch((err) => {
+      throw err
+    })
+  )
+}
+
+module.exports = philter

package.json

@@ -1,8 +1,15 @@
 {
   "name": "philter",
-  "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 <script src=\"http://code.jquery.com/jquery-2.1.4.min.js\"></script> ``` 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 <script src=\"js/philter/philter.min.js\"></script> ``` or in jQuery ```HTML <script src=\"js/philter/jquery.philter.min.js\"></script> ``` And that's it! You're ready to go! ## How To First initiate the plugin: ```HTML <script>   new Philter(); </script> ``` or again in jQuery",
+  "version": "1.4.0",
+  "description": "Philter is a JS plugin giving you the power to control CSS filters with HTML data attributes.",
   "main": "lib/index.js",
+  "keywords": [
+    "philter",
+    "filter",
+    "css",
+    "svg",
+    "html"
+  ],
   "bin": {
     "philter": "bin/philter.js"
   },
@@ -18,12 +25,12 @@
   "bugs": {
     "url": "https://github.com/Specro/Philter/issues"
   },
-  "homepage": "https://github.com/Specro/Philter#readme",
+  "homepage": "http://specro.github.io/Philter/",
   "dependencies": {
     "bluebird": "^3.4.6",
     "cheerio": "^0.22.0",
     "commander": "^2.9.0",
-    "fs-extra": "^0.30.0",
+    "fs-extra": "^1.0.0",
     "is-html": "^1.0.0",
     "lodash": "^4.16.2"
   },