diff --git a/dist/vivus.js b/dist/vivus.js index b392cb7..a4fcef1 100644 --- a/dist/vivus.js +++ b/dist/vivus.js @@ -1,6 +1,6 @@ /** * vivus - JavaScript library to make drawing animation on SVG - * @version v0.3.1 + * @version v0.3.2 * @link https://github.com/maxwellito/vivus * @license MIT */ @@ -61,7 +61,7 @@ Pathformer.prototype.TYPES = ['line', 'ellipse', 'circle', 'polygon', 'polyline' /** * List of attribute names which contain * data. This array list them to check if - * they contain bad values, like percentage. + * they contain bad values, like percentage. * * @type {Array} */ @@ -75,7 +75,8 @@ Pathformer.prototype.ATTR_WATCH = ['cx', 'cy', 'points', 'r', 'rx', 'ry', 'x', ' */ Pathformer.prototype.scan = function (svg) { var fn, element, pathData, pathDom, - elements = svg.querySelectorAll(this.TYPES.join(',')); + elements = svg.querySelectorAll(this.TYPES.join(',')); + for (var i = 0; i < elements.length; i++) { element = elements[i]; fn = this[element.tagName.toLowerCase() + 'ToPath']; @@ -94,8 +95,13 @@ Pathformer.prototype.scan = function (svg) { * @return {object} Data for a `path` element */ Pathformer.prototype.lineToPath = function (element) { - var newElement = {}; - newElement.d = 'M' + element.x1 + ',' + element.y1 + 'L' + element.x2 + ',' + element.y2; + var newElement = {}, + x1 = element.x1 || 0, + y1 = element.y1 || 0, + x2 = element.x2 || 0, + y2 = element.y2 || 0; + + newElement.d = 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2; return newElement; }; @@ -110,10 +116,11 @@ Pathformer.prototype.lineToPath = function (element) { */ Pathformer.prototype.rectToPath = function (element) { var newElement = {}, - x = parseFloat(element.x) || 0, - y = parseFloat(element.y) || 0, - width = parseFloat(element.width) || 0, - height = parseFloat(element.height) || 0; + x = parseFloat(element.x) || 0, + y = parseFloat(element.y) || 0, + width = parseFloat(element.width) || 0, + height = parseFloat(element.height) || 0; + newElement.d = 'M' + x + ' ' + y + ' '; newElement.d += 'L' + (x + width) + ' ' + y + ' '; newElement.d += 'L' + (x + width) + ' ' + (y + height) + ' '; @@ -129,10 +136,10 @@ Pathformer.prototype.rectToPath = function (element) { * @return {object} Data for a `path` element */ Pathformer.prototype.polylineToPath = function (element) { - var i, path; - var newElement = {}; - var points = element.points.trim().split(' '); - + var newElement = {}, + points = element.points.trim().split(' '), + i, path; + // Reformatting if points are defined without commas if (element.points.indexOf(',') === -1) { var formattedPoints = []; @@ -165,6 +172,7 @@ Pathformer.prototype.polylineToPath = function (element) { */ Pathformer.prototype.polygonToPath = function (element) { var newElement = Pathformer.prototype.polylineToPath(element); + newElement.d += 'Z'; return newElement; }; @@ -177,15 +185,19 @@ Pathformer.prototype.polygonToPath = function (element) { * @return {object} Data for a `path` element */ Pathformer.prototype.ellipseToPath = function (element) { - var startX = element.cx - element.rx, - startY = element.cy; - var endX = parseFloat(element.cx) + parseFloat(element.rx), - endY = element.cy; + var newElement = {}, + rx = parseFloat(element.rx) || 0, + ry = parseFloat(element.ry) || 0, + cx = parseFloat(element.cx) || 0, + cy = parseFloat(element.cy) || 0, + startX = cx - rx, + startY = cy, + endX = parseFloat(cx) + parseFloat(rx), + endY = cy; - var newElement = {}; newElement.d = 'M' + startX + ',' + startY + - 'A' + element.rx + ',' + element.ry + ' 0,1,1 ' + endX + ',' + endY + - 'A' + element.rx + ',' + element.ry + ' 0,1,1 ' + startX + ',' + endY; + 'A' + rx + ',' + ry + ' 0,1,1 ' + endX + ',' + endY + + 'A' + rx + ',' + ry + ' 0,1,1 ' + startX + ',' + endY; return newElement; }; @@ -197,14 +209,18 @@ Pathformer.prototype.ellipseToPath = function (element) { * @return {object} Data for a `path` element */ Pathformer.prototype.circleToPath = function (element) { - var newElement = {}; - var startX = element.cx - element.r, - startY = element.cy; - var endX = parseFloat(element.cx) + parseFloat(element.r), - endY = element.cy; + var newElement = {}, + r = parseFloat(element.r) || 0, + cx = parseFloat(element.cx) || 0, + cy = parseFloat(element.cy) || 0, + startX = cx - r, + startY = cy, + endX = parseFloat(cx) + parseFloat(r), + endY = cy; + newElement.d = 'M' + startX + ',' + startY + - 'A' + element.r + ',' + element.r + ' 0,1,1 ' + endX + ',' + endY + - 'A' + element.r + ',' + element.r + ' 0,1,1 ' + startX + ',' + endY; + 'A' + r + ',' + r + ' 0,1,1 ' + endX + ',' + endY + + 'A' + r + ',' + r + ' 0,1,1 ' + startX + ',' + endY; return newElement; }; @@ -458,7 +474,8 @@ Vivus.prototype.setOptions = function (options) { this.forceRender = options.hasOwnProperty('forceRender') ? !!options.forceRender : this.isIE; this.selfDestroy = !!options.selfDestroy; this.onReady = options.onReady; - this.frameLength = this.currentFrame = this.map = this.delayUnit = this.speed = this.handle = null; + this.map = new Array(); + this.frameLength = this.currentFrame = this.delayUnit = this.speed = this.handle = null; this.ignoreInvisible = options.hasOwnProperty('ignoreInvisible') ? !!options.ignoreInvisible : false; diff --git a/dist/vivus.min.js b/dist/vivus.min.js index 35b32cf..e37c8ac 100644 --- a/dist/vivus.min.js +++ b/dist/vivus.min.js @@ -1,7 +1,7 @@ /** * vivus - JavaScript library to make drawing animation on SVG - * @version v0.3.1 + * @version v0.3.2 * @link https://github.com/maxwellito/vivus * @license MIT */ -"use strict";!function(t,e){function r(r){if("undefined"==typeof r)throw new Error('Pathformer [constructor]: "element" parameter is required');if(r.constructor===String&&(r=e.getElementById(r),!r))throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');if(!(r.constructor instanceof t.SVGElement||/^svg$/i.test(r.nodeName)))throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');this.el=r,this.scan(r)}function n(t,e,r){this.isReady=!1,this.setElement(t,e),this.setOptions(e),this.setCallback(r),this.isReady&&this.init()}r.prototype.TYPES=["line","ellipse","circle","polygon","polyline","rect"],r.prototype.ATTR_WATCH=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],r.prototype.scan=function(t){for(var e,r,n,i,a=t.querySelectorAll(this.TYPES.join(",")),o=0;o=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")},n.prototype.setCallback=function(t){if(t&&t.constructor!==Function)throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||function(){}},n.prototype.mapping=function(){var e,r,n,i,a,s,h,u;for(u=s=h=0,r=this.el.querySelectorAll("path"),e=0;e1?r.length-1:1),e=0;e=this.frameLength?(this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy(),this.callback(this)):(this.trace(),this.handle=i(function(){t.drawer()}))},n.prototype.trace=function(){var t,e,r,n;for(n=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength,t=0;t=o+a*e&&s>=r},n.prototype.docElem=t.document.documentElement,n.prototype.getViewportH=function(){var e=this.docElem.clientHeight,r=t.innerHeight;return r>e?r:e},n.prototype.scrollY=function(){return t.pageYOffset||this.docElem.scrollTop},i=function(){return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||function(e){return t.setTimeout(e,1e3/60)}}(),a=function(){return t.cancelAnimationFrame||t.webkitCancelAnimationFrame||t.mozCancelAnimationFrame||t.oCancelAnimationFrame||t.msCancelAnimationFrame||function(e){return t.clearTimeout(e)}}(),o=function(t,e){var r=parseInt(t,10);return r>=0?r:e},"function"==typeof define&&define.amd?define([],function(){return n}):"object"==typeof exports?module.exports=n:t.Vivus=n}(window,document); \ No newline at end of file +"use strict";!function(t,e){function r(r){if("undefined"==typeof r)throw new Error('Pathformer [constructor]: "element" parameter is required');if(r.constructor===String&&(r=e.getElementById(r),!r))throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');if(!(r.constructor instanceof t.SVGElement||/^svg$/i.test(r.nodeName)))throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');this.el=r,this.scan(r)}function n(t,e,r){this.isReady=!1,this.setElement(t,e),this.setOptions(e),this.setCallback(r),this.isReady&&this.init()}r.prototype.TYPES=["line","ellipse","circle","polygon","polyline","rect"],r.prototype.ATTR_WATCH=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],r.prototype.scan=function(t){for(var e,r,n,i,a=t.querySelectorAll(this.TYPES.join(",")),o=0;o=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")},n.prototype.setCallback=function(t){if(t&&t.constructor!==Function)throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||function(){}},n.prototype.mapping=function(){var e,r,n,i,a,s,h,l;for(l=s=h=0,r=this.el.querySelectorAll("path"),e=0;e1?r.length-1:1),e=0;e=this.frameLength?(this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy(),this.callback(this)):(this.trace(),this.handle=i(function(){t.drawer()}))},n.prototype.trace=function(){var t,e,r,n;for(n=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength,t=0;t=o+a*e&&s>=r},n.prototype.docElem=t.document.documentElement,n.prototype.getViewportH=function(){var e=this.docElem.clientHeight,r=t.innerHeight;return r>e?r:e},n.prototype.scrollY=function(){return t.pageYOffset||this.docElem.scrollTop},i=function(){return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||function(e){return t.setTimeout(e,1e3/60)}}(),a=function(){return t.cancelAnimationFrame||t.webkitCancelAnimationFrame||t.mozCancelAnimationFrame||t.oCancelAnimationFrame||t.msCancelAnimationFrame||function(e){return t.clearTimeout(e)}}(),o=function(t,e){var r=parseInt(t,10);return r>=0?r:e},"function"==typeof define&&define.amd?define([],function(){return n}):"object"==typeof exports?module.exports=n:t.Vivus=n}(window,document); \ No newline at end of file diff --git a/package.json b/package.json index 5b7009f..dc97d15 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vivus", - "version": "0.3.1", + "version": "0.3.2", "description": "JavaScript library to make drawing animation on SVG", "main": "dist/vivus.js", "scripts": { diff --git a/test/unit/vivus.spec.js b/test/unit/vivus.spec.js index afd02f9..13c29c9 100644 --- a/test/unit/vivus.spec.js +++ b/test/unit/vivus.spec.js @@ -276,6 +276,13 @@ describe('Vivus', function () { // Mapping describe('Mapping:', function () { + it('shoud not trigger any error if the SVG is empty', function () { + expect(function () { + var svgTag = document.createElementNS('http://www.w3.org/2000/svg','svg'); + myVivus = new Vivus(svgTag, {}); + }).not.toThrow(); + }); + it('shoud create a mapping of the SVG', function () { myVivus = new Vivus(svgTag, {}); expect(myVivus.map && myVivus.map.length).toEqual(6); @@ -308,7 +315,7 @@ describe('Vivus', function () { SVGPathElement.prototype.getTotalLength = getTotalLengthBkp; console.warn = warnBkp; }); - + it('shoud call console.warn if a path length is NaN', function () { var warnSpy = jasmine.createSpy('spy'); console.warn = warnSpy; @@ -453,7 +460,7 @@ describe('Vivus', function () { it('should use renderPath if forceRender option is set to true', function () { myVivus = new Vivus(svgTag, { duration: 2, start: 'manual', forceRender: true }); - + var originalFirstPath = myVivus.map[0].el; myVivus.renderPath(0); expect(myVivus.map[0].el).not.toBe(originalFirstPath); @@ -461,7 +468,7 @@ describe('Vivus', function () { it('should not use renderPath if forceRender option is set to false', function () { myVivus = new Vivus(svgTag, { duration: 2, start: 'manual', forceRender: false }); - + var originalFirstPath = myVivus.map[0].el; myVivus.renderPath(0); expect(myVivus.map[0].el).toBe(originalFirstPath);