svg-themer - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

index.js

@@ -8,9 +8,9 @@ /* eslint-env browser */
 var regexUrlDataSvg64 = new RegExp('^(url\\(")' + PATTERN + '("\\))$');
-var WHOLE_MATCH_INDEX = 0,
-    URL_CONSTRUCT_INDEX = 1,
-    URI_MATCH_INDEX = 2,
-    SCHEME_INDEX = 3,
-    ENCODING_MATCH_INDEX = 4,
-    DATA_MATCH_INDEX = 6,
-    SVG_FILE_URL_INDEX = 7;
+var MATCH_INDEX_WHOLE = 0,
+    MATCH_INDEX_URI = 2,
+    MATCH_INDEX_SCHEME = 3,
+    MATCH_INDEX_ENCODING = 4,
+    MATCH_INDEX_COMMA = 5,
+    MATCH_INDEX_DATA = 6,
+    MATCH_INDEX_SVG_FILE_URL = 7;
 var propsUsingImageUrl = ['background-image', 'list-style-image', 'border-image', 'content'];
@@ -81,7 +81,10 @@
     var self = this;
-    if (match[SVG_FILE_URL_INDEX]) {
-        get(match[SVG_FILE_URL_INDEX], function(svgMarkup) {
-            match[SCHEME_INDEX] = 'data:image/svg+xml,';
-            match[DATA_MATCH_INDEX] = svgMarkup;
-            match[SVG_FILE_URL_INDEX] = '';
+    if (match[MATCH_INDEX_SVG_FILE_URL]) {
+        get(match[MATCH_INDEX_SVG_FILE_URL], function(svgMarkup) {
+            // write back file data to object base64-encoded
+            match[MATCH_INDEX_SCHEME] = 'data:image/svg+xml';
+            match[MATCH_INDEX_ENCODING] = ';base64';
+            match[MATCH_INDEX_COMMA] = ',';
+            match[MATCH_INDEX_DATA] = svgMarkup;
+            match[MATCH_INDEX_SVG_FILE_URL] = '';
             applyNow.call(self, match, theme, setSvgProps, callback);
@@ -110,4 +113,4 @@ });
 function applyNow(match, theme, setSvgProps, callback) {
-    var encoding = match[ENCODING_MATCH_INDEX];
-    var data = match[DATA_MATCH_INDEX];
+    var encoding = match[MATCH_INDEX_ENCODING];
+    var data = match[MATCH_INDEX_DATA];
     var div = document.createElement('div');
@@ -122,9 +125,9 @@
             var svgMarkup = (new XMLSerializer()).serializeToString(div.firstElementChild);
-            match[DATA_MATCH_INDEX] = encodeURIComponent(svgMarkup); // always encode result for IE11's sake
+            match[MATCH_INDEX_DATA] = encodeURIComponent(svgMarkup); // always encode result for IE11's sake
             break;
         case ';base64':
-            div.innerHTML = atob(data);
+            div.innerHTML = data.indexOf('<') < 0 ? atob(data) : data;
             setSvgProps.call(div.firstElementChild, theme);
             var svgMarkup = (new XMLSerializer()).serializeToString(div.firstElementChild);
-            match[DATA_MATCH_INDEX] = btoa(svgMarkup);
+            match[MATCH_INDEX_DATA] = btoa(svgMarkup);
             break;
@@ -135,3 +138,3 @@ default:
 
-    match[WHOLE_MATCH_INDEX] = match[URI_MATCH_INDEX] = undefined; // omit from join
+    match[MATCH_INDEX_WHOLE] = match[MATCH_INDEX_URI] = undefined; // omit from join
     callback.call(this, match.join(''));
@@ -138,0 +141,0 @@ }

package.json

 {
   "name": "svg-themer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Apply a theme to SVG elements as well as image data and css rules constructed from SVG markup",
@@ -5,0 +5,0 @@ "main": "index.js",

umd/svg-themer.js

@@ -8,9 +8,9 @@ /* eslint-env browser */
 var regexUrlDataSvg64 = new RegExp('^(url\\(")' + PATTERN + '("\\))$');
-var WHOLE_MATCH_INDEX = 0,
-    URL_CONSTRUCT_INDEX = 1,
-    URI_MATCH_INDEX = 2,
-    SCHEME_INDEX = 3,
-    ENCODING_MATCH_INDEX = 4,
-    DATA_MATCH_INDEX = 6,
-    SVG_FILE_URL_INDEX = 7;
+var MATCH_INDEX_WHOLE = 0,
+    MATCH_INDEX_URI = 2,
+    MATCH_INDEX_SCHEME = 3,
+    MATCH_INDEX_ENCODING = 4,
+    MATCH_INDEX_COMMA = 5,
+    MATCH_INDEX_DATA = 6,
+    MATCH_INDEX_SVG_FILE_URL = 7;
 var propsUsingImageUrl = ['background-image', 'list-style-image', 'border-image', 'content'];
@@ -81,7 +81,10 @@
     var self = this;
-    if (match[SVG_FILE_URL_INDEX]) {
-        get(match[SVG_FILE_URL_INDEX], function(svgMarkup) {
-            match[SCHEME_INDEX] = 'data:image/svg+xml,';
-            match[DATA_MATCH_INDEX] = svgMarkup;
-            match[SVG_FILE_URL_INDEX] = '';
+    if (match[MATCH_INDEX_SVG_FILE_URL]) {
+        get(match[MATCH_INDEX_SVG_FILE_URL], function(svgMarkup) {
+            // write back file data to object base64-encoded
+            match[MATCH_INDEX_SCHEME] = 'data:image/svg+xml';
+            match[MATCH_INDEX_ENCODING] = ';base64';
+            match[MATCH_INDEX_COMMA] = ',';
+            match[MATCH_INDEX_DATA] = svgMarkup;
+            match[MATCH_INDEX_SVG_FILE_URL] = '';
             applyNow.call(self, match, theme, setSvgProps, callback);
@@ -110,4 +113,4 @@ });
 function applyNow(match, theme, setSvgProps, callback) {
-    var encoding = match[ENCODING_MATCH_INDEX];
-    var data = match[DATA_MATCH_INDEX];
+    var encoding = match[MATCH_INDEX_ENCODING];
+    var data = match[MATCH_INDEX_DATA];
     var div = document.createElement('div');
@@ -122,9 +125,9 @@
             var svgMarkup = (new XMLSerializer()).serializeToString(div.firstElementChild);
-            match[DATA_MATCH_INDEX] = encodeURIComponent(svgMarkup); // always encode result for IE11's sake
+            match[MATCH_INDEX_DATA] = encodeURIComponent(svgMarkup); // always encode result for IE11's sake
             break;
         case ';base64':
-            div.innerHTML = atob(data);
+            div.innerHTML = data.indexOf('<') < 0 ? atob(data) : data;
             setSvgProps.call(div.firstElementChild, theme);
             var svgMarkup = (new XMLSerializer()).serializeToString(div.firstElementChild);
-            match[DATA_MATCH_INDEX] = btoa(svgMarkup);
+            match[MATCH_INDEX_DATA] = btoa(svgMarkup);
             break;
@@ -135,3 +138,3 @@ default:
 
-    match[WHOLE_MATCH_INDEX] = match[URI_MATCH_INDEX] = undefined; // omit from join
+    match[MATCH_INDEX_WHOLE] = match[MATCH_INDEX_URI] = undefined; // omit from join
     callback.call(this, match.join(''));
@@ -138,0 +141,0 @@ }

umd/svg-themer.min.js

@@ -1,1 +0,1 @@
-"use strict";var PATTERN="((data:image/svg\\+xml)(;\\w+)?(,)(.*)|(.*\\.svg))";var regexDataSvg64=new RegExp("^()"+PATTERN+"()$");var regexUrlDataSvg64=new RegExp('^(url\\(")'+PATTERN+'("\\))$');var WHOLE_MATCH_INDEX=0,URL_CONSTRUCT_INDEX=1,URI_MATCH_INDEX=2,SCHEME_INDEX=3,ENCODING_MATCH_INDEX=4,DATA_MATCH_INDEX=6,SVG_FILE_URL_INDEX=7;var propsUsingImageUrl=["background-image","list-style-image","border-image","content"];var api;if(typeof exports==="undefined"){window.svgThemer=api={}}else{api=exports}api.setSvgProps=function(theme){if(theme.color){this.style.stroke=this.style.color=theme.color}if(theme.backgroundColor){this.style.fill=theme.backgroundColor}};api.setImgSvgProps=function(theme,setSvgProps){if(this.tagName==="IMG"){var match=this.src.match(regexDataSvg64);if(match){applyThemeToSvgData.call(this,match,theme,setSvgProps,function(imageData){this.src=imageData})}}return this};api.setRuleSvgProps=function(theme,setSvgProps,propName){var match;var ruleProps=this.style;if(typeof setSvgProps==="string"){propName=setSvgProps;setSvgProps=undefined}function matchProp(propName){return match=ruleProps[propName].match(regexUrlDataSvg64)}if(propName){matchProp(propName)}else{for(var i=0;i<propsUsingImageUrl.length;++i){propName=propsUsingImageUrl[i];if(matchProp(propName)){break}}}if(match){applyThemeToSvgData.call(this,match,theme,setSvgProps,function(urlImageData){ruleProps[propName]=urlImageData})}return this};function applyThemeToSvgData(match,theme,setSvgProps,callback){var self=this;if(match[SVG_FILE_URL_INDEX]){get(match[SVG_FILE_URL_INDEX],function(svgMarkup){match[SCHEME_INDEX]="data:image/svg+xml,";match[DATA_MATCH_INDEX]=svgMarkup;match[SVG_FILE_URL_INDEX]="";applyNow.call(self,match,theme,setSvgProps,callback)})}else{applyNow.call(this,match,theme,setSvgProps,callback)}}var HTTP_STATE_DONE=4,HTTP_STATUS_OK=200;function get(url,callback){var httpRequest=new XMLHttpRequest;httpRequest.open("GET",url,true);httpRequest.onreadystatechange=function(){if(httpRequest.readyState===HTTP_STATE_DONE&&httpRequest.status===HTTP_STATUS_OK){callback(httpRequest.responseText)}};httpRequest.send(null)}function applyNow(match,theme,setSvgProps,callback){var encoding=match[ENCODING_MATCH_INDEX];var data=match[DATA_MATCH_INDEX];var div=document.createElement("div");setSvgProps=setSvgProps||this.setSvgProps||api.setSvgProps;switch(encoding){case undefined:div.innerHTML=data.indexOf("%3C")>=0?decodeURIComponent(data):data;setSvgProps.call(div.firstElementChild,theme);var svgMarkup=(new XMLSerializer).serializeToString(div.firstElementChild);match[DATA_MATCH_INDEX]=encodeURIComponent(svgMarkup);break;case";base64":div.innerHTML=atob(data);setSvgProps.call(div.firstElementChild,theme);var svgMarkup=(new XMLSerializer).serializeToString(div.firstElementChild);match[DATA_MATCH_INDEX]=btoa(svgMarkup);break;default:throw new TypeError('Unexpected encoding "'+encoding+'"')}match[WHOLE_MATCH_INDEX]=match[URI_MATCH_INDEX]=undefined;callback.call(this,match.join(""))}api.mixin=function(svgOrImgOrRule,setSvgProps){if(svgOrImgOrRule.tagName==="svg"){if(setSvgProps){svgOrImgOrRule.setTheme=setSvgProps}else{Object.defineProperty(svgOrImgOrRule,"setTheme",{get:function(){return api.setSvgProps}})}}else if(svgOrImgOrRule.tagName==="IMG"){if(setSvgProps){svgOrImgOrRule.setSvgProps=setSvgProps}svgOrImgOrRule.setTheme=api.setImgSvgProps}else if(svgOrImgOrRule=="[object CSSStyleRule]"){if(setSvgProps){svgOrImgOrRule.setSvgProps=setSvgProps}svgOrImgOrRule.setTheme=api.setRuleSvgProps}return svgOrImgOrRule};
+"use strict";var PATTERN="((data:image/svg\\+xml)(;\\w+)?(,)(.*)|(.*\\.svg))";var regexDataSvg64=new RegExp("^()"+PATTERN+"()$");var regexUrlDataSvg64=new RegExp('^(url\\(")'+PATTERN+'("\\))$');var MATCH_INDEX_WHOLE=0,MATCH_INDEX_URI=2,MATCH_INDEX_SCHEME=3,MATCH_INDEX_ENCODING=4,MATCH_INDEX_COMMA=5,MATCH_INDEX_DATA=6,MATCH_INDEX_SVG_FILE_URL=7;var propsUsingImageUrl=["background-image","list-style-image","border-image","content"];var api;if(typeof exports==="undefined"){window.svgThemer=api={}}else{api=exports}api.setSvgProps=function(theme){if(theme.color){this.style.stroke=this.style.color=theme.color}if(theme.backgroundColor){this.style.fill=theme.backgroundColor}};api.setImgSvgProps=function(theme,setSvgProps){if(this.tagName==="IMG"){var match=this.src.match(regexDataSvg64);if(match){applyThemeToSvgData.call(this,match,theme,setSvgProps,function(imageData){this.src=imageData})}}return this};api.setRuleSvgProps=function(theme,setSvgProps,propName){var match;var ruleProps=this.style;if(typeof setSvgProps==="string"){propName=setSvgProps;setSvgProps=undefined}function matchProp(propName){return match=ruleProps[propName].match(regexUrlDataSvg64)}if(propName){matchProp(propName)}else{for(var i=0;i<propsUsingImageUrl.length;++i){propName=propsUsingImageUrl[i];if(matchProp(propName)){break}}}if(match){applyThemeToSvgData.call(this,match,theme,setSvgProps,function(urlImageData){ruleProps[propName]=urlImageData})}return this};function applyThemeToSvgData(match,theme,setSvgProps,callback){var self=this;if(match[MATCH_INDEX_SVG_FILE_URL]){get(match[MATCH_INDEX_SVG_FILE_URL],function(svgMarkup){match[MATCH_INDEX_SCHEME]="data:image/svg+xml";match[MATCH_INDEX_ENCODING]=";base64";match[MATCH_INDEX_COMMA]=",";match[MATCH_INDEX_DATA]=svgMarkup;match[MATCH_INDEX_SVG_FILE_URL]="";applyNow.call(self,match,theme,setSvgProps,callback)})}else{applyNow.call(this,match,theme,setSvgProps,callback)}}var HTTP_STATE_DONE=4,HTTP_STATUS_OK=200;function get(url,callback){var httpRequest=new XMLHttpRequest;httpRequest.open("GET",url,true);httpRequest.onreadystatechange=function(){if(httpRequest.readyState===HTTP_STATE_DONE&&httpRequest.status===HTTP_STATUS_OK){callback(httpRequest.responseText)}};httpRequest.send(null)}function applyNow(match,theme,setSvgProps,callback){var encoding=match[MATCH_INDEX_ENCODING];var data=match[MATCH_INDEX_DATA];var div=document.createElement("div");setSvgProps=setSvgProps||this.setSvgProps||api.setSvgProps;switch(encoding){case undefined:div.innerHTML=data.indexOf("%3C")>=0?decodeURIComponent(data):data;setSvgProps.call(div.firstElementChild,theme);var svgMarkup=(new XMLSerializer).serializeToString(div.firstElementChild);match[MATCH_INDEX_DATA]=encodeURIComponent(svgMarkup);break;case";base64":div.innerHTML=data.indexOf("<")<0?atob(data):data;setSvgProps.call(div.firstElementChild,theme);var svgMarkup=(new XMLSerializer).serializeToString(div.firstElementChild);match[MATCH_INDEX_DATA]=btoa(svgMarkup);break;default:throw new TypeError('Unexpected encoding "'+encoding+'"')}match[MATCH_INDEX_WHOLE]=match[MATCH_INDEX_URI]=undefined;callback.call(this,match.join(""))}api.mixin=function(svgOrImgOrRule,setSvgProps){if(svgOrImgOrRule.tagName==="svg"){if(setSvgProps){svgOrImgOrRule.setTheme=setSvgProps}else{Object.defineProperty(svgOrImgOrRule,"setTheme",{get:function(){return api.setSvgProps}})}}else if(svgOrImgOrRule.tagName==="IMG"){if(setSvgProps){svgOrImgOrRule.setSvgProps=setSvgProps}svgOrImgOrRule.setTheme=api.setImgSvgProps}else if(svgOrImgOrRule=="[object CSSStyleRule]"){if(setSvgProps){svgOrImgOrRule.setSvgProps=setSvgProps}svgOrImgOrRule.setTheme=api.setRuleSvgProps}return svgOrImgOrRule};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29281

increased by1.98%

Lines of code

295

increased by2.43%

No dependency changes