Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
elastic-svg
Advanced tools
elastic-svg - npm Package Compare versions
Comparing version 0.0.6 to 0.0.8
196
index.js
@@ -1,132 +0,122 @@ | ||
| // v0.0.6 | ||
| // v0.0.8 | ||
| (function() { | ||
| var root = this; | ||
| export default function elasticSVG(selector, opts) { | ||
| opts = opts || {}; | ||
| var elasticSVG = function(selector, opts) { | ||
| opts = opts || {}; | ||
| // containing DOM element, which defaults to body | ||
| var parent = document.querySelectorAll(selector || "body"); | ||
| // containing DOM element, which defaults to body | ||
| var parent = document.querySelectorAll(selector || "body"); | ||
| if (!parent || !parent.length) { | ||
| console.log("Couldn't find a parent for elasticSVG making the selector '" + selector + "'"); | ||
| return; | ||
| } | ||
| if (!parent || !parent.length) { | ||
| console.log("Couldn't find a parent for elasticSVG making the selector '" + selector + "'"); | ||
| return; | ||
| } | ||
| parent = parent[0]; | ||
| parent = parent[0]; | ||
| // you can specify a width if you like, or we'll snap to size of container | ||
| var base = { | ||
| width: typeof opts.width !== "undefined" ? opts.width : parent.clientWidth, | ||
| scale: 1 | ||
| }; | ||
| // you can specify a width if you like, or we'll snap to size of container | ||
| var base = { | ||
| width: typeof opts.width !== "undefined" ? opts.width : parent.clientWidth, | ||
| scale: 1 | ||
| }; | ||
| // we need to remember the original width for scaling purposes | ||
| base.original_width = base.width; | ||
| // we need to remember the original width for scaling purposes | ||
| base.original_width = base.width; | ||
| // you can either specify the height or the aspect ratio. If neither is specified, refaults to roughly the golden ratio | ||
| // specifying the height keeps the svg at a standard height and only resizes the width | ||
| // specifying the aspect ratio resizes both | ||
| if (typeof opts.height !== "undefined") { | ||
| base.height = opts.height; | ||
| base.aspect = base.height / base.width; | ||
| } else { | ||
| opts.aspect = typeof opts.aspect !== "undefined" ? opts.aspect : 0.618; | ||
| base.height = base.width * opts.aspect; | ||
| } | ||
| // you can either specify the height or the aspect ratio. If neither is specified, refaults to roughly the golden ratio | ||
| // specifying the height keeps the svg at a standard height and only resizes the width | ||
| // specifying the aspect ratio resizes both | ||
| if (typeof opts.height !== "undefined") { | ||
| base.height = opts.height; | ||
| base.aspect = base.height / base.width; | ||
| } else { | ||
| opts.aspect = typeof opts.aspect !== "undefined" ? opts.aspect : 0.618; | ||
| base.height = base.width * opts.aspect; | ||
| } | ||
| // create a new SVG element | ||
| var xmlns = "http://www.w3.org/2000/svg"; | ||
| var svg = document.createElementNS(xmlns, "svg"); | ||
| svg.setAttributeNS(null, "width", base.width); | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| parent.appendChild(svg); | ||
| // setting resize to "auto" sets the viewport to the original width and height so that the SVG always scales | ||
| if (opts.resize && opts.resize == "auto") { | ||
| svg.setAttributeNS(null, "viewBox", "0 0 " + base.width + " " + base.height); | ||
| } | ||
| // create a new SVG element | ||
| var xmlns = "http://www.w3.org/2000/svg"; | ||
| var svg = document.createElementNS(xmlns, "svg"); | ||
| // function called when the window resizes | ||
| function resize() { | ||
| console.log("resizing base"); | ||
| base.width = parent.clientWidth; | ||
| svg.setAttributeNS(null, "width", base.width); | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| parent.appendChild(svg); | ||
| // setting resize to "auto" sets the viewport to the original width and height so that the SVG always scales | ||
| if (opts.resize && opts.resize == "auto") { | ||
| svg.setAttributeNS(null, "viewBox", "0 0 " + base.width + " " + base.height); | ||
| } | ||
| // function called when the window resizes | ||
| function resize() { | ||
| console.log("resizing base"); | ||
| base.width = parent.clientWidth; | ||
| svg.setAttributeNS(null, "width", base.width); | ||
| // only resize the height if aspect was specified instead of height | ||
| if (opts.aspect) { | ||
| base.height = base.width * opts.aspect; | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| } | ||
| // only resize the height if aspect was specified instead of height | ||
| if (opts.aspect) { | ||
| base.height = base.width * opts.aspect; | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| } | ||
| base.scale = base.width / base.original_width; | ||
| base.scale = base.width / base.original_width; | ||
| // optional callback | ||
| if (opts.onResize) { | ||
| opts.onResize(base.width, base.height, base.scale); | ||
| } | ||
| // optional callback | ||
| if (opts.onResize) { | ||
| opts.onResize(base.width, base.height, base.scale); | ||
| } | ||
| } | ||
| var resizeTimer; | ||
| var resizeTimer; | ||
| // http://stackoverflow.com/questions/3339825/what-is-the-best-practise-to-not-to-override-other-bound-functions-to-window-onr | ||
| function addResizeEvent(func, dur) { | ||
| var oldResize = window.onresize, | ||
| resizeTimer, | ||
| dur = typeof dur === "undefined" ? 100 : parseInt(dur, 10); | ||
| // http://stackoverflow.com/questions/3339825/what-is-the-best-practise-to-not-to-override-other-bound-functions-to-window-onr | ||
| function addResizeEvent(func, dur) { | ||
| var oldResize = window.onresize, | ||
| resizeTimer, | ||
| dur = typeof dur === "undefined" ? 100 : parseInt(dur, 10); | ||
| window.onresize = function () { | ||
| clearTimeout(resizeTimer); | ||
| window.onresize = function () { | ||
| clearTimeout(resizeTimer); | ||
| if (typeof oldResize === 'function') { | ||
| oldResize(); | ||
| } | ||
| if (typeof oldResize === 'function') { | ||
| oldResize(); | ||
| } | ||
| resizeTimer = setTimeout(function() { | ||
| func(); | ||
| }, dur); | ||
| } | ||
| resizeTimer = setTimeout(function() { | ||
| func(); | ||
| }, dur); | ||
| } | ||
| } | ||
| addResizeEvent(resize, 50); | ||
| addResizeEvent(resize, 50); | ||
| if (opts.resize && opts.resize === "auto") { | ||
| resize(); // call this on load since sometimes the initial conditions are wider than container | ||
| } | ||
| if (opts.resize && opts.resize === "auto") { | ||
| resize(); // call this on load since sometimes the initial conditions are wider than container | ||
| } | ||
| // methods | ||
| base.setResize = function(f) { | ||
| opts.onResize = f; | ||
| } | ||
| // methods | ||
| base.setResize = function(f) { | ||
| opts.onResize = f; | ||
| } | ||
| base.changeAspect = function(aspect) { | ||
| opts.aspect = aspect; | ||
| base.height = base.width * opts.aspect; | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| } | ||
| base.changeAspect = function(aspect) { | ||
| opts.aspect = aspect; | ||
| base.height = base.width * opts.aspect; | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| } | ||
| base.changeHeight = function(height) { | ||
| base.height = height; | ||
| if (opts.aspect) { | ||
| opts.aspect = base.height / base.width; | ||
| } else { | ||
| opts.height = height; | ||
| } | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| } | ||
| base.svg = svg; | ||
| return base; | ||
| base.changeHeight = function(height) { | ||
| base.height = height; | ||
| if (opts.aspect) { | ||
| opts.aspect = base.height / base.width; | ||
| } else { | ||
| opts.height = height; | ||
| } | ||
| svg.setAttributeNS(null, "height", base.height); | ||
| } | ||
| // support various modular environments | ||
| if (typeof module === "object" && module.exports) { // webpack + browserify | ||
| module.exports = elasticSVG; | ||
| } else if (typeof define === "function" && define.amd) { // RequireJS | ||
| define(elasticSVG); | ||
| } else { | ||
| root.elasticSVG = elasticSVG; // directly included | ||
| base.forceResize = function() { | ||
| resize(); | ||
| } | ||
| }()); | ||
| base.svg = svg; | ||
| return base; | ||
| } |
| { | ||
| "name": "elastic-svg", | ||
| "version": "0.0.6", | ||
| "version": "0.0.8", | ||
| "description": "Responsive SVGs with no dependencies", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
| # Elastic SVG elements | ||
| ======= | ||
| v0.0.8 | ||
| Scalable Vector Graphics are one of the Web's most triumphant technologies, but they're not as responsive as they might be. This is a very lightweight, dependency-free library that generates `svg` elements that fit to their container and scale or don't scale as necessary. | ||
@@ -43,2 +45,3 @@ | ||
| ## Change log | ||
| + *v0.0.8*: Made an ES6 module and created `./dist` from external packager | ||
| + *v0.0.6*: Flipped module and AMD check so as not to confuse webpack | ||
@@ -45,0 +48,0 @@ + *v0.0.5*: Now stays fixed height if only height specified |
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
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
- Number of lines in readme file
- increased by6.38%
50
Worsened metrics
- Total package byte prevSize
- decreased by-73.6%
7337
- Number of package files
- decreased by-50%
4
- Lines of code
- decreased by-15.79%
96
No dependency changes