svg-crowbar
Advanced tools
svg-crowbar - npm Package Compare versions
Comparing version 0.1.0 to 0.2.0
@@ -1,1 +0,1 @@ | ||
| !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e);const o='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',r={xmlns:"http://www.w3.org/2000/xmlns/",xlink:"http://www.w3.org/1999/xlink",svg:"http://www.w3.org/2000/svg"};var i=function(t){const e=function(){let t=window.document.createElementNS(r.svg,"svg");document.body.appendChild(t),t.style.all="initial";const e=getComputedStyle(t);return document.body.removeChild(t),t=null,e}();t.setAttribute("version","1.1"),t.removeAttribute("xmlns"),t.removeAttribute("xlink"),t.hasAttributeNS(r.xmlns,"xmlns")||t.setAttributeNS(r.xmlns,"xmlns",r.svg),t.hasAttributeNS(r.xmlns,"xmlns:xlink")||t.setAttributeNS(r.xmlns,"xmlns:xlink",r.xlink),function(t,e){function n(t){const n=getComputedStyle(t);let o,r,i="";for(let t=0,l=n.length;t<l;t++)o=n[t],(r=n.getPropertyValue(o))!==e.getPropertyValue(o)&&(i+=`${o}:${r};`);t.setAttribute("style",i)}const o=function(t){const e=[];return e.push(t),function t(n){if(n&&n.hasChildNodes()){let o=n.firstChild;for(;o;)1===o.nodeType&&"SCRIPT"!==o.nodeName&&(e.push(o),t(o)),o=o.nextSibling}}(t),e}(t);let r=o.length;for(;r--;)n(o[r])}(t,e);const n=(new XMLSerializer).serializeToString(t),i=t.getBoundingClientRect();return{top:i.top,left:i.left,width:i.width,height:i.height,class:t.getAttribute("class"),id:t.getAttribute("id"),name:t.getAttribute("name"),childElementCount:t.childElementCount,source:[o+n]}};function l(t){let e="untitled";return t.id?e=t.id:t.class?e=t.class:window.document.title&&(e=window.document.title.replace(/[^a-z0-9]/gi,"-").toLowerCase()),e}const u=10;var s=function(t){const e=l(t),n=window.URL.createObjectURL(new Blob(t.source,{type:"text/xml"})),o=document.createElement("a");document.body.appendChild(o),o.setAttribute("class","svg-crowbar"),o.setAttribute("download",`${e}.svg`),o.setAttribute("href",n),o.style.display="none",o.click(),setTimeout(()=>{window.URL.revokeObjectURL(n),document.body.removeChild(o)},u)};var d=function(t){const e=l(t),n=document.createElement("canvas");document.body.appendChild(n),n.setAttribute("id","svg-image"),n.setAttribute("width",t.width),n.setAttribute("height",t.height),n.style.display="none";const o=n.getContext("2d"),r=`data:image/svg+xml;base64,${btoa(t.source)}`,i=new Image;i.src=r,i.onload=function(){o.drawImage(i,0,0);const t=n.toDataURL("image/png"),r=document.createElement("a");r.download=`${e}.png`,r.href=t,document.body.appendChild(r),r.click(),setTimeout(()=>{document.body.removeChild(r)},u)}};n.d(e,"downloadPng",function(){return c});e.default=(t=>s(i(t)));const c=t=>d(i(t))}])}); | ||
| !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e);const o='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',r={xmlns:"http://www.w3.org/2000/xmlns/",xlink:"http://www.w3.org/1999/xlink",svg:"http://www.w3.org/2000/svg"},i=10;var l=function(t){const e=function(){let t=window.document.createElementNS(r.svg,"svg");document.body.appendChild(t),t.style.all="initial";const e=getComputedStyle(t);return document.body.removeChild(t),t=null,e}();t.setAttribute("version","1.1"),t.removeAttribute("xmlns"),t.removeAttribute("xlink"),t.hasAttributeNS(r.xmlns,"xmlns")||t.setAttributeNS(r.xmlns,"xmlns",r.svg),t.hasAttributeNS(r.xmlns,"xmlns:xlink")||t.setAttributeNS(r.xmlns,"xmlns:xlink",r.xlink),function(t,e){function n(t){const n=getComputedStyle(t);let o,r,i="";for(let t=0,l=n.length;t<l;t++)o=n[t],(r=n.getPropertyValue(o))!==e.getPropertyValue(o)&&(i+=`${o}:${r};`);t.setAttribute("style",i)}const o=function(t){const e=[];return e.push(t),function t(n){if(n&&n.hasChildNodes()){let o=n.firstChild;for(;o;)1===o.nodeType&&"SCRIPT"!==o.nodeName&&(e.push(o),t(o)),o=o.nextSibling}}(t),e}(t);let r=o.length;for(;r--;)n(o[r])}(t,e);const n=(new XMLSerializer).serializeToString(t),i=t.getBoundingClientRect();return{top:i.top,left:i.left,width:i.width,height:i.height,class:t.getAttribute("class"),id:t.getAttribute("id"),name:t.getAttribute("name"),childElementCount:t.childElementCount,source:[o+n]}};const u="untitled";function s(t){if(!(t instanceof SVGElement))throw new Error("SVG Element is required");return t.getAttribute("id")||t.getAttribute("class")||window.document.title.replace(/[^a-z0-9]/gi,"-").toLowerCase()||u}function c(t,e,n){const o=document.createElement("a");document.body.appendChild(o),o.setAttribute("class","svg-crowbar"),o.setAttribute("download",t),o.setAttribute("href",e),o.style.display="none",o.click(),setTimeout(()=>{n&&n(),document.body.removeChild(o)},i)}var d=function(t,e){const n=window.URL.createObjectURL(new Blob(t.source,{type:"text/xml"}));c(`${e||s(t)}.svg`,n,()=>window.URL.revokeObjectURL(n))};var a=function(t,e){const n=document.createElement("canvas");document.body.appendChild(n),n.setAttribute("id","svg-image"),n.setAttribute("width",t.width),n.setAttribute("height",t.height),n.style.display="none";const o=n.getContext("2d"),r=`data:image/svg+xml;base64,${btoa(t.source)}`,i=new Image;i.onload=function(){o.drawImage(i,0,0);const r=n.toDataURL("image/png");c(`${e||s(t)}.png`,r,()=>document.body.removeChild(n))},i.src=r};n.d(e,"downloadPng",function(){return f});e.default=((t,e)=>d(l(t),e));const f=(t,e)=>a(l(t),e)}])}); |
| { | ||
| "name": "svg-crowbar", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "A library based on a Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file", | ||
@@ -8,3 +8,3 @@ "main": "./dist/main.js", | ||
| "scripts": { | ||
| "test": "test", | ||
| "test": "jest", | ||
| "lint": "eslint ./src", | ||
@@ -27,11 +27,24 @@ "lint-fix": "eslint --fix ./src", | ||
| "devDependencies": { | ||
| "@babel/core": "^7.2.2", | ||
| "@babel/preset-env": "^7.2.3", | ||
| "@cyberskunk/eslint-config": "1.0.0", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
| "babel-eslint": "10.0.1", | ||
| "babel-jest": "^23.6.0", | ||
| "eslint": "5.8.0", | ||
| "eslint-config-prettier": "3.1.0", | ||
| "eslint-plugin-prettier": "3.0.0", | ||
| "jest": "^23.6.0", | ||
| "prettier": "1.15.1", | ||
| "webpack": "^4.25.1", | ||
| "webpack-cli": "^3.1.2" | ||
| }, | ||
| "babel": { | ||
| "presets": [ | ||
| [ | ||
| "@babel/preset-env", | ||
| {} | ||
| ] | ||
| ] | ||
| } | ||
| } |
@@ -16,3 +16,3 @@ # SVG Crowbar Library | ||
| downloadSvg(document.querySelector('svg')); | ||
| downloadSvg(document.querySelector('svg'), 'my_svg'); | ||
| ``` | ||
@@ -25,1 +25,5 @@ or | ||
| ``` | ||
| Filename is determined by element id, class or page title, when not provided explicitly. | ||
| An error is thrown in case no valid SVG element was provided. |
@@ -0,1 +1,8 @@ | ||
| export const doctype = | ||
| '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' | ||
| export const prefix = { | ||
| xmlns: 'http://www.w3.org/2000/xmlns/', | ||
| xlink: 'http://www.w3.org/1999/xlink', | ||
| svg: 'http://www.w3.org/2000/svg', | ||
| } | ||
| export const REMOVE_TIMEOUT = 10 |
@@ -5,5 +5,5 @@ import getSource from './inputProcessor' | ||
| const downloadSvg = svgElement => download(getSource(svgElement)) | ||
| const downloadSvg = (svgElement, filename) => download(getSource(svgElement), filename) | ||
| export default downloadSvg | ||
| const downloadPng = svgElement => downloadPNG(getSource(svgElement)) | ||
| const downloadPng = (svgElement, filename) => downloadPNG(getSource(svgElement), filename) | ||
| export {downloadPng} |
@@ -1,8 +0,2 @@ | ||
| const doctype = | ||
| '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' | ||
| const prefix = { | ||
| xmlns: 'http://www.w3.org/2000/xmlns/', | ||
| xlink: 'http://www.w3.org/1999/xlink', | ||
| svg: 'http://www.w3.org/2000/svg', | ||
| } | ||
| import {doctype, prefix} from './const' | ||
@@ -9,0 +3,0 @@ function getEmptySvgDeclarationComputed() { |
@@ -1,7 +0,4 @@ | ||
| import {getFilename} from './util' | ||
| import {REMOVE_TIMEOUT} from './const' | ||
| import {getFilename, commenceDownload} from './util' | ||
| function downloadPng(source) { | ||
| const filename = getFilename(source) | ||
| function downloadPng(source, filename) { | ||
| const canvas = document.createElement('canvas') | ||
@@ -22,16 +19,11 @@ document.body.appendChild(canvas) | ||
| const a = document.createElement('a') | ||
| a.download = `${filename}.png` | ||
| a.href = canvasdata | ||
| document.body.appendChild(a) | ||
| a.click() | ||
| setTimeout(() => { | ||
| document.body.removeChild(a) | ||
| }, REMOVE_TIMEOUT) | ||
| commenceDownload(`${filename || getFilename(source)}.png`, canvasdata, () => | ||
| document.body.removeChild(canvas), | ||
| ) | ||
| } | ||
| image.onload = onLoad | ||
| image.src = imgsrc | ||
| image.onload = onLoad | ||
| } | ||
| export default downloadPng |
@@ -1,23 +0,11 @@ | ||
| import {getFilename} from './util' | ||
| import {REMOVE_TIMEOUT} from './const' | ||
| import {getFilename, commenceDownload} from './util' | ||
| function download(source) { | ||
| const filename = getFilename(source) | ||
| function download(source, filename) { | ||
| const url = window.URL.createObjectURL(new Blob(source.source, {type: 'text/xml'})) | ||
| const a = document.createElement('a') | ||
| document.body.appendChild(a) | ||
| a.setAttribute('class', 'svg-crowbar') | ||
| a.setAttribute('download', `${filename}.svg`) | ||
| a.setAttribute('href', url) | ||
| a.style.display = 'none' | ||
| a.click() | ||
| setTimeout(() => { | ||
| window.URL.revokeObjectURL(url) | ||
| document.body.removeChild(a) | ||
| }, REMOVE_TIMEOUT) | ||
| commenceDownload(`${filename || getFilename(source)}.svg`, url, () => | ||
| window.URL.revokeObjectURL(url), | ||
| ) | ||
| } | ||
| export default download |
@@ -0,12 +1,33 @@ | ||
| import {REMOVE_TIMEOUT} from './const' | ||
| export const DEFAULT_FILENAME = 'untitled' | ||
| export function getFilename(source) { | ||
| let filename = 'untitled' | ||
| if (!(source instanceof SVGElement)) { | ||
| throw new Error('SVG Element is required') | ||
| } | ||
| if (source.id) { | ||
| filename = source.id | ||
| } else if (source.class) { | ||
| filename = source.class | ||
| } else if (window.document.title) { | ||
| filename = window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase() | ||
| } | ||
| return filename | ||
| return ( | ||
| source.getAttribute('id') || | ||
| source.getAttribute('class') || | ||
| window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase() || | ||
| DEFAULT_FILENAME | ||
| ) | ||
| } | ||
| export function commenceDownload(filename, imgdata, callback) { | ||
| const a = document.createElement('a') | ||
| document.body.appendChild(a) | ||
| a.setAttribute('class', 'svg-crowbar') | ||
| a.setAttribute('download', filename) | ||
| a.setAttribute('href', imgdata) | ||
| a.style.display = 'none' | ||
| a.click() | ||
| setTimeout(() => { | ||
| if (callback) { | ||
| callback() | ||
| } | ||
| document.body.removeChild(a) | ||
| }, REMOVE_TIMEOUT) | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by172.28%
32448
- Number of package files
- increased by70%
17
- Lines of code
- increased by242.11%
520
- Number of lines in readme file
- increased by16.67%
28
Worsened metrics
- Dev dependency count
- increased by62.5%
13
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes