💡 Add Angular options by jaggyConfig constant

CHANGELOG.md

@@ -1,12 +1,21 @@
+v0.1.5 / Mar 30 2015
+=========================
+Add Angular options by constant `jaggyConfig`
+
+ * [`unknown`][2] :bulb: empty image instead of Error by `jaggyConfig.useEmptyImage`
+ * [`unknown`][2] :bulb: caching a converted svg by `jaggyConfig.useCache`
+
+[2]: https://github.com/59naga/jaggy/commits/master
+
 v0.1.4 / Mar 29 2015
 =========================
- * [`unknown`][1] :bug: Fix `<path fill="rgba(,,,NaN)"`
- * [`unknown`][1] :lipstick: Support `<img ng-src="" jaggy>`
+ * [`21fb96a`][1] :bug: Fix `<path fill="rgba(,,,NaN)"`
+ * [`21fb96a`][1] :lipstick: Support `<img ng-src="" jaggy>`
 
-[1]: https://github.com/59naga/jaggy/commit
+[1]: https://github.com/59naga/jaggy/commit/21fb96a22352c84f4802c50f6a35f7500cee9254
 
 v0.1.3 / Mar 03 2015
 =========================
- * [`unknown`][0] Release v0.1.3
+ * [`1084961c`][0] Release v0.1.3
 
 [0]: https://github.com/59naga/jaggy/commits/master

README.md

@@ -82,8 +82,24 @@ jaggy('your_pixelart.png',{glitch:2},function(error,svg){
 jaggy public_html -g 5
 ```
 
+## Caching a converted svg for angular.js
+```javascript
+app= anuglar.module('app',['jaggy'])
+app.constant('jaggyConfig',{
+  useCache: false,// default: true
+  useEmptyImage: false,// default: true
+});
+```
+
+### .useCache
+Caching a converted svg by localStorage.
+
+### .useEmptyImage
+Replace empty image instead of Error. e.g. `<svg><path fill="rgba(0,0,0,0.50)"/>`
+
 ## Known issue
 * Animated gif Can be convert, But, It's so very very heavy.
+* Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of `jaggy:url` exceeded the quota. due to Huge Animationed gif
 
 License
 =========================

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jaggy",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "homepage": "https://github.com/59naga/jaggy",
   "authors": [
     "59naga <i59naga@icloud.com>"

lib/jaggy.coffee

@@ -59,6 +59,11 @@ Jaggy.createSVG= (url,args...)->
     when 'function' then callback= arg
     when 'object' then options= arg
   options.outerHTML?= false
+
+  if options.cache
+    options.cacheUrl= url
+    cache= Jaggy.getCache url
+    return callback null,cache if cache? and not options.noCache?
 
   getPixels= require 'get-pixels'
   getPixels url,(error,pixels)->
@@ -82,10 +87,25 @@ Jaggy.createSVG= (url,args...)->
 
         Jaggy.convertToSVG pixels,options,callback
 
+Jaggy.getCache= (url)->
+  localStorage.getItem 'jaggy:'+url
+Jaggy.setCache= (url,cache)->
+  try
+    localStorage.setItem 'jaggy:'+url,cache
+  catch error
+    localStorage.removeItem 'jaggy:'+url
+
+    console.error error
+
 # Use for angular.js
 Jaggy.angularModule= (window)->
   angularModule= window.angular.module 'jaggy',[]
-  angularModule.directive 'jaggy',->
+  angularModule.constant 'jaggyConfig',{
+    useCache: 'localStorage'
+    useEmptyImage: yes
+  }
+  angularModule.constant 'jaggyEmptyImage','<svg viewBox="0 0 1 1" shape-rendering="crispEdges" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0,0h1v1h-1Z" fill="rgba(0,0,0,0.50)"></path></svg>'
+  angularModule.directive 'jaggy',(jaggyConfig,jaggyEmptyImage)->
     (scope,element,attrs)->
       element.css 'display','none'
 
@@ -94,13 +114,16 @@ Jaggy.angularModule= (window)->
         for param in attrs.jaggy.split ';'
           [key,value]= param.split ':'
           options[key]= value
+      options.cache= !! jaggyConfig.useCache
 
-      #fix <img ng-src="" jaggy>
+      #fix <img ng-src="url" jaggy>
       url= attrs.src
       url?= attrs.ngSrc
 
       Jaggy.createSVG url,options,(error,svg)->
-        throw error if error?
+        if error
+          throw error if not jaggyConfig.useEmptyImage
+          return element.replaceWith jaggyEmptyImage
         element.replaceWith svg
 
 Jaggy.convertToSVG= (pixels,args...)->
@@ -121,6 +144,8 @@ Jaggy.convertToSVG= (pixels,args...)->
     svg= svg.outerHTML.replace ' viewbox=',' viewBox='# fix to lowerCamel
     svg= svg.replace(/&gt;/g,'>')# enable querySelector
 
+  Jaggy.setCache options.cacheUrl,svg.outerHTML if options.cacheUrl?
+
   callback null,svg
 
 Jaggy.enableAnimation= (svg)->

package.json

@@ -3,11 +3,13 @@
   "main": "jaggy",
   "bin": "jaggy",
   "description": "is Converting to SVG by pixels",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
     "build": "browserify lib/jaggy.coffee -r get-pixels -r gify-parse -t coffeeify > public/jaggy.browser.js",
     "prestart": "onefile --json --output public/pkgs",
     "start": "cd public && open http://localhost:8000 && python -m SimpleHTTPServer",
+    "watch": "abigail ./**/*.coffee:build --ignore --execute",
+
     "convert": "jaggy public -o hogekosan -g 2",
     "test": "jasminetea test --verbose --cover --report",
     "posttest": "rm public/*.svg",
@@ -24,6 +26,7 @@
     "through2": "^0.6.3"
   },
   "devDependencies": {
+    "abigail": "0.0.7",
     "browserify": "^9.0.3",
     "coffeeify": "^1.0.0",
     "gulp": "^3.8.11",

public/index.html

@@ -6,17 +6,21 @@
   <script src="pkgs.js"></script>
   <script src="jaggy.browser.js"></script>
   <script title="for browser">
-    window.jaggy('moon.png',function(error,svg){
+    jaggy('moon.png',function(error,svg){
       document.querySelector('section').appendChild(svg);
     });
 
-    window.jaggy('moon.png',{glitch:1},function(error,svg){
+    jaggy('moon.png',{glitch:1},function(error,svg){
       document.body.appendChild(svg);
     });
   </script>
   <script title="for angular.js">
-    angular.module('myApp',['jaggy']);
+    var app=angular.module('myApp',['jaggy']);
+    // app.constant('jaggyConfig',{useCache:false,useEmptyImage:false})
   </script>
+  <style>
+    svg{width:100%}
+  </style>
 </head>
 <body ng-app="myApp">
   <section>
@@ -27,6 +31,7 @@ <h2>via gulp.js (<code>$ npm test</code>)</h2>
     <h2>via angular.js</h2>
     <img src="tumblr_n39vfaV03s1rnbw6mo1_400.gif" jaggy alt="for Angular.js">
     <img ng-src="yuno.png" jaggy alt="for Angular.js">
+    <img ng-src="comeon! emptyimage" jaggy alt="for Angular.js">
 
     <h2>via jaggy API(<code>window.jaggy</code>)</h2>
     <figure>

public/jaggy.browser.js

@@ -392,7 +392,7 @@ Jaggy.gulpPlugin = function(options) {
 };
 
 Jaggy.createSVG = function() {
-  var args, callback, getPixels, options, url;
+  var args, cache, callback, getPixels, options, url;
   url = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
   if (typeof url !== 'string') {
     throw new Error('url is not string');
@@ -410,6 +410,13 @@ Jaggy.createSVG = function() {
   if (options.outerHTML == null) {
     options.outerHTML = false;
   }
+  if (options.cache) {
+    options.cacheUrl = url;
+    cache = Jaggy.getCache(url);
+    if ((cache != null) && (options.noCache == null)) {
+      return callback(null, cache);
+    }
+  }
   getPixels = require('get-pixels');
   return getPixels(url, function(error, pixels) {
     var xhr;
@@ -444,10 +451,30 @@ Jaggy.createSVG = function() {
   });
 };
 
+Jaggy.getCache = function(url) {
+  return localStorage.getItem('jaggy:' + url);
+};
+
+Jaggy.setCache = function(url, cache) {
+  var error;
+  try {
+    return localStorage.setItem('jaggy:' + url, cache);
+  } catch (_error) {
+    error = _error;
+    localStorage.removeItem('jaggy:' + url);
+    return console.error(error);
+  }
+};
+
 Jaggy.angularModule = function(window) {
   var angularModule;
   angularModule = window.angular.module('jaggy', []);
-  return angularModule.directive('jaggy', function() {
+  angularModule.constant('jaggyConfig', {
+    useCache: 'localStorage',
+    useEmptyImage: true
+  });
+  angularModule.constant('jaggyEmptyImage', '<svg viewBox="0 0 1 1" shape-rendering="crispEdges" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0,0h1v1h-1Z" fill="rgba(0,0,0,0.50)"></path></svg>');
+  return angularModule.directive('jaggy', function(jaggyConfig, jaggyEmptyImage) {
     return function(scope, element, attrs) {
       var i, key, len, options, param, ref, ref1, url, value;
       element.css('display', 'none');
@@ -460,13 +487,17 @@ Jaggy.angularModule = function(window) {
           options[key] = value;
         }
       }
+      options.cache = !!jaggyConfig.useCache;
       url = attrs.src;
       if (url == null) {
         url = attrs.ngSrc;
       }
       return Jaggy.createSVG(url, options, function(error, svg) {
-        if (error != null) {
-          throw error;
+        if (error) {
+          if (!jaggyConfig.useEmptyImage) {
+            throw error;
+          }
+          return element.replaceWith(jaggyEmptyImage);
         }
         return element.replaceWith(svg);
       });
@@ -502,6 +533,9 @@ Jaggy.convertToSVG = function() {
     svg = svg.outerHTML.replace(' viewbox=', ' viewBox=');
     svg = svg.replace(/&gt;/g, '>');
   }
+  if (options.cacheUrl != null) {
+    Jaggy.setCache(options.cacheUrl, svg.outerHTML);
+  }
   return callback(null, svg);
 };
 
@@ -27968,11 +28002,13 @@ module.exports={
   "main": "jaggy",
   "bin": "jaggy",
   "description": "is Converting to SVG by pixels",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "scripts": {
     "build": "browserify lib/jaggy.coffee -r get-pixels -r gify-parse -t coffeeify > public/jaggy.browser.js",
     "prestart": "onefile --json --output public/pkgs",
     "start": "cd public && open http://localhost:8000 && python -m SimpleHTTPServer",
+    "watch": "abigail ./**/*.coffee:build --ignore --execute",
+
     "convert": "jaggy public -o hogekosan -g 2",
     "test": "jasminetea test --verbose --cover --report",
     "posttest": "rm public/*.svg",
@@ -27989,6 +28025,7 @@ module.exports={
     "through2": "^0.6.3"
   },
   "devDependencies": {
+    "abigail": "0.0.7",
     "browserify": "^9.0.3",
     "coffeeify": "^1.0.0",
     "gulp": "^3.8.11",