diff --git a/.eslintrc b/.eslintrc index 84d7937..d5f44b6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,7 @@ * Set JavaScript language options */ "parserOptions": { - "sourceType": "script", + "sourceType": "module", }, /** * Set Environnement diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..e69de29 diff --git a/CHANGELOG.md b/CHANGELOG.md index e430ad9..940a634 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ ### HEAD +### 0.0.4 (February 5, 2020) + + * Added the bundler Pakket, + * ..., + + ### 0.0.3 (December 30, 2019) * Added a private reference to the library and updated the dependencies, diff --git a/LICENSE.md b/LICENSE.md index 4e17e44..441a9fe 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2019 Mobilabs (http://www.mobilabs.fr) +Copyright (c) 2020 Mobilabs (http://www.mobilabs.fr) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/_dist/LICENSE.md b/_dist/LICENSE.md index 4e17e44..441a9fe 100644 --- a/_dist/LICENSE.md +++ b/_dist/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2019 Mobilabs (http://www.mobilabs.fr) +Copyright (c) 2020 Mobilabs (http://www.mobilabs.fr) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/_dist/examples/count.html b/_dist/examples/count.html deleted file mode 100644 index 3060b4c..0000000 --- a/_dist/examples/count.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - Count - - - - - - - -
- - diff --git a/_dist/examples/rotate.html b/_dist/examples/rotate.html deleted file mode 100644 index b698528..0000000 --- a/_dist/examples/rotate.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Rotate - - - - - - - -
- - diff --git a/_dist/examples/scale.html b/_dist/examples/scale.html deleted file mode 100644 index cdbdb08..0000000 --- a/_dist/examples/scale.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Scale - - - - - - - -
- - diff --git a/_dist/examples/translate.html b/_dist/examples/translate.html deleted file mode 100644 index 17329f7..0000000 --- a/_dist/examples/translate.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - Translate - - - - - - - -
- - diff --git a/_dist/lib/svg-noparent.js b/_dist/lib/svg-noparent.js deleted file mode 100644 index 37cee8e..0000000 --- a/_dist/lib/svg-noparent.js +++ /dev/null @@ -1,2363 +0,0 @@ -/*! **************************************************************************** - * SVG v0.0.3 - * - * A tiny Javascript library intended to create and manage SVG elements in the DOM. - * (you can download it from npm or github repositories) - * Copyright (c) 2019 Mobilabs (http://www.mobilabs.fr). - * Released under the MIT license. You may obtain a copy of the License - * at: http://www.opensource.org/licenses/mit-license.php). - * ************************************************************************** */ -// Based on ES6.lib template v0.0.3 -// ESLint declarations -/* global define */ -/* eslint strict: ["error", "function"] */ -(function(root, factory) { - /* istanbul ignore next */ - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([''], factory); - } else if (typeof exports === 'object') { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(root); - // This is a hack to attach the lib to the browser root when this lib is - // included inside another lib and the whole is browserifyied: - /* eslint-disable-next-line no-param-reassign */ - if (root.SVG === null) root.SVG = factory(root); - } else { - // Browser globals. - /* eslint-disable-next-line no-param-reassign */ - root.SVG = factory(root); - } -}({{lib:parent}}, (root) => { - // This is the list of the constants that are defined at the global level of - // this module and are accessible to all. So, they are considered as reserved - // words for this library. - // const SV - /* eslint-disable one-var, semi-style */ - const SVG_NS = 'http://www.w3.org/2000/svg' - , XLINK_NS = 'http://www.w3.org/1999/xlink' - ; - - let SVG - , _ - ; - /* eslint-enable one-var, semi-style */ - - /* *************************************************************************** - * - * Tree is an internal object that links all the internal modules. - * - * tree.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * - * @namespace SVG - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* - */ - - const SV = { - Dollar: { - Public: {}, - }, - SVG: { - Public: {}, - }, - Anim: { - Public: {}, - }, - Methods: { - Static: { - Public: {}, - }, - Attr: { - Public: {}, - }, - Text: { - Public: {}, - }, - }, - }; - /* - */ - - - /* *************************************************************************** - * - * Defines the SVG object. - * - * svg.js is built upon the Prototypal Instantiation pattern. It - * returns an object by calling its constructor. It doesn't use the new - * keyword. - * - * Private Functions: - * . none, - * - * - * Constructor: - * . SVG creates the SVG object, - * - * - * Private Static Methods: - * . _setTestMode returns the internal objects for testing purpose, - * - * - * Public Static Methods: - * . noConflict returns a reference to this SVG object, - * . transformAttrToObj converts a SVG transform attributes string to an object, - * . transformAttrToStr converts a SVG transform attributes object to a string, - * . getArc returns an arc path, - * . getLine draws polygonal lines, - * . getMultipolyline returns polyline paths, - * - * - * Public Methods: - * . none yet, - * - * - * - * @namespace SVG - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - - - // -- Local modules - const $ = SV.Dollar.Public - , S = SV.SVG.Public - , SM = SV.Methods.Static.Public - ; - - - // -- Local constants - // Saves the previous value of the library variable, so that it can be - // restored later on, if noConflict is used. - const previousSVG = root.SVG; - - - // -- Local variables - let methods; - - - // -- Public - - /** - * Creates the SVG object. - * - * @constructor (arg1) - * @public - * @param {String} the selector id or class, - * @returns {Object} returns the SVG object, - * @since 0.0.0 - */ - SVG = function(selector) { - const obj = Object.create(_.extend(methods, $)); - const { id, _root } = S.create(selector); - obj.id = id; - obj._root = _root; - obj._SVG = SVG; - return obj; - }; - - - // -- Private & Public Static Methods -------------------------------------- - - - /** - * Returns the internal objects for testing purpose. - * - * @method () - * @private - * @param {} -, - * @returns {Object} returns TV tree, - * @since 0.0.0 - */ - SVG._setTestMode = function() { - return SV; - }; - - /** - * Returns a reference to this SVG object. - * - * Nota: - * Running SVG in noConflic mode, returns the SVG variable to its - * previous owner. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns the SVG object, - * @since 0.0.0 - */ - SVG.noConflict = function() { - /* eslint-disable-next-line no-param-reassign */ - root.SVG = previousSVG; - return this; - }; - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - SVG.transformAttrToObj = function(transform) { - return SM.transformAttrToObj(transform); - }; - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - SVG.transformAttrToStr = function(tr) { - return SM.transformAttrToStr(tr); - }; - - /** - * Returns an arc path. - * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getArc = function(startAngle, stopAngle, outerRadius, innerRadius) { - return SM.getArc(startAngle, stopAngle, outerRadius, innerRadius); - }; - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getLine = function(shape, closed) { - return SM.getLine(shape, closed); - }; - - /** - * Returns polyline paths. - * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getMultipolyline = function(shape, closed) { - return SM.getMultipolyline(shape, closed); - }; - - - // -- Public Methods ------------------------------------------------------- - - methods = { - // none yet! - }; - - - // Attaches a constant to View that provides the version of the lib. - SVG.VERSION = '0.0.3'; - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Provides a subset of the overslash library. - * - * _.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . none, - * - * - * Public Static Methods: - * . extend extends the passed-in object with new methods, - * - * . isUndefined is a given variable undefined? - * . isNull is a given value null? - * . isBoolean is a given value a boolean? - * . isString is a given value a string? - * . isNumber is a given value a number? - * . isObject is a given variable an object? - * . isLiteralObject is a given variable a literal object? - * . isFunction is a given variable a function? - * . isArray is a given value an array? - * - * . linear linear easing method, - * - * - * - * @namespace - - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* - */ - - (function() { - // IIFE - - // -- Module path - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Public Methods ------------------------------------------------------- - - _ = { - - /** - * Extends the passed-in object with new methods. - * - * Nota: this function mutates object. - * - * @function (arg1, arg2) - * @private - * @param {Object} the object to extend, - * @param {Object} an object containing a set of methods, - * @returns {} -, - * @since 0.0.0 - */ - extend(object, methods) { - const keys = Object.keys(methods); - for (let i = 0; i < keys.length; i++) { - /* eslint-disable-next-line no-param-reassign */ - object[keys[i]] = methods[keys[i]]; - } - return object; - }, - - /** - * Is a given variable undefined? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isUndefined(obj) { - return obj === undefined; - }, - - /** - * Is a given value null? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isNull(obj) { - return obj === null; - }, - - /** - * Is a given value a boolean? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isBoolean(obj) { - return obj === true || obj === false || Object.prototype.toString.call(obj) === '[object Boolean]'; - }, - - /** - * Is a given value a string? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isString(obj) { - return Object.prototype.toString.call(obj) === '[object String]'; - }, - - /** - * Is a given value a number? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isNumber(obj) { - return Object.prototype.toString.call(obj) === '[object Number]'; - }, - - /** - * Is a given variable an object? - * (copied from: http://underscorejs.org) - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isObject(obj) { - const type = typeof obj; - return (type === 'function' || type === 'object') && !!obj; - }, - - /** - * Is a given variable a literal object? - * - * @method (arg1) - * @private - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.3 - */ - isLiteralObject(obj) { - return Object.prototype.toString.call(obj) === '[object Object]'; - }, - - /** - * Is a given variable a function? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isFunction(obj) { - return Object.prototype.toString.call(obj) === '[object Function]'; - }, - - /** - * Is a given value an array? - * (Delegates to ECMA5's native Array.isArray.) - * (copied from: http://underscorejs.org) - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isArray(obj) { - return Object.prototype.toString.call(obj) === '[object Array]'; - }, - - /** - * Computes the intermediate values according to a linear progression. - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} the current time, - * @param {Number} the beginning value, - * @param {Number} the change in value, - * @param {Number} the duration, - * @returns {Number} returns the computed value, - */ - elinear(t, b, c, d) { - return (c * t) / d + b; - }, - }; - }()); - /* - */ - - - /* *************************************************************************** - * - * Implements the methods to manipulate the DOM. - * - * $.js is just an object that contains a set of methods. It implements the - * pattern factory. Thus, $(sel) returns the selected node and the methods - * listed below. - * - * Private Functions: - * . none, - * - * - * Private Variables: - * . id the id of the svg node, - * . [0] the selected svg children, - * . _root the svg node, - * - * - * Constructor: - * . $ creates the component, - * - * - * Public Chaining Methods: - * . firstParent moves to the svg node, - * . parent moves to the parent, - * . previous selects the previous sibbling element, - * . next selects the next sibbling element, - * . select selects an SVG element, - * . append appends an SVG element and selects it, - * . appendBefore appends a new SVG el. before the reference SVG el., - * . appendAfter appends a new SVG el. after the reference SVG el., - * . appendHTML appends a foreignObject to svg and selects it, - * . replace replaces the current SVG element, - * . remove removes the given SVG element, - * . removeChild removes the passed-in child element, - * . replaceChild replaces a child by another, - * . removeAllChilds removes all the childs from the selected element, - * . empty removes all the childs from the selected element - * . listen attaches an event listener to the SVG element, - * . listenOnce attaches a fired once event listener to the SVG element, - * . unlisten removes an event listener to the SVG element, - * . alink adds a link attribute to the SVG selected element, - * . attr adds attributes to the selected SVG element, - * . rmattr removes the given attribute from the selected SVG element, - * . text adds text to the selected SVG element, - * . addClass adds a class value to the selected SVG element, - * . removeClass removes a class value to the selected SVG element, - * . toggleClass toggles a class value to the selected SVG element, - * - * - * Public Non Chaining Methods: - * . query returns the first matching element or null, - * . getElement returns the selected SVG element, - * . children returns the children HTMLCollection, - * . getAttribute returns the attribute value, - * . getComputedStyle returns the style applied to this element, - * . getPropertyValue returns the value of the specified property, - * . getSize returns the width and height of this element, - * . getBbox returns the bounding boxes, - * - * - * - * @namespace SV.Dollar.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Dollar.Public; - - - // -- Local modules - const Attr = SV.Methods.Attr.Public - , Text = SV.Methods.Text.Public - ; - - - // -- Local constants - - - // -- Local variables - - - // -- Public --------------------------------------------------------------- - - /** - * Select a child element. - * - * @constructor (arg1) - * @public - * @param {String} the selector, - * @returns {Object} returns the $() object, - * @since 0.0.0 - */ - function $(selector) { - const { id } = this - , { _root } = this - ; // unique id! - - - // -- Public Chaining Methods -------------------------------------------- - - /** - * Returns to the root parent if defined. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const firstParent = function() { - if (this._root) { - this[0] = this._root; - } - return this; - }; - - /** - * Returns to the parent element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const parent = function() { - if (this.root) { - // As a root parent is defined, we stop at it. - if (this[0] !== this.root) { - this[0] = this[0].parentNode; - } - } else { - this[0] = this[0].parentNode; - } - return this; - }; - - /** - * Selects the previous element sibbling. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const previous = function() { - this[0] = this[0].previousElementSibling; - return this; - }; - - /** - * Selects the next element sibbling. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const next = function() { - this[0] = this[0].nextElementSibling; - return this; - }; - - /** - * Selects the given SVG Element, - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to select, - * @param {Boolean} 'true' if selected element should become the 'root', - * @returns {Object} returns this, - * @since 0.0.0 - */ - const select = function(element) { - this[0] = this[0].querySelector(element); - return this; - }; - - /** - * Appends a new SVG element and selects it. - * - * @method (arg1) - * @public - * @param {Object} the SVG element to add, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const append = function(svgElement) { - const el = document.createElementNS(SVG_NS, svgElement); - this[0] = this[0].appendChild(el); - return this; - }; - - /** - * Appends a new SVG element before the passed-in SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to add, - * @param {Object} the reference SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendBefore = function(newSvgElement, svgElement) { - const newChild = document.createElementNS(SVG_NS, newSvgElement) - , child = this[0].querySelector(svgElement) - ; - - this[0].insertBefore(newChild, child); - this[0] = newChild; - return this; - }; - - /** - * Appends a new SVG element after the passed-in SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to add, - * @param {Object} the reference SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendAfter = function(newSvgElement, svgElement) { - const newChild = document.createElementNS(SVG_NS, newSvgElement) - , child = this[0].querySelector(svgElement).nextElementSibling - ; - - this[0].insertBefore(newChild, child); - this[0] = newChild; - return this; - }; - - /** - * Appends a foreignObject to svg and selects it. - * - * @method (arg1) - * @public - * @param {String} the serialized html block, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendHTML = function(xmlString) { - if (typeof xmlString !== 'string') return this; - - const body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body'); - body.innerHTML = xmlString; - this[0] = this[0].appendChild(body); - return this; - }; - - /** - * Replaces the selected SVG element. - * - * @method (arg1) - * @public - * @param {Object} the new SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const replace = function(svgElement) { - const el = document.createElementNS(SVG_NS, svgElement); - this[0].parentNode.replaceChild(el, this[0]); - this[0] = el; - return this; - }; - - /** - * Removes the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const remove = function() { - let parento; - if (this[0]) { - parento = this[0].parentNode; - parento.removeChild(this[0]); - this[0] = parento; - } - return this; - }; - - /** - * Removes the passed-in child element. - * - * @method (arg1) - * @public - * @param {Object} the child element to remove, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeChild = function(child) { - if (child) { - this[0].removeChild(child); - } - return this; - }; - - /** - * Replaces a child by another. - * - * @method (arg1, arg2) - * @public - * @param {Object} the new node element, - * @param {Object} the node element to replace, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const replaceChild = function(newChild, child) { - if (newChild) { - this[0].replaceChild(newChild, child); - } - return this; - }; - - /** - * Removes all the childs from the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeAllChilds = function() { - while (this[0].firstChild) { - this[0].removeChild(this[0].firstChild); - } - return this; - }; - - /** - * Removes all the childs from the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const empty = function() { - while (this[0].firstChild) { - this[0].removeChild(this[0].firstChild); - } - return this; - }; - - /** - * Attachs a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const listen = function(event, handler) { - if (typeof event === 'string' && typeof handler === 'function') { - this[0].addEventListener(event, handler); - } - return this; - }; - - /** - * Attachs a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const listenOnce = function(event, handler) { - const el = this[0]; - function localHandler(e) { - el.removeEventListener(event, localHandler); - handler(e); - } - if (typeof event === 'string' && typeof handler === 'function') { - el.addEventListener(event, localHandler); - } - return this; - }; - - /** - * Remove a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const unlisten = function(event, handler) { - if (typeof event === 'string' && typeof handler === 'function') { - this[0].removeEventListener(event, handler); - } - return this; - }; - - /** - * Adds a link attribute to the selected element, - * - * @method (arg1, arg2) - * @public - * @param {String} the type of link attribute, - * @param {String} the url, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const alink = function(attr, url) { - // this[0].setAttributeNS(XLINK_NS, 'xlink:' + attr, url); - this[0].setAttributeNS(XLINK_NS, `xlink:${attr}`, url); - return this; - }; - - /** - * Adds an attribute to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const attr = function(attribute, value) { - if (!this[0]) { - /* eslint-disable-next-line no-console */ - console.log('warning: this.svgElement is null!'); - return this; - } - Attr.attr(this[0], attribute, value); - return this; - }; - - /** - * Removes the given attribute to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the attribute to remove, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const rmattr = function(attribute) { - this[0].removeAttributeNS(null, attribute); - return this; - }; - - /** - * Adds a text to the selected SVG element. - * - * @method (arg1) - * @public - * @param {Object} the text or the the params for the animation, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const text = function(value) { - Text.text(this[0], value); - return this; - }; - - /** - * Adds a class value to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const addClass = function(className) { - let list = this[0].getAttributeNS(null, 'class'); - // list = list ? list + ' ' + className : className; - list = list ? `${list} ${className}` : className; - this[0].setAttributeNS(null, 'class', list); - return this; - }; - - /** - * Removes a class value from the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeClass = function(className) { - let list = this[0].getAttributeNS(null, 'class'); - - if (list) { - // Remove the class and the extra leading and - // trailing white spaces if any: - list = list.replace(className, '').replace(/(^\s+|\s+$)/g, ''); - this[0].setAttributeNS(null, 'class', list); - } - return this; - }; - - /** - * Adds/Removes a class name to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const toggleClass = function(className) { - const list = this[0].getAttributeNS(null, 'class'); - - if (list && list.match(className)) { - this.removeClass(className); - return this; - } - this.addClass(className); - return this; - }; - - - // -- Public Non Chaining Methods ---------------------------------------- - - /** - * Returns the first element that matches or null. - * - * @method (arg1) - * @public - * @param {String} the css selector, - * @returns {Object} the selected SVG element or null, - * @since 0.0.0 - */ - const query = function(css) { - return this[0].querySelector(css); - }; - - /** - * Returns the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} the selected SVG element, - * @since 0.0.0 - */ - const getElement = function() { - return this[0]; - }; - - /** - * Returns the children HTMLCollection. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns the children HTMLCollection, - * @since 0.0.0 - */ - const children = function() { - return this[0].children; - }; - - /** - * Returns the attribute of the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the name of the attribute, - * @returns {Object} returns the attribute value or null, - * @since 0.0.0 - */ - const getAttribute = function(attribute) { - return this[0] ? this[0].getAttribute(attribute) : null; - }; - - /** - * Returns the computed style of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the object computed style, - * @since 0.0.0 - */ - const getComputedStyle = function() { - return window.getComputedStyle(this[0]); - }; - - /** - * Returns the property value of the style object. - * - * @method (arg1) - * @public - * @param {Object} the style property, - * @returns {String} returns the style value, - * @since 0.0.0 - */ - const getPropertyValue = function(css) { - return this.getPropertyValue(css); - }; - - /** - * Returns the size (bounding boxes) of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the width and height of the SVG element, - * @since 0.0.0 - */ - const getSize = function() { - return { - width: this[0].getBoundingClientRect().width, - height: this[0].getBoundingClientRect().height, - }; - }; - - /** - * Returns the size (bounding boxes) of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the width and height of the SVG element, - * @since 0.0.0 - */ - const getBbox = function() { - return { - top: this[0].getBoundingClientRect().top, - left: this[0].getBoundingClientRect().left, - width: this[0].getBoundingClientRect().width, - height: this[0].getBoundingClientRect().height, - }; - }; - - - // -- Main - return { - id, - 0: selector ? _root.querySelector(selector) : _root, - _root, - - firstParent, - parent, - previous, - next, - select, - append, - appendBefore, - appendAfter, - appendHTML, - replace, - remove, - removeChild, - replaceChild, - removeAllChilds, - empty, - listen, - listenOnce, - unlisten, - alink, - attr, - rmattr, - text, - addClass, - removeClass, - toggleClass, - query, - getElement, - children, - getAttribute, - getComputedStyle, - getPropertyValue, - getSize, - getBbox, - }; - } - - - // Exports $. - _.extend(Root, { $ }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Performs the animations. - * - * animation.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _rotateRun rotates the SVG element, - * . _scaleRun scales the SVG element, - * . _translateRun translates the SVG element, - * . _textRun updates the text value from initial to final value, - * - * - * Public Static Methods: - * . rotateRun rotates the SVG element, - * . scaleRun scales the SVG element, - * . translateRun translates the SVG element, - * . textRun updates the text value from initial to final value, - * - * - * - * @namespace SV.Anim.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Anim.Public; - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Rotates the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the value (if omitted, start from current position), - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the rotation to perform, - * @returns {} -, - * @since 0.0.0 - */ - function _rotateRun(el, anim) { - const r = { - a: 0, - t: 0, - start: _.isNumber(anim.start) ? anim.start : null, - stop: _.isNumber(anim.stop) ? anim.stop : 180, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // If anim.start is undefined, we start from the current value: - if (_.isNull(r.start)) { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - r.start = _.isObject(transform.scale) && _.isNumber(transform.scale.a) - ? transform.scale.a - : 180; - } - - const timer = setInterval(() => { - // Compute the next step: - r.t += r.period; - // Abort if overflow or if no change in the position. - if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } - r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); - - // Retrieve transform attributes, set new rotation value and update. - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - transform.rotate.a = r.a; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); - - if (r.t === r.duration) { - clearInterval(timer); - } - }, r.period); - } - - /** - * Scales the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG object, - * @param {Object} the scaling to perform, - * @returns {} -, - * @since 0.0.0 - */ - function _scaleRun(el, anim) { - const s = { - x: 0, - y: 0, - t: 0, - x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, - y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, - x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, - y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // if anim.start.x or anim.start.y is undefined, the scaling operation - // starts from the current value: - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - if (_.isNull(s.x0) || _.isNull(s.y0)) { - s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) - ? transform.scale.x - : 0; - s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) - ? transform.scale.y - : 0; - } - - // Run: - const timer = setInterval(() => { - // Compute the next step: - s.t += s.period; - if (s.t > s.duration) { s.t = s.duration; } - s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); - s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); - - // Retrieve transform attributes, set new scale value and update. - const tr = SVG.transformAttrToObj(el.getAttribute('transform')); - tr.scale.x = s.x; - tr.scale.y = s.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); - - if (s.t === s.duration) { - clearInterval(timer); - } - }, s.period); - } - - /** - * Translates the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, - * @since 0.0.0 - */ - function _translateRun(el, anim) { - const v = { - x: 0, - y: 0, - t: 0, - length: null, - arc: null, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - let x0 - , y0 - ; - - // Translate starts from the passed-in value or the current position: - if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { - x0 = anim.start.x; - y0 = anim.start.y; - } else { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) - ? transform.translate.x - : 0; - y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) - ? transform.translate.x - : 0; - } - - /* eslint-disable-next-line no-restricted-properties */ - v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); - v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); - if (anim.stop.x - x0 < 0) v.arc += -Math.PI; - if (v.length === 0) v.arc = 0; - - const timer = setInterval(() => { - // Compute the next step: - v.t += v.period; - if (v.t > v.duration) v.t = v.duration; - v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; - v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; - - // Retrieve the transform attributes, set the new position value and update: - const trform = SVG.transformAttrToObj(el.getAttribute('transform')); - trform.translate.x = v.x; - trform.translate.y = v.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); - - // Stop the timer if destination point reached. - if (v.t === v.duration) { - clearInterval(timer); - } - }, v.period); - } - - /** - * Updates dynamically the text value from the initial to the final value. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial value, - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG object, - * @param {Object} the animation parameters, - * @returns {} -, - * @since 0.0.0 - */ - function _textRun(el, anim) { - const d = { - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - value: 0, - start: _.isNumber(anim.start) ? anim.start : 0, - stop: _.isNumber(anim.stop) ? anim.stop : 0, - t: 0, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // Run: - const timer = setInterval(() => { - // Compute the next step: - d.t += d.period; - // Abort if overflow or if no change in the position. - if (d.t > d.duration || d.stop === d.start) { - d.t = d.duration; - } - d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); - if (d.duration === 0) { - d.value = d.start; - } - - // Display the new digit value: - /* eslint-disable-next-line no-param-reassign */ - el.textContent = d.value.toFixed(0); - - // is animation over? - if (d.t === d.duration) { - clearInterval(timer); - } - }, d.period); - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Rotates the SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the rotation to perform, - * @returns {} -, - * @since 0.0.0 - */ - rotateRun(el, anim) { - _rotateRun(el, anim); - }, - - /** - * Scales the SVG element; - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the scaling to perform, - * @returns {} -, - * @since 0.0.0 - */ - scaleRun(el, anim) { - _scaleRun(el, anim); - }, - - /** - * Translates the SVG Element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, - * @since 0.0.0 - */ - translateRun(el, anim) { - _translateRun(el, anim); - }, - - /** - * Updates dynamically the text value from the initial to the final value. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the animation parameters, - * @returns {} -, - * @since 0.0.0 - */ - textRun(el, anim) { - _textRun(el, anim); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Adds or Updates the SVG node attributes. - * - * attributes.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _attr adds an attribute to the selected SVG element, - * - * - * Public Static Methods: - * . attr adds an attribute to the selected SVG element, - * - * - * - * @namespace SV.Methods.Attr.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Attr.Public; - - - // -- Local modules - const Anim = SV.Anim.Public; - - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Adds an attribute to the selected SVG element. - * - * @function (arg1, arg2, arg3) - * @private - * @param {Object} the SVG element, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - function _attr(el, attr, value) { - switch (typeof value) { - // Add the requested attribute to this element: - case 'string': - case 'number': - el.setAttributeNS(null, attr, value); - break; - - case 'object': - // Proceed with an animation: - switch (attr) { - // ... - // case 'd': - // Anim.dAnimationRun(el, value); - // break; - - // Transform animations: - case 'transform': - switch (value.type) { - // Rotate animation: - case 'rotate': - Anim.rotateRun(el, value); - break; - - // Scale animation: - case 'scale': - Anim.scaleRun(el, value); - break; - - // Smooth linear animation: - case 'translate': - Anim.translateRun(el, value); - break; - - default: - throw new Error(`The animation is not supported for the transform ${value.type}!`); - } - break; - - default: - throw new Error(`The animation is not supported for the attribute ${attr}!`); - } - break; - - default: - // Ignore! - } - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Adds an attribute to the selected SVG element. - * - * @method (arg1, arg2, arg3) - * @public - * @param {Object} the SVG object, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - attr(el, attr, value) { - _attr(el, attr, value); - }, - }); - }()); - /* eslint-enable no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the SVG static methods. - * - * staticmethods.js is just a literal object that contains a set of functions. - * it can't be intantiated. - * - * Private Functions: - * . _transformAttrToObj converts a SVG transform from string to object, - * . _transformAttrToStr converts a SVG transform from object to string, - * . _getArc returns an arc path, - * . _getLine returns a polyline path, - * . _getMultipolyline returns a set of polyline paths, - * - * - * Public Static Methods: - * . transformAttrToObj converts a SVG transform from string to object, - * . transformAttrToStr converts a SVG transform from object to string, - * . getArc returns an arc path, - * . getLine draws polygonal lines, - * . getMultipolyline returns polyline paths, - * - * - * - * @namespace SV.Methods.Static.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Static.Public; - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Converts a SVG transform attributes string to an object. - * - * @function (arg1) - * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - /* eslint-disable one-var-declaration-per-line */ - function _transformAttrToObj(transform) { - const tr = typeof transform === 'string' ? transform : '' - ; - - const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; - const regexTr = /translate(.*?)\)/; - const regexSc = /scale(.*?)\)/; - const regexRo = /rotate(.*?)\)/; - const regexSkX = /skewX(.*?)\)/; - const regexSkY = /skewY(.*?)\)/; - const regexMtx = /matrix(.*?)\)/; - - const translate = tr.match(regexTr) === null - ? null - : (function() { - let x, y; - const t = tr.match(regexTr)[0].match(regexN); - if (!t) { - x = null; - y = null; - } else if (t.length === 1) { - x = parseFloat(t[0], 10); - y = x; - } else { - x = parseFloat(t[0], 10); - y = parseFloat(t[1], 10); - } - return { - x, - y, - }; - }()); - - const scale = tr.match(regexSc) === null - ? null - : (function() { - let x, y; - const s = tr.match(regexSc)[0].match(regexN); - if (!s) { - x = null; - y = null; - } else if (s.length === 1) { - x = parseFloat(s[0], 10); - y = x; - } else { - x = parseFloat(s[0], 10); - y = parseFloat(s[1], 10); - } - return { - x, - y, - }; - }()); - - const rotate = tr.match(regexRo) === null - ? null - : (function() { - let a, cx, cy; - const r = tr.match(regexRo)[0].match(regexN); - if (!r) { - a = null; - cx = null; - cy = null; - } else if (r.length === 1) { - a = parseFloat(r[0], 10); - cx = null; - cy = null; - } else if (r.length === 2) { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = cx; - } else { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = parseFloat(r[2], 10); - } - return { - a, - cx, - cy, - }; - }()); - - const skewX = tr.match(regexSkX) === null - ? null - : (function() { - const sk = tr.match(regexSkX)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); - } - return null; - }()); - - const skewY = tr.match(regexSkY) === null - ? null - : (function() { - const sk = tr.match(regexSkY)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); - } - return null; - }()); - - // Not implemented. - const matrix = tr.match(regexMtx) === null - ? null - : null; - - return { - translate, - scale, - rotate, - matrix, - skewX, - skewY, - }; - } - /* eslint-enable one-var-declaration-per-line */ - - /** - * Converts a SVG transform attributes string to an object. - * - * @function (arg1) - * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - /* eslint-disable prefer-template */ - function _transformAttrToStr(tr) { - let s = '' - ; - - // Translate: - if (tr.translate && typeof tr.translate.x === 'number') { - if (typeof tr.translate.y === 'number') { - s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; - } else { - // if y isn't provided, it is assumed to 0: - s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; - } - } - - // Scale: - if (tr.scale && typeof tr.scale.x === 'number') { - if (typeof tr.scale.y === 'number') { - s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; - } else { - // if y isn't provided, it is assumed to be equal to x: - s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; - } - } - - // Rotate: - if (tr.rotate && typeof tr.rotate.a === 'number') { - if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; - } else if (typeof tr.rotate.cx === 'number') { - // if y isn't provided, it is assumed to be equal to x: - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; - } else { - s += 'rotate(' + tr.rotate.a + ') '; - } - } - - // SkewX: - if (typeof tr.skewX === 'number') { - s += 'skewX(' + tr.skewX + ') '; - } - - // SkewY: - if (typeof tr.skewY === 'number') { - s += 'skewY(' + tr.skewY + ') '; - } - - // matrix not implemented! - // - - - // Return a clean string (no leading/trailing blanck spaces): - return s.replace(/(^\s+|\s+$)/g, ''); - } - /* eslint-enable prefer-template */ - - /** - * Returns an arc path. - * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' - * - * @function (arg1, arg2, arg3, arg4) - * @private - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - /* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ - function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { - startAngle = startAngle !== undefined ? startAngle : 0; - stopAngle = stopAngle !== undefined ? stopAngle : 0; - outerRadius = outerRadius !== undefined ? outerRadius : 0; - startAngle = startAngle % (2 * Math.PI); - if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } - if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } - - let sweepflag = 0; - if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } - const x0 = Math.cos(startAngle); - const y0 = Math.sin(startAngle); - const x1 = Math.cos(stopAngle); - const y1 = Math.sin(stopAngle); - - /* eslint-disable-next-line prefer-template */ - const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); - let innerArc = ''; - if (innerRadius !== undefined) { - /* eslint-disable-next-line prefer-template */ - innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; - } - return outerArc + innerArc; - } - /* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' - * - * @function (arg1, arg2) - * @private - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - function _getLine(shape, closed) { - let path = ''; - shape.forEach((obj) => { - if (obj.x !== null && obj.y !== null) { - if (path === '') { - // path = 'M' + obj.x + ',' + obj.y; - path = `M${obj.x}, ${obj.y}`; - } else { - // path += 'L' + obj.x + ',' + obj.y; - path += `L${obj.x},${obj.y}`; - } - } - }); - if (closed === true) { path += 'Z'; } - return path; - } - - /** - * Returns polyline paths. - * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' - * - * @function (arg1, arg2) - * @private - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - function _getMultipolyline(shape, closed) { - let path - , subpath - , i - , j - ; - - path = ''; - for (i = 0; i < shape.length; i++) { - subpath = ''; - for (j = 0; j < shape[i].length; j++) { - if (shape[i][j].x !== null && shape[i][j].y !== null) { - if (subpath === '') { - // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; - subpath = `M${shape[i][j].x},${shape[i][j].y}`; - } else { - // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; - subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; - } - } - } - if (closed === true) { subpath += 'z'; } - path += subpath; - } - return path; - } - - - // -- Public Methods ------------------------------------------------------- - - _.extend(Root, { - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToObj(transform) { - return _transformAttrToObj(transform); - }, - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToStr(tr) { - return _transformAttrToStr(tr); - }, - - /** - * Returns an arc path. - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getArc(startAngle, stopAngle, outerRadius, innerRadius) { - return _getArc(startAngle, stopAngle, outerRadius, innerRadius); - }, - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getLine(shape, closed) { - return _getLine(shape, closed); - }, - - /** - * Returns polyline paths. - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getMultipolyline(shape, closed) { - return _getMultipolyline(shape, closed); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Creates the SVG node. - * - * svg.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _create creates the SVG node, - * - * - * Public Static Methods: - * . create creates the SVG node, - * - * - * - * @namespace SV.SVG.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.SVG.Public; - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Private Methods ------------------------------------------------------ - - /** - * Creates the SVG node. - * - * @function (arg1) - * @private - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, - * @since 0.0.0 - */ - function _create(selector) { - const sel = typeof selector === 'string' ? selector : 'body' - , el = document.querySelector(sel) - , node = el || document.querySelector('body') - ; - - let _root; - // create a unique id: - let id = `i${Math.random().toString(36).substr(2, 7)}`; - - // Check that the svg node doesn't exist: - const isSVG = node.getElementsByTagNameNS(SVG_NS, 'svg')[0]; - if (!isSVG || isSVG.length === 0) { - // Ok, it doesn't exist, we can create it: - const svg = document.createElementNS(SVG_NS, 'svg'); - svg.setAttributeNS(null, 'id', id); - svg.setAttributeNS(null, 'version', '1.1'); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', SVG_NS); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', XLINK_NS); - node.appendChild(svg); - _root = svg; - } else { - // It already exists, do not overwrite it! - id = isSVG.getAttributeNS(null, 'id'); - _root = isSVG; - } - return { id, _root }; - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Creates the SVG node. - * - * @method (arg1) - * @public - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, - * @since 0.0.0 - */ - create(selector) { - return _create(selector); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the text methods. - * - * text.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _text adds a text to the selected SVG element, - * - * - * Public Static Methods: - * . text adds a text to the selected SVG element, - * - * - * - * @namespace SV.Methods.Text.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Text.Public; - - - // -- Local modules - const Anim = SV.Anim.Public - ; - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Adds a text to the selected SVG element. - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - function _text(el, value) { - switch (typeof value) { - case 'number': - case 'string': - /* eslint-disable-next-line no-param-reassign */ - el.textContent = value; - break; - - case 'object': - Anim.textRun(el, value); - break; - - default: - break; - } - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Adds a text to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - text(el, value) { - _text(el, value); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - // Returns the library name: - return SVG; -})); diff --git a/_dist/lib/svg.js b/_dist/lib/svg.js index 4ebee7b..7666ffd 100644 --- a/_dist/lib/svg.js +++ b/_dist/lib/svg.js @@ -1,14 +1,13 @@ /*! **************************************************************************** - * SVG v0.0.3 + * SVG v0.0.4 * * A tiny Javascript library intended to create and manage SVG elements in the DOM. * (you can download it from npm or github repositories) - * Copyright (c) 2019 Mobilabs (http://www.mobilabs.fr). + * Copyright (c) 2020 Mobilabs (http://www.mobilabs.fr). * Released under the MIT license. You may obtain a copy of the License * at: http://www.opensource.org/licenses/mit-license.php). + * Built from ES6Pakket v0.0.1-alpha.1. * ************************************************************************** */ -// Based on ES6.lib template v0.0.3 -// ESLint declarations /* global define */ /* eslint strict: ["error", "function"] */ (function(root, factory) { @@ -23,127 +22,68 @@ // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(root); - // This is a hack to attach the lib to the browser root when this lib is - // included inside another lib and the whole is browserifyied: - /* eslint-disable-next-line no-param-reassign */ - if (root.SVG === null) root.SVG = factory(root); } else { // Browser globals. /* eslint-disable-next-line no-param-reassign */ root.SVG = factory(root); } -}(this, (root) => { - 'use strict'; +/* eslint-disable-next-line */ +}(this,(root)=>{"use strict";return function(){/* istanbul ignore next */function e(t,n,o){function r(f){function i(e){const n=t[f][2][e];return r(n||e)}if(!n[f]){if(!t[f]){throw new Error(`Cannot find module "${f}"`)}n[f]={exports:{}};const r=n[f];t[f][1].call(r.exports,i,r,r.exports,e,t,n,o)}return n[f].exports}for(let e=0;e { - // Compute the next step: - r.t += r.period; - // Abort if overflow or if no change in the position. - if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } - r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); + // Check that the svg node doesn't exist: + const isSVG = node.getElementsByTagNameNS(w3c.SVG_NS, 'svg')[0]; + if (!isSVG || isSVG.length === 0) { + // Ok, it doesn't exist, we can create it: + const svg = document.createElementNS(w3c.SVG_NS, 'svg'); + svg.setAttributeNS(null, 'id', id); + svg.setAttributeNS(null, 'version', '1.1'); + svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', w3c.SVG_NS); + svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', w3c.XLINK_NS); + node.appendChild(svg); + _root = svg; + } else { + // It already exists, do not overwrite it! + id = isSVG.getAttributeNS(null, 'id'); + _root = isSVG; + } + return { id, _root }; + } - // Retrieve transform attributes, set new rotation value and update. - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - transform.rotate.a = r.a; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); - if (r.t === r.duration) { - clearInterval(timer); - } - }, r.period); - } + // -- Public Static Methods ---------------------------------------------------- - /** - * Scales the SVG element. + const SV = { + + /** + * Creates the SVG node. + * + * @method (arg1) + * @public + * @param {String} the id or class selector, + * @returns {String} returns the unique id of the svg node, + * @since 0.0.0 + */ + create(selector) { + return _create(selector); + }, + }; + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = SV; + + /* eslint-enable one-var, semi-style, no-underscore-dangle */ + + /* eslint-disable-next-line */ + }, { './w3c': 7 }], + + /* eslint-disable-next-line no-unused-vars */ + 4: ['./src/components/staticmethods', function(impoort, module, exports) { + /** **************************************************************************** * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * Implements the SVG static methods. * - * @function (arg1, arg2) + * staticmethods.js is just a literal object that contains a set of functions. + * it can't be intantiated. + * + * Private Functions: + * . _transformAttrToObj converts a SVG transform from string to object, + * . _transformAttrToStr converts a SVG transform from object to string, + * . _getArc returns an arc path, + * . _getLine returns a polyline path, + * . _getMultipolyline returns a set of polyline paths, + * + * + * Public Static Methods: + * . transformAttrToObj converts a SVG transform from string to object, + * . transformAttrToStr converts a SVG transform from object to string, + * . getArc returns an arc path, + * . getLine draws polygonal lines, + * . getMultipolyline returns polyline paths, + * + * + * + * @namespace SVG.src.components.staticmethods + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable one-var, semi-style, no-underscore-dangle */ + + + // -- Vendor modules + + + // -- Local modules + + + // -- Local constants + + + // -- Local variables + + + // -- Private Functions -------------------------------------------------------- + + /** + * Converts a SVG transform attributes string to an object. + * + * @function (arg1) * @private - * @param {Object} the SVG object, - * @param {Object} the scaling to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - function _scaleRun(el, anim) { - const s = { - x: 0, - y: 0, - t: 0, - x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, - y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, - x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, - y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; + /* eslint-disable one-var-declaration-per-line */ + function _transformAttrToObj(transform) { + const tr = typeof transform === 'string' ? transform : '' + ; - // if anim.start.x or anim.start.y is undefined, the scaling operation - // starts from the current value: - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - if (_.isNull(s.x0) || _.isNull(s.y0)) { - s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) - ? transform.scale.x - : 0; - s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) - ? transform.scale.y - : 0; - } + const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; + const regexTr = /translate(.*?)\)/; + const regexSc = /scale(.*?)\)/; + const regexRo = /rotate(.*?)\)/; + const regexSkX = /skewX(.*?)\)/; + const regexSkY = /skewY(.*?)\)/; + const regexMtx = /matrix(.*?)\)/; - // Run: - const timer = setInterval(() => { - // Compute the next step: - s.t += s.period; - if (s.t > s.duration) { s.t = s.duration; } - s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); - s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); + const translate = tr.match(regexTr) === null + ? null + : (function() { + let x, y; + const t = tr.match(regexTr)[0].match(regexN); + if (!t) { + x = null; + y = null; + } else if (t.length === 1) { + x = parseFloat(t[0], 10); + y = x; + } else { + x = parseFloat(t[0], 10); + y = parseFloat(t[1], 10); + } + return { + x, + y, + }; + }()); - // Retrieve transform attributes, set new scale value and update. - const tr = SVG.transformAttrToObj(el.getAttribute('transform')); - tr.scale.x = s.x; - tr.scale.y = s.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); + const scale = tr.match(regexSc) === null + ? null + : (function() { + let x, y; + const s = tr.match(regexSc)[0].match(regexN); + if (!s) { + x = null; + y = null; + } else if (s.length === 1) { + x = parseFloat(s[0], 10); + y = x; + } else { + x = parseFloat(s[0], 10); + y = parseFloat(s[1], 10); + } + return { + x, + y, + }; + }()); - if (s.t === s.duration) { - clearInterval(timer); - } - }, s.period); + const rotate = tr.match(regexRo) === null + ? null + : (function() { + let a, cx, cy; + const r = tr.match(regexRo)[0].match(regexN); + if (!r) { + a = null; + cx = null; + cy = null; + } else if (r.length === 1) { + a = parseFloat(r[0], 10); + cx = null; + cy = null; + } else if (r.length === 2) { + a = parseFloat(r[0], 10); + cx = parseFloat(r[1], 10); + cy = cx; + } else { + a = parseFloat(r[0], 10); + cx = parseFloat(r[1], 10); + cy = parseFloat(r[2], 10); + } + return { + a, + cx, + cy, + }; + }()); + + const skewX = tr.match(regexSkX) === null + ? null + : (function() { + const sk = tr.match(regexSkX)[0].match(regexN); + if (sk) { + return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); + } + return null; + }()); + + const skewY = tr.match(regexSkY) === null + ? null + : (function() { + const sk = tr.match(regexSkY)[0].match(regexN); + if (sk) { + return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); + } + return null; + }()); + + // Not implemented. + const matrix = tr.match(regexMtx) === null + ? null + : null; + + return { + translate, + scale, + rotate, + matrix, + skewX, + skewY, + }; } + /* eslint-enable one-var-declaration-per-line */ /** - * Translates the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * Converts a SVG transform attributes string to an object. * - * @function (arg1, arg2) + * @function (arg1) * @private - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - function _translateRun(el, anim) { - const v = { - x: 0, - y: 0, - t: 0, - length: null, - arc: null, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - let x0 - , y0 + /* eslint-disable prefer-template */ + function _transformAttrToStr(tr) { + let s = '' ; - // Translate starts from the passed-in value or the current position: - if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { - x0 = anim.start.x; - y0 = anim.start.y; - } else { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) - ? transform.translate.x - : 0; - y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) - ? transform.translate.x - : 0; + // Translate: + if (tr.translate && typeof tr.translate.x === 'number') { + if (typeof tr.translate.y === 'number') { + s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; + } else { + // if y isn't provided, it is assumed to 0: + s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; + } } - /* eslint-disable-next-line no-restricted-properties */ - v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); - v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); - if (anim.stop.x - x0 < 0) v.arc += -Math.PI; - if (v.length === 0) v.arc = 0; + // Scale: + if (tr.scale && typeof tr.scale.x === 'number') { + if (typeof tr.scale.y === 'number') { + s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; + } else { + // if y isn't provided, it is assumed to be equal to x: + s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; + } + } - const timer = setInterval(() => { - // Compute the next step: - v.t += v.period; - if (v.t > v.duration) v.t = v.duration; - v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; - v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; + // Rotate: + if (tr.rotate && typeof tr.rotate.a === 'number') { + if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { + s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; + } else if (typeof tr.rotate.cx === 'number') { + // if y isn't provided, it is assumed to be equal to x: + s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; + } else { + s += 'rotate(' + tr.rotate.a + ') '; + } + } - // Retrieve the transform attributes, set the new position value and update: - const trform = SVG.transformAttrToObj(el.getAttribute('transform')); - trform.translate.x = v.x; - trform.translate.y = v.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); + // SkewX: + if (typeof tr.skewX === 'number') { + s += 'skewX(' + tr.skewX + ') '; + } - // Stop the timer if destination point reached. - if (v.t === v.duration) { - clearInterval(timer); - } - }, v.period); + // SkewY: + if (typeof tr.skewY === 'number') { + s += 'skewY(' + tr.skewY + ') '; + } + + // matrix not implemented! + // - + + // Return a clean string (no leading/trailing blanck spaces): + return s.replace(/(^\s+|\s+$)/g, ''); + } + /* eslint-enable prefer-template */ + + /** + * Returns an arc path. + * + * The returned path has the following format: + * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' + * + * @function (arg1, arg2, arg3, arg4) + * @private + * @param {Number} start angle in radius, + * @param {Number} stop angle, + * @param {Number} external radius, + * @param {Number} internal radius, + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ + /* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ + function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { + startAngle = startAngle !== undefined ? startAngle : 0; + stopAngle = stopAngle !== undefined ? stopAngle : 0; + outerRadius = outerRadius !== undefined ? outerRadius : 0; + startAngle = startAngle % (2 * Math.PI); + if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } + if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } + + let sweepflag = 0; + if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } + const x0 = Math.cos(startAngle); + const y0 = Math.sin(startAngle); + const x1 = Math.cos(stopAngle); + const y1 = Math.sin(stopAngle); + + /* eslint-disable-next-line prefer-template */ + const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); + let innerArc = ''; + if (innerRadius !== undefined) { + /* eslint-disable-next-line prefer-template */ + innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; + } + return outerArc + innerArc; } + /* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ /** - * Updates dynamically the text value from the initial to the final value. + * Draws polygonal lines (deprecated, use multipolyline instead). * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial value, - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn' * * @function (arg1, arg2) * @private - * @param {Object} the SVG object, - * @param {Object} the animation parameters, - * @returns {} -, + * @param {Object} a set of points (x, y) defining the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, * @since 0.0.0 */ - function _textRun(el, anim) { - const d = { - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - value: 0, - start: _.isNumber(anim.start) ? anim.start : 0, - stop: _.isNumber(anim.stop) ? anim.stop : 0, - t: 0, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // Run: - const timer = setInterval(() => { - // Compute the next step: - d.t += d.period; - // Abort if overflow or if no change in the position. - if (d.t > d.duration || d.stop === d.start) { - d.t = d.duration; - } - d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); - if (d.duration === 0) { - d.value = d.start; + function _getLine(shape, closed) { + let path = ''; + shape.forEach((obj) => { + if (obj.x !== null && obj.y !== null) { + if (path === '') { + // path = 'M' + obj.x + ',' + obj.y; + path = `M${obj.x}, ${obj.y}`; + } else { + // path += 'L' + obj.x + ',' + obj.y; + path += `L${obj.x},${obj.y}`; + } } + }); + if (closed === true) { path += 'Z'; } + return path; + } - // Display the new digit value: - /* eslint-disable-next-line no-param-reassign */ - el.textContent = d.value.toFixed(0); + /** + * Returns polyline paths. + * + * The polylines array looks like: + * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' + * + * @function (arg1, arg2) + * @private + * @param {Object} a set of array of points (x, y) defining + * the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ + function _getMultipolyline(shape, closed) { + let path + , subpath + , i + , j + ; - // is animation over? - if (d.t === d.duration) { - clearInterval(timer); + path = ''; + for (i = 0; i < shape.length; i++) { + subpath = ''; + for (j = 0; j < shape[i].length; j++) { + if (shape[i][j].x !== null && shape[i][j].y !== null) { + if (subpath === '') { + // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; + subpath = `M${shape[i][j].x},${shape[i][j].y}`; + } else { + // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; + subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; + } + } } - }, d.period); + if (closed === true) { subpath += 'z'; } + path += subpath; + } + return path; } - // -- Public Static Methods ------------------------------------------------ + // -- Public Methods ----------------------------------------------------------- - _.extend(Root, { + const Static = { /** - * Rotates the SVG element. + * Converts a SVG transform attributes string to an object. * - * @method (arg1, arg2) + * @method (arg1) * @public - * @param {Object} the SVG element, - * @param {Object} the rotation to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - rotateRun(el, anim) { - _rotateRun(el, anim); + transformAttrToObj(transform) { + return _transformAttrToObj(transform); }, /** - * Scales the SVG element; + * Converts a SVG transform attributes string to an object. * - * @method (arg1, arg2) + * @method (arg1) * @public - * @param {Object} the SVG element, - * @param {Object} the scaling to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - scaleRun(el, anim) { - _scaleRun(el, anim); + transformAttrToStr(tr) { + return _transformAttrToStr(tr); }, /** - * Translates the SVG Element. + * Returns an arc path. + * + * @method (arg1, arg2, arg3, arg4) + * @public + * @param {Number} start angle in radius, + * @param {Number} stop angle, + * @param {Number} external radius, + * @param {Number} internal radius, + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ + getArc(startAngle, stopAngle, outerRadius, innerRadius) { + return _getArc(startAngle, stopAngle, outerRadius, innerRadius); + }, + + /** + * Draws polygonal lines (deprecated, use multipolyline instead). * * @method (arg1, arg2) * @public - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, + * @param {Object} a set of points (x, y) defining the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, * @since 0.0.0 */ - translateRun(el, anim) { - _translateRun(el, anim); + getLine(shape, closed) { + return _getLine(shape, closed); }, /** - * Updates dynamically the text value from the initial to the final value. + * Returns polyline paths. * * @method (arg1, arg2) * @public - * @param {Object} the SVG element, - * @param {Object} the animation parameters, - * @returns {} -, + * @param {Object} a set of array of points (x, y) defining + * the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, * @since 0.0.0 */ - textRun(el, anim) { - _textRun(el, anim); + getMultipolyline(shape, closed) { + return _getMultipolyline(shape, closed); }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Adds or Updates the SVG node attributes. - * - * attributes.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _attr adds an attribute to the selected SVG element, - * - * - * Public Static Methods: - * . attr adds an attribute to the selected SVG element, - * - * - * - * @namespace SV.Methods.Attr.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Attr.Public; + }; + + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Static; + + /* eslint-enable one-var, semi-style, no-underscore-dangle */ + }, {}], + + /* eslint-disable-next-line no-unused-vars */ + 5: ['./src/components/attr', function(impoort, module, exports) { + /** **************************************************************************** + * + * Adds or Updates the SVG node attributes. + * + * attributes.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . _attr adds an attribute to the selected SVG element, + * + * + * Public Static Methods: + * . attr adds an attribute to the selected SVG element, + * + * + * + * @namespace SVG.src.components.attr + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable no-underscore-dangle */ + + + // -- Vendor modules // -- Local modules - const Anim = SV.Anim.Public; + const Anim = impoort('./anim'); // -- Local constants @@ -1640,130 +1559,205 @@ // -- Local variables - // -- Private Functions ---------------------------------------------------- + // -- Private Functions -------------------------------------------------------- /** * Adds an attribute to the selected SVG element. * * @function (arg1, arg2, arg3) * @private + * @param {Object} the SVG element, + * @param {String} the name of the attribute, + * @param {Object} the value of the attribute or the params for the animation, + * @returns {} -, + * @since 0.0.0 + */ + function _attr(el, attr, value) { + switch (typeof value) { + // Add the requested attribute to this element: + case 'string': + case 'number': + el.setAttributeNS(null, attr, value); + break; + + case 'object': + // Proceed with an animation: + switch (attr) { + // ... + // case 'd': + // Anim.dAnimationRun(el, value); + // break; + + // Transform animations: + case 'transform': + switch (value.type) { + // Rotate animation: + case 'rotate': + Anim.rotateRun(el, value); + break; + + // Scale animation: + case 'scale': + Anim.scaleRun(el, value); + break; + + // Smooth linear animation: + case 'translate': + Anim.translateRun(el, value); + break; + + default: + throw new Error(`The animation is not supported for the transform ${value.type}!`); + } + break; + + default: + throw new Error(`The animation is not supported for the attribute ${attr}!`); + } + break; + + default: + // Ignore! + } + } + + + // -- Public Static Methods ---------------------------------------------------- + + const Attr = { + + /** + * Adds an attribute to the selected SVG element. + * + * @method (arg1, arg2, arg3) + * @public + * @param {Object} the SVG object, + * @param {String} the name of the attribute, + * @param {Object} the value of the attribute or the params for the animation, + * @returns {} -, + * @since 0.0.0 + */ + attr(el, attr, value) { + _attr(el, attr, value); + }, + }; + + + // -- Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Attr; + + /* eslint-enable no-underscore-dangle */ + + /* eslint-disable-next-line */ + }, { './anim': 8 }], + + /* eslint-disable-next-line no-unused-vars */ + 6: ['./src/components/text', function(impoort, module, exports) { + /** **************************************************************************** + * + * Implements the text methods. + * + * text.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . _text adds a text to the selected SVG element, + * + * + * Public Static Methods: + * . text adds a text to the selected SVG element, + * + * + * + * @namespace SVG.src.components.text + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable one-var, semi-style, no-underscore-dangle */ + + + // -- Vendor modules + + + // -- Local modules + const Anim = impoort('./anim'); + + + // -- Local constants + + + // -- Local variables + + + // -- Private Functions -------------------------------------------------------- + + /** + * Adds a text to the selected SVG element. + * + * @function (arg1, arg2) + * @private * @param {Object} the SVG element, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, + * @param {Object} the text or the the params for the animation, * @returns {} -, * @since 0.0.0 */ - function _attr(el, attr, value) { + function _text(el, value) { switch (typeof value) { - // Add the requested attribute to this element: - case 'string': case 'number': - el.setAttributeNS(null, attr, value); + case 'string': + /* eslint-disable-next-line no-param-reassign */ + el.textContent = value; break; case 'object': - // Proceed with an animation: - switch (attr) { - // ... - // case 'd': - // Anim.dAnimationRun(el, value); - // break; - - // Transform animations: - case 'transform': - switch (value.type) { - // Rotate animation: - case 'rotate': - Anim.rotateRun(el, value); - break; - - // Scale animation: - case 'scale': - Anim.scaleRun(el, value); - break; - - // Smooth linear animation: - case 'translate': - Anim.translateRun(el, value); - break; - - default: - throw new Error(`The animation is not supported for the transform ${value.type}!`); - } - break; - - default: - throw new Error(`The animation is not supported for the attribute ${attr}!`); - } + Anim.textRun(el, value); break; default: - // Ignore! + break; } } - // -- Public Static Methods ------------------------------------------------ + // -- Public Static Methods ---------------------------------------------------- - _.extend(Root, { + const Text = { /** - * Adds an attribute to the selected SVG element. + * Adds a text to the selected SVG element. * - * @method (arg1, arg2, arg3) + * @method (arg1, arg2) * @public - * @param {Object} the SVG object, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, + * @param {Object} the SVG element, + * @param {Object} the text or the the params for the animation, * @returns {} -, * @since 0.0.0 */ - attr(el, attr, value) { - _attr(el, attr, value); + text(el, value) { + _text(el, value); }, - }); - }()); - /* eslint-enable no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the SVG static methods. - * - * staticmethods.js is just a literal object that contains a set of functions. - * it can't be intantiated. - * - * Private Functions: - * . _transformAttrToObj converts a SVG transform from string to object, - * . _transformAttrToStr converts a SVG transform from object to string, - * . _getArc returns an arc path, - * . _getLine returns a polyline path, - * . _getMultipolyline returns a set of polyline paths, - * - * - * Public Static Methods: - * . transformAttrToObj converts a SVG transform from string to object, - * . transformAttrToStr converts a SVG transform from object to string, - * . getArc returns an arc path, - * . getLine draws polygonal lines, - * . getMultipolyline returns polyline paths, - * - * - * - * @namespace SV.Methods.Static.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Static.Public; + }; + + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Text; + + /* eslint-enable one-var, semi-style, no-underscore-dangle */ + + /* eslint-disable-next-line */ + }, { './anim': 8 }], + + /* eslint-disable-next-line no-unused-vars */ + 7: ['./src/components/w3c', function(impoort, module, exports) { + /* eslint-disable one-var, semi-style, no-underscore-dangle */ + + + // -- Vendor modules // -- Local modules @@ -1775,593 +1769,612 @@ // -- Local variables - // -- Private Functions ---------------------------------------------------- + // -- Main - /** - * Converts a SVG transform attributes string to an object. + /* eslint-disable-next-line no-param-reassign */ + module.exports = { + SVG_NS: 'http://www.w3.org/2000/svg', + XLINK_NS: 'http://www.w3.org/1999/xlink', + }; + }, {}], + + /* eslint-disable-next-line no-unused-vars */ + 8: ['./src/components/anim', function(impoort, module, exports) { + /** **************************************************************************** * - * @function (arg1) - * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - /* eslint-disable one-var-declaration-per-line */ - function _transformAttrToObj(transform) { - const tr = typeof transform === 'string' ? transform : '' - ; + * Performs the animations. + * + * animation.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . _rotateRun rotates the SVG element, + * . _scaleRun scales the SVG element, + * . _translateRun translates the SVG element, + * . _textRun updates the text value from initial to final value, + * + * + * Public Static Methods: + * . rotateRun rotates the SVG element, + * . scaleRun scales the SVG element, + * . translateRun translates the SVG element, + * . textRun updates the text value from initial to final value, + * + * + * + * @namespace SVG.src.components.anim + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable one-var, semi-style, no-underscore-dangle */ - const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; - const regexTr = /translate(.*?)\)/; - const regexSc = /scale(.*?)\)/; - const regexRo = /rotate(.*?)\)/; - const regexSkX = /skewX(.*?)\)/; - const regexSkY = /skewY(.*?)\)/; - const regexMtx = /matrix(.*?)\)/; - const translate = tr.match(regexTr) === null - ? null - : (function() { - let x, y; - const t = tr.match(regexTr)[0].match(regexN); - if (!t) { - x = null; - y = null; - } else if (t.length === 1) { - x = parseFloat(t[0], 10); - y = x; - } else { - x = parseFloat(t[0], 10); - y = parseFloat(t[1], 10); - } - return { - x, - y, - }; - }()); + // -- Vendor modules - const scale = tr.match(regexSc) === null - ? null - : (function() { - let x, y; - const s = tr.match(regexSc)[0].match(regexN); - if (!s) { - x = null; - y = null; - } else if (s.length === 1) { - x = parseFloat(s[0], 10); - y = x; - } else { - x = parseFloat(s[0], 10); - y = parseFloat(s[1], 10); - } - return { - x, - y, - }; - }()); - const rotate = tr.match(regexRo) === null - ? null - : (function() { - let a, cx, cy; - const r = tr.match(regexRo)[0].match(regexN); - if (!r) { - a = null; - cx = null; - cy = null; - } else if (r.length === 1) { - a = parseFloat(r[0], 10); - cx = null; - cy = null; - } else if (r.length === 2) { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = cx; - } else { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = parseFloat(r[2], 10); - } - return { - a, - cx, - cy, - }; - }()); + // -- Local modules + const _ = impoort('../lib/_'); + const SVG = impoort('./staticmethods'); - const skewX = tr.match(regexSkX) === null - ? null - : (function() { - const sk = tr.match(regexSkX)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); - } - return null; - }()); - const skewY = tr.match(regexSkY) === null - ? null - : (function() { - const sk = tr.match(regexSkY)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); - } - return null; - }()); + // -- Local constants - // Not implemented. - const matrix = tr.match(regexMtx) === null - ? null - : null; - return { - translate, - scale, - rotate, - matrix, - skewX, - skewY, - }; - } - /* eslint-enable one-var-declaration-per-line */ + // -- Local variables + + + // -- Private Functions -------------------------------------------------------- /** - * Converts a SVG transform attributes string to an object. + * Rotates the SVG element. * - * @function (arg1) + * Nota: + * The animation object must contain the following properties: + * { + * start: the value (if omitted, start from current position), + * stop: the final value, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } + * + * @function (arg1, arg2) * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, + * @param {Object} the SVG element, + * @param {Object} the rotation to perform, + * @returns {} -, * @since 0.0.0 */ - /* eslint-disable prefer-template */ - function _transformAttrToStr(tr) { - let s = '' - ; - - // Translate: - if (tr.translate && typeof tr.translate.x === 'number') { - if (typeof tr.translate.y === 'number') { - s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; - } else { - // if y isn't provided, it is assumed to 0: - s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; - } - } - - // Scale: - if (tr.scale && typeof tr.scale.x === 'number') { - if (typeof tr.scale.y === 'number') { - s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; - } else { - // if y isn't provided, it is assumed to be equal to x: - s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; - } - } - - // Rotate: - if (tr.rotate && typeof tr.rotate.a === 'number') { - if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; - } else if (typeof tr.rotate.cx === 'number') { - // if y isn't provided, it is assumed to be equal to x: - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; - } else { - s += 'rotate(' + tr.rotate.a + ') '; - } - } + function _rotateRun(el, anim) { + const r = { + a: 0, + t: 0, + start: _.isNumber(anim.start) ? anim.start : null, + stop: _.isNumber(anim.stop) ? anim.stop : 180, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; - // SkewX: - if (typeof tr.skewX === 'number') { - s += 'skewX(' + tr.skewX + ') '; + // If anim.start is undefined, we start from the current value: + if (_.isNull(r.start)) { + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + r.start = _.isObject(transform.scale) && _.isNumber(transform.scale.a) + ? transform.scale.a + : 180; } - // SkewY: - if (typeof tr.skewY === 'number') { - s += 'skewY(' + tr.skewY + ') '; - } + const timer = setInterval(() => { + // Compute the next step: + r.t += r.period; + // Abort if overflow or if no change in the position. + if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } + r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); - // matrix not implemented! - // - + // Retrieve transform attributes, set new rotation value and update. + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + transform.rotate.a = r.a; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); - // Return a clean string (no leading/trailing blanck spaces): - return s.replace(/(^\s+|\s+$)/g, ''); + if (r.t === r.duration) { + clearInterval(timer); + } + }, r.period); } - /* eslint-enable prefer-template */ /** - * Returns an arc path. + * Scales the SVG element. * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial x, y values (if omitted, start from current position), + * stop: the final x, y values, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } * - * @function (arg1, arg2, arg3, arg4) + * @function (arg1, arg2) * @private - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, + * @param {Object} the SVG object, + * @param {Object} the scaling to perform, + * @returns {} -, * @since 0.0.0 */ - /* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ - function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { - startAngle = startAngle !== undefined ? startAngle : 0; - stopAngle = stopAngle !== undefined ? stopAngle : 0; - outerRadius = outerRadius !== undefined ? outerRadius : 0; - startAngle = startAngle % (2 * Math.PI); - if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } - if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } - - let sweepflag = 0; - if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } - const x0 = Math.cos(startAngle); - const y0 = Math.sin(startAngle); - const x1 = Math.cos(stopAngle); - const y1 = Math.sin(stopAngle); + function _scaleRun(el, anim) { + const s = { + x: 0, + y: 0, + t: 0, + x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, + y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, + x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, + y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; - /* eslint-disable-next-line prefer-template */ - const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); - let innerArc = ''; - if (innerRadius !== undefined) { - /* eslint-disable-next-line prefer-template */ - innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; + // if anim.start.x or anim.start.y is undefined, the scaling operation + // starts from the current value: + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + if (_.isNull(s.x0) || _.isNull(s.y0)) { + s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) + ? transform.scale.x + : 0; + s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) + ? transform.scale.y + : 0; } - return outerArc + innerArc; + + // Run: + const timer = setInterval(() => { + // Compute the next step: + s.t += s.period; + if (s.t > s.duration) { s.t = s.duration; } + s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); + s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); + + // Retrieve transform attributes, set new scale value and update. + const tr = SVG.transformAttrToObj(el.getAttribute('transform')); + tr.scale.x = s.x; + tr.scale.y = s.y; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); + + if (s.t === s.duration) { + clearInterval(timer); + } + }, s.period); } - /* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ /** - * Draws polygonal lines (deprecated, use multipolyline instead). + * Translates the SVG element. * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial x, y values (if omitted, start from current position), + * stop: the final x, y values, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } * * @function (arg1, arg2) * @private - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the translation to perform, + * @returns {} -, * @since 0.0.0 */ - function _getLine(shape, closed) { - let path = ''; - shape.forEach((obj) => { - if (obj.x !== null && obj.y !== null) { - if (path === '') { - // path = 'M' + obj.x + ',' + obj.y; - path = `M${obj.x}, ${obj.y}`; - } else { - // path += 'L' + obj.x + ',' + obj.y; - path += `L${obj.x},${obj.y}`; - } + function _translateRun(el, anim) { + const v = { + x: 0, + y: 0, + t: 0, + length: null, + arc: null, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; + + let x0 + , y0 + ; + + // Translate starts from the passed-in value or the current position: + if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { + x0 = anim.start.x; + y0 = anim.start.y; + } else { + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) + ? transform.translate.x + : 0; + y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) + ? transform.translate.x + : 0; + } + + /* eslint-disable-next-line no-restricted-properties */ + v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); + v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); + if (anim.stop.x - x0 < 0) v.arc += -Math.PI; + if (v.length === 0) v.arc = 0; + + const timer = setInterval(() => { + // Compute the next step: + v.t += v.period; + if (v.t > v.duration) v.t = v.duration; + v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; + v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; + + // Retrieve the transform attributes, set the new position value and update: + const trform = SVG.transformAttrToObj(el.getAttribute('transform')); + trform.translate.x = v.x; + trform.translate.y = v.y; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); + + // Stop the timer if destination point reached. + if (v.t === v.duration) { + clearInterval(timer); } - }); - if (closed === true) { path += 'Z'; } - return path; + }, v.period); } /** - * Returns polyline paths. + * Updates dynamically the text value from the initial to the final value. * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial value, + * stop: the final value, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } * * @function (arg1, arg2) * @private - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG object, + * @param {Object} the animation parameters, + * @returns {} -, * @since 0.0.0 */ - function _getMultipolyline(shape, closed) { - let path - , subpath - , i - , j - ; + function _textRun(el, anim) { + const d = { + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + value: 0, + start: _.isNumber(anim.start) ? anim.start : 0, + stop: _.isNumber(anim.stop) ? anim.stop : 0, + t: 0, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; - path = ''; - for (i = 0; i < shape.length; i++) { - subpath = ''; - for (j = 0; j < shape[i].length; j++) { - if (shape[i][j].x !== null && shape[i][j].y !== null) { - if (subpath === '') { - // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; - subpath = `M${shape[i][j].x},${shape[i][j].y}`; - } else { - // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; - subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; - } - } + // Run: + const timer = setInterval(() => { + // Compute the next step: + d.t += d.period; + // Abort if overflow or if no change in the position. + if (d.t > d.duration || d.stop === d.start) { + d.t = d.duration; + } + d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); + if (d.duration === 0) { + d.value = d.start; + } + + // Display the new digit value: + /* eslint-disable-next-line no-param-reassign */ + el.textContent = d.value.toFixed(0); + + // is animation over? + if (d.t === d.duration) { + clearInterval(timer); } - if (closed === true) { subpath += 'z'; } - path += subpath; - } - return path; + }, d.period); } - // -- Public Methods ------------------------------------------------------- - - _.extend(Root, { + // -- Public Static Methods ---------------------------------------------------- - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToObj(transform) { - return _transformAttrToObj(transform); - }, + const Anim = { /** - * Converts a SVG transform attributes string to an object. + * Rotates the SVG element. * - * @method (arg1) + * @method (arg1, arg2) * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, + * @param {Object} the SVG element, + * @param {Object} the rotation to perform, + * @returns {} -, * @since 0.0.0 */ - transformAttrToStr(tr) { - return _transformAttrToStr(tr); + rotateRun(el, anim) { + _rotateRun(el, anim); }, /** - * Returns an arc path. + * Scales the SVG element; * - * @method (arg1, arg2, arg3, arg4) + * @method (arg1, arg2) * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the scaling to perform, + * @returns {} -, * @since 0.0.0 */ - getArc(startAngle, stopAngle, outerRadius, innerRadius) { - return _getArc(startAngle, stopAngle, outerRadius, innerRadius); + scaleRun(el, anim) { + _scaleRun(el, anim); }, /** - * Draws polygonal lines (deprecated, use multipolyline instead). + * Translates the SVG Element. * * @method (arg1, arg2) * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the translation to perform, + * @returns {} -, * @since 0.0.0 */ - getLine(shape, closed) { - return _getLine(shape, closed); + translateRun(el, anim) { + _translateRun(el, anim); }, /** - * Returns polyline paths. + * Updates dynamically the text value from the initial to the final value. * * @method (arg1, arg2) * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the animation parameters, + * @returns {} -, * @since 0.0.0 */ - getMultipolyline(shape, closed) { - return _getMultipolyline(shape, closed); + textRun(el, anim) { + _textRun(el, anim); }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Creates the SVG node. - * - * svg.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _create creates the SVG node, - * - * - * Public Static Methods: - * . create creates the SVG node, - * - * - * - * @namespace SV.SVG.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.SVG.Public; + }; - // -- Local modules + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Anim; + /* eslint-enable one-var, semi-style, no-underscore-dangle */ - // -- Local constants + /* eslint-disable-next-line */ + }, { '../lib/_': 9, './staticmethods': 4 }], + /* eslint-disable-next-line no-unused-vars */ + 9: ['./src/lib/_', function(impoort, module, exports) { + /** **************************************************************************** + * + * Provides a subset of the overslash library. + * + * _.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . none, + * + * + * Public Static Methods: + * . extend extends the passed-in object with new methods, + * + * . isUndefined is a given variable undefined? + * . isNull is a given value null? + * . isBoolean is a given value a boolean? + * . isString is a given value a string? + * . isNumber is a given value a number? + * . isObject is a given variable an object? + * . isLiteralObject is a given variable a literal object? + * . isFunction is a given variable a function? + * . isArray is a given value an array? + * + * . linear linear easing method, + * + * + * + * @namespace - + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* - */ - // -- Local variables + // -- Vendor modules - // -- Private Methods ------------------------------------------------------ - /** - * Creates the SVG node. - * - * @function (arg1) - * @private - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, - * @since 0.0.0 - */ - function _create(selector) { - const sel = typeof selector === 'string' ? selector : 'body' - , el = document.querySelector(sel) - , node = el || document.querySelector('body') - ; + // -- Local modules - let _root; - // create a unique id: - let id = `i${Math.random().toString(36).substr(2, 7)}`; - // Check that the svg node doesn't exist: - const isSVG = node.getElementsByTagNameNS(SVG_NS, 'svg')[0]; - if (!isSVG || isSVG.length === 0) { - // Ok, it doesn't exist, we can create it: - const svg = document.createElementNS(SVG_NS, 'svg'); - svg.setAttributeNS(null, 'id', id); - svg.setAttributeNS(null, 'version', '1.1'); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', SVG_NS); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', XLINK_NS); - node.appendChild(svg); - _root = svg; - } else { - // It already exists, do not overwrite it! - id = isSVG.getAttributeNS(null, 'id'); - _root = isSVG; - } - return { id, _root }; - } + // -- Local constants + + + // -- Local variables - // -- Public Static Methods ------------------------------------------------ + // -- Public Methods ------------------------------------------------------- - _.extend(Root, { + const _ = { /** - * Creates the SVG node. + * Extends the passed-in object with new methods. + * + * Nota: this function mutates object. + * + * @function (arg1, arg2) + * @private + * @param {Object} the object to extend, + * @param {Object} an object containing a set of methods, + * @returns {} -, + * @since 0.0.0 + */ + extend(object, methods) { + const keys = Object.keys(methods); + for (let i = 0; i < keys.length; i++) { + /* eslint-disable-next-line no-param-reassign */ + object[keys[i]] = methods[keys[i]]; + } + return object; + }, + + /** + * Is a given variable undefined? * * @method (arg1) * @public - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, * @since 0.0.0 */ - create(selector) { - return _create(selector); + isUndefined(obj) { + return obj === undefined; }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the text methods. - * - * text.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _text adds a text to the selected SVG element, - * - * - * Public Static Methods: - * . text adds a text to the selected SVG element, - * - * - * - * @namespace SV.Methods.Text.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Text.Public; - - - // -- Local modules - const Anim = SV.Anim.Public - ; - - // -- Local constants - - - // -- Local variables + /** + * Is a given value null? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isNull(obj) { + return obj === null; + }, - // -- Private Functions ---------------------------------------------------- - - /** - * Adds a text to the selected SVG element. - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - function _text(el, value) { - switch (typeof value) { - case 'number': - case 'string': - /* eslint-disable-next-line no-param-reassign */ - el.textContent = value; - break; + /** + * Is a given value a boolean? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isBoolean(obj) { + return obj === true || obj === false || Object.prototype.toString.call(obj) === '[object Boolean]'; + }, - case 'object': - Anim.textRun(el, value); - break; + /** + * Is a given value a string? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isString(obj) { + return Object.prototype.toString.call(obj) === '[object String]'; + }, - default: - break; - } - } + /** + * Is a given value a number? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isNumber(obj) { + return Object.prototype.toString.call(obj) === '[object Number]'; + }, + /** + * Is a given variable an object? + * (copied from: http://underscorejs.org) + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isObject(obj) { + const type = typeof obj; + return (type === 'function' || type === 'object') && !!obj; + }, - // -- Public Static Methods ------------------------------------------------ + /** + * Is a given variable a literal object? + * + * @method (arg1) + * @private + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.3 + */ + isLiteralObject(obj) { + return Object.prototype.toString.call(obj) === '[object Object]'; + }, - _.extend(Root, { + /** + * Is a given variable a function? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isFunction(obj) { + return Object.prototype.toString.call(obj) === '[object Function]'; + }, /** - * Adds a text to the selected SVG element. + * Is a given value an array? + * (Delegates to ECMA5's native Array.isArray.) + * (copied from: http://underscorejs.org) * - * @method (arg1, arg2) + * @method (arg1) * @public - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, * @since 0.0.0 */ - text(el, value) { - _text(el, value); + isArray(obj) { + return Object.prototype.toString.call(obj) === '[object Array]'; + }, + + /** + * Computes the intermediate values according to a linear progression. + * + * @method (arg1, arg2, arg3, arg4) + * @public + * @param {Number} the current time, + * @param {Number} the beginning value, + * @param {Number} the change in value, + * @param {Number} the duration, + * @returns {Number} returns the computed value, + */ + elinear(t, b, c, d) { + return (c * t) / d + b; }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ + }; + + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = _; + /* - */ + }, {}], - // Returns the library name: - return SVG; -})); +/* eslint-disable-next-line */ +},{},[1])(1)})); diff --git a/_dist/lib/svg.min.js b/_dist/lib/svg.min.js index d28be1c..18ce89f 100644 --- a/_dist/lib/svg.min.js +++ b/_dist/lib/svg.min.js @@ -1,10 +1,11 @@ /*! **************************************************************************** - * SVG v0.0.3 + * SVG v0.0.4 * * A tiny Javascript library intended to create and manage SVG elements in the DOM. * (you can download it from npm or github repositories) - * Copyright (c) 2019 Mobilabs (http://www.mobilabs.fr). + * Copyright (c) 2020 Mobilabs (http://www.mobilabs.fr). * Released under the MIT license. You may obtain a copy of the License * at: http://www.opensource.org/licenses/mit-license.php). + * Built from ES6Pakket v0.0.1-alpha.1. * ************************************************************************** */ -!function(t,e){"use strict";"function"==typeof define&&define.amd?define([""],e):"object"==typeof exports?(module.exports=e(t),null===t.SVG&&(t.SVG=e(t))):t.SVG=e(t)}(this,t=>{"use strict";const e="http://www.w3.org/2000/svg",n="http://www.w3.org/1999/xlink";let r,i;const s={Dollar:{Public:{}},SVG:{Public:{}},Anim:{Public:{}},Methods:{Static:{Public:{}},Attr:{Public:{}},Text:{Public:{}}}};return function(){const e=s.Dollar.Public,n=s.SVG.Public,o=s.Methods.Static.Public,a=t.SVG;let l;r=function(t){const s=Object.create(i.extend(l,e)),{id:o,_root:a}=n.create(t);return s.id=o,s._root=a,s._SVG=r,s},r._setTestMode=function(){return s},r.noConflict=function(){return t.SVG=a,this},r.transformAttrToObj=function(t){return o.transformAttrToObj(t)},r.transformAttrToStr=function(t){return o.transformAttrToStr(t)},r.getArc=function(t,e,n,r){return o.getArc(t,e,n,r)},r.getLine=function(t,e){return o.getLine(t,e)},r.getMultipolyline=function(t,e){return o.getMultipolyline(t,e)},l={},r.VERSION="0.0.3"}(),i={extend(t,e){const n=Object.keys(e);for(let r=0;rvoid 0===t,isNull:t=>null===t,isBoolean:t=>!0===t||!1===t||"[object Boolean]"===Object.prototype.toString.call(t),isString:t=>"[object String]"===Object.prototype.toString.call(t),isNumber:t=>"[object Number]"===Object.prototype.toString.call(t),isObject(t){const e=typeof t;return("function"===e||"object"===e)&&!!t},isLiteralObject:t=>"[object Object]"===Object.prototype.toString.call(t),isFunction:t=>"[object Function]"===Object.prototype.toString.call(t),isArray:t=>"[object Array]"===Object.prototype.toString.call(t),elinear:(t,e,n,r)=>n*t/r+e},function(){const t=s.Dollar.Public,r=s.Methods.Attr.Public,o=s.Methods.Text.Public;i.extend(t,{$:function(t){const{id:i}=this,{_root:s}=this;return{id:i,0:t?s.querySelector(t):s,_root:s,firstParent:function(){return this._root&&(this[0]=this._root),this},parent:function(){return this.root?this[0]!==this.root&&(this[0]=this[0].parentNode):this[0]=this[0].parentNode,this},previous:function(){return this[0]=this[0].previousElementSibling,this},next:function(){return this[0]=this[0].nextElementSibling,this},select:function(t){return this[0]=this[0].querySelector(t),this},append:function(t){const n=document.createElementNS(e,t);return this[0]=this[0].appendChild(n),this},appendBefore:function(t,n){const r=document.createElementNS(e,t),i=this[0].querySelector(n);return this[0].insertBefore(r,i),this[0]=r,this},appendAfter:function(t,n){const r=document.createElementNS(e,t),i=this[0].querySelector(n).nextElementSibling;return this[0].insertBefore(r,i),this[0]=r,this},appendHTML:function(t){if("string"!=typeof t)return this;const e=document.createElementNS("http://www.w3.org/1999/xhtml","body");return e.innerHTML=t,this[0]=this[0].appendChild(e),this},replace:function(t){const n=document.createElementNS(e,t);return this[0].parentNode.replaceChild(n,this[0]),this[0]=n,this},remove:function(){let t;return this[0]&&(t=this[0].parentNode,t.removeChild(this[0]),this[0]=t),this},removeChild:function(t){return t&&this[0].removeChild(t),this},replaceChild:function(t,e){return t&&this[0].replaceChild(t,e),this},removeAllChilds:function(){for(;this[0].firstChild;)this[0].removeChild(this[0].firstChild);return this},empty:function(){for(;this[0].firstChild;)this[0].removeChild(this[0].firstChild);return this},listen:function(t,e){return"string"==typeof t&&"function"==typeof e&&this[0].addEventListener(t,e),this},listenOnce:function(t,e){const n=this[0];return"string"==typeof t&&"function"==typeof e&&n.addEventListener(t,(function r(i){n.removeEventListener(t,r),e(i)})),this},unlisten:function(t,e){return"string"==typeof t&&"function"==typeof e&&this[0].removeEventListener(t,e),this},alink:function(t,e){return this[0].setAttributeNS(n,`xlink:${t}`,e),this},attr:function(t,e){return this[0]?(r.attr(this[0],t,e),this):(console.log("warning: this.svgElement is null!"),this)},rmattr:function(t){return this[0].removeAttributeNS(null,t),this},text:function(t){return o.text(this[0],t),this},addClass:function(t){let e=this[0].getAttributeNS(null,"class");return e=e?`${e} ${t}`:t,this[0].setAttributeNS(null,"class",e),this},removeClass:function(t){let e=this[0].getAttributeNS(null,"class");return e&&(e=e.replace(t,"").replace(/(^\s+|\s+$)/g,""),this[0].setAttributeNS(null,"class",e)),this},toggleClass:function(t){const e=this[0].getAttributeNS(null,"class");return e&&e.match(t)?(this.removeClass(t),this):(this.addClass(t),this)},query:function(t){return this[0].querySelector(t)},getElement:function(){return this[0]},children:function(){return this[0].children},getAttribute:function(t){return this[0]?this[0].getAttribute(t):null},getComputedStyle:function(){return window.getComputedStyle(this[0])},getPropertyValue:function(t){return this.getPropertyValue(t)},getSize:function(){return{width:this[0].getBoundingClientRect().width,height:this[0].getBoundingClientRect().height}},getBbox:function(){return{top:this[0].getBoundingClientRect().top,left:this[0].getBoundingClientRect().left,width:this[0].getBoundingClientRect().width,height:this[0].getBoundingClientRect().height}}}}})}(),function(){const t=s.Anim.Public;i.extend(t,{rotateRun(t,e){!function(t,e){const n={a:0,t:0,start:i.isNumber(e.start)?e.start:null,stop:i.isNumber(e.stop)?e.stop:180,period:i.isNumber(e.frequency)?1e3/e.frequency:10,easing:i.isFunction(e.easing)?e.easing:i.elinear,duration:i.isNumber(e.duration)?e.duration:2e3};if(i.isNull(n.start)){const e=r.transformAttrToObj(t.getAttribute("transform"));n.start=i.isObject(e.scale)&&i.isNumber(e.scale.a)?e.scale.a:180}const s=setInterval(()=>{n.t+=n.period,(n.t>n.duration||n.stop===n.start)&&(n.t=n.duration),n.a=n.easing(n.t,n.start,n.stop-n.start,n.duration);const e=r.transformAttrToObj(t.getAttribute("transform"));e.rotate.a=n.a,t.setAttributeNS(null,"transform",r.transformAttrToStr(e)),n.t===n.duration&&clearInterval(s)},n.period)}(t,e)},scaleRun(t,e){!function(t,e){const n={x:0,y:0,t:0,x0:i.isObject(e.start)&&i.isNumber(e.start.x)?e.start.x:null,y0:i.isObject(e.start)&&i.isNumber(e.start.y)?e.start.y:null,x1:i.isObject(e.stop)&&i.isNumber(e.stop.x)?e.stop.x:1,y1:i.isObject(e.stop)&&i.isNumber(e.stop.y)?e.stop.y:1,period:i.isNumber(e.frequency)?1e3/e.frequency:10,easing:i.isFunction(e.easing)?e.easing:i.elinear,duration:i.isNumber(e.duration)?e.duration:2e3},s=r.transformAttrToObj(t.getAttribute("transform"));(i.isNull(n.x0)||i.isNull(n.y0))&&(n.x0=i.isObject(s.scale)&&i.isNumber(s.scale.x)?s.scale.x:0,n.y0=i.isObject(s.scale)&&i.isNumber(s.scale.y)?s.scale.y:0);const o=setInterval(()=>{n.t+=n.period,n.t>n.duration&&(n.t=n.duration),n.x=n.easing(n.t,n.x0,n.x1-n.x0,n.duration),n.y=n.easing(n.t,n.y0,n.y1-n.y0,n.duration);const e=r.transformAttrToObj(t.getAttribute("transform"));e.scale.x=n.x,e.scale.y=n.y,t.setAttributeNS(null,"transform",r.transformAttrToStr(e)),n.t===n.duration&&clearInterval(o)},n.period)}(t,e)},translateRun(t,e){!function(t,e){const n={x:0,y:0,t:0,length:null,arc:null,period:i.isNumber(e.frequency)?1e3/e.frequency:10,easing:i.isFunction(e.easing)?e.easing:i.elinear,duration:i.isNumber(e.duration)?e.duration:2e3};let s,o;if(e.start&&i.isNumber(e.start.x)&&i.isNumber(e.start.y))s=e.start.x,o=e.start.y;else{const e=r.transformAttrToObj(t.getAttribute("transform"));s=i.isObject(e.translate)&&i.isNumber(e.translate.x)?e.translate.x:0,o=i.isObject(e.translate)&&i.isNumber(e.translate.y)?e.translate.x:0}n.length=Math.sqrt(Math.pow(e.stop.x-s,2)+Math.pow(e.stop.y-o,2)),n.arc=Math.atan((e.stop.y-o)/(e.stop.x-s)),e.stop.x-s<0&&(n.arc+=-Math.PI),0===n.length&&(n.arc=0);const a=setInterval(()=>{n.t+=n.period,n.t>n.duration&&(n.t=n.duration),n.x=n.easing(n.t,0,n.length,n.duration)*Math.cos(n.arc)+s,n.y=n.easing(n.t,0,n.length,n.duration)*Math.sin(n.arc)+o;const e=r.transformAttrToObj(t.getAttribute("transform"));e.translate.x=n.x,e.translate.y=n.y,t.setAttributeNS(null,"transform",r.transformAttrToStr(e)),n.t===n.duration&&clearInterval(a)},n.period)}(t,e)},textRun(t,e){!function(t,e){const n={period:i.isNumber(e.frequency)?1e3/e.frequency:10,easing:i.isFunction(e.easing)?e.easing:i.elinear,value:0,start:i.isNumber(e.start)?e.start:0,stop:i.isNumber(e.stop)?e.stop:0,t:0,duration:i.isNumber(e.duration)?e.duration:2e3},r=setInterval(()=>{n.t+=n.period,(n.t>n.duration||n.stop===n.start)&&(n.t=n.duration),n.value=n.easing(n.t,n.start,n.stop-n.start,n.duration),0===n.duration&&(n.value=n.start),t.textContent=n.value.toFixed(0),n.t===n.duration&&clearInterval(r)},n.period)}(t,e)}})}(),function(){const t=s.Methods.Attr.Public,e=s.Anim.Public;i.extend(t,{attr(t,n,r){!function(t,n,r){switch(typeof r){case"string":case"number":t.setAttributeNS(null,n,r);break;case"object":switch(n){case"transform":switch(r.type){case"rotate":e.rotateRun(t,r);break;case"scale":e.scaleRun(t,r);break;case"translate":e.translateRun(t,r);break;default:throw new Error(`The animation is not supported for the transform ${r.type}!`)}break;default:throw new Error(`The animation is not supported for the attribute ${n}!`)}}}(t,n,r)}})}(),function(){const t=s.Methods.Static.Public;i.extend(t,{transformAttrToObj:t=>(function(t){const e="string"==typeof t?t:"",n=/[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g,r=/translate(.*?)\)/,i=/scale(.*?)\)/,s=/rotate(.*?)\)/,o=/skewX(.*?)\)/,a=/skewY(.*?)\)/,l=null===e.match(r)?null:function(){let t,i;const s=e.match(r)[0].match(n);return s?1===s.length?(t=parseFloat(s[0],10),i=t):(t=parseFloat(s[0],10),i=parseFloat(s[1],10)):(t=null,i=null),{x:t,y:i}}(),u=null===e.match(i)?null:function(){let t,r;const s=e.match(i)[0].match(n);return s?1===s.length?(t=parseFloat(s[0],10),r=t):(t=parseFloat(s[0],10),r=parseFloat(s[1],10)):(t=null,r=null),{x:t,y:r}}(),c=null===e.match(s)?null:function(){let t,r,i;const o=e.match(s)[0].match(n);return o?1===o.length?(t=parseFloat(o[0],10),r=null,i=null):2===o.length?(t=parseFloat(o[0],10),r=parseFloat(o[1],10),i=r):(t=parseFloat(o[0],10),r=parseFloat(o[1],10),i=parseFloat(o[2],10)):(t=null,r=null,i=null),{a:t,cx:r,cy:i}}(),h=null===e.match(o)?null:e.match(o)[0].match(n)?parseFloat(e.match(o)[0].match(n)[0],10):null,f=null===e.match(a)?null:e.match(a)[0].match(n)?parseFloat(e.match(a)[0].match(n)[0],10):null;return{translate:l,scale:u,rotate:c,matrix:(e.match(/matrix(.*?)\)/),null),skewX:h,skewY:f}})(t),transformAttrToStr:t=>(function(t){let e="";return t.translate&&"number"==typeof t.translate.x&&("number"==typeof t.translate.y?e+="translate("+t.translate.x+", "+t.translate.y+") ":e+="translate("+t.translate.x+", 0) "),t.scale&&"number"==typeof t.scale.x&&("number"==typeof t.scale.y?e+="scale("+t.scale.x+", "+t.scale.y+") ":e+="scale("+t.scale.x+", "+t.scale.x+") "),t.rotate&&"number"==typeof t.rotate.a&&("number"==typeof t.rotate.cx&&"number"==typeof t.rotate.cy?e+="rotate("+t.rotate.a+", "+t.rotate.cx+", "+t.rotate.cy+") ":"number"==typeof t.rotate.cx?e+="rotate("+t.rotate.a+", "+t.rotate.cx+", "+t.rotate.cx+") ":e+="rotate("+t.rotate.a+") "),"number"==typeof t.skewX&&(e+="skewX("+t.skewX+") "),"number"==typeof t.skewY&&(e+="skewY("+t.skewY+") "),e.replace(/(^\s+|\s+$)/g,"")})(t),getArc:(t,e,n,r)=>(function(t,e,n,r){t=void 0!==t?t:0,e=void 0!==e?e:0,n=void 0!==n?n:0,(t%=2*Math.PI)>2*Math.PI&&(t%=2*Math.PI),e>2*Math.PI&&(e%=2*Math.PI);let i=0;Math.abs(e-t)>Math.PI&&(i=1);const s=Math.cos(t),o=Math.sin(t),a=Math.cos(e),l=Math.sin(e);let u="";return void 0!==r&&(u="L"+a*r+","+l*r+"A"+r+","+r+" 0 "+i+",0 "+s*r+","+o*r+"Z"),"M"+s*n+","+o*n+"A"+n+","+n+" 0 "+i+",1 "+a*n+","+l*n+u})(t,e,n,r),getLine:(t,e)=>(function(t,e){let n="";return t.forEach(t=>{null!==t.x&&null!==t.y&&(""===n?n=`M${t.x}, ${t.y}`:n+=`L${t.x},${t.y}`)}),!0===e&&(n+="Z"),n})(t,e),getMultipolyline:(t,e)=>(function(t,e){let n,r,i,s;for(n="",i=0;i(function(t){const r="string"==typeof t?t:"body",i=document.querySelector(r)||document.querySelector("body");let s,o=`i${Math.random().toString(36).substr(2,7)}`;const a=i.getElementsByTagNameNS(e,"svg")[0];if(a&&0!==a.length)o=a.getAttributeNS(null,"id"),s=a;else{const t=document.createElementNS(e,"svg");t.setAttributeNS(null,"id",o),t.setAttributeNS(null,"version","1.1"),t.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns",e),t.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",n),i.appendChild(t),s=t}return{id:o,_root:s}})(t)})}(),function(){const t=s.Methods.Text.Public,e=s.Anim.Public;i.extend(t,{text(t,n){!function(t,n){switch(typeof n){case"number":case"string":t.textContent=n;break;case"object":e.textRun(t,n)}}(t,n)}})}(),r}); \ No newline at end of file +!function(t,e){"use strict";"function"==typeof define&&define.amd?define([""],e):"object"==typeof exports?module.exports=e(t):t.SVG=e(t)}(this,t=>{"use strict";return function t(e,n,r){function s(o){function i(t){return s(e[o][2][t]||t)}if(!n[o]){if(!e[o])throw new Error(`Cannot find module "${o}"`);n[o]={exports:{}};const s=n[o];e[o][1].call(s.exports,i,s,s.exports,t,e,n,r)}return n[o].exports}for(let t=0;tfunction(t){const e="string"==typeof t?t:"body",n=document.querySelector(e)||document.querySelector("body");let s,o=`i${Math.random().toString(36).substr(2,7)}`;const i=n.getElementsByTagNameNS(r.SVG_NS,"svg")[0];if(i&&0!==i.length)o=i.getAttributeNS(null,"id"),s=i;else{const t=document.createElementNS(r.SVG_NS,"svg");t.setAttributeNS(null,"id",o),t.setAttributeNS(null,"version","1.1"),t.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns",r.SVG_NS),t.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",r.XLINK_NS),n.appendChild(t),s=t}return{id:o,_root:s}}(t)};e.exports=s},{"./w3c":7}],4:["./src/components/staticmethods",function(t,e,n){const r={transformAttrToObj:t=>function(t){const e="string"==typeof t?t:"",n=/[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g,r=/translate(.*?)\)/,s=/scale(.*?)\)/,o=/rotate(.*?)\)/,i=/skewX(.*?)\)/,a=/skewY(.*?)\)/,u=null===e.match(r)?null:function(){let t,s;const o=e.match(r)[0].match(n);return o?1===o.length?(t=parseFloat(o[0],10),s=t):(t=parseFloat(o[0],10),s=parseFloat(o[1],10)):(t=null,s=null),{x:t,y:s}}(),l=null===e.match(s)?null:function(){let t,r;const o=e.match(s)[0].match(n);return o?1===o.length?(t=parseFloat(o[0],10),r=t):(t=parseFloat(o[0],10),r=parseFloat(o[1],10)):(t=null,r=null),{x:t,y:r}}(),c=null===e.match(o)?null:function(){let t,r,s;const i=e.match(o)[0].match(n);return i?1===i.length?(t=parseFloat(i[0],10),r=null,s=null):2===i.length?(t=parseFloat(i[0],10),r=parseFloat(i[1],10),s=r):(t=parseFloat(i[0],10),r=parseFloat(i[1],10),s=parseFloat(i[2],10)):(t=null,r=null,s=null),{a:t,cx:r,cy:s}}(),h=null===e.match(i)?null:e.match(i)[0].match(n)?parseFloat(e.match(i)[0].match(n)[0],10):null,f=null===e.match(a)?null:e.match(a)[0].match(n)?parseFloat(e.match(a)[0].match(n)[0],10):null;return{translate:u,scale:l,rotate:c,matrix:(e.match(/matrix(.*?)\)/),null),skewX:h,skewY:f}}(t),transformAttrToStr:t=>function(t){let e="";return t.translate&&"number"==typeof t.translate.x&&("number"==typeof t.translate.y?e+="translate("+t.translate.x+", "+t.translate.y+") ":e+="translate("+t.translate.x+", 0) "),t.scale&&"number"==typeof t.scale.x&&("number"==typeof t.scale.y?e+="scale("+t.scale.x+", "+t.scale.y+") ":e+="scale("+t.scale.x+", "+t.scale.x+") "),t.rotate&&"number"==typeof t.rotate.a&&("number"==typeof t.rotate.cx&&"number"==typeof t.rotate.cy?e+="rotate("+t.rotate.a+", "+t.rotate.cx+", "+t.rotate.cy+") ":"number"==typeof t.rotate.cx?e+="rotate("+t.rotate.a+", "+t.rotate.cx+", "+t.rotate.cx+") ":e+="rotate("+t.rotate.a+") "),"number"==typeof t.skewX&&(e+="skewX("+t.skewX+") "),"number"==typeof t.skewY&&(e+="skewY("+t.skewY+") "),e.replace(/(^\s+|\s+$)/g,"")}(t),getArc:(t,e,n,r)=>function(t,e,n,r){t=void 0!==t?t:0,e=void 0!==e?e:0,n=void 0!==n?n:0,(t%=2*Math.PI)>2*Math.PI&&(t%=2*Math.PI),e>2*Math.PI&&(e%=2*Math.PI);let s=0;Math.abs(e-t)>Math.PI&&(s=1);const o=Math.cos(t),i=Math.sin(t),a=Math.cos(e),u=Math.sin(e);let l="";return void 0!==r&&(l="L"+a*r+","+u*r+"A"+r+","+r+" 0 "+s+",0 "+o*r+","+i*r+"Z"),"M"+o*n+","+i*n+"A"+n+","+n+" 0 "+s+",1 "+a*n+","+u*n+l}(t,e,n,r),getLine:(t,e)=>function(t,e){let n="";return t.forEach(t=>{null!==t.x&&null!==t.y&&(""===n?n=`M${t.x}, ${t.y}`:n+=`L${t.x},${t.y}`)}),!0===e&&(n+="Z"),n}(t,e),getMultipolyline:(t,e)=>function(t,e){let n,r,s,o;for(n="",s=0;s{n.t+=n.period,(n.t>n.duration||n.stop===n.start)&&(n.t=n.duration),n.a=n.easing(n.t,n.start,n.stop-n.start,n.duration);const e=s.transformAttrToObj(t.getAttribute("transform"));e.rotate.a=n.a,t.setAttributeNS(null,"transform",s.transformAttrToStr(e)),n.t===n.duration&&clearInterval(o)},n.period)}(t,e)},scaleRun(t,e){!function(t,e){const n={x:0,y:0,t:0,x0:r.isObject(e.start)&&r.isNumber(e.start.x)?e.start.x:null,y0:r.isObject(e.start)&&r.isNumber(e.start.y)?e.start.y:null,x1:r.isObject(e.stop)&&r.isNumber(e.stop.x)?e.stop.x:1,y1:r.isObject(e.stop)&&r.isNumber(e.stop.y)?e.stop.y:1,period:r.isNumber(e.frequency)?1e3/e.frequency:10,easing:r.isFunction(e.easing)?e.easing:r.elinear,duration:r.isNumber(e.duration)?e.duration:2e3},o=s.transformAttrToObj(t.getAttribute("transform"));(r.isNull(n.x0)||r.isNull(n.y0))&&(n.x0=r.isObject(o.scale)&&r.isNumber(o.scale.x)?o.scale.x:0,n.y0=r.isObject(o.scale)&&r.isNumber(o.scale.y)?o.scale.y:0);const i=setInterval(()=>{n.t+=n.period,n.t>n.duration&&(n.t=n.duration),n.x=n.easing(n.t,n.x0,n.x1-n.x0,n.duration),n.y=n.easing(n.t,n.y0,n.y1-n.y0,n.duration);const e=s.transformAttrToObj(t.getAttribute("transform"));e.scale.x=n.x,e.scale.y=n.y,t.setAttributeNS(null,"transform",s.transformAttrToStr(e)),n.t===n.duration&&clearInterval(i)},n.period)}(t,e)},translateRun(t,e){!function(t,e){const n={x:0,y:0,t:0,length:null,arc:null,period:r.isNumber(e.frequency)?1e3/e.frequency:10,easing:r.isFunction(e.easing)?e.easing:r.elinear,duration:r.isNumber(e.duration)?e.duration:2e3};let o,i;if(e.start&&r.isNumber(e.start.x)&&r.isNumber(e.start.y))o=e.start.x,i=e.start.y;else{const e=s.transformAttrToObj(t.getAttribute("transform"));o=r.isObject(e.translate)&&r.isNumber(e.translate.x)?e.translate.x:0,i=r.isObject(e.translate)&&r.isNumber(e.translate.y)?e.translate.x:0}n.length=Math.sqrt(Math.pow(e.stop.x-o,2)+Math.pow(e.stop.y-i,2)),n.arc=Math.atan((e.stop.y-i)/(e.stop.x-o)),e.stop.x-o<0&&(n.arc+=-Math.PI),0===n.length&&(n.arc=0);const a=setInterval(()=>{n.t+=n.period,n.t>n.duration&&(n.t=n.duration),n.x=n.easing(n.t,0,n.length,n.duration)*Math.cos(n.arc)+o,n.y=n.easing(n.t,0,n.length,n.duration)*Math.sin(n.arc)+i;const e=s.transformAttrToObj(t.getAttribute("transform"));e.translate.x=n.x,e.translate.y=n.y,t.setAttributeNS(null,"transform",s.transformAttrToStr(e)),n.t===n.duration&&clearInterval(a)},n.period)}(t,e)},textRun(t,e){!function(t,e){const n={period:r.isNumber(e.frequency)?1e3/e.frequency:10,easing:r.isFunction(e.easing)?e.easing:r.elinear,value:0,start:r.isNumber(e.start)?e.start:0,stop:r.isNumber(e.stop)?e.stop:0,t:0,duration:r.isNumber(e.duration)?e.duration:2e3},s=setInterval(()=>{n.t+=n.period,(n.t>n.duration||n.stop===n.start)&&(n.t=n.duration),n.value=n.easing(n.t,n.start,n.stop-n.start,n.duration),0===n.duration&&(n.value=n.start),t.textContent=n.value.toFixed(0),n.t===n.duration&&clearInterval(s)},n.period)}(t,e)}};e.exports=o},{"../lib/_":9,"./staticmethods":4}],9:["./src/lib/_",function(t,e,n){const r={extend(t,e){const n=Object.keys(e);for(let r=0;rvoid 0===t,isNull:t=>null===t,isBoolean:t=>!0===t||!1===t||"[object Boolean]"===Object.prototype.toString.call(t),isString:t=>"[object String]"===Object.prototype.toString.call(t),isNumber:t=>"[object Number]"===Object.prototype.toString.call(t),isObject(t){const e=typeof t;return("function"===e||"object"===e)&&!!t},isLiteralObject:t=>"[object Object]"===Object.prototype.toString.call(t),isFunction:t=>"[object Function]"===Object.prototype.toString.call(t),isArray:t=>"[object Array]"===Object.prototype.toString.call(t),elinear:(t,e,n,r)=>n*t/r+e};e.exports=r},{}]},{},[1])(1)}); \ No newline at end of file diff --git a/examples/count.html b/examples/count.html deleted file mode 100644 index 3060b4c..0000000 --- a/examples/count.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - Count - - - - - - - -
- - diff --git a/examples/rotate.html b/examples/rotate.html deleted file mode 100644 index b698528..0000000 --- a/examples/rotate.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Rotate - - - - - - - -
- - diff --git a/examples/scale.html b/examples/scale.html deleted file mode 100644 index cdbdb08..0000000 --- a/examples/scale.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Scale - - - - - - - -
- - diff --git a/examples/translate.html b/examples/translate.html deleted file mode 100644 index 17329f7..0000000 --- a/examples/translate.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - Translate - - - - - - - -
- - diff --git a/gulpfile.js b/gulpfile.js index ecebda6..034f0d8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,14 +1,13 @@ -// ESLint declarations: /* eslint one-var: 0, semi-style: 0 */ -'use strict'; - // -- Node modules const { watch, series } = require('gulp') + , connect = require('gulp-connect') + , open = require('open') ; // -- Local constants -const filesToWatch = ['src/**/*.js', 'src/_header', 'src/_footer'] +const filesToWatch = ['src/**/*.js'] ; // -- Local variables @@ -24,9 +23,35 @@ function fwatch() { watch(filesToWatch, series(build)); } +// -- Gulp connect for dev +function devserver(done) { + connect.server({ + host: '0.0.0.0', // (allows remote access) + root: './', + port: 8888, + livereload: true, + }); + open('http://localhost:8888/'); + done(); +} + +// -- Gulp connect for prod +function appserver(done) { + connect.server({ + host: '0.0.0.0', // (allows remote access) + root: './_dist', + port: 8889, + livereload: true, + }); + open('http://localhost:8889/'); + done(); +} + // Gulp Public Tasks: exports.watch = fwatch; exports.build = build; +exports.rundev = devserver; exports.makedist = makedist; +exports.runapp = appserver; exports.default = series(build, makedist); diff --git a/index.js b/index.js index 0b233c2..4019838 100644 --- a/index.js +++ b/index.js @@ -1,3 +1 @@ -'use strict'; - module.exports = require('./lib/svg'); diff --git a/lib/svg-noparent.js b/lib/svg-noparent.js deleted file mode 100644 index 50b0a46..0000000 --- a/lib/svg-noparent.js +++ /dev/null @@ -1,2358 +0,0 @@ -// Based on ES6.lib template v0.0.3 -// ESLint declarations -/* global define */ -/* eslint strict: ["error", "function"] */ -(function(root, factory) { - 'use strict'; - - /* istanbul ignore next */ - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([''], factory); - } else if (typeof exports === 'object') { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(root); - // This is a hack to attach the lib to the browser root when this lib is - // included inside another lib and the whole is browserifyied: - /* eslint-disable-next-line no-param-reassign */ - if (root.SVG === null) root.SVG = factory(root); - } else { - // Browser globals. - /* eslint-disable-next-line no-param-reassign */ - root.SVG = factory(root); - } -}({{lib:parent}}, (root) => { - 'use strict'; - - // This is the list of the constants that are defined at the global level of - // this module and are accessible to all. So, they are considered as reserved - // words for this library. - // const SV - /* eslint-disable one-var, semi-style */ - const SVG_NS = 'http://www.w3.org/2000/svg' - , XLINK_NS = 'http://www.w3.org/1999/xlink' - ; - - let SVG - , _ - ; - /* eslint-enable one-var, semi-style */ - - /* *************************************************************************** - * - * Tree is an internal object that links all the internal modules. - * - * tree.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * - * @namespace SVG - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* - */ - - const SV = { - Dollar: { - Public: {}, - }, - SVG: { - Public: {}, - }, - Anim: { - Public: {}, - }, - Methods: { - Static: { - Public: {}, - }, - Attr: { - Public: {}, - }, - Text: { - Public: {}, - }, - }, - }; - /* - */ - - - /* *************************************************************************** - * - * Defines the SVG object. - * - * svg.js is built upon the Prototypal Instantiation pattern. It - * returns an object by calling its constructor. It doesn't use the new - * keyword. - * - * Private Functions: - * . none, - * - * - * Constructor: - * . SVG creates the SVG object, - * - * - * Private Static Methods: - * . _setTestMode returns the internal objects for testing purpose, - * - * - * Public Static Methods: - * . noConflict returns a reference to this SVG object, - * . transformAttrToObj converts a SVG transform attributes string to an object, - * . transformAttrToStr converts a SVG transform attributes object to a string, - * . getArc returns an arc path, - * . getLine draws polygonal lines, - * . getMultipolyline returns polyline paths, - * - * - * Public Methods: - * . none yet, - * - * - * - * @namespace SVG - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - - - // -- Local modules - const $ = SV.Dollar.Public - , S = SV.SVG.Public - , SM = SV.Methods.Static.Public - ; - - - // -- Local constants - // Saves the previous value of the library variable, so that it can be - // restored later on, if noConflict is used. - const previousSVG = root.SVG; - - - // -- Local variables - let methods; - - - // -- Public - - /** - * Creates the SVG object. - * - * @constructor (arg1) - * @public - * @param {String} the selector id or class, - * @returns {Object} returns the SVG object, - * @since 0.0.0 - */ - SVG = function(selector) { - const obj = Object.create(_.extend(methods, $)); - const { id, _root } = S.create(selector); - obj.id = id; - obj._root = _root; - obj._SVG = SVG; - return obj; - }; - - - // -- Private & Public Static Methods -------------------------------------- - - - /** - * Returns the internal objects for testing purpose. - * - * @method () - * @private - * @param {} -, - * @returns {Object} returns TV tree, - * @since 0.0.0 - */ - SVG._setTestMode = function() { - return SV; - }; - - /** - * Returns a reference to this SVG object. - * - * Nota: - * Running SVG in noConflic mode, returns the SVG variable to its - * previous owner. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns the SVG object, - * @since 0.0.0 - */ - SVG.noConflict = function() { - /* eslint-disable-next-line no-param-reassign */ - root.SVG = previousSVG; - return this; - }; - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - SVG.transformAttrToObj = function(transform) { - return SM.transformAttrToObj(transform); - }; - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - SVG.transformAttrToStr = function(tr) { - return SM.transformAttrToStr(tr); - }; - - /** - * Returns an arc path. - * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getArc = function(startAngle, stopAngle, outerRadius, innerRadius) { - return SM.getArc(startAngle, stopAngle, outerRadius, innerRadius); - }; - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getLine = function(shape, closed) { - return SM.getLine(shape, closed); - }; - - /** - * Returns polyline paths. - * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getMultipolyline = function(shape, closed) { - return SM.getMultipolyline(shape, closed); - }; - - - // -- Public Methods ------------------------------------------------------- - - methods = { - // none yet! - }; - - - // Attaches a constant to View that provides the version of the lib. - SVG.VERSION = '{{lib:version}}'; - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Provides a subset of the overslash library. - * - * _.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . none, - * - * - * Public Static Methods: - * . extend extends the passed-in object with new methods, - * - * . isUndefined is a given variable undefined? - * . isNull is a given value null? - * . isBoolean is a given value a boolean? - * . isString is a given value a string? - * . isNumber is a given value a number? - * . isObject is a given variable an object? - * . isLiteralObject is a given variable a literal object? - * . isFunction is a given variable a function? - * . isArray is a given value an array? - * - * . linear linear easing method, - * - * - * - * @namespace - - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* - */ - - (function() { - // IIFE - - // -- Module path - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Public Methods ------------------------------------------------------- - - _ = { - - /** - * Extends the passed-in object with new methods. - * - * Nota: this function mutates object. - * - * @function (arg1, arg2) - * @private - * @param {Object} the object to extend, - * @param {Object} an object containing a set of methods, - * @returns {} -, - * @since 0.0.0 - */ - extend(object, methods) { - const keys = Object.keys(methods); - for (let i = 0; i < keys.length; i++) { - /* eslint-disable-next-line no-param-reassign */ - object[keys[i]] = methods[keys[i]]; - } - return object; - }, - - /** - * Is a given variable undefined? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isUndefined(obj) { - return obj === undefined; - }, - - /** - * Is a given value null? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isNull(obj) { - return obj === null; - }, - - /** - * Is a given value a boolean? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isBoolean(obj) { - return obj === true || obj === false || Object.prototype.toString.call(obj) === '[object Boolean]'; - }, - - /** - * Is a given value a string? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isString(obj) { - return Object.prototype.toString.call(obj) === '[object String]'; - }, - - /** - * Is a given value a number? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isNumber(obj) { - return Object.prototype.toString.call(obj) === '[object Number]'; - }, - - /** - * Is a given variable an object? - * (copied from: http://underscorejs.org) - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isObject(obj) { - const type = typeof obj; - return (type === 'function' || type === 'object') && !!obj; - }, - - /** - * Is a given variable a literal object? - * - * @method (arg1) - * @private - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.3 - */ - isLiteralObject(obj) { - return Object.prototype.toString.call(obj) === '[object Object]'; - }, - - /** - * Is a given variable a function? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isFunction(obj) { - return Object.prototype.toString.call(obj) === '[object Function]'; - }, - - /** - * Is a given value an array? - * (Delegates to ECMA5's native Array.isArray.) - * (copied from: http://underscorejs.org) - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isArray(obj) { - return Object.prototype.toString.call(obj) === '[object Array]'; - }, - - /** - * Computes the intermediate values according to a linear progression. - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} the current time, - * @param {Number} the beginning value, - * @param {Number} the change in value, - * @param {Number} the duration, - * @returns {Number} returns the computed value, - */ - elinear(t, b, c, d) { - return (c * t) / d + b; - }, - }; - }()); - /* - */ - - - /* *************************************************************************** - * - * Implements the methods to manipulate the DOM. - * - * $.js is just an object that contains a set of methods. It implements the - * pattern factory. Thus, $(sel) returns the selected node and the methods - * listed below. - * - * Private Functions: - * . none, - * - * - * Private Variables: - * . id the id of the svg node, - * . [0] the selected svg children, - * . _root the svg node, - * - * - * Constructor: - * . $ creates the component, - * - * - * Public Chaining Methods: - * . firstParent moves to the svg node, - * . parent moves to the parent, - * . previous selects the previous sibbling element, - * . next selects the next sibbling element, - * . select selects an SVG element, - * . append appends an SVG element and selects it, - * . appendBefore appends a new SVG el. before the reference SVG el., - * . appendAfter appends a new SVG el. after the reference SVG el., - * . appendHTML appends a foreignObject to svg and selects it, - * . replace replaces the current SVG element, - * . remove removes the given SVG element, - * . removeChild removes the passed-in child element, - * . replaceChild replaces a child by another, - * . removeAllChilds removes all the childs from the selected element, - * . empty removes all the childs from the selected element - * . listen attaches an event listener to the SVG element, - * . listenOnce attaches a fired once event listener to the SVG element, - * . unlisten removes an event listener to the SVG element, - * . alink adds a link attribute to the SVG selected element, - * . attr adds attributes to the selected SVG element, - * . rmattr removes the given attribute from the selected SVG element, - * . text adds text to the selected SVG element, - * . addClass adds a class value to the selected SVG element, - * . removeClass removes a class value to the selected SVG element, - * . toggleClass toggles a class value to the selected SVG element, - * - * - * Public Non Chaining Methods: - * . query returns the first matching element or null, - * . getElement returns the selected SVG element, - * . children returns the children HTMLCollection, - * . getAttribute returns the attribute value, - * . getComputedStyle returns the style applied to this element, - * . getPropertyValue returns the value of the specified property, - * . getSize returns the width and height of this element, - * . getBbox returns the bounding boxes, - * - * - * - * @namespace SV.Dollar.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Dollar.Public; - - - // -- Local modules - const Attr = SV.Methods.Attr.Public - , Text = SV.Methods.Text.Public - ; - - - // -- Local constants - - - // -- Local variables - - - // -- Public --------------------------------------------------------------- - - /** - * Select a child element. - * - * @constructor (arg1) - * @public - * @param {String} the selector, - * @returns {Object} returns the $() object, - * @since 0.0.0 - */ - function $(selector) { - const { id } = this - , { _root } = this - ; // unique id! - - - // -- Public Chaining Methods -------------------------------------------- - - /** - * Returns to the root parent if defined. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const firstParent = function() { - if (this._root) { - this[0] = this._root; - } - return this; - }; - - /** - * Returns to the parent element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const parent = function() { - if (this.root) { - // As a root parent is defined, we stop at it. - if (this[0] !== this.root) { - this[0] = this[0].parentNode; - } - } else { - this[0] = this[0].parentNode; - } - return this; - }; - - /** - * Selects the previous element sibbling. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const previous = function() { - this[0] = this[0].previousElementSibling; - return this; - }; - - /** - * Selects the next element sibbling. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const next = function() { - this[0] = this[0].nextElementSibling; - return this; - }; - - /** - * Selects the given SVG Element, - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to select, - * @param {Boolean} 'true' if selected element should become the 'root', - * @returns {Object} returns this, - * @since 0.0.0 - */ - const select = function(element) { - this[0] = this[0].querySelector(element); - return this; - }; - - /** - * Appends a new SVG element and selects it. - * - * @method (arg1) - * @public - * @param {Object} the SVG element to add, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const append = function(svgElement) { - const el = document.createElementNS(SVG_NS, svgElement); - this[0] = this[0].appendChild(el); - return this; - }; - - /** - * Appends a new SVG element before the passed-in SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to add, - * @param {Object} the reference SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendBefore = function(newSvgElement, svgElement) { - const newChild = document.createElementNS(SVG_NS, newSvgElement) - , child = this[0].querySelector(svgElement) - ; - - this[0].insertBefore(newChild, child); - this[0] = newChild; - return this; - }; - - /** - * Appends a new SVG element after the passed-in SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to add, - * @param {Object} the reference SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendAfter = function(newSvgElement, svgElement) { - const newChild = document.createElementNS(SVG_NS, newSvgElement) - , child = this[0].querySelector(svgElement).nextElementSibling - ; - - this[0].insertBefore(newChild, child); - this[0] = newChild; - return this; - }; - - /** - * Appends a foreignObject to svg and selects it. - * - * @method (arg1) - * @public - * @param {String} the serialized html block, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendHTML = function(xmlString) { - if (typeof xmlString !== 'string') return this; - - const body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body'); - body.innerHTML = xmlString; - this[0] = this[0].appendChild(body); - return this; - }; - - /** - * Replaces the selected SVG element. - * - * @method (arg1) - * @public - * @param {Object} the new SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const replace = function(svgElement) { - const el = document.createElementNS(SVG_NS, svgElement); - this[0].parentNode.replaceChild(el, this[0]); - this[0] = el; - return this; - }; - - /** - * Removes the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const remove = function() { - let parento; - if (this[0]) { - parento = this[0].parentNode; - parento.removeChild(this[0]); - this[0] = parento; - } - return this; - }; - - /** - * Removes the passed-in child element. - * - * @method (arg1) - * @public - * @param {Object} the child element to remove, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeChild = function(child) { - if (child) { - this[0].removeChild(child); - } - return this; - }; - - /** - * Replaces a child by another. - * - * @method (arg1, arg2) - * @public - * @param {Object} the new node element, - * @param {Object} the node element to replace, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const replaceChild = function(newChild, child) { - if (newChild) { - this[0].replaceChild(newChild, child); - } - return this; - }; - - /** - * Removes all the childs from the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeAllChilds = function() { - while (this[0].firstChild) { - this[0].removeChild(this[0].firstChild); - } - return this; - }; - - /** - * Removes all the childs from the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const empty = function() { - while (this[0].firstChild) { - this[0].removeChild(this[0].firstChild); - } - return this; - }; - - /** - * Attachs a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const listen = function(event, handler) { - if (typeof event === 'string' && typeof handler === 'function') { - this[0].addEventListener(event, handler); - } - return this; - }; - - /** - * Attachs a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const listenOnce = function(event, handler) { - const el = this[0]; - function localHandler(e) { - el.removeEventListener(event, localHandler); - handler(e); - } - if (typeof event === 'string' && typeof handler === 'function') { - el.addEventListener(event, localHandler); - } - return this; - }; - - /** - * Remove a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const unlisten = function(event, handler) { - if (typeof event === 'string' && typeof handler === 'function') { - this[0].removeEventListener(event, handler); - } - return this; - }; - - /** - * Adds a link attribute to the selected element, - * - * @method (arg1, arg2) - * @public - * @param {String} the type of link attribute, - * @param {String} the url, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const alink = function(attr, url) { - // this[0].setAttributeNS(XLINK_NS, 'xlink:' + attr, url); - this[0].setAttributeNS(XLINK_NS, `xlink:${attr}`, url); - return this; - }; - - /** - * Adds an attribute to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const attr = function(attribute, value) { - if (!this[0]) { - /* eslint-disable-next-line no-console */ - console.log('warning: this.svgElement is null!'); - return this; - } - Attr.attr(this[0], attribute, value); - return this; - }; - - /** - * Removes the given attribute to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the attribute to remove, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const rmattr = function(attribute) { - this[0].removeAttributeNS(null, attribute); - return this; - }; - - /** - * Adds a text to the selected SVG element. - * - * @method (arg1) - * @public - * @param {Object} the text or the the params for the animation, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const text = function(value) { - Text.text(this[0], value); - return this; - }; - - /** - * Adds a class value to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const addClass = function(className) { - let list = this[0].getAttributeNS(null, 'class'); - // list = list ? list + ' ' + className : className; - list = list ? `${list} ${className}` : className; - this[0].setAttributeNS(null, 'class', list); - return this; - }; - - /** - * Removes a class value from the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeClass = function(className) { - let list = this[0].getAttributeNS(null, 'class'); - - if (list) { - // Remove the class and the extra leading and - // trailing white spaces if any: - list = list.replace(className, '').replace(/(^\s+|\s+$)/g, ''); - this[0].setAttributeNS(null, 'class', list); - } - return this; - }; - - /** - * Adds/Removes a class name to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const toggleClass = function(className) { - const list = this[0].getAttributeNS(null, 'class'); - - if (list && list.match(className)) { - this.removeClass(className); - return this; - } - this.addClass(className); - return this; - }; - - - // -- Public Non Chaining Methods ---------------------------------------- - - /** - * Returns the first element that matches or null. - * - * @method (arg1) - * @public - * @param {String} the css selector, - * @returns {Object} the selected SVG element or null, - * @since 0.0.0 - */ - const query = function(css) { - return this[0].querySelector(css); - }; - - /** - * Returns the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} the selected SVG element, - * @since 0.0.0 - */ - const getElement = function() { - return this[0]; - }; - - /** - * Returns the children HTMLCollection. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns the children HTMLCollection, - * @since 0.0.0 - */ - const children = function() { - return this[0].children; - }; - - /** - * Returns the attribute of the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the name of the attribute, - * @returns {Object} returns the attribute value or null, - * @since 0.0.0 - */ - const getAttribute = function(attribute) { - return this[0] ? this[0].getAttribute(attribute) : null; - }; - - /** - * Returns the computed style of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the object computed style, - * @since 0.0.0 - */ - const getComputedStyle = function() { - return window.getComputedStyle(this[0]); - }; - - /** - * Returns the property value of the style object. - * - * @method (arg1) - * @public - * @param {Object} the style property, - * @returns {String} returns the style value, - * @since 0.0.0 - */ - const getPropertyValue = function(css) { - return this.getPropertyValue(css); - }; - - /** - * Returns the size (bounding boxes) of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the width and height of the SVG element, - * @since 0.0.0 - */ - const getSize = function() { - return { - width: this[0].getBoundingClientRect().width, - height: this[0].getBoundingClientRect().height, - }; - }; - - /** - * Returns the size (bounding boxes) of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the width and height of the SVG element, - * @since 0.0.0 - */ - const getBbox = function() { - return { - top: this[0].getBoundingClientRect().top, - left: this[0].getBoundingClientRect().left, - width: this[0].getBoundingClientRect().width, - height: this[0].getBoundingClientRect().height, - }; - }; - - - // -- Main - return { - id, - 0: selector ? _root.querySelector(selector) : _root, - _root, - - firstParent, - parent, - previous, - next, - select, - append, - appendBefore, - appendAfter, - appendHTML, - replace, - remove, - removeChild, - replaceChild, - removeAllChilds, - empty, - listen, - listenOnce, - unlisten, - alink, - attr, - rmattr, - text, - addClass, - removeClass, - toggleClass, - query, - getElement, - children, - getAttribute, - getComputedStyle, - getPropertyValue, - getSize, - getBbox, - }; - } - - - // Exports $. - _.extend(Root, { $ }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Performs the animations. - * - * animation.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _rotateRun rotates the SVG element, - * . _scaleRun scales the SVG element, - * . _translateRun translates the SVG element, - * . _textRun updates the text value from initial to final value, - * - * - * Public Static Methods: - * . rotateRun rotates the SVG element, - * . scaleRun scales the SVG element, - * . translateRun translates the SVG element, - * . textRun updates the text value from initial to final value, - * - * - * - * @namespace SV.Anim.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Anim.Public; - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Rotates the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the value (if omitted, start from current position), - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the rotation to perform, - * @returns {} -, - * @since 0.0.0 - */ - function _rotateRun(el, anim) { - const r = { - a: 0, - t: 0, - start: _.isNumber(anim.start) ? anim.start : null, - stop: _.isNumber(anim.stop) ? anim.stop : 180, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // If anim.start is undefined, we start from the current value: - if (_.isNull(r.start)) { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - r.start = _.isObject(transform.scale) && _.isNumber(transform.scale.a) - ? transform.scale.a - : 180; - } - - const timer = setInterval(() => { - // Compute the next step: - r.t += r.period; - // Abort if overflow or if no change in the position. - if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } - r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); - - // Retrieve transform attributes, set new rotation value and update. - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - transform.rotate.a = r.a; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); - - if (r.t === r.duration) { - clearInterval(timer); - } - }, r.period); - } - - /** - * Scales the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG object, - * @param {Object} the scaling to perform, - * @returns {} -, - * @since 0.0.0 - */ - function _scaleRun(el, anim) { - const s = { - x: 0, - y: 0, - t: 0, - x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, - y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, - x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, - y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // if anim.start.x or anim.start.y is undefined, the scaling operation - // starts from the current value: - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - if (_.isNull(s.x0) || _.isNull(s.y0)) { - s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) - ? transform.scale.x - : 0; - s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) - ? transform.scale.y - : 0; - } - - // Run: - const timer = setInterval(() => { - // Compute the next step: - s.t += s.period; - if (s.t > s.duration) { s.t = s.duration; } - s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); - s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); - - // Retrieve transform attributes, set new scale value and update. - const tr = SVG.transformAttrToObj(el.getAttribute('transform')); - tr.scale.x = s.x; - tr.scale.y = s.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); - - if (s.t === s.duration) { - clearInterval(timer); - } - }, s.period); - } - - /** - * Translates the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, - * @since 0.0.0 - */ - function _translateRun(el, anim) { - const v = { - x: 0, - y: 0, - t: 0, - length: null, - arc: null, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - let x0 - , y0 - ; - - // Translate starts from the passed-in value or the current position: - if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { - x0 = anim.start.x; - y0 = anim.start.y; - } else { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) - ? transform.translate.x - : 0; - y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) - ? transform.translate.x - : 0; - } - - /* eslint-disable-next-line no-restricted-properties */ - v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); - v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); - if (anim.stop.x - x0 < 0) v.arc += -Math.PI; - if (v.length === 0) v.arc = 0; - - const timer = setInterval(() => { - // Compute the next step: - v.t += v.period; - if (v.t > v.duration) v.t = v.duration; - v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; - v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; - - // Retrieve the transform attributes, set the new position value and update: - const trform = SVG.transformAttrToObj(el.getAttribute('transform')); - trform.translate.x = v.x; - trform.translate.y = v.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); - - // Stop the timer if destination point reached. - if (v.t === v.duration) { - clearInterval(timer); - } - }, v.period); - } - - /** - * Updates dynamically the text value from the initial to the final value. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial value, - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG object, - * @param {Object} the animation parameters, - * @returns {} -, - * @since 0.0.0 - */ - function _textRun(el, anim) { - const d = { - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - value: 0, - start: _.isNumber(anim.start) ? anim.start : 0, - stop: _.isNumber(anim.stop) ? anim.stop : 0, - t: 0, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // Run: - const timer = setInterval(() => { - // Compute the next step: - d.t += d.period; - // Abort if overflow or if no change in the position. - if (d.t > d.duration || d.stop === d.start) { - d.t = d.duration; - } - d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); - if (d.duration === 0) { - d.value = d.start; - } - - // Display the new digit value: - /* eslint-disable-next-line no-param-reassign */ - el.textContent = d.value.toFixed(0); - - // is animation over? - if (d.t === d.duration) { - clearInterval(timer); - } - }, d.period); - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Rotates the SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the rotation to perform, - * @returns {} -, - * @since 0.0.0 - */ - rotateRun(el, anim) { - _rotateRun(el, anim); - }, - - /** - * Scales the SVG element; - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the scaling to perform, - * @returns {} -, - * @since 0.0.0 - */ - scaleRun(el, anim) { - _scaleRun(el, anim); - }, - - /** - * Translates the SVG Element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, - * @since 0.0.0 - */ - translateRun(el, anim) { - _translateRun(el, anim); - }, - - /** - * Updates dynamically the text value from the initial to the final value. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the animation parameters, - * @returns {} -, - * @since 0.0.0 - */ - textRun(el, anim) { - _textRun(el, anim); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Adds or Updates the SVG node attributes. - * - * attributes.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _attr adds an attribute to the selected SVG element, - * - * - * Public Static Methods: - * . attr adds an attribute to the selected SVG element, - * - * - * - * @namespace SV.Methods.Attr.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Attr.Public; - - - // -- Local modules - const Anim = SV.Anim.Public; - - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Adds an attribute to the selected SVG element. - * - * @function (arg1, arg2, arg3) - * @private - * @param {Object} the SVG element, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - function _attr(el, attr, value) { - switch (typeof value) { - // Add the requested attribute to this element: - case 'string': - case 'number': - el.setAttributeNS(null, attr, value); - break; - - case 'object': - // Proceed with an animation: - switch (attr) { - // ... - // case 'd': - // Anim.dAnimationRun(el, value); - // break; - - // Transform animations: - case 'transform': - switch (value.type) { - // Rotate animation: - case 'rotate': - Anim.rotateRun(el, value); - break; - - // Scale animation: - case 'scale': - Anim.scaleRun(el, value); - break; - - // Smooth linear animation: - case 'translate': - Anim.translateRun(el, value); - break; - - default: - throw new Error(`The animation is not supported for the transform ${value.type}!`); - } - break; - - default: - throw new Error(`The animation is not supported for the attribute ${attr}!`); - } - break; - - default: - // Ignore! - } - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Adds an attribute to the selected SVG element. - * - * @method (arg1, arg2, arg3) - * @public - * @param {Object} the SVG object, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - attr(el, attr, value) { - _attr(el, attr, value); - }, - }); - }()); - /* eslint-enable no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the SVG static methods. - * - * staticmethods.js is just a literal object that contains a set of functions. - * it can't be intantiated. - * - * Private Functions: - * . _transformAttrToObj converts a SVG transform from string to object, - * . _transformAttrToStr converts a SVG transform from object to string, - * . _getArc returns an arc path, - * . _getLine returns a polyline path, - * . _getMultipolyline returns a set of polyline paths, - * - * - * Public Static Methods: - * . transformAttrToObj converts a SVG transform from string to object, - * . transformAttrToStr converts a SVG transform from object to string, - * . getArc returns an arc path, - * . getLine draws polygonal lines, - * . getMultipolyline returns polyline paths, - * - * - * - * @namespace SV.Methods.Static.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Static.Public; - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Converts a SVG transform attributes string to an object. - * - * @function (arg1) - * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - /* eslint-disable one-var-declaration-per-line */ - function _transformAttrToObj(transform) { - const tr = typeof transform === 'string' ? transform : '' - ; - - const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; - const regexTr = /translate(.*?)\)/; - const regexSc = /scale(.*?)\)/; - const regexRo = /rotate(.*?)\)/; - const regexSkX = /skewX(.*?)\)/; - const regexSkY = /skewY(.*?)\)/; - const regexMtx = /matrix(.*?)\)/; - - const translate = tr.match(regexTr) === null - ? null - : (function() { - let x, y; - const t = tr.match(regexTr)[0].match(regexN); - if (!t) { - x = null; - y = null; - } else if (t.length === 1) { - x = parseFloat(t[0], 10); - y = x; - } else { - x = parseFloat(t[0], 10); - y = parseFloat(t[1], 10); - } - return { - x, - y, - }; - }()); - - const scale = tr.match(regexSc) === null - ? null - : (function() { - let x, y; - const s = tr.match(regexSc)[0].match(regexN); - if (!s) { - x = null; - y = null; - } else if (s.length === 1) { - x = parseFloat(s[0], 10); - y = x; - } else { - x = parseFloat(s[0], 10); - y = parseFloat(s[1], 10); - } - return { - x, - y, - }; - }()); - - const rotate = tr.match(regexRo) === null - ? null - : (function() { - let a, cx, cy; - const r = tr.match(regexRo)[0].match(regexN); - if (!r) { - a = null; - cx = null; - cy = null; - } else if (r.length === 1) { - a = parseFloat(r[0], 10); - cx = null; - cy = null; - } else if (r.length === 2) { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = cx; - } else { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = parseFloat(r[2], 10); - } - return { - a, - cx, - cy, - }; - }()); - - const skewX = tr.match(regexSkX) === null - ? null - : (function() { - const sk = tr.match(regexSkX)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); - } - return null; - }()); - - const skewY = tr.match(regexSkY) === null - ? null - : (function() { - const sk = tr.match(regexSkY)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); - } - return null; - }()); - - // Not implemented. - const matrix = tr.match(regexMtx) === null - ? null - : null; - - return { - translate, - scale, - rotate, - matrix, - skewX, - skewY, - }; - } - /* eslint-enable one-var-declaration-per-line */ - - /** - * Converts a SVG transform attributes string to an object. - * - * @function (arg1) - * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - /* eslint-disable prefer-template */ - function _transformAttrToStr(tr) { - let s = '' - ; - - // Translate: - if (tr.translate && typeof tr.translate.x === 'number') { - if (typeof tr.translate.y === 'number') { - s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; - } else { - // if y isn't provided, it is assumed to 0: - s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; - } - } - - // Scale: - if (tr.scale && typeof tr.scale.x === 'number') { - if (typeof tr.scale.y === 'number') { - s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; - } else { - // if y isn't provided, it is assumed to be equal to x: - s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; - } - } - - // Rotate: - if (tr.rotate && typeof tr.rotate.a === 'number') { - if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; - } else if (typeof tr.rotate.cx === 'number') { - // if y isn't provided, it is assumed to be equal to x: - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; - } else { - s += 'rotate(' + tr.rotate.a + ') '; - } - } - - // SkewX: - if (typeof tr.skewX === 'number') { - s += 'skewX(' + tr.skewX + ') '; - } - - // SkewY: - if (typeof tr.skewY === 'number') { - s += 'skewY(' + tr.skewY + ') '; - } - - // matrix not implemented! - // - - - // Return a clean string (no leading/trailing blanck spaces): - return s.replace(/(^\s+|\s+$)/g, ''); - } - /* eslint-enable prefer-template */ - - /** - * Returns an arc path. - * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' - * - * @function (arg1, arg2, arg3, arg4) - * @private - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - /* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ - function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { - startAngle = startAngle !== undefined ? startAngle : 0; - stopAngle = stopAngle !== undefined ? stopAngle : 0; - outerRadius = outerRadius !== undefined ? outerRadius : 0; - startAngle = startAngle % (2 * Math.PI); - if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } - if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } - - let sweepflag = 0; - if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } - const x0 = Math.cos(startAngle); - const y0 = Math.sin(startAngle); - const x1 = Math.cos(stopAngle); - const y1 = Math.sin(stopAngle); - - /* eslint-disable-next-line prefer-template */ - const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); - let innerArc = ''; - if (innerRadius !== undefined) { - /* eslint-disable-next-line prefer-template */ - innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; - } - return outerArc + innerArc; - } - /* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' - * - * @function (arg1, arg2) - * @private - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - function _getLine(shape, closed) { - let path = ''; - shape.forEach((obj) => { - if (obj.x !== null && obj.y !== null) { - if (path === '') { - // path = 'M' + obj.x + ',' + obj.y; - path = `M${obj.x}, ${obj.y}`; - } else { - // path += 'L' + obj.x + ',' + obj.y; - path += `L${obj.x},${obj.y}`; - } - } - }); - if (closed === true) { path += 'Z'; } - return path; - } - - /** - * Returns polyline paths. - * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' - * - * @function (arg1, arg2) - * @private - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - function _getMultipolyline(shape, closed) { - let path - , subpath - , i - , j - ; - - path = ''; - for (i = 0; i < shape.length; i++) { - subpath = ''; - for (j = 0; j < shape[i].length; j++) { - if (shape[i][j].x !== null && shape[i][j].y !== null) { - if (subpath === '') { - // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; - subpath = `M${shape[i][j].x},${shape[i][j].y}`; - } else { - // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; - subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; - } - } - } - if (closed === true) { subpath += 'z'; } - path += subpath; - } - return path; - } - - - // -- Public Methods ------------------------------------------------------- - - _.extend(Root, { - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToObj(transform) { - return _transformAttrToObj(transform); - }, - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToStr(tr) { - return _transformAttrToStr(tr); - }, - - /** - * Returns an arc path. - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getArc(startAngle, stopAngle, outerRadius, innerRadius) { - return _getArc(startAngle, stopAngle, outerRadius, innerRadius); - }, - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getLine(shape, closed) { - return _getLine(shape, closed); - }, - - /** - * Returns polyline paths. - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getMultipolyline(shape, closed) { - return _getMultipolyline(shape, closed); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Creates the SVG node. - * - * svg.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _create creates the SVG node, - * - * - * Public Static Methods: - * . create creates the SVG node, - * - * - * - * @namespace SV.SVG.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.SVG.Public; - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Private Methods ------------------------------------------------------ - - /** - * Creates the SVG node. - * - * @function (arg1) - * @private - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, - * @since 0.0.0 - */ - function _create(selector) { - const sel = typeof selector === 'string' ? selector : 'body' - , el = document.querySelector(sel) - , node = el || document.querySelector('body') - ; - - let _root; - // create a unique id: - let id = `i${Math.random().toString(36).substr(2, 7)}`; - - // Check that the svg node doesn't exist: - const isSVG = node.getElementsByTagNameNS(SVG_NS, 'svg')[0]; - if (!isSVG || isSVG.length === 0) { - // Ok, it doesn't exist, we can create it: - const svg = document.createElementNS(SVG_NS, 'svg'); - svg.setAttributeNS(null, 'id', id); - svg.setAttributeNS(null, 'version', '1.1'); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', SVG_NS); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', XLINK_NS); - node.appendChild(svg); - _root = svg; - } else { - // It already exists, do not overwrite it! - id = isSVG.getAttributeNS(null, 'id'); - _root = isSVG; - } - return { id, _root }; - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Creates the SVG node. - * - * @method (arg1) - * @public - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, - * @since 0.0.0 - */ - create(selector) { - return _create(selector); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the text methods. - * - * text.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _text adds a text to the selected SVG element, - * - * - * Public Static Methods: - * . text adds a text to the selected SVG element, - * - * - * - * @namespace SV.Methods.Text.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Text.Public; - - - // -- Local modules - const Anim = SV.Anim.Public - ; - - // -- Local constants - - - // -- Local variables - - - // -- Private Functions ---------------------------------------------------- - - /** - * Adds a text to the selected SVG element. - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - function _text(el, value) { - switch (typeof value) { - case 'number': - case 'string': - /* eslint-disable-next-line no-param-reassign */ - el.textContent = value; - break; - - case 'object': - Anim.textRun(el, value); - break; - - default: - break; - } - } - - - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Adds a text to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - text(el, value) { - _text(el, value); - }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - // Returns the library name: - return SVG; -})); diff --git a/lib/svg.js b/lib/svg.js index c44c6fd..f9f1396 100644 --- a/lib/svg.js +++ b/lib/svg.js @@ -1,5 +1,3 @@ -// Based on ES6.lib template v0.0.3 -// ESLint declarations /* global define */ /* eslint strict: ["error", "function"] */ (function(root, factory) { @@ -14,127 +12,68 @@ // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(root); - // This is a hack to attach the lib to the browser root when this lib is - // included inside another lib and the whole is browserifyied: - /* eslint-disable-next-line no-param-reassign */ - if (root.SVG === null) root.SVG = factory(root); } else { // Browser globals. /* eslint-disable-next-line no-param-reassign */ root.SVG = factory(root); } -}(this, (root) => { - 'use strict'; +/* eslint-disable-next-line */ +}(this,(root)=>{"use strict";return function(){/* istanbul ignore next */function e(t,n,o){function r(f){function i(e){const n=t[f][2][e];return r(n||e)}if(!n[f]){if(!t[f]){throw new Error(`Cannot find module "${f}"`)}n[f]={exports:{}};const r=n[f];t[f][1].call(r.exports,i,r,r.exports,e,t,n,o)}return n[f].exports}for(let e=0;e { - // Compute the next step: - r.t += r.period; - // Abort if overflow or if no change in the position. - if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } - r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); + // Check that the svg node doesn't exist: + const isSVG = node.getElementsByTagNameNS(w3c.SVG_NS, 'svg')[0]; + if (!isSVG || isSVG.length === 0) { + // Ok, it doesn't exist, we can create it: + const svg = document.createElementNS(w3c.SVG_NS, 'svg'); + svg.setAttributeNS(null, 'id', id); + svg.setAttributeNS(null, 'version', '1.1'); + svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', w3c.SVG_NS); + svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', w3c.XLINK_NS); + node.appendChild(svg); + _root = svg; + } else { + // It already exists, do not overwrite it! + id = isSVG.getAttributeNS(null, 'id'); + _root = isSVG; + } + return { id, _root }; + } - // Retrieve transform attributes, set new rotation value and update. - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - transform.rotate.a = r.a; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); - if (r.t === r.duration) { - clearInterval(timer); - } - }, r.period); - } + // -- Public Static Methods ---------------------------------------------------- - /** - * Scales the SVG element. + const SV = { + + /** + * Creates the SVG node. + * + * @method (arg1) + * @public + * @param {String} the id or class selector, + * @returns {String} returns the unique id of the svg node, + * @since 0.0.0 + */ + create(selector) { + return _create(selector); + }, + }; + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = SV; + + /* eslint-enable one-var, semi-style, no-underscore-dangle */ + + /* eslint-disable-next-line */ + }, { './w3c': 7 }], + + /* eslint-disable-next-line no-unused-vars */ + 4: ['./src/components/staticmethods', function(impoort, module, exports) { + /** **************************************************************************** * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * Implements the SVG static methods. * - * @function (arg1, arg2) + * staticmethods.js is just a literal object that contains a set of functions. + * it can't be intantiated. + * + * Private Functions: + * . _transformAttrToObj converts a SVG transform from string to object, + * . _transformAttrToStr converts a SVG transform from object to string, + * . _getArc returns an arc path, + * . _getLine returns a polyline path, + * . _getMultipolyline returns a set of polyline paths, + * + * + * Public Static Methods: + * . transformAttrToObj converts a SVG transform from string to object, + * . transformAttrToStr converts a SVG transform from object to string, + * . getArc returns an arc path, + * . getLine draws polygonal lines, + * . getMultipolyline returns polyline paths, + * + * + * + * @namespace SVG.src.components.staticmethods + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable one-var, semi-style, no-underscore-dangle */ + + + // -- Vendor modules + + + // -- Local modules + + + // -- Local constants + + + // -- Local variables + + + // -- Private Functions -------------------------------------------------------- + + /** + * Converts a SVG transform attributes string to an object. + * + * @function (arg1) * @private - * @param {Object} the SVG object, - * @param {Object} the scaling to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - function _scaleRun(el, anim) { - const s = { - x: 0, - y: 0, - t: 0, - x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, - y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, - x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, - y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; + /* eslint-disable one-var-declaration-per-line */ + function _transformAttrToObj(transform) { + const tr = typeof transform === 'string' ? transform : '' + ; - // if anim.start.x or anim.start.y is undefined, the scaling operation - // starts from the current value: - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - if (_.isNull(s.x0) || _.isNull(s.y0)) { - s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) - ? transform.scale.x - : 0; - s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) - ? transform.scale.y - : 0; - } + const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; + const regexTr = /translate(.*?)\)/; + const regexSc = /scale(.*?)\)/; + const regexRo = /rotate(.*?)\)/; + const regexSkX = /skewX(.*?)\)/; + const regexSkY = /skewY(.*?)\)/; + const regexMtx = /matrix(.*?)\)/; - // Run: - const timer = setInterval(() => { - // Compute the next step: - s.t += s.period; - if (s.t > s.duration) { s.t = s.duration; } - s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); - s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); + const translate = tr.match(regexTr) === null + ? null + : (function() { + let x, y; + const t = tr.match(regexTr)[0].match(regexN); + if (!t) { + x = null; + y = null; + } else if (t.length === 1) { + x = parseFloat(t[0], 10); + y = x; + } else { + x = parseFloat(t[0], 10); + y = parseFloat(t[1], 10); + } + return { + x, + y, + }; + }()); - // Retrieve transform attributes, set new scale value and update. - const tr = SVG.transformAttrToObj(el.getAttribute('transform')); - tr.scale.x = s.x; - tr.scale.y = s.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); + const scale = tr.match(regexSc) === null + ? null + : (function() { + let x, y; + const s = tr.match(regexSc)[0].match(regexN); + if (!s) { + x = null; + y = null; + } else if (s.length === 1) { + x = parseFloat(s[0], 10); + y = x; + } else { + x = parseFloat(s[0], 10); + y = parseFloat(s[1], 10); + } + return { + x, + y, + }; + }()); - if (s.t === s.duration) { - clearInterval(timer); - } - }, s.period); + const rotate = tr.match(regexRo) === null + ? null + : (function() { + let a, cx, cy; + const r = tr.match(regexRo)[0].match(regexN); + if (!r) { + a = null; + cx = null; + cy = null; + } else if (r.length === 1) { + a = parseFloat(r[0], 10); + cx = null; + cy = null; + } else if (r.length === 2) { + a = parseFloat(r[0], 10); + cx = parseFloat(r[1], 10); + cy = cx; + } else { + a = parseFloat(r[0], 10); + cx = parseFloat(r[1], 10); + cy = parseFloat(r[2], 10); + } + return { + a, + cx, + cy, + }; + }()); + + const skewX = tr.match(regexSkX) === null + ? null + : (function() { + const sk = tr.match(regexSkX)[0].match(regexN); + if (sk) { + return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); + } + return null; + }()); + + const skewY = tr.match(regexSkY) === null + ? null + : (function() { + const sk = tr.match(regexSkY)[0].match(regexN); + if (sk) { + return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); + } + return null; + }()); + + // Not implemented. + const matrix = tr.match(regexMtx) === null + ? null + : null; + + return { + translate, + scale, + rotate, + matrix, + skewX, + skewY, + }; } + /* eslint-enable one-var-declaration-per-line */ /** - * Translates the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * Converts a SVG transform attributes string to an object. * - * @function (arg1, arg2) + * @function (arg1) * @private - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - function _translateRun(el, anim) { - const v = { - x: 0, - y: 0, - t: 0, - length: null, - arc: null, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - let x0 - , y0 + /* eslint-disable prefer-template */ + function _transformAttrToStr(tr) { + let s = '' ; - // Translate starts from the passed-in value or the current position: - if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { - x0 = anim.start.x; - y0 = anim.start.y; - } else { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) - ? transform.translate.x - : 0; - y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) - ? transform.translate.x - : 0; + // Translate: + if (tr.translate && typeof tr.translate.x === 'number') { + if (typeof tr.translate.y === 'number') { + s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; + } else { + // if y isn't provided, it is assumed to 0: + s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; + } } - /* eslint-disable-next-line no-restricted-properties */ - v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); - v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); - if (anim.stop.x - x0 < 0) v.arc += -Math.PI; - if (v.length === 0) v.arc = 0; + // Scale: + if (tr.scale && typeof tr.scale.x === 'number') { + if (typeof tr.scale.y === 'number') { + s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; + } else { + // if y isn't provided, it is assumed to be equal to x: + s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; + } + } - const timer = setInterval(() => { - // Compute the next step: - v.t += v.period; - if (v.t > v.duration) v.t = v.duration; - v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; - v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; + // Rotate: + if (tr.rotate && typeof tr.rotate.a === 'number') { + if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { + s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; + } else if (typeof tr.rotate.cx === 'number') { + // if y isn't provided, it is assumed to be equal to x: + s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; + } else { + s += 'rotate(' + tr.rotate.a + ') '; + } + } - // Retrieve the transform attributes, set the new position value and update: - const trform = SVG.transformAttrToObj(el.getAttribute('transform')); - trform.translate.x = v.x; - trform.translate.y = v.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); + // SkewX: + if (typeof tr.skewX === 'number') { + s += 'skewX(' + tr.skewX + ') '; + } - // Stop the timer if destination point reached. - if (v.t === v.duration) { - clearInterval(timer); - } - }, v.period); + // SkewY: + if (typeof tr.skewY === 'number') { + s += 'skewY(' + tr.skewY + ') '; + } + + // matrix not implemented! + // - + + // Return a clean string (no leading/trailing blanck spaces): + return s.replace(/(^\s+|\s+$)/g, ''); + } + /* eslint-enable prefer-template */ + + /** + * Returns an arc path. + * + * The returned path has the following format: + * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' + * + * @function (arg1, arg2, arg3, arg4) + * @private + * @param {Number} start angle in radius, + * @param {Number} stop angle, + * @param {Number} external radius, + * @param {Number} internal radius, + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ + /* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ + function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { + startAngle = startAngle !== undefined ? startAngle : 0; + stopAngle = stopAngle !== undefined ? stopAngle : 0; + outerRadius = outerRadius !== undefined ? outerRadius : 0; + startAngle = startAngle % (2 * Math.PI); + if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } + if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } + + let sweepflag = 0; + if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } + const x0 = Math.cos(startAngle); + const y0 = Math.sin(startAngle); + const x1 = Math.cos(stopAngle); + const y1 = Math.sin(stopAngle); + + /* eslint-disable-next-line prefer-template */ + const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); + let innerArc = ''; + if (innerRadius !== undefined) { + /* eslint-disable-next-line prefer-template */ + innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; + } + return outerArc + innerArc; } + /* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ /** - * Updates dynamically the text value from the initial to the final value. + * Draws polygonal lines (deprecated, use multipolyline instead). * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial value, - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn' * * @function (arg1, arg2) * @private - * @param {Object} the SVG object, - * @param {Object} the animation parameters, - * @returns {} -, + * @param {Object} a set of points (x, y) defining the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, * @since 0.0.0 */ - function _textRun(el, anim) { - const d = { - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - value: 0, - start: _.isNumber(anim.start) ? anim.start : 0, - stop: _.isNumber(anim.stop) ? anim.stop : 0, - t: 0, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // Run: - const timer = setInterval(() => { - // Compute the next step: - d.t += d.period; - // Abort if overflow or if no change in the position. - if (d.t > d.duration || d.stop === d.start) { - d.t = d.duration; - } - d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); - if (d.duration === 0) { - d.value = d.start; + function _getLine(shape, closed) { + let path = ''; + shape.forEach((obj) => { + if (obj.x !== null && obj.y !== null) { + if (path === '') { + // path = 'M' + obj.x + ',' + obj.y; + path = `M${obj.x}, ${obj.y}`; + } else { + // path += 'L' + obj.x + ',' + obj.y; + path += `L${obj.x},${obj.y}`; + } } + }); + if (closed === true) { path += 'Z'; } + return path; + } - // Display the new digit value: - /* eslint-disable-next-line no-param-reassign */ - el.textContent = d.value.toFixed(0); + /** + * Returns polyline paths. + * + * The polylines array looks like: + * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' + * + * @function (arg1, arg2) + * @private + * @param {Object} a set of array of points (x, y) defining + * the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ + function _getMultipolyline(shape, closed) { + let path + , subpath + , i + , j + ; - // is animation over? - if (d.t === d.duration) { - clearInterval(timer); + path = ''; + for (i = 0; i < shape.length; i++) { + subpath = ''; + for (j = 0; j < shape[i].length; j++) { + if (shape[i][j].x !== null && shape[i][j].y !== null) { + if (subpath === '') { + // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; + subpath = `M${shape[i][j].x},${shape[i][j].y}`; + } else { + // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; + subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; + } + } } - }, d.period); + if (closed === true) { subpath += 'z'; } + path += subpath; + } + return path; } - // -- Public Static Methods ------------------------------------------------ + // -- Public Methods ----------------------------------------------------------- - _.extend(Root, { + const Static = { /** - * Rotates the SVG element. + * Converts a SVG transform attributes string to an object. * - * @method (arg1, arg2) + * @method (arg1) * @public - * @param {Object} the SVG element, - * @param {Object} the rotation to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - rotateRun(el, anim) { - _rotateRun(el, anim); + transformAttrToObj(transform) { + return _transformAttrToObj(transform); }, /** - * Scales the SVG element; + * Converts a SVG transform attributes string to an object. * - * @method (arg1, arg2) + * @method (arg1) * @public - * @param {Object} the SVG element, - * @param {Object} the scaling to perform, - * @returns {} -, + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - scaleRun(el, anim) { - _scaleRun(el, anim); + transformAttrToStr(tr) { + return _transformAttrToStr(tr); }, /** - * Translates the SVG Element. + * Returns an arc path. + * + * @method (arg1, arg2, arg3, arg4) + * @public + * @param {Number} start angle in radius, + * @param {Number} stop angle, + * @param {Number} external radius, + * @param {Number} internal radius, + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ + getArc(startAngle, stopAngle, outerRadius, innerRadius) { + return _getArc(startAngle, stopAngle, outerRadius, innerRadius); + }, + + /** + * Draws polygonal lines (deprecated, use multipolyline instead). * * @method (arg1, arg2) * @public - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, + * @param {Object} a set of points (x, y) defining the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, * @since 0.0.0 */ - translateRun(el, anim) { - _translateRun(el, anim); + getLine(shape, closed) { + return _getLine(shape, closed); }, /** - * Updates dynamically the text value from the initial to the final value. + * Returns polyline paths. * * @method (arg1, arg2) * @public - * @param {Object} the SVG element, - * @param {Object} the animation parameters, - * @returns {} -, + * @param {Object} a set of array of points (x, y) defining + * the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, * @since 0.0.0 */ - textRun(el, anim) { - _textRun(el, anim); + getMultipolyline(shape, closed) { + return _getMultipolyline(shape, closed); }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Adds or Updates the SVG node attributes. - * - * attributes.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _attr adds an attribute to the selected SVG element, - * - * - * Public Static Methods: - * . attr adds an attribute to the selected SVG element, - * - * - * - * @namespace SV.Methods.Attr.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Attr.Public; + }; + + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Static; + + /* eslint-enable one-var, semi-style, no-underscore-dangle */ + }, {}], + + /* eslint-disable-next-line no-unused-vars */ + 5: ['./src/components/attr', function(impoort, module, exports) { + /** **************************************************************************** + * + * Adds or Updates the SVG node attributes. + * + * attributes.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . _attr adds an attribute to the selected SVG element, + * + * + * Public Static Methods: + * . attr adds an attribute to the selected SVG element, + * + * + * + * @namespace SVG.src.components.attr + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable no-underscore-dangle */ + + + // -- Vendor modules // -- Local modules - const Anim = SV.Anim.Public; + const Anim = impoort('./anim'); // -- Local constants @@ -1631,130 +1549,205 @@ // -- Local variables - // -- Private Functions ---------------------------------------------------- + // -- Private Functions -------------------------------------------------------- /** * Adds an attribute to the selected SVG element. * * @function (arg1, arg2, arg3) * @private + * @param {Object} the SVG element, + * @param {String} the name of the attribute, + * @param {Object} the value of the attribute or the params for the animation, + * @returns {} -, + * @since 0.0.0 + */ + function _attr(el, attr, value) { + switch (typeof value) { + // Add the requested attribute to this element: + case 'string': + case 'number': + el.setAttributeNS(null, attr, value); + break; + + case 'object': + // Proceed with an animation: + switch (attr) { + // ... + // case 'd': + // Anim.dAnimationRun(el, value); + // break; + + // Transform animations: + case 'transform': + switch (value.type) { + // Rotate animation: + case 'rotate': + Anim.rotateRun(el, value); + break; + + // Scale animation: + case 'scale': + Anim.scaleRun(el, value); + break; + + // Smooth linear animation: + case 'translate': + Anim.translateRun(el, value); + break; + + default: + throw new Error(`The animation is not supported for the transform ${value.type}!`); + } + break; + + default: + throw new Error(`The animation is not supported for the attribute ${attr}!`); + } + break; + + default: + // Ignore! + } + } + + + // -- Public Static Methods ---------------------------------------------------- + + const Attr = { + + /** + * Adds an attribute to the selected SVG element. + * + * @method (arg1, arg2, arg3) + * @public + * @param {Object} the SVG object, + * @param {String} the name of the attribute, + * @param {Object} the value of the attribute or the params for the animation, + * @returns {} -, + * @since 0.0.0 + */ + attr(el, attr, value) { + _attr(el, attr, value); + }, + }; + + + // -- Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Attr; + + /* eslint-enable no-underscore-dangle */ + + /* eslint-disable-next-line */ + }, { './anim': 8 }], + + /* eslint-disable-next-line no-unused-vars */ + 6: ['./src/components/text', function(impoort, module, exports) { + /** **************************************************************************** + * + * Implements the text methods. + * + * text.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . _text adds a text to the selected SVG element, + * + * + * Public Static Methods: + * . text adds a text to the selected SVG element, + * + * + * + * @namespace SVG.src.components.text + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable one-var, semi-style, no-underscore-dangle */ + + + // -- Vendor modules + + + // -- Local modules + const Anim = impoort('./anim'); + + + // -- Local constants + + + // -- Local variables + + + // -- Private Functions -------------------------------------------------------- + + /** + * Adds a text to the selected SVG element. + * + * @function (arg1, arg2) + * @private * @param {Object} the SVG element, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, + * @param {Object} the text or the the params for the animation, * @returns {} -, * @since 0.0.0 */ - function _attr(el, attr, value) { + function _text(el, value) { switch (typeof value) { - // Add the requested attribute to this element: - case 'string': case 'number': - el.setAttributeNS(null, attr, value); + case 'string': + /* eslint-disable-next-line no-param-reassign */ + el.textContent = value; break; case 'object': - // Proceed with an animation: - switch (attr) { - // ... - // case 'd': - // Anim.dAnimationRun(el, value); - // break; - - // Transform animations: - case 'transform': - switch (value.type) { - // Rotate animation: - case 'rotate': - Anim.rotateRun(el, value); - break; - - // Scale animation: - case 'scale': - Anim.scaleRun(el, value); - break; - - // Smooth linear animation: - case 'translate': - Anim.translateRun(el, value); - break; - - default: - throw new Error(`The animation is not supported for the transform ${value.type}!`); - } - break; - - default: - throw new Error(`The animation is not supported for the attribute ${attr}!`); - } + Anim.textRun(el, value); break; default: - // Ignore! + break; } } - // -- Public Static Methods ------------------------------------------------ + // -- Public Static Methods ---------------------------------------------------- - _.extend(Root, { + const Text = { /** - * Adds an attribute to the selected SVG element. + * Adds a text to the selected SVG element. * - * @method (arg1, arg2, arg3) + * @method (arg1, arg2) * @public - * @param {Object} the SVG object, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, + * @param {Object} the SVG element, + * @param {Object} the text or the the params for the animation, * @returns {} -, * @since 0.0.0 */ - attr(el, attr, value) { - _attr(el, attr, value); + text(el, value) { + _text(el, value); }, - }); - }()); - /* eslint-enable no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the SVG static methods. - * - * staticmethods.js is just a literal object that contains a set of functions. - * it can't be intantiated. - * - * Private Functions: - * . _transformAttrToObj converts a SVG transform from string to object, - * . _transformAttrToStr converts a SVG transform from object to string, - * . _getArc returns an arc path, - * . _getLine returns a polyline path, - * . _getMultipolyline returns a set of polyline paths, - * - * - * Public Static Methods: - * . transformAttrToObj converts a SVG transform from string to object, - * . transformAttrToStr converts a SVG transform from object to string, - * . getArc returns an arc path, - * . getLine draws polygonal lines, - * . getMultipolyline returns polyline paths, - * - * - * - * @namespace SV.Methods.Static.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Static.Public; + }; + + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Text; + + /* eslint-enable one-var, semi-style, no-underscore-dangle */ + + /* eslint-disable-next-line */ + }, { './anim': 8 }], + + /* eslint-disable-next-line no-unused-vars */ + 7: ['./src/components/w3c', function(impoort, module, exports) { + /* eslint-disable one-var, semi-style, no-underscore-dangle */ + + + // -- Vendor modules // -- Local modules @@ -1766,593 +1759,612 @@ // -- Local variables - // -- Private Functions ---------------------------------------------------- + // -- Main - /** - * Converts a SVG transform attributes string to an object. + /* eslint-disable-next-line no-param-reassign */ + module.exports = { + SVG_NS: 'http://www.w3.org/2000/svg', + XLINK_NS: 'http://www.w3.org/1999/xlink', + }; + }, {}], + + /* eslint-disable-next-line no-unused-vars */ + 8: ['./src/components/anim', function(impoort, module, exports) { + /** **************************************************************************** * - * @function (arg1) - * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - /* eslint-disable one-var-declaration-per-line */ - function _transformAttrToObj(transform) { - const tr = typeof transform === 'string' ? transform : '' - ; + * Performs the animations. + * + * animation.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . _rotateRun rotates the SVG element, + * . _scaleRun scales the SVG element, + * . _translateRun translates the SVG element, + * . _textRun updates the text value from initial to final value, + * + * + * Public Static Methods: + * . rotateRun rotates the SVG element, + * . scaleRun scales the SVG element, + * . translateRun translates the SVG element, + * . textRun updates the text value from initial to final value, + * + * + * + * @namespace SVG.src.components.anim + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* eslint-disable one-var, semi-style, no-underscore-dangle */ - const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; - const regexTr = /translate(.*?)\)/; - const regexSc = /scale(.*?)\)/; - const regexRo = /rotate(.*?)\)/; - const regexSkX = /skewX(.*?)\)/; - const regexSkY = /skewY(.*?)\)/; - const regexMtx = /matrix(.*?)\)/; - const translate = tr.match(regexTr) === null - ? null - : (function() { - let x, y; - const t = tr.match(regexTr)[0].match(regexN); - if (!t) { - x = null; - y = null; - } else if (t.length === 1) { - x = parseFloat(t[0], 10); - y = x; - } else { - x = parseFloat(t[0], 10); - y = parseFloat(t[1], 10); - } - return { - x, - y, - }; - }()); + // -- Vendor modules - const scale = tr.match(regexSc) === null - ? null - : (function() { - let x, y; - const s = tr.match(regexSc)[0].match(regexN); - if (!s) { - x = null; - y = null; - } else if (s.length === 1) { - x = parseFloat(s[0], 10); - y = x; - } else { - x = parseFloat(s[0], 10); - y = parseFloat(s[1], 10); - } - return { - x, - y, - }; - }()); - const rotate = tr.match(regexRo) === null - ? null - : (function() { - let a, cx, cy; - const r = tr.match(regexRo)[0].match(regexN); - if (!r) { - a = null; - cx = null; - cy = null; - } else if (r.length === 1) { - a = parseFloat(r[0], 10); - cx = null; - cy = null; - } else if (r.length === 2) { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = cx; - } else { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = parseFloat(r[2], 10); - } - return { - a, - cx, - cy, - }; - }()); + // -- Local modules + const _ = impoort('../lib/_'); + const SVG = impoort('./staticmethods'); - const skewX = tr.match(regexSkX) === null - ? null - : (function() { - const sk = tr.match(regexSkX)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); - } - return null; - }()); - const skewY = tr.match(regexSkY) === null - ? null - : (function() { - const sk = tr.match(regexSkY)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); - } - return null; - }()); + // -- Local constants - // Not implemented. - const matrix = tr.match(regexMtx) === null - ? null - : null; - return { - translate, - scale, - rotate, - matrix, - skewX, - skewY, - }; - } - /* eslint-enable one-var-declaration-per-line */ + // -- Local variables + + + // -- Private Functions -------------------------------------------------------- /** - * Converts a SVG transform attributes string to an object. + * Rotates the SVG element. * - * @function (arg1) + * Nota: + * The animation object must contain the following properties: + * { + * start: the value (if omitted, start from current position), + * stop: the final value, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } + * + * @function (arg1, arg2) * @private - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, + * @param {Object} the SVG element, + * @param {Object} the rotation to perform, + * @returns {} -, * @since 0.0.0 */ - /* eslint-disable prefer-template */ - function _transformAttrToStr(tr) { - let s = '' - ; - - // Translate: - if (tr.translate && typeof tr.translate.x === 'number') { - if (typeof tr.translate.y === 'number') { - s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; - } else { - // if y isn't provided, it is assumed to 0: - s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; - } - } - - // Scale: - if (tr.scale && typeof tr.scale.x === 'number') { - if (typeof tr.scale.y === 'number') { - s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; - } else { - // if y isn't provided, it is assumed to be equal to x: - s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; - } - } - - // Rotate: - if (tr.rotate && typeof tr.rotate.a === 'number') { - if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; - } else if (typeof tr.rotate.cx === 'number') { - // if y isn't provided, it is assumed to be equal to x: - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; - } else { - s += 'rotate(' + tr.rotate.a + ') '; - } - } + function _rotateRun(el, anim) { + const r = { + a: 0, + t: 0, + start: _.isNumber(anim.start) ? anim.start : null, + stop: _.isNumber(anim.stop) ? anim.stop : 180, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; - // SkewX: - if (typeof tr.skewX === 'number') { - s += 'skewX(' + tr.skewX + ') '; + // If anim.start is undefined, we start from the current value: + if (_.isNull(r.start)) { + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + r.start = _.isObject(transform.scale) && _.isNumber(transform.scale.a) + ? transform.scale.a + : 180; } - // SkewY: - if (typeof tr.skewY === 'number') { - s += 'skewY(' + tr.skewY + ') '; - } + const timer = setInterval(() => { + // Compute the next step: + r.t += r.period; + // Abort if overflow or if no change in the position. + if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } + r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); - // matrix not implemented! - // - + // Retrieve transform attributes, set new rotation value and update. + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + transform.rotate.a = r.a; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); - // Return a clean string (no leading/trailing blanck spaces): - return s.replace(/(^\s+|\s+$)/g, ''); + if (r.t === r.duration) { + clearInterval(timer); + } + }, r.period); } - /* eslint-enable prefer-template */ /** - * Returns an arc path. + * Scales the SVG element. * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial x, y values (if omitted, start from current position), + * stop: the final x, y values, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } * - * @function (arg1, arg2, arg3, arg4) + * @function (arg1, arg2) * @private - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, + * @param {Object} the SVG object, + * @param {Object} the scaling to perform, + * @returns {} -, * @since 0.0.0 */ - /* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ - function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { - startAngle = startAngle !== undefined ? startAngle : 0; - stopAngle = stopAngle !== undefined ? stopAngle : 0; - outerRadius = outerRadius !== undefined ? outerRadius : 0; - startAngle = startAngle % (2 * Math.PI); - if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } - if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } - - let sweepflag = 0; - if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } - const x0 = Math.cos(startAngle); - const y0 = Math.sin(startAngle); - const x1 = Math.cos(stopAngle); - const y1 = Math.sin(stopAngle); + function _scaleRun(el, anim) { + const s = { + x: 0, + y: 0, + t: 0, + x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, + y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, + x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, + y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; - /* eslint-disable-next-line prefer-template */ - const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); - let innerArc = ''; - if (innerRadius !== undefined) { - /* eslint-disable-next-line prefer-template */ - innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; + // if anim.start.x or anim.start.y is undefined, the scaling operation + // starts from the current value: + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + if (_.isNull(s.x0) || _.isNull(s.y0)) { + s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) + ? transform.scale.x + : 0; + s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) + ? transform.scale.y + : 0; } - return outerArc + innerArc; + + // Run: + const timer = setInterval(() => { + // Compute the next step: + s.t += s.period; + if (s.t > s.duration) { s.t = s.duration; } + s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); + s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); + + // Retrieve transform attributes, set new scale value and update. + const tr = SVG.transformAttrToObj(el.getAttribute('transform')); + tr.scale.x = s.x; + tr.scale.y = s.y; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); + + if (s.t === s.duration) { + clearInterval(timer); + } + }, s.period); } - /* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ /** - * Draws polygonal lines (deprecated, use multipolyline instead). + * Translates the SVG element. * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial x, y values (if omitted, start from current position), + * stop: the final x, y values, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } * * @function (arg1, arg2) * @private - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the translation to perform, + * @returns {} -, * @since 0.0.0 */ - function _getLine(shape, closed) { - let path = ''; - shape.forEach((obj) => { - if (obj.x !== null && obj.y !== null) { - if (path === '') { - // path = 'M' + obj.x + ',' + obj.y; - path = `M${obj.x}, ${obj.y}`; - } else { - // path += 'L' + obj.x + ',' + obj.y; - path += `L${obj.x},${obj.y}`; - } + function _translateRun(el, anim) { + const v = { + x: 0, + y: 0, + t: 0, + length: null, + arc: null, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; + + let x0 + , y0 + ; + + // Translate starts from the passed-in value or the current position: + if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { + x0 = anim.start.x; + y0 = anim.start.y; + } else { + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) + ? transform.translate.x + : 0; + y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) + ? transform.translate.x + : 0; + } + + /* eslint-disable-next-line no-restricted-properties */ + v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); + v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); + if (anim.stop.x - x0 < 0) v.arc += -Math.PI; + if (v.length === 0) v.arc = 0; + + const timer = setInterval(() => { + // Compute the next step: + v.t += v.period; + if (v.t > v.duration) v.t = v.duration; + v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; + v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; + + // Retrieve the transform attributes, set the new position value and update: + const trform = SVG.transformAttrToObj(el.getAttribute('transform')); + trform.translate.x = v.x; + trform.translate.y = v.y; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); + + // Stop the timer if destination point reached. + if (v.t === v.duration) { + clearInterval(timer); } - }); - if (closed === true) { path += 'Z'; } - return path; + }, v.period); } /** - * Returns polyline paths. + * Updates dynamically the text value from the initial to the final value. * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial value, + * stop: the final value, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } * * @function (arg1, arg2) * @private - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG object, + * @param {Object} the animation parameters, + * @returns {} -, * @since 0.0.0 */ - function _getMultipolyline(shape, closed) { - let path - , subpath - , i - , j - ; + function _textRun(el, anim) { + const d = { + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + value: 0, + start: _.isNumber(anim.start) ? anim.start : 0, + stop: _.isNumber(anim.stop) ? anim.stop : 0, + t: 0, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; - path = ''; - for (i = 0; i < shape.length; i++) { - subpath = ''; - for (j = 0; j < shape[i].length; j++) { - if (shape[i][j].x !== null && shape[i][j].y !== null) { - if (subpath === '') { - // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; - subpath = `M${shape[i][j].x},${shape[i][j].y}`; - } else { - // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; - subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; - } - } + // Run: + const timer = setInterval(() => { + // Compute the next step: + d.t += d.period; + // Abort if overflow or if no change in the position. + if (d.t > d.duration || d.stop === d.start) { + d.t = d.duration; + } + d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); + if (d.duration === 0) { + d.value = d.start; + } + + // Display the new digit value: + /* eslint-disable-next-line no-param-reassign */ + el.textContent = d.value.toFixed(0); + + // is animation over? + if (d.t === d.duration) { + clearInterval(timer); } - if (closed === true) { subpath += 'z'; } - path += subpath; - } - return path; + }, d.period); } - // -- Public Methods ------------------------------------------------------- - - _.extend(Root, { + // -- Public Static Methods ---------------------------------------------------- - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToObj(transform) { - return _transformAttrToObj(transform); - }, + const Anim = { /** - * Converts a SVG transform attributes string to an object. + * Rotates the SVG element. * - * @method (arg1) + * @method (arg1, arg2) * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, + * @param {Object} the SVG element, + * @param {Object} the rotation to perform, + * @returns {} -, * @since 0.0.0 */ - transformAttrToStr(tr) { - return _transformAttrToStr(tr); + rotateRun(el, anim) { + _rotateRun(el, anim); }, /** - * Returns an arc path. + * Scales the SVG element; * - * @method (arg1, arg2, arg3, arg4) + * @method (arg1, arg2) * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the scaling to perform, + * @returns {} -, * @since 0.0.0 */ - getArc(startAngle, stopAngle, outerRadius, innerRadius) { - return _getArc(startAngle, stopAngle, outerRadius, innerRadius); + scaleRun(el, anim) { + _scaleRun(el, anim); }, /** - * Draws polygonal lines (deprecated, use multipolyline instead). + * Translates the SVG Element. * * @method (arg1, arg2) * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the translation to perform, + * @returns {} -, * @since 0.0.0 */ - getLine(shape, closed) { - return _getLine(shape, closed); + translateRun(el, anim) { + _translateRun(el, anim); }, /** - * Returns polyline paths. + * Updates dynamically the text value from the initial to the final value. * * @method (arg1, arg2) * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, + * @param {Object} the SVG element, + * @param {Object} the animation parameters, + * @returns {} -, * @since 0.0.0 */ - getMultipolyline(shape, closed) { - return _getMultipolyline(shape, closed); + textRun(el, anim) { + _textRun(el, anim); }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Creates the SVG node. - * - * svg.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _create creates the SVG node, - * - * - * Public Static Methods: - * . create creates the SVG node, - * - * - * - * @namespace SV.SVG.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.SVG.Public; + }; - // -- Local modules + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = Anim; + /* eslint-enable one-var, semi-style, no-underscore-dangle */ - // -- Local constants + /* eslint-disable-next-line */ + }, { '../lib/_': 9, './staticmethods': 4 }], + /* eslint-disable-next-line no-unused-vars */ + 9: ['./src/lib/_', function(impoort, module, exports) { + /** **************************************************************************** + * + * Provides a subset of the overslash library. + * + * _.js is just a literal object that contains a set of functions. It + * can't be intantiated. + * + * Private Functions: + * . none, + * + * + * Public Static Methods: + * . extend extends the passed-in object with new methods, + * + * . isUndefined is a given variable undefined? + * . isNull is a given value null? + * . isBoolean is a given value a boolean? + * . isString is a given value a string? + * . isNumber is a given value a number? + * . isObject is a given variable an object? + * . isLiteralObject is a given variable a literal object? + * . isFunction is a given variable a function? + * . isArray is a given value an array? + * + * . linear linear easing method, + * + * + * + * @namespace - + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ + /* - */ - // -- Local variables + // -- Vendor modules - // -- Private Methods ------------------------------------------------------ - /** - * Creates the SVG node. - * - * @function (arg1) - * @private - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, - * @since 0.0.0 - */ - function _create(selector) { - const sel = typeof selector === 'string' ? selector : 'body' - , el = document.querySelector(sel) - , node = el || document.querySelector('body') - ; + // -- Local modules - let _root; - // create a unique id: - let id = `i${Math.random().toString(36).substr(2, 7)}`; - // Check that the svg node doesn't exist: - const isSVG = node.getElementsByTagNameNS(SVG_NS, 'svg')[0]; - if (!isSVG || isSVG.length === 0) { - // Ok, it doesn't exist, we can create it: - const svg = document.createElementNS(SVG_NS, 'svg'); - svg.setAttributeNS(null, 'id', id); - svg.setAttributeNS(null, 'version', '1.1'); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', SVG_NS); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', XLINK_NS); - node.appendChild(svg); - _root = svg; - } else { - // It already exists, do not overwrite it! - id = isSVG.getAttributeNS(null, 'id'); - _root = isSVG; - } - return { id, _root }; - } + // -- Local constants + + + // -- Local variables - // -- Public Static Methods ------------------------------------------------ + // -- Public Methods ------------------------------------------------------- - _.extend(Root, { + const _ = { /** - * Creates the SVG node. + * Extends the passed-in object with new methods. + * + * Nota: this function mutates object. + * + * @function (arg1, arg2) + * @private + * @param {Object} the object to extend, + * @param {Object} an object containing a set of methods, + * @returns {} -, + * @since 0.0.0 + */ + extend(object, methods) { + const keys = Object.keys(methods); + for (let i = 0; i < keys.length; i++) { + /* eslint-disable-next-line no-param-reassign */ + object[keys[i]] = methods[keys[i]]; + } + return object; + }, + + /** + * Is a given variable undefined? * * @method (arg1) * @public - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, * @since 0.0.0 */ - create(selector) { - return _create(selector); + isUndefined(obj) { + return obj === undefined; }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ - - - /* *************************************************************************** - * - * Implements the text methods. - * - * text.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * Private Functions: - * . _text adds a text to the selected SVG element, - * - * - * Public Static Methods: - * . text adds a text to the selected SVG element, - * - * - * - * @namespace SV.Methods.Text.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ - /* eslint-disable one-var, semi-style, no-underscore-dangle */ - - (function() { - // IIFE - - // -- Module path - const Root = SV.Methods.Text.Public; - - - // -- Local modules - const Anim = SV.Anim.Public - ; - - // -- Local constants - - - // -- Local variables + /** + * Is a given value null? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isNull(obj) { + return obj === null; + }, - // -- Private Functions ---------------------------------------------------- - - /** - * Adds a text to the selected SVG element. - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - function _text(el, value) { - switch (typeof value) { - case 'number': - case 'string': - /* eslint-disable-next-line no-param-reassign */ - el.textContent = value; - break; + /** + * Is a given value a boolean? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isBoolean(obj) { + return obj === true || obj === false || Object.prototype.toString.call(obj) === '[object Boolean]'; + }, - case 'object': - Anim.textRun(el, value); - break; + /** + * Is a given value a string? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isString(obj) { + return Object.prototype.toString.call(obj) === '[object String]'; + }, - default: - break; - } - } + /** + * Is a given value a number? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isNumber(obj) { + return Object.prototype.toString.call(obj) === '[object Number]'; + }, + /** + * Is a given variable an object? + * (copied from: http://underscorejs.org) + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isObject(obj) { + const type = typeof obj; + return (type === 'function' || type === 'object') && !!obj; + }, - // -- Public Static Methods ------------------------------------------------ + /** + * Is a given variable a literal object? + * + * @method (arg1) + * @private + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.3 + */ + isLiteralObject(obj) { + return Object.prototype.toString.call(obj) === '[object Object]'; + }, - _.extend(Root, { + /** + * Is a given variable a function? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isFunction(obj) { + return Object.prototype.toString.call(obj) === '[object Function]'; + }, /** - * Adds a text to the selected SVG element. + * Is a given value an array? + * (Delegates to ECMA5's native Array.isArray.) + * (copied from: http://underscorejs.org) * - * @method (arg1, arg2) + * @method (arg1) * @public - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, * @since 0.0.0 */ - text(el, value) { - _text(el, value); + isArray(obj) { + return Object.prototype.toString.call(obj) === '[object Array]'; + }, + + /** + * Computes the intermediate values according to a linear progression. + * + * @method (arg1, arg2, arg3, arg4) + * @public + * @param {Number} the current time, + * @param {Number} the beginning value, + * @param {Number} the change in value, + * @param {Number} the duration, + * @returns {Number} returns the computed value, + */ + elinear(t, b, c, d) { + return (c * t) / d + b; }, - }); - }()); - /* eslint-enable one-var, semi-style, no-underscore-dangle */ + }; + + + // Export + /* eslint-disable-next-line no-param-reassign */ + module.exports = _; + /* - */ + }, {}], - // Returns the library name: - return SVG; -})); +/* eslint-disable-next-line */ +},{},[1])(1)})); diff --git a/package-lock.json b/package-lock.json index f5bd774..0d37873 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,33 +1,34 @@ { "name": "@mobilabs/svg", - "version": "0.0.3", + "version": "0.0.4-alpha.0", "lockfileVersion": 1, "requires": true, "dependencies": { "@babel/code-frame": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", - "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", + "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==", "dev": true, "requires": { - "@babel/highlight": "^7.0.0" + "@babel/highlight": "^7.8.3" } }, "@babel/core": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.7.7.tgz", - "integrity": "sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.5.5", - "@babel/generator": "^7.7.7", - "@babel/helpers": "^7.7.4", - "@babel/parser": "^7.7.7", - "@babel/template": "^7.7.4", - "@babel/traverse": "^7.7.4", - "@babel/types": "^7.7.4", + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.4.tgz", + "integrity": "sha512-0LiLrB2PwrVI+a2/IEskBopDYSd8BCb3rOvH7D5tzoWd696TBEduBvuLVm4Nx6rltrLZqvI3MCalB2K2aVzQjA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.8.3", + "@babel/generator": "^7.8.4", + "@babel/helpers": "^7.8.4", + "@babel/parser": "^7.8.4", + "@babel/template": "^7.8.3", + "@babel/traverse": "^7.8.4", + "@babel/types": "^7.8.3", "convert-source-map": "^1.7.0", "debug": "^4.1.0", + "gensync": "^1.0.0-beta.1", "json5": "^2.1.0", "lodash": "^4.17.13", "resolve": "^1.3.2", @@ -44,61 +45,61 @@ } }, "@babel/generator": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.7.tgz", - "integrity": "sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ==", + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.4.tgz", + "integrity": "sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==", "dev": true, "requires": { - "@babel/types": "^7.7.4", + "@babel/types": "^7.8.3", "jsesc": "^2.5.1", "lodash": "^4.17.13", "source-map": "^0.5.0" } }, "@babel/helper-function-name": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz", - "integrity": "sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz", + "integrity": "sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==", "dev": true, "requires": { - "@babel/helper-get-function-arity": "^7.7.4", - "@babel/template": "^7.7.4", - "@babel/types": "^7.7.4" + "@babel/helper-get-function-arity": "^7.8.3", + "@babel/template": "^7.8.3", + "@babel/types": "^7.8.3" } }, "@babel/helper-get-function-arity": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz", - "integrity": "sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz", + "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==", "dev": true, "requires": { - "@babel/types": "^7.7.4" + "@babel/types": "^7.8.3" } }, "@babel/helper-split-export-declaration": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz", - "integrity": "sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz", + "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==", "dev": true, "requires": { - "@babel/types": "^7.7.4" + "@babel/types": "^7.8.3" } }, "@babel/helpers": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.7.4.tgz", - "integrity": "sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg==", + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.4.tgz", + "integrity": "sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==", "dev": true, "requires": { - "@babel/template": "^7.7.4", - "@babel/traverse": "^7.7.4", - "@babel/types": "^7.7.4" + "@babel/template": "^7.8.3", + "@babel/traverse": "^7.8.4", + "@babel/types": "^7.8.3" } }, "@babel/highlight": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz", - "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz", + "integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==", "dev": true, "requires": { "chalk": "^2.0.0", @@ -107,34 +108,43 @@ } }, "@babel/parser": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.7.tgz", - "integrity": "sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw==", + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.4.tgz", + "integrity": "sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==", "dev": true }, + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, "@babel/template": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz", - "integrity": "sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.3.tgz", + "integrity": "sha512-04m87AcQgAFdvuoyiQ2kgELr2tV8B4fP/xJAVUL3Yb3bkNdMedD3d0rlSQr3PegP0cms3eHjl1F7PWlvWbU8FQ==", "dev": true, "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.4", - "@babel/types": "^7.7.4" + "@babel/code-frame": "^7.8.3", + "@babel/parser": "^7.8.3", + "@babel/types": "^7.8.3" } }, "@babel/traverse": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.4.tgz", - "integrity": "sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==", + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.4.tgz", + "integrity": "sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==", "dev": true, "requires": { - "@babel/code-frame": "^7.5.5", - "@babel/generator": "^7.7.4", - "@babel/helper-function-name": "^7.7.4", - "@babel/helper-split-export-declaration": "^7.7.4", - "@babel/parser": "^7.7.4", - "@babel/types": "^7.7.4", + "@babel/code-frame": "^7.8.3", + "@babel/generator": "^7.8.4", + "@babel/helper-function-name": "^7.8.3", + "@babel/helper-split-export-declaration": "^7.8.3", + "@babel/parser": "^7.8.4", + "@babel/types": "^7.8.3", "debug": "^4.1.0", "globals": "^11.1.0", "lodash": "^4.17.13" @@ -149,9 +159,9 @@ } }, "@babel/types": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz", - "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.3.tgz", + "integrity": "sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==", "dev": true, "requires": { "esutils": "^2.0.2", @@ -197,9 +207,9 @@ } }, "p-limit": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", - "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz", + "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -296,15 +306,15 @@ "dev": true }, "@types/node": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.1.tgz", - "integrity": "sha512-hx6zWtudh3Arsbl3cXay+JnkvVgCKzCWKv42C9J01N2T2np4h8w5X8u6Tpz5mj38kE3M9FM0Pazx8vKFFMnjLQ==", + "version": "13.7.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-13.7.0.tgz", + "integrity": "sha512-GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ==", "dev": true }, - "@types/normalize-package-data": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz", - "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", + "@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, "abab": { @@ -313,6 +323,22 @@ "integrity": "sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==", "dev": true }, + "abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "dev": true + }, + "accepts": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", + "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "dev": true, + "requires": { + "mime-types": "~2.1.24", + "negotiator": "0.6.2" + } + }, "acorn": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz", @@ -360,12 +386,12 @@ } }, "ajv": { - "version": "6.10.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz", - "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==", + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz", + "integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==", "dev": true, "requires": { - "fast-deep-equal": "^2.0.1", + "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" @@ -609,12 +635,6 @@ "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=", "dev": true }, - "array-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", - "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=", - "dev": true - }, "array-includes": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz", @@ -787,9 +807,9 @@ "dev": true }, "aws4": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz", - "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz", + "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==", "dev": true }, "bach": { @@ -870,6 +890,12 @@ } } }, + "batch": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", + "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", + "dev": true + }, "bcrypt-pbkdf": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", @@ -901,6 +927,18 @@ "file-uri-to-path": "1.0.0" } }, + "body": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz", + "integrity": "sha1-5LoM5BCkaTYyM2dgnstOZVMSUGk=", + "dev": true, + "requires": { + "continuable-cache": "^0.3.1", + "error": "^7.0.0", + "raw-body": "~1.1.0", + "safe-json-parse": "~1.0.1" + } + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -944,6 +982,12 @@ "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", "dev": true }, + "bytes": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz", + "integrity": "sha1-NWnt6Lo0MV+rmcPpLLBMciDeH6g=", + "dev": true + }, "cache-base": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", @@ -973,32 +1017,6 @@ "write-file-atomic": "^3.0.0" } }, - "caller-callsite": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", - "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=", - "dev": true, - "requires": { - "callsites": "^2.0.0" - }, - "dependencies": { - "callsites": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", - "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", - "dev": true - } - } - }, - "caller-path": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz", - "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=", - "dev": true, - "requires": { - "caller-callsite": "^2.0.0" - } - }, "callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1366,6 +1384,12 @@ "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", "dev": true }, + "compare-versions": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.5.1.tgz", + "integrity": "sha512-9fGPIB7C6AyM18CJJBHt5EnCZDG3oiTJYy0NjfIAGjKpzv0tkxWko7TNQHF5ymqm7IH03tqmeuBxtvD+Izh6mg==", + "dev": true + }, "component-emitter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", @@ -1413,12 +1437,53 @@ "integrity": "sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==", "dev": true }, + "connect": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz", + "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==", + "dev": true, + "requires": { + "debug": "2.6.9", + "finalhandler": "1.1.2", + "parseurl": "~1.3.3", + "utils-merge": "1.0.1" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, + "connect-livereload": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.6.1.tgz", + "integrity": "sha512-3R0kMOdL7CjJpU66fzAkCe6HNtd3AavCS4m+uW4KtJjrdGPT0SQEZieAYd+cm+lJoBznNQ4lqipYWkhBMgk00g==", + "dev": true + }, "contains-path": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz", "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=", "dev": true }, + "continuable-cache": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/continuable-cache/-/continuable-cache-0.3.1.tgz", + "integrity": "sha1-vXJ6f67XfnH/OYWskzUakSczrQ8=", + "dev": true + }, "convert-source-map": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", @@ -1459,42 +1524,29 @@ "dev": true }, "cosmiconfig": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz", - "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", "dev": true, "requires": { - "import-fresh": "^2.0.0", - "is-directory": "^0.3.1", - "js-yaml": "^3.13.1", - "parse-json": "^4.0.0" + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" }, "dependencies": { - "import-fresh": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", - "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=", - "dev": true, - "requires": { - "caller-path": "^2.0.0", - "resolve-from": "^3.0.0" - } - }, "parse-json": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", + "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", "dev": true, "requires": { + "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", - "json-parse-better-errors": "^1.0.1" + "json-parse-better-errors": "^1.0.1", + "lines-and-columns": "^1.1.6" } - }, - "resolve-from": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", - "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", - "dev": true } } }, @@ -1512,12 +1564,12 @@ } }, "cross-env": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz", - "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.0.tgz", + "integrity": "sha512-rV6M9ldNgmwP7bx5u6rZsTbYidzwvrwIYZnT08hSGLcQCcggofgFW+sNe7IhA1SRauPS0QuLbbX+wdNtpqE5CQ==", "dev": true, "requires": { - "cross-spawn": "^7.0.0" + "cross-spawn": "^7.0.1" } }, "cross-spawn": { @@ -1538,9 +1590,9 @@ "dev": true }, "cssstyle": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.0.0.tgz", - "integrity": "sha512-QXSAu2WBsSRXCPjvI43Y40m6fMevvyRm8JVAuF9ksQz5jha4pWP1wpaK7Yu5oLFc6+XAY+hj8YhefyXcBB53gg==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.2.0.tgz", + "integrity": "sha512-sEb3XFPx3jNnCAMtqrXPDeSgQr+jojtCeNf8cvMNMh1cG970+lljssvQDzPq6lmmJu2Vhqood/gtEomBiHOGnA==", "dev": true, "requires": { "cssom": "~0.3.6" @@ -1574,14 +1626,14 @@ } }, "data-urls": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz", - "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", + "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==", "dev": true, "requires": { - "abab": "^2.0.0", - "whatwg-mimetype": "^2.2.0", - "whatwg-url": "^7.0.0" + "abab": "^2.0.3", + "whatwg-mimetype": "^2.3.0", + "whatwg-url": "^8.0.0" } }, "debug": { @@ -1599,6 +1651,12 @@ "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", "dev": true }, + "decimal.js": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.0.tgz", + "integrity": "sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw==", + "dev": true + }, "decode-uri-component": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", @@ -1732,6 +1790,18 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", + "dev": true + }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", + "dev": true + }, "detect-file": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz", @@ -1763,12 +1833,12 @@ } }, "domexception": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", - "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz", + "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==", "dev": true, "requires": { - "webidl-conversions": "^4.0.2" + "webidl-conversions": "^5.0.0" } }, "duplexify": { @@ -1809,12 +1879,24 @@ "integrity": "sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==", "dev": true }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", + "dev": true + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "dev": true }, + "encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", + "dev": true + }, "end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -1824,6 +1906,15 @@ "once": "^1.4.0" } }, + "error": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/error/-/error-7.2.1.tgz", + "integrity": "sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==", + "dev": true, + "requires": { + "string-template": "~0.2.1" + } + }, "error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -1834,9 +1925,9 @@ } }, "es-abstract": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0.tgz", - "integrity": "sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==", + "version": "1.17.4", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz", + "integrity": "sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==", "dev": true, "requires": { "es-to-primitive": "^1.2.1", @@ -1913,6 +2004,12 @@ "es6-symbol": "^3.1.1" } }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=", + "dev": true + }, "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", @@ -1920,24 +2017,18 @@ "dev": true }, "escodegen": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.12.0.tgz", - "integrity": "sha512-TuA+EhsanGcme5T3R0L80u4t8CpbXQjegRmf7+FPTJrtCTErXFeelblRgHQa1FofEzqYYJmJ/OqjTwREp9qgmg==", + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.13.0.tgz", + "integrity": "sha512-eYk2dCkxR07DsHA/X2hRBj0CFAZeri/LyDMc0C8JT1Hqi6JnVpMhJ7XFITbb0+yZS3lVkaPL2oCkZ3AVmeVbMw==", "dev": true, "requires": { - "esprima": "^3.1.3", + "esprima": "^4.0.1", "estraverse": "^4.2.0", "esutils": "^2.0.2", "optionator": "^0.8.1", "source-map": "~0.6.1" }, "dependencies": { - "esprima": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", - "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -2063,13 +2154,13 @@ } }, "eslint-import-resolver-node": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz", - "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==", + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz", + "integrity": "sha512-b8crLDo0M5RSe5YG8Pu2DYBj71tSB6OvXkfzwbJU2w7y8P4/yo0MyF8jU26IEuEuHF2K5/gcAJE3LhQGqBBbVg==", "dev": true, "requires": { "debug": "^2.6.9", - "resolve": "^1.5.0" + "resolve": "^1.13.1" }, "dependencies": { "debug": { @@ -2090,9 +2181,9 @@ } }, "eslint-module-utils": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.5.0.tgz", - "integrity": "sha512-kCo8pZaNz2dsAW7nCUjuVoI11EBXXpIzfNxmaoLhXoRDOnqXLC4iSGVRdZPhOitfbdEfMEfKOiENaK6wDPZEGw==", + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.5.2.tgz", + "integrity": "sha512-LGScZ/JSlqGKiT8OC+cYRxseMjyqt6QO54nl281CK93unD89ijSeRV6An8Ci/2nvWVKe8K/Tqdm75RQoIOCr+Q==", "dev": true, "requires": { "debug": "^2.6.9", @@ -2117,9 +2208,9 @@ } }, "eslint-plugin-import": { - "version": "2.19.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.19.1.tgz", - "integrity": "sha512-x68131aKoCZlCae7rDXKSAQmbT5DQuManyXo2sK6fJJ0aK5CWAkv6A6HJZGgqC8IhjQxYPgo6/IY4Oz8AFsbBw==", + "version": "2.20.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz", + "integrity": "sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==", "dev": true, "requires": { "array-includes": "^3.0.3", @@ -2235,71 +2326,11 @@ "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", "dev": true }, - "execa": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", - "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", - "dev": true, - "requires": { - "cross-spawn": "^6.0.0", - "get-stream": "^4.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - }, - "dependencies": { - "cross-spawn": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", - "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", - "dev": true, - "requires": { - "nice-try": "^1.0.4", - "path-key": "^2.0.1", - "semver": "^5.5.0", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, - "path-key": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", - "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", - "dev": true - }, - "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true - }, - "shebang-command": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", - "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", - "dev": true, - "requires": { - "shebang-regex": "^1.0.0" - } - }, - "shebang-regex": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", - "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", - "dev": true - }, - "which": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - } - } + "etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", + "dev": true }, "expand-brackets": { "version": "2.1.4", @@ -2499,9 +2530,9 @@ } }, "fast-deep-equal": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz", + "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==", "dev": true }, "fast-glob": { @@ -2538,6 +2569,15 @@ "reusify": "^1.0.0" } }, + "faye-websocket": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", + "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=", + "dev": true, + "requires": { + "websocket-driver": ">=0.5.1" + } + }, "figures": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz", @@ -2572,6 +2612,38 @@ "to-regex-range": "^5.0.1" } }, + "finalhandler": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", + "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", + "dev": true, + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "statuses": "~1.5.0", + "unpipe": "~1.0.0" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, "find-cache-dir": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.2.0.tgz", @@ -2603,9 +2675,9 @@ } }, "p-limit": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", - "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz", + "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -2652,6 +2724,15 @@ "locate-path": "^2.0.0" } }, + "find-versions": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz", + "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==", + "dev": true, + "requires": { + "semver-regex": "^2.0.0" + } + }, "findup-sync": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz", @@ -2894,6 +2975,12 @@ "map-cache": "^0.2.2" } }, + "fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=", + "dev": true + }, "fromentries": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/fromentries/-/fromentries-1.2.0.tgz", @@ -3467,6 +3554,12 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "gensync": { + "version": "1.0.0-beta.1", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", + "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==", + "dev": true + }, "get-caller-file": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", @@ -3479,33 +3572,6 @@ "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=", "dev": true }, - "get-stdin": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz", - "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==", - "dev": true - }, - "get-stream": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", - "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", - "dev": true, - "requires": { - "pump": "^3.0.0" - }, - "dependencies": { - "pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "dev": true, - "requires": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - } - } - }, "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -3642,9 +3708,9 @@ } }, "globby": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz", - "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==", + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz", + "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==", "dev": true, "requires": { "@types/glob": "^7.1.1", @@ -3729,17 +3795,29 @@ "vinyl": "^2.0.0" } }, - "gulp-footer": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/gulp-footer/-/gulp-footer-2.0.2.tgz", - "integrity": "sha512-HsG5VOgKHFRqZXnHGI6oGhPDg70p9pobM+dYOnjBZVLMQUHzLG6bfaPNRJ7XG707E+vWO3TfN0CND9UrYhk94g==", + "gulp-connect": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/gulp-connect/-/gulp-connect-5.7.0.tgz", + "integrity": "sha512-8tRcC6wgXMLakpPw9M7GRJIhxkYdgZsXwn7n56BA2bQYGLR9NOPhMzx7js+qYDy6vhNkbApGKURjAw1FjY4pNA==", "dev": true, "requires": { - "lodash._reescape": "^3.0.0", - "lodash._reevaluate": "^3.0.0", - "lodash._reinterpolate": "^3.0.0", - "lodash.template": "^3.6.2", - "map-stream": "0.0.7" + "ansi-colors": "^2.0.5", + "connect": "^3.6.6", + "connect-livereload": "^0.6.0", + "fancy-log": "^1.3.2", + "map-stream": "^0.0.7", + "send": "^0.16.2", + "serve-index": "^1.9.1", + "serve-static": "^1.13.2", + "tiny-lr": "^1.1.1" + }, + "dependencies": { + "ansi-colors": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-2.0.5.tgz", + "integrity": "sha512-yAdfUZ+c2wetVNIFsNRn44THW+Lty6S5TwMpUfLA/UaGhiXbBv/F8E60/1hMLd0cnF/CDoWH8vzVaI5bAcHCjw==", + "dev": true + } } }, "gulp-header": { @@ -3752,27 +3830,6 @@ "lodash.template": "^4.5.0", "map-stream": "0.0.7", "through2": "^2.0.0" - }, - "dependencies": { - "lodash.template": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", - "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==", - "dev": true, - "requires": { - "lodash._reinterpolate": "^3.0.0", - "lodash.templatesettings": "^4.0.0" - } - }, - "lodash.templatesettings": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", - "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", - "dev": true, - "requires": { - "lodash._reinterpolate": "^3.0.0" - } - } } }, "gulp-replace": { @@ -3905,14 +3962,6 @@ "requires": { "is-stream": "^2.0.0", "type-fest": "^0.8.0" - }, - "dependencies": { - "is-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz", - "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==", - "dev": true - } } }, "he": { @@ -3937,12 +3986,12 @@ "dev": true }, "html-encoding-sniffer": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz", - "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.0.tgz", + "integrity": "sha512-Y9prnPKkM7FXxQevZ5UH8Z6aVTY0ede1tHquck5UxGmKWDshxXh95gSa2xXYjS8AsGO5iOvrCI5+GttRKnLdNA==", "dev": true, "requires": { - "whatwg-encoding": "^1.0.1" + "whatwg-encoding": "^1.0.5" } }, "html-escaper": { @@ -3951,6 +4000,32 @@ "integrity": "sha512-a4u9BeERWGu/S8JiWEAQcdrg9v4QArtP9keViQjGMdff20fBdd8waotXaNmODqBe6uZ3Nafi7K/ho4gCQHV3Ig==", "dev": true }, + "http-errors": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", + "dev": true, + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.0", + "statuses": ">= 1.4.0 < 2" + }, + "dependencies": { + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + } + } + }, + "http-parser-js": { + "version": "0.4.10", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz", + "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=", + "dev": true + }, "http-signature": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", @@ -3963,24 +4038,58 @@ } }, "husky": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/husky/-/husky-3.1.0.tgz", - "integrity": "sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.1.tgz", + "integrity": "sha512-Qa0lRreeIf4Tl92sSs42ER6qc3hzoyQPPorzOrFWfPEVbdi6LuvJEqWKPk905fOWIR76iBpp7ECZNIwk+a8xuQ==", "dev": true, "requires": { - "chalk": "^2.4.2", + "chalk": "^3.0.0", "ci-info": "^2.0.0", - "cosmiconfig": "^5.2.1", - "execa": "^1.0.0", - "get-stdin": "^7.0.0", + "compare-versions": "^3.5.1", + "cosmiconfig": "^6.0.0", + "find-versions": "^3.2.0", "opencollective-postinstall": "^2.0.2", "pkg-dir": "^4.2.0", "please-upgrade-node": "^3.2.0", - "read-pkg": "^5.2.0", - "run-node": "^1.0.0", - "slash": "^3.0.0" + "slash": "^3.0.0", + "which-pm-runs": "^1.0.0" }, "dependencies": { + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -3991,6 +4100,12 @@ "path-exists": "^4.0.0" } }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -4001,9 +4116,9 @@ } }, "p-limit": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", - "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz", + "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -4024,18 +4139,6 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, - "parse-json": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", - "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "error-ex": "^1.3.1", - "json-parse-better-errors": "^1.0.1", - "lines-and-columns": "^1.1.6" - } - }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -4051,23 +4154,14 @@ "find-up": "^4.0.0" } }, - "read-pkg": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", - "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==", + "supports-color": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", + "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", "dev": true, "requires": { - "@types/normalize-package-data": "^2.4.0", - "normalize-package-data": "^2.5.0", - "parse-json": "^5.0.0", - "type-fest": "^0.6.0" + "has-flag": "^4.0.0" } - }, - "type-fest": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", - "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", - "dev": true } } }, @@ -4131,9 +4225,9 @@ "dev": true }, "inquirer": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.1.tgz", - "integrity": "sha512-V1FFQ3TIO15det8PijPLFR9M9baSlnRs9nL7zWu1MNVA2T9YVl9ZbrHJhYs7e9X8jeMZ3lr2JH/rdHFgNCBdYw==", + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz", + "integrity": "sha512-Bu5Td5+j11sCkqfqmUTiwv+tWisMtP0L7Q8WrqA2C/BbBhy1YTdFrvjjlrKq8oagA/tLQBski2Gcx/Sqyi2qSQ==", "dev": true, "requires": { "ansi-escapes": "^4.2.1", @@ -4271,10 +4365,10 @@ } } }, - "is-directory": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz", - "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", + "is-docker": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.0.0.tgz", + "integrity": "sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==", "dev": true }, "is-extendable": { @@ -4362,9 +4456,9 @@ } }, "is-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz", + "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==", "dev": true }, "is-string": { @@ -4415,6 +4509,12 @@ "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", "dev": true }, + "is-wsl": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz", + "integrity": "sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==", + "dev": true + }, "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", @@ -4455,9 +4555,9 @@ } }, "istanbul-lib-instrument": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.0.tgz", - "integrity": "sha512-Nm4wVHdo7ZXSG30KjZ2Wl5SU/Bw7bDx1PdaiIFzEStdjs0H12mOTncn1GVYuqQSaZxpg87VGBRsVRPGD2cD1AQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz", + "integrity": "sha512-imIchxnodll7pvQBYOqUu88EufLCU56LMeFPZZM/fJZ1irYcYdqroaV+ACK1Ila8ls09iEYArp+nqyC6lW1Vfg==", "dev": true, "requires": { "@babel/core": "^7.7.5", @@ -4575,36 +4675,35 @@ "dev": true }, "jsdom": { - "version": "15.2.1", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-15.2.1.tgz", - "integrity": "sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==", + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.1.0.tgz", + "integrity": "sha512-kpIcNAuZYc/L17WADOOHslz/q5+3SipP/iRb3j6zd1zQ6pFJubLi/VCdD3NqBpj/IKKK4YXny1vv44rbEUSGFg==", "dev": true, "requires": { - "abab": "^2.0.0", + "abab": "^2.0.3", "acorn": "^7.1.0", "acorn-globals": "^4.3.2", - "array-equal": "^1.0.0", - "cssom": "^0.4.1", - "cssstyle": "^2.0.0", - "data-urls": "^1.1.0", - "domexception": "^1.0.1", - "escodegen": "^1.11.1", - "html-encoding-sniffer": "^1.0.2", + "cssom": "^0.4.4", + "cssstyle": "^2.1.0", + "data-urls": "^2.0.0", + "decimal.js": "^10.2.0", + "domexception": "^2.0.1", + "escodegen": "^1.12.1", + "html-encoding-sniffer": "^2.0.0", "nwsapi": "^2.2.0", - "parse5": "5.1.0", - "pn": "^1.1.0", + "parse5": "5.1.1", "request": "^2.88.0", - "request-promise-native": "^1.0.7", - "saxes": "^3.1.9", + "request-promise-native": "^1.0.8", + "saxes": "^4.0.2", "symbol-tree": "^3.2.2", "tough-cookie": "^3.0.1", "w3c-hr-time": "^1.0.1", - "w3c-xmlserializer": "^1.1.2", - "webidl-conversions": "^4.0.2", + "w3c-xmlserializer": "^2.0.0", + "webidl-conversions": "^5.0.0", "whatwg-encoding": "^1.0.5", "whatwg-mimetype": "^2.3.0", - "whatwg-url": "^7.0.0", - "ws": "^7.0.0", + "whatwg-url": "^8.0.0", + "ws": "^7.2.1", "xml-name-validator": "^3.0.0" }, "dependencies": { @@ -4685,9 +4784,9 @@ "dev": true }, "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, "last-run": { @@ -4765,6 +4864,12 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, + "livereload-js": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.4.0.tgz", + "integrity": "sha512-XPQH8Z2GDP/Hwz2PCDrh2mth4yFejwA1OZ/81Ti3LgKyhDcEjsSsqFWZojHG0va/duGd+WyosY7eXLDoOyqcPw==", + "dev": true + }, "load-json-file": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", @@ -4793,104 +4898,18 @@ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "dev": true }, - "lodash._basecopy": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz", - "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=", - "dev": true - }, - "lodash._basetostring": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz", - "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U=", - "dev": true - }, - "lodash._basevalues": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz", - "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=", - "dev": true - }, - "lodash._getnative": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", - "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=", - "dev": true - }, - "lodash._isiterateecall": { - "version": "3.0.9", - "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz", - "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=", - "dev": true - }, - "lodash._reescape": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz", - "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo=", - "dev": true - }, - "lodash._reevaluate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz", - "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0=", - "dev": true - }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", "dev": true }, - "lodash._root": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz", - "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=", - "dev": true - }, - "lodash.escape": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz", - "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=", - "dev": true, - "requires": { - "lodash._root": "^3.0.0" - } - }, "lodash.flattendeep": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", "dev": true }, - "lodash.isarguments": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", - "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=", - "dev": true - }, - "lodash.isarray": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", - "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", - "dev": true - }, - "lodash.keys": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz", - "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", - "dev": true, - "requires": { - "lodash._getnative": "^3.0.0", - "lodash.isarguments": "^3.0.0", - "lodash.isarray": "^3.0.0" - } - }, - "lodash.restparam": { - "version": "3.6.1", - "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz", - "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=", - "dev": true - }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", @@ -4898,30 +4917,22 @@ "dev": true }, "lodash.template": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz", - "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", + "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==", "dev": true, "requires": { - "lodash._basecopy": "^3.0.0", - "lodash._basetostring": "^3.0.0", - "lodash._basevalues": "^3.0.0", - "lodash._isiterateecall": "^3.0.0", "lodash._reinterpolate": "^3.0.0", - "lodash.escape": "^3.0.0", - "lodash.keys": "^3.0.0", - "lodash.restparam": "^3.0.0", - "lodash.templatesettings": "^3.0.0" + "lodash.templatesettings": "^4.0.0" } }, "lodash.templatesettings": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz", - "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", + "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", "dev": true, "requires": { - "lodash._reinterpolate": "^3.0.0", - "lodash.escape": "^3.0.0" + "lodash._reinterpolate": "^3.0.0" } }, "log-driver": { @@ -5132,19 +5143,25 @@ "picomatch": "^2.0.5" } }, + "mime": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", + "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==", + "dev": true + }, "mime-db": { - "version": "1.42.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz", - "integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz", + "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==", "dev": true }, "mime-types": { - "version": "2.1.25", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.25.tgz", - "integrity": "sha512-5KhStqB5xpTAeGqKBAMgwaYMnQik7teQN4IAzC7npDv6kzeU6prfkR67bc87J1kWMPGkoaZSq1npmexMgkmEVg==", + "version": "2.1.26", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz", + "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==", "dev": true, "requires": { - "mime-db": "1.42.0" + "mime-db": "1.43.0" } }, "mimic-fn": { @@ -5207,13 +5224,14 @@ } }, "mocha": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.2.tgz", - "integrity": "sha512-FgDS9Re79yU1xz5d+C4rv1G7QagNGHZ+iXF81hO8zY35YZZcLEsJVfFolfsqKFWunATEvNzMK0r/CwWd/szO9A==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/mocha/-/mocha-7.0.1.tgz", + "integrity": "sha512-9eWmWTdHLXh72rGrdZjNbG3aa1/3NRPpul1z0D979QpEnFdCG0Q5tv834N+94QEN2cysfV72YocQ3fn87s70fg==", "dev": true, "requires": { "ansi-colors": "3.2.3", "browser-stdout": "1.3.1", + "chokidar": "3.3.0", "debug": "3.2.6", "diff": "3.5.0", "escape-string-regexp": "1.0.5", @@ -5226,7 +5244,7 @@ "minimatch": "3.0.4", "mkdirp": "0.5.1", "ms": "2.1.1", - "node-environment-flags": "1.0.5", + "node-environment-flags": "1.0.6", "object.assign": "4.1.0", "strip-json-comments": "2.0.1", "supports-color": "6.0.0", @@ -5243,12 +5261,44 @@ "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==", "dev": true }, + "anymatch": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", + "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", + "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", + "dev": true + }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, + "chokidar": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.0.tgz", + "integrity": "sha512-dGmKLDdT3Gdl7fBUe8XK+gAtGmzy5Fn0XkkWQuYxGIgWVPPse2CxFA5mtrlD0TOHaHjEUqkWNyP1XdHoJES/4A==", + "dev": true, + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.1.1", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.2.0" + } + }, "cliui": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", @@ -5284,6 +5334,13 @@ "locate-path": "^3.0.0" } }, + "fsevents": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", + "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", + "dev": true, + "optional": true + }, "get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -5304,6 +5361,15 @@ "path-is-absolute": "^1.0.0" } }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-fullwidth-code-point": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", @@ -5326,10 +5392,16 @@ "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + }, "p-limit": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", - "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz", + "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -5350,6 +5422,15 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, + "readdirp": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.2.0.tgz", + "integrity": "sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==", + "dev": true, + "requires": { + "picomatch": "^2.0.4" + } + }, "require-main-filename": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", @@ -5494,6 +5575,12 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, + "negotiator": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", + "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==", + "dev": true + }, "next-tick": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", @@ -5507,9 +5594,9 @@ "dev": true }, "node-environment-flags": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.5.tgz", - "integrity": "sha512-VNYPRfGfmZLx0Ye20jWzHUjyTW/c+6Wq+iLhDzUI4XmhrDd9l/FozXV3F2xOaXjvp0co0+v1YSR3CMP6g+VvLQ==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.6.tgz", + "integrity": "sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==", "dev": true, "requires": { "object.getownpropertydescriptors": "^2.0.3", @@ -5533,6 +5620,16 @@ "process-on-spawn": "^1.0.0" } }, + "nopt": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", + "dev": true, + "requires": { + "abbrev": "1", + "osenv": "^0.1.4" + } + }, "normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -5571,23 +5668,6 @@ "once": "^1.3.2" } }, - "npm-run-path": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", - "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", - "dev": true, - "requires": { - "path-key": "^2.0.0" - }, - "dependencies": { - "path-key": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", - "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", - "dev": true - } - } - }, "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", @@ -5637,9 +5717,9 @@ }, "dependencies": { "ansi-styles": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.0.tgz", - "integrity": "sha512-7kFQgnEaMdRtwf6uSfUnVr9gSGC7faurn+J/Mv90/W+iTtN0405/nLdopfMWwchyxhbGYl6TC4Sccn9TUkGAgg==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", "dev": true, "requires": { "@types/color-name": "^1.1.1", @@ -5704,9 +5784,9 @@ } }, "p-limit": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", - "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz", + "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -5778,9 +5858,9 @@ "dev": true }, "yargs": { - "version": "15.0.2", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.0.2.tgz", - "integrity": "sha512-GH/X/hYt+x5hOat4LMnCqMd8r5Cv78heOMIJn1hr7QPPBqfeC6p89Y78+WB9yGDvfpCvgasfmWLzNzEioOUD9Q==", + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.1.0.tgz", + "integrity": "sha512-T39FNN1b6hCW4SOIk1XyTOWxtXdcen0t+XYrysQmChzSipvhBO8Bj0nK1ozAasdk24dNWuMZvr4k24nz+8HHLg==", "dev": true, "requires": { "cliui": "^6.0.0", @@ -5965,6 +6045,15 @@ "has": "^1.0.3" } }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "dev": true, + "requires": { + "ee-first": "1.1.1" + } + }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -5983,6 +6072,16 @@ "mimic-fn": "^2.1.0" } }, + "open": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/open/-/open-7.0.2.tgz", + "integrity": "sha512-70E/pFTPr7nZ9nLDPNTcj3IVqnNvKuP4VsBmoKV9YGTnChe0mlS3C4qM7qKarhZ8rGaHKLfo+vBTHXDp6ZSyLQ==", + "dev": true, + "requires": { + "is-docker": "^2.0.0", + "is-wsl": "^2.1.1" + } + }, "opencollective-postinstall": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz", @@ -6018,6 +6117,12 @@ "readable-stream": "^2.0.1" } }, + "os-homedir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "dev": true + }, "os-locale": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", @@ -6033,11 +6138,15 @@ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, - "p-finally": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", - "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", - "dev": true + "osenv": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", + "dev": true, + "requires": { + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" + } }, "p-limit": { "version": "1.3.0", @@ -6084,6 +6193,17 @@ "release-zalgo": "^1.0.0" } }, + "pakket": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/pakket/-/pakket-0.0.0.tgz", + "integrity": "sha512-AZ2BsXDeGHKvBXCzmSouKlQMe+ZZFIEACG1MH8/NUEOV9rvOz2fh70np5wwxLYj66+GlQKHPCldWbpcFqXILww==", + "dev": true, + "requires": { + "nopt": "^4.0.1", + "terser": "^4.6.3", + "vinyl": "^2.2.0" + } + }, "parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -6126,9 +6246,15 @@ "dev": true }, "parse5": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", - "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "dev": true + }, + "parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", "dev": true }, "pascalcase": { @@ -6201,9 +6327,9 @@ "dev": true }, "picomatch": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.1.1.tgz", - "integrity": "sha512-OYMyqkKzK7blWO/+XZYP6w8hH0LDvkBvdvKukti+7kqYFCiEAk+gI3DWnryapc0Dau05ugGTy0foQ6mqn4AHYA==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz", + "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==", "dev": true }, "pify": { @@ -6257,12 +6383,6 @@ "extend-shallow": "^3.0.2" } }, - "pn": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", - "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", - "dev": true - }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -6341,6 +6461,30 @@ "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", "dev": true }, + "range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "dev": true + }, + "raw-body": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.7.tgz", + "integrity": "sha1-HQJ8K/oRasxmI7yo8AAWVyqH1CU=", + "dev": true, + "requires": { + "bytes": "1", + "string_decoder": "0.10" + }, + "dependencies": { + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "dev": true + } + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -6374,9 +6518,9 @@ } }, "readable-stream": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", "dev": true, "requires": { "core-util-is": "~1.0.0", @@ -6521,6 +6665,12 @@ "resolve": "^1.1.6" } }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==", + "dev": true + }, "regex-not": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz", @@ -6674,9 +6824,9 @@ "dev": true }, "resolve": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz", - "integrity": "sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==", + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz", + "integrity": "sha512-+hTmAldEGE80U2wJJDC1lebb5jWqvTYAfm3YZ1ckk1gBr0MnCqUKlwK1e+anaFljIl+F5tR5IoZcm4ZDA1zMQw==", "dev": true, "requires": { "path-parse": "^1.0.6" @@ -6736,9 +6886,9 @@ "dev": true }, "rimraf": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz", - "integrity": "sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.1.tgz", + "integrity": "sha512-IQ4ikL8SjBiEDZfk+DFVwqRK8md24RWMEJkdSlgNLkyyAImcjf8SWvU1qFMDOb4igBClbTQ/ugPqXcRwdFTxZw==", "dev": true, "requires": { "glob": "^7.1.3" @@ -6753,12 +6903,6 @@ "is-promise": "^2.1.0" } }, - "run-node": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz", - "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==", - "dev": true - }, "run-parallel": { "version": "1.1.9", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz", @@ -6780,6 +6924,12 @@ "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==", "dev": true }, + "safe-json-parse": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-1.0.1.tgz", + "integrity": "sha1-PnZyPjjf3aE8mx0poeB//uSzC1c=", + "dev": true + }, "safe-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", @@ -6796,12 +6946,12 @@ "dev": true }, "saxes": { - "version": "3.1.11", - "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz", - "integrity": "sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-4.0.2.tgz", + "integrity": "sha512-EZOTeQ4bgkOaGCDaTKux+LaRNcLNbdbvMH7R3/yjEEULPEmqvkFbFub6DJhJTub2iGMT93CfpZ5LTdKZmAbVeQ==", "dev": true, "requires": { - "xmlchars": "^2.1.1" + "xmlchars": "^2.2.0" } }, "semver": { @@ -6825,6 +6975,171 @@ "sver-compat": "^1.5.0" } }, + "semver-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz", + "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==", + "dev": true + }, + "send": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", + "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", + "dev": true, + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.6.2", + "mime": "1.4.1", + "ms": "2.0.0", + "on-finished": "~2.3.0", + "range-parser": "~1.2.0", + "statuses": "~1.4.0" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "statuses": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", + "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==", + "dev": true + } + } + }, + "serve-index": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", + "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=", + "dev": true, + "requires": { + "accepts": "~1.3.4", + "batch": "0.6.1", + "debug": "2.6.9", + "escape-html": "~1.0.3", + "http-errors": "~1.6.2", + "mime-types": "~2.1.17", + "parseurl": "~1.3.2" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, + "serve-static": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz", + "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==", + "dev": true, + "requires": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.17.1" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + }, + "dependencies": { + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, + "http-errors": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", + "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==", + "dev": true, + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.4", + "setprototypeof": "1.1.1", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.0" + } + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true + }, + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "dev": true + }, + "send": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", + "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", + "dev": true, + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.7.2", + "mime": "1.6.0", + "ms": "2.1.1", + "on-finished": "~2.3.0", + "range-parser": "~1.2.1", + "statuses": "~1.5.0" + } + }, + "setprototypeof": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", + "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==", + "dev": true + } + } + }, "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", @@ -6854,6 +7169,12 @@ } } }, + "setprototypeof": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==", + "dev": true + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -7176,6 +7497,12 @@ } } }, + "statuses": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", + "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", + "dev": true + }, "stealthy-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz", @@ -7194,6 +7521,12 @@ "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", "dev": true }, + "string-template": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz", + "integrity": "sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=", + "dev": true + }, "string-width": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz", @@ -7276,12 +7609,6 @@ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "dev": true }, - "strip-eof": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", - "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", - "dev": true - }, "strip-json-comments": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz", @@ -7351,9 +7678,9 @@ } }, "terser": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/terser/-/terser-4.4.3.tgz", - "integrity": "sha512-0ikKraVtRDKGzHrzkCv5rUNDzqlhmhowOBqC0XqUHFpW+vJ45+20/IFBcebwKfiS2Z9fJin6Eo+F1zLZsxi8RA==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.3.tgz", + "integrity": "sha512-Lw+ieAXmY69d09IIc/yqeBqXpEQIpDGZqT34ui1QWXIUpR2RjbqEkT8X7Lgex19hslSqcWM5iMN2kM11eMsESQ==", "dev": true, "requires": { "commander": "^2.20.0", @@ -7424,6 +7751,31 @@ "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=", "dev": true }, + "tiny-lr": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-1.1.1.tgz", + "integrity": "sha512-44yhA3tsaRoMOjQQ+5v5mVdqef+kH6Qze9jTpqtVufgYjYt08zyZAwNwwVBj3i1rJMnR52IxOW0LK0vBzgAkuA==", + "dev": true, + "requires": { + "body": "^5.1.0", + "debug": "^3.1.0", + "faye-websocket": "~0.10.0", + "livereload-js": "^2.3.0", + "object-assign": "^4.1.0", + "qs": "^6.4.0" + }, + "dependencies": { + "debug": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", + "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + } + } + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -7499,6 +7851,12 @@ "through2": "^2.0.3" } }, + "toidentifier": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", + "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==", + "dev": true + }, "tough-cookie": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", @@ -7518,12 +7876,12 @@ } }, "tr46": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", - "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.0.0.tgz", + "integrity": "sha512-LrErSqfhdUw73AC/eXV2fEmNkvgSYxfm5lvxnLvuVgoVDknvD28Pa5FeDGc8RuVouDxUD3GnHHFv7xnBp7As5w==", "dev": true, "requires": { - "punycode": "^2.1.0" + "punycode": "^2.1.1" } }, "tslib": { @@ -7640,6 +7998,12 @@ "through2-filter": "^3.0.0" } }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", + "dev": true + }, "unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", @@ -7713,10 +8077,16 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, + "utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", + "dev": true + }, "uuid": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", - "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", "dev": true }, "v8-compile-cache": { @@ -7834,20 +8204,35 @@ } }, "w3c-xmlserializer": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz", - "integrity": "sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz", + "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==", "dev": true, "requires": { - "domexception": "^1.0.1", - "webidl-conversions": "^4.0.2", "xml-name-validator": "^3.0.0" } }, "webidl-conversions": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", - "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz", + "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==", + "dev": true + }, + "websocket-driver": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz", + "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==", + "dev": true, + "requires": { + "http-parser-js": ">=0.4.0 <0.4.11", + "safe-buffer": ">=5.1.0", + "websocket-extensions": ">=0.1.1" + } + }, + "websocket-extensions": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz", + "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==", "dev": true }, "whatwg-encoding": { @@ -7866,14 +8251,14 @@ "dev": true }, "whatwg-url": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz", - "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.0.0.tgz", + "integrity": "sha512-41ou2Dugpij8/LPO5Pq64K5q++MnRCBpEHvQr26/mArEKTkCV5aoXIqyhuYtE0pkqScXwhf2JP57rkRTYM29lQ==", "dev": true, "requires": { "lodash.sortby": "^4.7.0", - "tr46": "^1.0.1", - "webidl-conversions": "^4.0.2" + "tr46": "^2.0.0", + "webidl-conversions": "^5.0.0" } }, "which": { @@ -7891,6 +8276,12 @@ "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=", "dev": true }, + "which-pm-runs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz", + "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=", + "dev": true + }, "wide-align": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", @@ -8043,6 +8434,15 @@ "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", "dev": true }, + "yaml": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.7.2.tgz", + "integrity": "sha512-qXROVp90sb83XtAoqE8bP9RwAkTTZbugRUTm5YeFCBfNRPEp2YzTeqWiz7m5OORHzEvrA/qcGS8hp/E+MMROYw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.6.3" + } + }, "yargs": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", @@ -8249,9 +8649,9 @@ } }, "p-limit": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", - "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz", + "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==", "dev": true, "requires": { "p-try": "^2.0.0" diff --git a/package.json b/package.json index 9cf0a79..5a18c29 100644 --- a/package.json +++ b/package.json @@ -1,24 +1,29 @@ { "name": "@mobilabs/svg", - "version": "0.0.3", + "version": "0.0.4", "description": "A tiny Javascript library intended to create and manage SVG elements in the DOM", - "main": "index.js", + "main": "_dist/lib/svg.js", "bin": {}, "scripts": { "build": "gulp build", "watch": "gulp watch", - "makedist": "gulp makedist", + "dev": "gulp rundev", "test": "cross-env NODE_ENV=test nyc --reporter=lcov mocha ./test/main.js", - "check-coverage": "nyc check-coverage --statements 10 --branches 5 --functions 10 --lines 10", "display-coverage": "opener ./coverage/lcov-report/index.html", + "check-coverage": "nyc check-coverage --statements 60 --branches 30 --functions 60 --lines 60", "report-coverage": "nyc report --reporter=text-lcov | coveralls", - "report": "nyc report" + "report": "nyc report", + "makedist": "gulp makedist", + "app": "gulp runapp", + "doc": "" }, "repository": { "type": "git", "url": "https://github.com/jclo/svg.git" }, - "keywords": [], + "keywords": [ + "ES6" + ], "author": { "name": "Mobilabs", "email": "contact@mobilabs.fr", @@ -31,24 +36,26 @@ "homepage": "https://github.com/jclo/svg", "dependencies": {}, "devDependencies": { - "chai": "4.2.0", - "coveralls": "3.0.9", - "cross-env": "6.0.3", - "del": "5.1.0", - "eslint": "6.8.0", - "eslint-config-airbnb-base": "14.0.0", - "eslint-plugin-import": "2.19.1", - "gulp": "4.0.2", - "gulp-concat": "2.6.1", - "gulp-footer": "2.0.2", - "gulp-header": "2.0.9", - "gulp-replace": "1.0.0", - "gulp-uglify-es": "2.0.0", - "husky": "3.1.0", - "jsdom": "15.2.1", - "mocha": "6.2.2", - "nyc": "15.0.0", - "opener": "1.5.1" + "chai": "^4.2.0", + "coveralls": "^3.0.9", + "cross-env": "^7.0.0", + "del": "^5.1.0", + "eslint": "^6.8.0", + "eslint-config-airbnb-base": "^14.0.0", + "eslint-plugin-import": "^2.20.1", + "gulp": "^4.0.2", + "gulp-concat": "^2.6.1", + "gulp-connect": "^5.7.0", + "gulp-header": "^2.0.9", + "gulp-replace": "^1.0.0", + "gulp-uglify-es": "^2.0.0", + "husky": "^4.2.1", + "jsdom": "^16.1.0", + "mocha": "^7.0.1", + "nyc": "^15.0.0", + "open": "^7.0.2", + "opener": "^1.5.1", + "pakket": "0.0.0" }, "publishConfig": { "access": "public" diff --git a/src/_footer b/src/_footer deleted file mode 100644 index 9408919..0000000 --- a/src/_footer +++ /dev/null @@ -1,3 +0,0 @@ - // Returns the library name: - return SVG; -})); diff --git a/src/_header b/src/_header deleted file mode 100644 index 58c874e..0000000 --- a/src/_header +++ /dev/null @@ -1,41 +0,0 @@ -// Based on ES6.lib template v0.0.3 -// ESLint declarations -/* global define */ -/* eslint strict: ["error", "function"] */ -(function(root, factory) { - 'use strict'; - - /* istanbul ignore next */ - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([''], factory); - } else if (typeof exports === 'object') { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(root); - // This is a hack to attach the lib to the browser root when this lib is - // included inside another lib and the whole is browserifyied: - /* eslint-disable-next-line no-param-reassign */ - if (root.SVG === null) root.SVG = factory(root); - } else { - // Browser globals. - /* eslint-disable-next-line no-param-reassign */ - root.SVG = factory(root); - } -}({{lib:parent}}, (root) => { - 'use strict'; - - // This is the list of the constants that are defined at the global level of - // this module and are accessible to all. So, they are considered as reserved - // words for this library. - // const SV - /* eslint-disable one-var, semi-style */ - const SVG_NS = 'http://www.w3.org/2000/svg' - , XLINK_NS = 'http://www.w3.org/1999/xlink' - ; - - let SVG - , _ - ; - /* eslint-enable one-var, semi-style */ diff --git a/src/components/$.js b/src/components/$.js deleted file mode 100644 index 8da6d38..0000000 --- a/src/components/$.js +++ /dev/null @@ -1,705 +0,0 @@ -/* *************************************************************************** - * - * Implements the methods to manipulate the DOM. - * - * $.js is just an object that contains a set of methods. It implements the - * pattern factory. Thus, $(sel) returns the selected node and the methods - * listed below. - * - * Private Functions: - * . none, - * - * - * Private Variables: - * . id the id of the svg node, - * . [0] the selected svg children, - * . _root the svg node, - * - * - * Constructor: - * . $ creates the component, - * - * - * Public Chaining Methods: - * . firstParent moves to the svg node, - * . parent moves to the parent, - * . previous selects the previous sibbling element, - * . next selects the next sibbling element, - * . select selects an SVG element, - * . append appends an SVG element and selects it, - * . appendBefore appends a new SVG el. before the reference SVG el., - * . appendAfter appends a new SVG el. after the reference SVG el., - * . appendHTML appends a foreignObject to svg and selects it, - * . replace replaces the current SVG element, - * . remove removes the given SVG element, - * . removeChild removes the passed-in child element, - * . replaceChild replaces a child by another, - * . removeAllChilds removes all the childs from the selected element, - * . empty removes all the childs from the selected element - * . listen attaches an event listener to the SVG element, - * . listenOnce attaches a fired once event listener to the SVG element, - * . unlisten removes an event listener to the SVG element, - * . alink adds a link attribute to the SVG selected element, - * . attr adds attributes to the selected SVG element, - * . rmattr removes the given attribute from the selected SVG element, - * . text adds text to the selected SVG element, - * . addClass adds a class value to the selected SVG element, - * . removeClass removes a class value to the selected SVG element, - * . toggleClass toggles a class value to the selected SVG element, - * - * - * Public Non Chaining Methods: - * . query returns the first matching element or null, - * . getElement returns the selected SVG element, - * . children returns the children HTMLCollection, - * . getAttribute returns the attribute value, - * . getComputedStyle returns the style applied to this element, - * . getPropertyValue returns the value of the specified property, - * . getSize returns the width and height of this element, - * . getBbox returns the bounding boxes, - * - * - * - * @namespace SV.Dollar.Public - * @dependencies none - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ -/* eslint-disable one-var, semi-style, no-underscore-dangle */ - -'use strict'; - -(function() { - // IIFE - - // -- Module path - const Root = SV.Dollar.Public; - - - // -- Local modules - const Attr = SV.Methods.Attr.Public - , Text = SV.Methods.Text.Public - ; - - - // -- Local constants - - - // -- Local variables - - - // -- Public --------------------------------------------------------------- - - /** - * Select a child element. - * - * @constructor (arg1) - * @public - * @param {String} the selector, - * @returns {Object} returns the $() object, - * @since 0.0.0 - */ - function $(selector) { - const { id } = this - , { _root } = this - ; // unique id! - - - // -- Public Chaining Methods -------------------------------------------- - - /** - * Returns to the root parent if defined. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const firstParent = function() { - if (this._root) { - this[0] = this._root; - } - return this; - }; - - /** - * Returns to the parent element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const parent = function() { - if (this.root) { - // As a root parent is defined, we stop at it. - if (this[0] !== this.root) { - this[0] = this[0].parentNode; - } - } else { - this[0] = this[0].parentNode; - } - return this; - }; - - /** - * Selects the previous element sibbling. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const previous = function() { - this[0] = this[0].previousElementSibling; - return this; - }; - - /** - * Selects the next element sibbling. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const next = function() { - this[0] = this[0].nextElementSibling; - return this; - }; - - /** - * Selects the given SVG Element, - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to select, - * @param {Boolean} 'true' if selected element should become the 'root', - * @returns {Object} returns this, - * @since 0.0.0 - */ - const select = function(element) { - this[0] = this[0].querySelector(element); - return this; - }; - - /** - * Appends a new SVG element and selects it. - * - * @method (arg1) - * @public - * @param {Object} the SVG element to add, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const append = function(svgElement) { - const el = document.createElementNS(SVG_NS, svgElement); - this[0] = this[0].appendChild(el); - return this; - }; - - /** - * Appends a new SVG element before the passed-in SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to add, - * @param {Object} the reference SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendBefore = function(newSvgElement, svgElement) { - const newChild = document.createElementNS(SVG_NS, newSvgElement) - , child = this[0].querySelector(svgElement) - ; - - this[0].insertBefore(newChild, child); - this[0] = newChild; - return this; - }; - - /** - * Appends a new SVG element after the passed-in SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element to add, - * @param {Object} the reference SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendAfter = function(newSvgElement, svgElement) { - const newChild = document.createElementNS(SVG_NS, newSvgElement) - , child = this[0].querySelector(svgElement).nextElementSibling - ; - - this[0].insertBefore(newChild, child); - this[0] = newChild; - return this; - }; - - /** - * Appends a foreignObject to svg and selects it. - * - * @method (arg1) - * @public - * @param {String} the serialized html block, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const appendHTML = function(xmlString) { - if (typeof xmlString !== 'string') return this; - - const body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body'); - body.innerHTML = xmlString; - this[0] = this[0].appendChild(body); - return this; - }; - - /** - * Replaces the selected SVG element. - * - * @method (arg1) - * @public - * @param {Object} the new SVG element, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const replace = function(svgElement) { - const el = document.createElementNS(SVG_NS, svgElement); - this[0].parentNode.replaceChild(el, this[0]); - this[0] = el; - return this; - }; - - /** - * Removes the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const remove = function() { - let parento; - if (this[0]) { - parento = this[0].parentNode; - parento.removeChild(this[0]); - this[0] = parento; - } - return this; - }; - - /** - * Removes the passed-in child element. - * - * @method (arg1) - * @public - * @param {Object} the child element to remove, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeChild = function(child) { - if (child) { - this[0].removeChild(child); - } - return this; - }; - - /** - * Replaces a child by another. - * - * @method (arg1, arg2) - * @public - * @param {Object} the new node element, - * @param {Object} the node element to replace, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const replaceChild = function(newChild, child) { - if (newChild) { - this[0].replaceChild(newChild, child); - } - return this; - }; - - /** - * Removes all the childs from the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeAllChilds = function() { - while (this[0].firstChild) { - this[0].removeChild(this[0].firstChild); - } - return this; - }; - - /** - * Removes all the childs from the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const empty = function() { - while (this[0].firstChild) { - this[0].removeChild(this[0].firstChild); - } - return this; - }; - - /** - * Attachs a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const listen = function(event, handler) { - if (typeof event === 'string' && typeof handler === 'function') { - this[0].addEventListener(event, handler); - } - return this; - }; - - /** - * Attachs a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const listenOnce = function(event, handler) { - const el = this[0]; - function localHandler(e) { - el.removeEventListener(event, localHandler); - handler(e); - } - if (typeof event === 'string' && typeof handler === 'function') { - el.addEventListener(event, localHandler); - } - return this; - }; - - /** - * Remove a listen handler to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the 'event', - * @param {Object} the handler, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const unlisten = function(event, handler) { - if (typeof event === 'string' && typeof handler === 'function') { - this[0].removeEventListener(event, handler); - } - return this; - }; - - /** - * Adds a link attribute to the selected element, - * - * @method (arg1, arg2) - * @public - * @param {String} the type of link attribute, - * @param {String} the url, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const alink = function(attr, url) { - // this[0].setAttributeNS(XLINK_NS, 'xlink:' + attr, url); - this[0].setAttributeNS(XLINK_NS, `xlink:${attr}`, url); - return this; - }; - - /** - * Adds an attribute to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const attr = function(attribute, value) { - if (!this[0]) { - /* eslint-disable-next-line no-console */ - console.log('warning: this.svgElement is null!'); - return this; - } - Attr.attr(this[0], attribute, value); - return this; - }; - - /** - * Removes the given attribute to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the attribute to remove, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const rmattr = function(attribute) { - this[0].removeAttributeNS(null, attribute); - return this; - }; - - /** - * Adds a text to the selected SVG element. - * - * @method (arg1) - * @public - * @param {Object} the text or the the params for the animation, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const text = function(value) { - Text.text(this[0], value); - return this; - }; - - /** - * Adds a class value to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const addClass = function(className) { - let list = this[0].getAttributeNS(null, 'class'); - // list = list ? list + ' ' + className : className; - list = list ? `${list} ${className}` : className; - this[0].setAttributeNS(null, 'class', list); - return this; - }; - - /** - * Removes a class value from the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const removeClass = function(className) { - let list = this[0].getAttributeNS(null, 'class'); - - if (list) { - // Remove the class and the extra leading and - // trailing white spaces if any: - list = list.replace(className, '').replace(/(^\s+|\s+$)/g, ''); - this[0].setAttributeNS(null, 'class', list); - } - return this; - }; - - /** - * Adds/Removes a class name to the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the value of the class attribute, - * @returns {Object} returns this, - * @since 0.0.0 - */ - const toggleClass = function(className) { - const list = this[0].getAttributeNS(null, 'class'); - - if (list && list.match(className)) { - this.removeClass(className); - return this; - } - this.addClass(className); - return this; - }; - - - // -- Public Non Chaining Methods ---------------------------------------- - - /** - * Returns the first element that matches or null. - * - * @method (arg1) - * @public - * @param {String} the css selector, - * @returns {Object} the selected SVG element or null, - * @since 0.0.0 - */ - const query = function(css) { - return this[0].querySelector(css); - }; - - /** - * Returns the selected SVG element. - * - * @method () - * @public - * @param {} -, - * @returns {Object} the selected SVG element, - * @since 0.0.0 - */ - const getElement = function() { - return this[0]; - }; - - /** - * Returns the children HTMLCollection. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns the children HTMLCollection, - * @since 0.0.0 - */ - const children = function() { - return this[0].children; - }; - - /** - * Returns the attribute of the selected SVG element. - * - * @method (arg1) - * @public - * @param {String} the name of the attribute, - * @returns {Object} returns the attribute value or null, - * @since 0.0.0 - */ - const getAttribute = function(attribute) { - return this[0] ? this[0].getAttribute(attribute) : null; - }; - - /** - * Returns the computed style of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the object computed style, - * @since 0.0.0 - */ - const getComputedStyle = function() { - return window.getComputedStyle(this[0]); - }; - - /** - * Returns the property value of the style object. - * - * @method (arg1) - * @public - * @param {Object} the style property, - * @returns {String} returns the style value, - * @since 0.0.0 - */ - const getPropertyValue = function(css) { - return this.getPropertyValue(css); - }; - - /** - * Returns the size (bounding boxes) of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the width and height of the SVG element, - * @since 0.0.0 - */ - const getSize = function() { - return { - width: this[0].getBoundingClientRect().width, - height: this[0].getBoundingClientRect().height, - }; - }; - - /** - * Returns the size (bounding boxes) of the selected SVG element. - * - * @method () - * @public - * @param {} - - * @returns {Object} returns the width and height of the SVG element, - * @since 0.0.0 - */ - const getBbox = function() { - return { - top: this[0].getBoundingClientRect().top, - left: this[0].getBoundingClientRect().left, - width: this[0].getBoundingClientRect().width, - height: this[0].getBoundingClientRect().height, - }; - }; - - - // -- Main - return { - id, - 0: selector ? _root.querySelector(selector) : _root, - _root, - - firstParent, - parent, - previous, - next, - select, - append, - appendBefore, - appendAfter, - appendHTML, - replace, - remove, - removeChild, - replaceChild, - removeAllChilds, - empty, - listen, - listenOnce, - unlisten, - alink, - attr, - rmattr, - text, - addClass, - removeClass, - toggleClass, - query, - getElement, - children, - getAttribute, - getComputedStyle, - getPropertyValue, - getSize, - getBbox, - }; - } - - - // Exports $. - _.extend(Root, { $ }); -}()); -/* eslint-enable one-var, semi-style, no-underscore-dangle */ diff --git a/src/components/anim.js b/src/components/anim.js index 3af1c06..bc050e9 100644 --- a/src/components/anim.js +++ b/src/components/anim.js @@ -1,4 +1,4 @@ -/* *************************************************************************** +/** **************************************************************************** * * Performs the animations. * @@ -20,349 +20,350 @@ * * * - * @namespace SV.Anim.Public + * @namespace SVG.src.components.anim * @dependencies none * @exports - * @author - * @since 0.0.0 * @version - - * ************************************************************************ */ + * ************************************************************************** */ /* eslint-disable one-var, semi-style, no-underscore-dangle */ -'use strict'; -(function() { - // IIFE +// -- Vendor modules - // -- Module path - const Root = SV.Anim.Public; +// -- Local modules +import _ from '../lib/_'; +import SVG from './staticmethods'; - // -- Local modules +// -- Local constants - // -- Local constants +// -- Local variables - // -- Local variables +// -- Private Functions -------------------------------------------------------- - // -- Private Functions ---------------------------------------------------- +/** + * Rotates the SVG element. + * + * Nota: + * The animation object must contain the following properties: + * { + * start: the value (if omitted, start from current position), + * stop: the final value, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } + * + * @function (arg1, arg2) + * @private + * @param {Object} the SVG element, + * @param {Object} the rotation to perform, + * @returns {} -, + * @since 0.0.0 + */ +function _rotateRun(el, anim) { + const r = { + a: 0, + t: 0, + start: _.isNumber(anim.start) ? anim.start : null, + stop: _.isNumber(anim.stop) ? anim.stop : 180, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; + + // If anim.start is undefined, we start from the current value: + if (_.isNull(r.start)) { + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + r.start = _.isObject(transform.scale) && _.isNumber(transform.scale.a) + ? transform.scale.a + : 180; + } + + const timer = setInterval(() => { + // Compute the next step: + r.t += r.period; + // Abort if overflow or if no change in the position. + if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } + r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); + + // Retrieve transform attributes, set new rotation value and update. + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + transform.rotate.a = r.a; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); + + if (r.t === r.duration) { + clearInterval(timer); + } + }, r.period); +} + +/** + * Scales the SVG element. + * + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial x, y values (if omitted, start from current position), + * stop: the final x, y values, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } + * + * @function (arg1, arg2) + * @private + * @param {Object} the SVG object, + * @param {Object} the scaling to perform, + * @returns {} -, + * @since 0.0.0 + */ +function _scaleRun(el, anim) { + const s = { + x: 0, + y: 0, + t: 0, + x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, + y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, + x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, + y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; + + // if anim.start.x or anim.start.y is undefined, the scaling operation + // starts from the current value: + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + if (_.isNull(s.x0) || _.isNull(s.y0)) { + s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) + ? transform.scale.x + : 0; + s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) + ? transform.scale.y + : 0; + } + + // Run: + const timer = setInterval(() => { + // Compute the next step: + s.t += s.period; + if (s.t > s.duration) { s.t = s.duration; } + s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); + s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); + + // Retrieve transform attributes, set new scale value and update. + const tr = SVG.transformAttrToObj(el.getAttribute('transform')); + tr.scale.x = s.x; + tr.scale.y = s.y; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); + + if (s.t === s.duration) { + clearInterval(timer); + } + }, s.period); +} + +/** + * Translates the SVG element. + * + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial x, y values (if omitted, start from current position), + * stop: the final x, y values, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } + * + * @function (arg1, arg2) + * @private + * @param {Object} the SVG element, + * @param {Object} the translation to perform, + * @returns {} -, + * @since 0.0.0 + */ +function _translateRun(el, anim) { + const v = { + x: 0, + y: 0, + t: 0, + length: null, + arc: null, + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; + + let x0 + , y0 + ; + + // Translate starts from the passed-in value or the current position: + if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { + x0 = anim.start.x; + y0 = anim.start.y; + } else { + const transform = SVG.transformAttrToObj(el.getAttribute('transform')); + x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) + ? transform.translate.x + : 0; + y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) + ? transform.translate.x + : 0; + } + + /* eslint-disable-next-line no-restricted-properties */ + v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); + v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); + if (anim.stop.x - x0 < 0) v.arc += -Math.PI; + if (v.length === 0) v.arc = 0; + + const timer = setInterval(() => { + // Compute the next step: + v.t += v.period; + if (v.t > v.duration) v.t = v.duration; + v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; + v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; + + // Retrieve the transform attributes, set the new position value and update: + const trform = SVG.transformAttrToObj(el.getAttribute('transform')); + trform.translate.x = v.x; + trform.translate.y = v.y; + el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); + + // Stop the timer if destination point reached. + if (v.t === v.duration) { + clearInterval(timer); + } + }, v.period); +} + +/** + * Updates dynamically the text value from the initial to the final value. + * + * Nota: + * The animation object must contain the following properties: + * { + * start: the initial value, + * stop: the final value, + * duration: the elapsed time, + * frequency: the refresh frequency (in pulse per second), + * easing: the easing formula, + * } + * + * @function (arg1, arg2) + * @private + * @param {Object} the SVG object, + * @param {Object} the animation parameters, + * @returns {} -, + * @since 0.0.0 + */ +function _textRun(el, anim) { + const d = { + period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, + easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, + value: 0, + start: _.isNumber(anim.start) ? anim.start : 0, + stop: _.isNumber(anim.stop) ? anim.stop : 0, + t: 0, + duration: _.isNumber(anim.duration) ? anim.duration : 2000, + }; + + // Run: + const timer = setInterval(() => { + // Compute the next step: + d.t += d.period; + // Abort if overflow or if no change in the position. + if (d.t > d.duration || d.stop === d.start) { + d.t = d.duration; + } + d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); + if (d.duration === 0) { + d.value = d.start; + } + + // Display the new digit value: + /* eslint-disable-next-line no-param-reassign */ + el.textContent = d.value.toFixed(0); + + // is animation over? + if (d.t === d.duration) { + clearInterval(timer); + } + }, d.period); +} + + +// -- Public Static Methods ---------------------------------------------------- + +const Anim = { /** * Rotates the SVG element. * - * Nota: - * The animation object must contain the following properties: - * { - * start: the value (if omitted, start from current position), - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private + * @method (arg1, arg2) + * @public * @param {Object} the SVG element, * @param {Object} the rotation to perform, * @returns {} -, * @since 0.0.0 */ - function _rotateRun(el, anim) { - const r = { - a: 0, - t: 0, - start: _.isNumber(anim.start) ? anim.start : null, - stop: _.isNumber(anim.stop) ? anim.stop : 180, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // If anim.start is undefined, we start from the current value: - if (_.isNull(r.start)) { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - r.start = _.isObject(transform.scale) && _.isNumber(transform.scale.a) - ? transform.scale.a - : 180; - } - - const timer = setInterval(() => { - // Compute the next step: - r.t += r.period; - // Abort if overflow or if no change in the position. - if (r.t > r.duration || r.stop === r.start) { r.t = r.duration; } - r.a = r.easing(r.t, r.start, (r.stop - r.start), r.duration); - - // Retrieve transform attributes, set new rotation value and update. - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - transform.rotate.a = r.a; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(transform)); - - if (r.t === r.duration) { - clearInterval(timer); - } - }, r.period); - } + rotateRun(el, anim) { + _rotateRun(el, anim); + }, /** - * Scales the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * Scales the SVG element; * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG object, + * @method (arg1, arg2) + * @public + * @param {Object} the SVG element, * @param {Object} the scaling to perform, * @returns {} -, * @since 0.0.0 */ - function _scaleRun(el, anim) { - const s = { - x: 0, - y: 0, - t: 0, - x0: _.isObject(anim.start) && _.isNumber(anim.start.x) ? anim.start.x : null, - y0: _.isObject(anim.start) && _.isNumber(anim.start.y) ? anim.start.y : null, - x1: _.isObject(anim.stop) && _.isNumber(anim.stop.x) ? anim.stop.x : 1, - y1: _.isObject(anim.stop) && _.isNumber(anim.stop.y) ? anim.stop.y : 1, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // if anim.start.x or anim.start.y is undefined, the scaling operation - // starts from the current value: - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - if (_.isNull(s.x0) || _.isNull(s.y0)) { - s.x0 = _.isObject(transform.scale) && _.isNumber(transform.scale.x) - ? transform.scale.x - : 0; - s.y0 = _.isObject(transform.scale) && _.isNumber(transform.scale.y) - ? transform.scale.y - : 0; - } - - // Run: - const timer = setInterval(() => { - // Compute the next step: - s.t += s.period; - if (s.t > s.duration) { s.t = s.duration; } - s.x = s.easing(s.t, s.x0, (s.x1 - s.x0), s.duration); - s.y = s.easing(s.t, s.y0, (s.y1 - s.y0), s.duration); - - // Retrieve transform attributes, set new scale value and update. - const tr = SVG.transformAttrToObj(el.getAttribute('transform')); - tr.scale.x = s.x; - tr.scale.y = s.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(tr)); - - if (s.t === s.duration) { - clearInterval(timer); - } - }, s.period); - } + scaleRun(el, anim) { + _scaleRun(el, anim); + }, /** - * Translates the SVG element. - * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial x, y values (if omitted, start from current position), - * stop: the final x, y values, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } + * Translates the SVG Element. * - * @function (arg1, arg2) - * @private + * @method (arg1, arg2) + * @public * @param {Object} the SVG element, * @param {Object} the translation to perform, * @returns {} -, * @since 0.0.0 */ - function _translateRun(el, anim) { - const v = { - x: 0, - y: 0, - t: 0, - length: null, - arc: null, - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - let x0 - , y0 - ; - - // Translate starts from the passed-in value or the current position: - if (anim.start && _.isNumber(anim.start.x) && _.isNumber(anim.start.y)) { - x0 = anim.start.x; - y0 = anim.start.y; - } else { - const transform = SVG.transformAttrToObj(el.getAttribute('transform')); - x0 = _.isObject(transform.translate) && _.isNumber(transform.translate.x) - ? transform.translate.x - : 0; - y0 = _.isObject(transform.translate) && _.isNumber(transform.translate.y) - ? transform.translate.x - : 0; - } - - /* eslint-disable-next-line no-restricted-properties */ - v.length = Math.sqrt(Math.pow((anim.stop.x - x0), 2) + Math.pow((anim.stop.y - y0), 2)); - v.arc = Math.atan((anim.stop.y - y0) / (anim.stop.x - x0)); - if (anim.stop.x - x0 < 0) v.arc += -Math.PI; - if (v.length === 0) v.arc = 0; - - const timer = setInterval(() => { - // Compute the next step: - v.t += v.period; - if (v.t > v.duration) v.t = v.duration; - v.x = (v.easing(v.t, 0, v.length, v.duration) * Math.cos(v.arc)) + x0; - v.y = (v.easing(v.t, 0, v.length, v.duration) * Math.sin(v.arc)) + y0; - - // Retrieve the transform attributes, set the new position value and update: - const trform = SVG.transformAttrToObj(el.getAttribute('transform')); - trform.translate.x = v.x; - trform.translate.y = v.y; - el.setAttributeNS(null, 'transform', SVG.transformAttrToStr(trform)); - - // Stop the timer if destination point reached. - if (v.t === v.duration) { - clearInterval(timer); - } - }, v.period); - } + translateRun(el, anim) { + _translateRun(el, anim); + }, /** * Updates dynamically the text value from the initial to the final value. * - * Nota: - * The animation object must contain the following properties: - * { - * start: the initial value, - * stop: the final value, - * duration: the elapsed time, - * frequency: the refresh frequency (in pulse per second), - * easing: the easing formula, - * } - * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG object, + * @method (arg1, arg2) + * @public + * @param {Object} the SVG element, * @param {Object} the animation parameters, * @returns {} -, * @since 0.0.0 */ - function _textRun(el, anim) { - const d = { - period: _.isNumber(anim.frequency) ? 1000 / anim.frequency : 10, - easing: _.isFunction(anim.easing) ? anim.easing : _.elinear, - value: 0, - start: _.isNumber(anim.start) ? anim.start : 0, - stop: _.isNumber(anim.stop) ? anim.stop : 0, - t: 0, - duration: _.isNumber(anim.duration) ? anim.duration : 2000, - }; - - // Run: - const timer = setInterval(() => { - // Compute the next step: - d.t += d.period; - // Abort if overflow or if no change in the position. - if (d.t > d.duration || d.stop === d.start) { - d.t = d.duration; - } - d.value = d.easing(d.t, d.start, (d.stop - d.start), d.duration); - if (d.duration === 0) { - d.value = d.start; - } - - // Display the new digit value: - /* eslint-disable-next-line no-param-reassign */ - el.textContent = d.value.toFixed(0); - - // is animation over? - if (d.t === d.duration) { - clearInterval(timer); - } - }, d.period); - } + textRun(el, anim) { + _textRun(el, anim); + }, +}; + +// Export +export default Anim; - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Rotates the SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the rotation to perform, - * @returns {} -, - * @since 0.0.0 - */ - rotateRun(el, anim) { - _rotateRun(el, anim); - }, - - /** - * Scales the SVG element; - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the scaling to perform, - * @returns {} -, - * @since 0.0.0 - */ - scaleRun(el, anim) { - _scaleRun(el, anim); - }, - - /** - * Translates the SVG Element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the translation to perform, - * @returns {} -, - * @since 0.0.0 - */ - translateRun(el, anim) { - _translateRun(el, anim); - }, - - /** - * Updates dynamically the text value from the initial to the final value. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the animation parameters, - * @returns {} -, - * @since 0.0.0 - */ - textRun(el, anim) { - _textRun(el, anim); - }, - }); -}()); /* eslint-enable one-var, semi-style, no-underscore-dangle */ diff --git a/src/components/attr.js b/src/components/attr.js index 9cc2ea5..bbfc5e0 100644 --- a/src/components/attr.js +++ b/src/components/attr.js @@ -1,4 +1,4 @@ -/* *************************************************************************** +/** **************************************************************************** * * Adds or Updates the SVG node attributes. * @@ -14,115 +14,114 @@ * * * - * @namespace SV.Methods.Attr.Public + * @namespace SVG.src.components.attr * @dependencies none * @exports - * @author - * @since 0.0.0 * @version - - * ************************************************************************ */ + * ************************************************************************** */ /* eslint-disable no-underscore-dangle */ -'use strict'; -(function() { - // IIFE +// -- Vendor modules - // -- Module path - const Root = SV.Methods.Attr.Public; +// -- Local modules +import Anim from './anim'; - // -- Local modules - const Anim = SV.Anim.Public; +// -- Local constants - // -- Local constants +// -- Local variables - // -- Local variables +// -- Private Functions -------------------------------------------------------- - // -- Private Functions ---------------------------------------------------- +/** + * Adds an attribute to the selected SVG element. + * + * @function (arg1, arg2, arg3) + * @private + * @param {Object} the SVG element, + * @param {String} the name of the attribute, + * @param {Object} the value of the attribute or the params for the animation, + * @returns {} -, + * @since 0.0.0 + */ +function _attr(el, attr, value) { + switch (typeof value) { + // Add the requested attribute to this element: + case 'string': + case 'number': + el.setAttributeNS(null, attr, value); + break; + + case 'object': + // Proceed with an animation: + switch (attr) { + // ... + // case 'd': + // Anim.dAnimationRun(el, value); + // break; + + // Transform animations: + case 'transform': + switch (value.type) { + // Rotate animation: + case 'rotate': + Anim.rotateRun(el, value); + break; + + // Scale animation: + case 'scale': + Anim.scaleRun(el, value); + break; + + // Smooth linear animation: + case 'translate': + Anim.translateRun(el, value); + break; + + default: + throw new Error(`The animation is not supported for the transform ${value.type}!`); + } + break; + + default: + throw new Error(`The animation is not supported for the attribute ${attr}!`); + } + break; + + default: + // Ignore! + } +} + + +// -- Public Static Methods ---------------------------------------------------- + +const Attr = { /** * Adds an attribute to the selected SVG element. * - * @function (arg1, arg2, arg3) - * @private - * @param {Object} the SVG element, + * @method (arg1, arg2, arg3) + * @public + * @param {Object} the SVG object, * @param {String} the name of the attribute, * @param {Object} the value of the attribute or the params for the animation, * @returns {} -, * @since 0.0.0 */ - function _attr(el, attr, value) { - switch (typeof value) { - // Add the requested attribute to this element: - case 'string': - case 'number': - el.setAttributeNS(null, attr, value); - break; - - case 'object': - // Proceed with an animation: - switch (attr) { - // ... - // case 'd': - // Anim.dAnimationRun(el, value); - // break; - - // Transform animations: - case 'transform': - switch (value.type) { - // Rotate animation: - case 'rotate': - Anim.rotateRun(el, value); - break; - - // Scale animation: - case 'scale': - Anim.scaleRun(el, value); - break; - - // Smooth linear animation: - case 'translate': - Anim.translateRun(el, value); - break; - - default: - throw new Error(`The animation is not supported for the transform ${value.type}!`); - } - break; - - default: - throw new Error(`The animation is not supported for the attribute ${attr}!`); - } - break; - - default: - // Ignore! - } - } + attr(el, attr, value) { + _attr(el, attr, value); + }, +}; + +// -- Export +export default Attr; - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Adds an attribute to the selected SVG element. - * - * @method (arg1, arg2, arg3) - * @public - * @param {Object} the SVG object, - * @param {String} the name of the attribute, - * @param {Object} the value of the attribute or the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - attr(el, attr, value) { - _attr(el, attr, value); - }, - }); -}()); /* eslint-enable no-underscore-dangle */ diff --git a/src/components/dollar.js b/src/components/dollar.js new file mode 100644 index 0000000..f08fa44 --- /dev/null +++ b/src/components/dollar.js @@ -0,0 +1,701 @@ +/** **************************************************************************** + * + * Implements the methods to manipulate the DOM. + * + * $.js is just an object that contains a set of methods. It implements the + * pattern factory. Thus, $(sel) returns the selected node and the methods + * listed below. + * + * Private Functions: + * . none, + * + * + * Private Variables: + * . id the id of the svg node, + * . [0] the selected svg children, + * . _root the svg node, + * + * + * Constructor: + * . $ creates the component, + * + * + * Public Chaining Methods: + * . firstParent moves to the svg node, + * . parent moves to the parent, + * . previous selects the previous sibbling element, + * . next selects the next sibbling element, + * . select selects an SVG element, + * . append appends an SVG element and selects it, + * . appendBefore appends a new SVG el. before the reference SVG el., + * . appendAfter appends a new SVG el. after the reference SVG el., + * . appendHTML appends a foreignObject to svg and selects it, + * . replace replaces the current SVG element, + * . remove removes the given SVG element, + * . removeChild removes the passed-in child element, + * . replaceChild replaces a child by another, + * . removeAllChilds removes all the childs from the selected element, + * . empty removes all the childs from the selected element + * . listen attaches an event listener to the SVG element, + * . listenOnce attaches a fired once event listener to the SVG element, + * . unlisten removes an event listener to the SVG element, + * . alink adds a link attribute to the SVG selected element, + * . attr adds attributes to the selected SVG element, + * . rmattr removes the given attribute from the selected SVG element, + * . text adds text to the selected SVG element, + * . addClass adds a class value to the selected SVG element, + * . removeClass removes a class value to the selected SVG element, + * . toggleClass toggles a class value to the selected SVG element, + * + * + * Public Non Chaining Methods: + * . query returns the first matching element or null, + * . getElement returns the selected SVG element, + * . children returns the children HTMLCollection, + * . getAttribute returns the attribute value, + * . getComputedStyle returns the style applied to this element, + * . getPropertyValue returns the value of the specified property, + * . getSize returns the width and height of this element, + * . getBbox returns the bounding boxes, + * + * + * + * @namespace SVG.src.components.dollar + * @dependencies none + * @exports - + * @author - + * @since 0.0.0 + * @version - + * ************************************************************************** */ +/* eslint-disable one-var, semi-style, no-underscore-dangle */ + + +// -- Vendor modules + + +// -- Local modules +import Attr from './attr'; +import Text from './text'; +import w3c from './w3c'; + + +// -- Local constants + + +// -- Local variables + + +// -- Public ------------------------------------------------------------------- + +/** + * Select a child element. + * + * @constructor (arg1) + * @public + * @param {String} the selector, + * @returns {Object} returns the $() object, + * @since 0.0.0 + */ +function $(selector) { + const { id } = this + , { _root } = this + ; // unique id! + + + // -- Public Chaining Methods ------------------------------------------------ + + /** + * Returns to the root parent if defined. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const firstParent = function() { + if (this._root) { + this[0] = this._root; + } + return this; + }; + + /** + * Returns to the parent element. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const parent = function() { + if (this.root) { + // As a root parent is defined, we stop at it. + if (this[0] !== this.root) { + this[0] = this[0].parentNode; + } + } else { + this[0] = this[0].parentNode; + } + return this; + }; + + /** + * Selects the previous element sibbling. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const previous = function() { + this[0] = this[0].previousElementSibling; + return this; + }; + + /** + * Selects the next element sibbling. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const next = function() { + this[0] = this[0].nextElementSibling; + return this; + }; + + /** + * Selects the given SVG Element, + * + * @method (arg1, arg2) + * @public + * @param {Object} the SVG element to select, + * @param {Boolean} 'true' if selected element should become the 'root', + * @returns {Object} returns this, + * @since 0.0.0 + */ + const select = function(element) { + this[0] = this[0].querySelector(element); + return this; + }; + + /** + * Appends a new SVG element and selects it. + * + * @method (arg1) + * @public + * @param {Object} the SVG element to add, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const append = function(svgElement) { + const el = document.createElementNS(w3c.SVG_NS, svgElement); + this[0] = this[0].appendChild(el); + return this; + }; + + /** + * Appends a new SVG element before the passed-in SVG element. + * + * @method (arg1, arg2) + * @public + * @param {Object} the SVG element to add, + * @param {Object} the reference SVG element, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const appendBefore = function(newSvgElement, svgElement) { + const newChild = document.createElementNS(w3c.SVG_NS, newSvgElement) + , child = this[0].querySelector(svgElement) + ; + + this[0].insertBefore(newChild, child); + this[0] = newChild; + return this; + }; + + /** + * Appends a new SVG element after the passed-in SVG element. + * + * @method (arg1, arg2) + * @public + * @param {Object} the SVG element to add, + * @param {Object} the reference SVG element, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const appendAfter = function(newSvgElement, svgElement) { + const newChild = document.createElementNS(w3c.SVG_NS, newSvgElement) + , child = this[0].querySelector(svgElement).nextElementSibling + ; + + this[0].insertBefore(newChild, child); + this[0] = newChild; + return this; + }; + + /** + * Appends a foreignObject to svg and selects it. + * + * @method (arg1) + * @public + * @param {String} the serialized html block, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const appendHTML = function(xmlString) { + if (typeof xmlString !== 'string') return this; + + const body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body'); + body.innerHTML = xmlString; + this[0] = this[0].appendChild(body); + return this; + }; + + /** + * Replaces the selected SVG element. + * + * @method (arg1) + * @public + * @param {Object} the new SVG element, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const replace = function(svgElement) { + const el = document.createElementNS(w3c.SVG_NS, svgElement); + this[0].parentNode.replaceChild(el, this[0]); + this[0] = el; + return this; + }; + + /** + * Removes the selected SVG element. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const remove = function() { + let parento; + if (this[0]) { + parento = this[0].parentNode; + parento.removeChild(this[0]); + this[0] = parento; + } + return this; + }; + + /** + * Removes the passed-in child element. + * + * @method (arg1) + * @public + * @param {Object} the child element to remove, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const removeChild = function(child) { + if (child) { + this[0].removeChild(child); + } + return this; + }; + + /** + * Replaces a child by another. + * + * @method (arg1, arg2) + * @public + * @param {Object} the new node element, + * @param {Object} the node element to replace, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const replaceChild = function(newChild, child) { + if (newChild) { + this[0].replaceChild(newChild, child); + } + return this; + }; + + /** + * Removes all the childs from the selected SVG element. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const removeAllChilds = function() { + while (this[0].firstChild) { + this[0].removeChild(this[0].firstChild); + } + return this; + }; + + /** + * Removes all the childs from the selected SVG element. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const empty = function() { + while (this[0].firstChild) { + this[0].removeChild(this[0].firstChild); + } + return this; + }; + + /** + * Attachs a listen handler to the selected SVG element. + * + * @method (arg1, arg2) + * @public + * @param {String} the 'event', + * @param {Object} the handler, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const listen = function(event, handler) { + if (typeof event === 'string' && typeof handler === 'function') { + this[0].addEventListener(event, handler); + } + return this; + }; + + /** + * Attachs a listen handler to the selected SVG element. + * + * @method (arg1, arg2) + * @public + * @param {String} the 'event', + * @param {Object} the handler, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const listenOnce = function(event, handler) { + const el = this[0]; + function localHandler(e) { + el.removeEventListener(event, localHandler); + handler(e); + } + if (typeof event === 'string' && typeof handler === 'function') { + el.addEventListener(event, localHandler); + } + return this; + }; + + /** + * Remove a listen handler to the selected SVG element. + * + * @method (arg1, arg2) + * @public + * @param {String} the 'event', + * @param {Object} the handler, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const unlisten = function(event, handler) { + if (typeof event === 'string' && typeof handler === 'function') { + this[0].removeEventListener(event, handler); + } + return this; + }; + + /** + * Adds a link attribute to the selected element, + * + * @method (arg1, arg2) + * @public + * @param {String} the type of link attribute, + * @param {String} the url, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const alink = function(attr, url) { + // this[0].setAttributeNS(XLINK_NS, 'xlink:' + attr, url); + this[0].setAttributeNS(w3c.XLINK_NS, `xlink:${attr}`, url); + return this; + }; + + /** + * Adds an attribute to the selected SVG element. + * + * @method (arg1, arg2) + * @public + * @param {String} the name of the attribute, + * @param {Object} the value of the attribute or the params for the animation, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const attr = function(attribute, value) { + if (!this[0]) { + /* eslint-disable-next-line no-console */ + console.log('warning: this.svgElement is null!'); + return this; + } + Attr.attr(this[0], attribute, value); + return this; + }; + + /** + * Removes the given attribute to the selected SVG element. + * + * @method (arg1) + * @public + * @param {String} the attribute to remove, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const rmattr = function(attribute) { + this[0].removeAttributeNS(null, attribute); + return this; + }; + + /** + * Adds a text to the selected SVG element. + * + * @method (arg1) + * @public + * @param {Object} the text or the the params for the animation, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const text = function(value) { + Text.text(this[0], value); + return this; + }; + + /** + * Adds a class value to the selected SVG element. + * + * @method (arg1) + * @public + * @param {String} the value of the class attribute, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const addClass = function(className) { + let list = this[0].getAttributeNS(null, 'class'); + // list = list ? list + ' ' + className : className; + list = list ? `${list} ${className}` : className; + this[0].setAttributeNS(null, 'class', list); + return this; + }; + + /** + * Removes a class value from the selected SVG element. + * + * @method (arg1) + * @public + * @param {String} the value of the class attribute, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const removeClass = function(className) { + let list = this[0].getAttributeNS(null, 'class'); + + if (list) { + // Remove the class and the extra leading and + // trailing white spaces if any: + list = list.replace(className, '').replace(/(^\s+|\s+$)/g, ''); + this[0].setAttributeNS(null, 'class', list); + } + return this; + }; + + /** + * Adds/Removes a class name to the selected SVG element. + * + * @method (arg1) + * @public + * @param {String} the value of the class attribute, + * @returns {Object} returns this, + * @since 0.0.0 + */ + const toggleClass = function(className) { + const list = this[0].getAttributeNS(null, 'class'); + + if (list && list.match(className)) { + this.removeClass(className); + return this; + } + this.addClass(className); + return this; + }; + + + // -- Public Non Chaining Methods -------------------------------------------- + + /** + * Returns the first element that matches or null. + * + * @method (arg1) + * @public + * @param {String} the css selector, + * @returns {Object} the selected SVG element or null, + * @since 0.0.0 + */ + const query = function(css) { + return this[0].querySelector(css); + }; + + /** + * Returns the selected SVG element. + * + * @method () + * @public + * @param {} -, + * @returns {Object} the selected SVG element, + * @since 0.0.0 + */ + const getElement = function() { + return this[0]; + }; + + /** + * Returns the children HTMLCollection. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns the children HTMLCollection, + * @since 0.0.0 + */ + const children = function() { + return this[0].children; + }; + + /** + * Returns the attribute of the selected SVG element. + * + * @method (arg1) + * @public + * @param {String} the name of the attribute, + * @returns {Object} returns the attribute value or null, + * @since 0.0.0 + */ + const getAttribute = function(attribute) { + return this[0] ? this[0].getAttribute(attribute) : null; + }; + + /** + * Returns the computed style of the selected SVG element. + * + * @method () + * @public + * @param {} - + * @returns {Object} returns the object computed style, + * @since 0.0.0 + */ + const getComputedStyle = function() { + return window.getComputedStyle(this[0]); + }; + + /** + * Returns the property value of the style object. + * + * @method (arg1) + * @public + * @param {Object} the style property, + * @returns {String} returns the style value, + * @since 0.0.0 + */ + const getPropertyValue = function(css) { + const o = window.getComputedStyle(this[0]); + return o.getPropertyValue(css); + }; + + /** + * Returns the size (bounding boxes) of the selected SVG element. + * + * @method () + * @public + * @param {} - + * @returns {Object} returns the width and height of the SVG element, + * @since 0.0.0 + */ + const getSize = function() { + return { + width: this[0].getBoundingClientRect().width, + height: this[0].getBoundingClientRect().height, + }; + }; + + /** + * Returns the size (bounding boxes) of the selected SVG element. + * + * @method () + * @public + * @param {} - + * @returns {Object} returns the width and height of the SVG element, + * @since 0.0.0 + */ + const getBbox = function() { + return { + top: this[0].getBoundingClientRect().top, + left: this[0].getBoundingClientRect().left, + width: this[0].getBoundingClientRect().width, + height: this[0].getBoundingClientRect().height, + }; + }; + + + // -- Main + return { + id, + 0: selector ? _root.querySelector(selector) : _root, + _root, + + firstParent, + parent, + previous, + next, + select, + append, + appendBefore, + appendAfter, + appendHTML, + replace, + remove, + removeChild, + replaceChild, + removeAllChilds, + empty, + listen, + listenOnce, + unlisten, + alink, + attr, + rmattr, + text, + addClass, + removeClass, + toggleClass, + query, + getElement, + children, + getAttribute, + getComputedStyle, + getPropertyValue, + getSize, + getBbox, + }; +} + + +// Export +export default $; + +/* eslint-enable one-var, semi-style, no-underscore-dangle */ diff --git a/src/components/staticmethods.js b/src/components/staticmethods.js index f972707..12887ea 100644 --- a/src/components/staticmethods.js +++ b/src/components/staticmethods.js @@ -1,4 +1,4 @@ -/* *************************************************************************** +/** **************************************************************************** * * Implements the SVG static methods. * @@ -22,418 +22,417 @@ * * * - * @namespace SV.Methods.Static.Public + * @namespace SVG.src.components.staticmethods * @dependencies none * @exports - * @author - * @since 0.0.0 * @version - - * ************************************************************************ */ + * ************************************************************************** */ /* eslint-disable one-var, semi-style, no-underscore-dangle */ -'use strict'; -(function() { - // IIFE +// -- Vendor modules - // -- Module path - const Root = SV.Methods.Static.Public; +// -- Local modules - // -- Local modules +// -- Local constants - // -- Local constants +// -- Local variables - // -- Local variables +// -- Private Functions -------------------------------------------------------- - // -- Private Functions ---------------------------------------------------- +/** + * Converts a SVG transform attributes string to an object. + * + * @function (arg1) + * @private + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, + * @since 0.0.0 + */ +/* eslint-disable one-var-declaration-per-line */ +function _transformAttrToObj(transform) { + const tr = typeof transform === 'string' ? transform : '' + ; + + const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; + const regexTr = /translate(.*?)\)/; + const regexSc = /scale(.*?)\)/; + const regexRo = /rotate(.*?)\)/; + const regexSkX = /skewX(.*?)\)/; + const regexSkY = /skewY(.*?)\)/; + const regexMtx = /matrix(.*?)\)/; + + const translate = tr.match(regexTr) === null + ? null + : (function() { + let x, y; + const t = tr.match(regexTr)[0].match(regexN); + if (!t) { + x = null; + y = null; + } else if (t.length === 1) { + x = parseFloat(t[0], 10); + y = x; + } else { + x = parseFloat(t[0], 10); + y = parseFloat(t[1], 10); + } + return { + x, + y, + }; + }()); + + const scale = tr.match(regexSc) === null + ? null + : (function() { + let x, y; + const s = tr.match(regexSc)[0].match(regexN); + if (!s) { + x = null; + y = null; + } else if (s.length === 1) { + x = parseFloat(s[0], 10); + y = x; + } else { + x = parseFloat(s[0], 10); + y = parseFloat(s[1], 10); + } + return { + x, + y, + }; + }()); + + const rotate = tr.match(regexRo) === null + ? null + : (function() { + let a, cx, cy; + const r = tr.match(regexRo)[0].match(regexN); + if (!r) { + a = null; + cx = null; + cy = null; + } else if (r.length === 1) { + a = parseFloat(r[0], 10); + cx = null; + cy = null; + } else if (r.length === 2) { + a = parseFloat(r[0], 10); + cx = parseFloat(r[1], 10); + cy = cx; + } else { + a = parseFloat(r[0], 10); + cx = parseFloat(r[1], 10); + cy = parseFloat(r[2], 10); + } + return { + a, + cx, + cy, + }; + }()); + + const skewX = tr.match(regexSkX) === null + ? null + : (function() { + const sk = tr.match(regexSkX)[0].match(regexN); + if (sk) { + return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); + } + return null; + }()); + + const skewY = tr.match(regexSkY) === null + ? null + : (function() { + const sk = tr.match(regexSkY)[0].match(regexN); + if (sk) { + return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); + } + return null; + }()); + + // Not implemented. + const matrix = tr.match(regexMtx) === null + ? null + : null; + + return { + translate, + scale, + rotate, + matrix, + skewX, + skewY, + }; +} +/* eslint-enable one-var-declaration-per-line */ + +/** + * Converts a SVG transform attributes string to an object. + * + * @function (arg1) + * @private + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, + * @since 0.0.0 + */ +/* eslint-disable prefer-template */ +function _transformAttrToStr(tr) { + let s = '' + ; + + // Translate: + if (tr.translate && typeof tr.translate.x === 'number') { + if (typeof tr.translate.y === 'number') { + s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; + } else { + // if y isn't provided, it is assumed to 0: + s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; + } + } + + // Scale: + if (tr.scale && typeof tr.scale.x === 'number') { + if (typeof tr.scale.y === 'number') { + s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; + } else { + // if y isn't provided, it is assumed to be equal to x: + s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; + } + } + + // Rotate: + if (tr.rotate && typeof tr.rotate.a === 'number') { + if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { + s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; + } else if (typeof tr.rotate.cx === 'number') { + // if y isn't provided, it is assumed to be equal to x: + s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; + } else { + s += 'rotate(' + tr.rotate.a + ') '; + } + } + + // SkewX: + if (typeof tr.skewX === 'number') { + s += 'skewX(' + tr.skewX + ') '; + } + + // SkewY: + if (typeof tr.skewY === 'number') { + s += 'skewY(' + tr.skewY + ') '; + } + + // matrix not implemented! + // - + + // Return a clean string (no leading/trailing blanck spaces): + return s.replace(/(^\s+|\s+$)/g, ''); +} +/* eslint-enable prefer-template */ + +/** + * Returns an arc path. + * + * The returned path has the following format: + * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' + * + * @function (arg1, arg2, arg3, arg4) + * @private + * @param {Number} start angle in radius, + * @param {Number} stop angle, + * @param {Number} external radius, + * @param {Number} internal radius, + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ +/* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ +function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { + startAngle = startAngle !== undefined ? startAngle : 0; + stopAngle = stopAngle !== undefined ? stopAngle : 0; + outerRadius = outerRadius !== undefined ? outerRadius : 0; + startAngle = startAngle % (2 * Math.PI); + if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } + if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } + + let sweepflag = 0; + if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } + const x0 = Math.cos(startAngle); + const y0 = Math.sin(startAngle); + const x1 = Math.cos(stopAngle); + const y1 = Math.sin(stopAngle); + + /* eslint-disable-next-line prefer-template */ + const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); + let innerArc = ''; + if (innerRadius !== undefined) { + /* eslint-disable-next-line prefer-template */ + innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; + } + return outerArc + innerArc; +} +/* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ + +/** + * Draws polygonal lines (deprecated, use multipolyline instead). + * + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn' + * + * @function (arg1, arg2) + * @private + * @param {Object} a set of points (x, y) defining the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ +function _getLine(shape, closed) { + let path = ''; + shape.forEach((obj) => { + if (obj.x !== null && obj.y !== null) { + if (path === '') { + // path = 'M' + obj.x + ',' + obj.y; + path = `M${obj.x}, ${obj.y}`; + } else { + // path += 'L' + obj.x + ',' + obj.y; + path += `L${obj.x},${obj.y}`; + } + } + }); + if (closed === true) { path += 'Z'; } + return path; +} + +/** + * Returns polyline paths. + * + * The polylines array looks like: + * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' + * + * @function (arg1, arg2) + * @private + * @param {Object} a set of array of points (x, y) defining + * the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ +function _getMultipolyline(shape, closed) { + let path + , subpath + , i + , j + ; + + path = ''; + for (i = 0; i < shape.length; i++) { + subpath = ''; + for (j = 0; j < shape[i].length; j++) { + if (shape[i][j].x !== null && shape[i][j].y !== null) { + if (subpath === '') { + // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; + subpath = `M${shape[i][j].x},${shape[i][j].y}`; + } else { + // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; + subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; + } + } + } + if (closed === true) { subpath += 'z'; } + path += subpath; + } + return path; +} + + +// -- Public Methods ----------------------------------------------------------- + +const Static = { /** * Converts a SVG transform attributes string to an object. * - * @function (arg1) - * @private + * @method (arg1) + * @public * @param {String} the SVG transform atributes string, * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - /* eslint-disable one-var-declaration-per-line */ - function _transformAttrToObj(transform) { - const tr = typeof transform === 'string' ? transform : '' - ; - - const regexN = /[+-]?((?:[1-9]\d*|0)(?:\.\d*)?|\.\d+)([eE][+-]?\d+)?/g; - const regexTr = /translate(.*?)\)/; - const regexSc = /scale(.*?)\)/; - const regexRo = /rotate(.*?)\)/; - const regexSkX = /skewX(.*?)\)/; - const regexSkY = /skewY(.*?)\)/; - const regexMtx = /matrix(.*?)\)/; - - const translate = tr.match(regexTr) === null - ? null - : (function() { - let x, y; - const t = tr.match(regexTr)[0].match(regexN); - if (!t) { - x = null; - y = null; - } else if (t.length === 1) { - x = parseFloat(t[0], 10); - y = x; - } else { - x = parseFloat(t[0], 10); - y = parseFloat(t[1], 10); - } - return { - x, - y, - }; - }()); - - const scale = tr.match(regexSc) === null - ? null - : (function() { - let x, y; - const s = tr.match(regexSc)[0].match(regexN); - if (!s) { - x = null; - y = null; - } else if (s.length === 1) { - x = parseFloat(s[0], 10); - y = x; - } else { - x = parseFloat(s[0], 10); - y = parseFloat(s[1], 10); - } - return { - x, - y, - }; - }()); - - const rotate = tr.match(regexRo) === null - ? null - : (function() { - let a, cx, cy; - const r = tr.match(regexRo)[0].match(regexN); - if (!r) { - a = null; - cx = null; - cy = null; - } else if (r.length === 1) { - a = parseFloat(r[0], 10); - cx = null; - cy = null; - } else if (r.length === 2) { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = cx; - } else { - a = parseFloat(r[0], 10); - cx = parseFloat(r[1], 10); - cy = parseFloat(r[2], 10); - } - return { - a, - cx, - cy, - }; - }()); - - const skewX = tr.match(regexSkX) === null - ? null - : (function() { - const sk = tr.match(regexSkX)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkX)[0].match(regexN)[0], 10); - } - return null; - }()); - - const skewY = tr.match(regexSkY) === null - ? null - : (function() { - const sk = tr.match(regexSkY)[0].match(regexN); - if (sk) { - return parseFloat(tr.match(regexSkY)[0].match(regexN)[0], 10); - } - return null; - }()); - - // Not implemented. - const matrix = tr.match(regexMtx) === null - ? null - : null; - - return { - translate, - scale, - rotate, - matrix, - skewX, - skewY, - }; - } - /* eslint-enable one-var-declaration-per-line */ + transformAttrToObj(transform) { + return _transformAttrToObj(transform); + }, /** * Converts a SVG transform attributes string to an object. * - * @function (arg1) - * @private + * @method (arg1) + * @public * @param {String} the SVG transform atributes string, * @returns {Object} returns the transform attributes, * @since 0.0.0 */ - /* eslint-disable prefer-template */ - function _transformAttrToStr(tr) { - let s = '' - ; - - // Translate: - if (tr.translate && typeof tr.translate.x === 'number') { - if (typeof tr.translate.y === 'number') { - s += 'translate(' + tr.translate.x + ', ' + tr.translate.y + ') '; - } else { - // if y isn't provided, it is assumed to 0: - s += 'translate(' + tr.translate.x + ', ' + 0 + ') '; - } - } - - // Scale: - if (tr.scale && typeof tr.scale.x === 'number') { - if (typeof tr.scale.y === 'number') { - s += 'scale(' + tr.scale.x + ', ' + tr.scale.y + ') '; - } else { - // if y isn't provided, it is assumed to be equal to x: - s += 'scale(' + tr.scale.x + ', ' + tr.scale.x + ') '; - } - } - - // Rotate: - if (tr.rotate && typeof tr.rotate.a === 'number') { - if (typeof tr.rotate.cx === 'number' && typeof tr.rotate.cy === 'number') { - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cy + ') '; - } else if (typeof tr.rotate.cx === 'number') { - // if y isn't provided, it is assumed to be equal to x: - s += 'rotate(' + tr.rotate.a + ', ' + tr.rotate.cx + ', ' + tr.rotate.cx + ') '; - } else { - s += 'rotate(' + tr.rotate.a + ') '; - } - } - - // SkewX: - if (typeof tr.skewX === 'number') { - s += 'skewX(' + tr.skewX + ') '; - } - - // SkewY: - if (typeof tr.skewY === 'number') { - s += 'skewY(' + tr.skewY + ') '; - } - - // matrix not implemented! - // - - - // Return a clean string (no leading/trailing blanck spaces): - return s.replace(/(^\s+|\s+$)/g, ''); - } - /* eslint-enable prefer-template */ + transformAttrToStr(tr) { + return _transformAttrToStr(tr); + }, /** * Returns an arc path. * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' - * - * @function (arg1, arg2, arg3, arg4) - * @private - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, + * @method (arg1, arg2, arg3, arg4) + * @public + * @param {Number} start angle in radius, + * @param {Number} stop angle, + * @param {Number} external radius, + * @param {Number} internal radius, + * @returns {String} returns the SVG path, * @since 0.0.0 */ - /* eslint-disable no-param-reassign, operator-assignment, vars-on-top */ - function _getArc(startAngle, stopAngle, outerRadius, innerRadius) { - startAngle = startAngle !== undefined ? startAngle : 0; - stopAngle = stopAngle !== undefined ? stopAngle : 0; - outerRadius = outerRadius !== undefined ? outerRadius : 0; - startAngle = startAngle % (2 * Math.PI); - if (startAngle > (2 * Math.PI)) { startAngle = startAngle % (2 * Math.PI); } - if (stopAngle > (2 * Math.PI)) { stopAngle = stopAngle % (2 * Math.PI); } - - let sweepflag = 0; - if (Math.abs(stopAngle - startAngle) > Math.PI) { sweepflag = 1; } - const x0 = Math.cos(startAngle); - const y0 = Math.sin(startAngle); - const x1 = Math.cos(stopAngle); - const y1 = Math.sin(stopAngle); - - /* eslint-disable-next-line prefer-template */ - const outerArc = 'M' + (x0 * outerRadius) + ',' + (y0 * outerRadius) + 'A' + outerRadius + ',' + outerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 1 + ' ' + (x1 * outerRadius) + ',' + (y1 * outerRadius); - let innerArc = ''; - if (innerRadius !== undefined) { - /* eslint-disable-next-line prefer-template */ - innerArc = 'L' + (x1 * innerRadius) + ',' + (y1 * innerRadius) + 'A' + innerRadius + ',' + innerRadius + ' ' + 0 + ' ' + sweepflag + ',' + 0 + ' ' + (x0 * innerRadius) + ',' + (y0 * innerRadius) + 'Z'; - } - return outerArc + innerArc; - } - /* eslint-enable no-param-reassign, operator-assignment, vars-on-top */ + getArc(startAngle, stopAngle, outerRadius, innerRadius) { + return _getArc(startAngle, stopAngle, outerRadius, innerRadius); + }, /** * Draws polygonal lines (deprecated, use multipolyline instead). * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' - * - * @function (arg1, arg2) - * @private + * @method (arg1, arg2) + * @public * @param {Object} a set of points (x, y) defining the polygonal line, * @param {Boolean} true if it is a polygon (closed path), * @returns {String} returns the SVG path, * @since 0.0.0 */ - function _getLine(shape, closed) { - let path = ''; - shape.forEach((obj) => { - if (obj.x !== null && obj.y !== null) { - if (path === '') { - // path = 'M' + obj.x + ',' + obj.y; - path = `M${obj.x}, ${obj.y}`; - } else { - // path += 'L' + obj.x + ',' + obj.y; - path += `L${obj.x},${obj.y}`; - } - } - }); - if (closed === true) { path += 'Z'; } - return path; - } + getLine(shape, closed) { + return _getLine(shape, closed); + }, /** * Returns polyline paths. * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' - * - * @function (arg1, arg2) - * @private + * @method (arg1, arg2) + * @public * @param {Object} a set of array of points (x, y) defining * the polygonal line, * @param {Boolean} true if it is a polygon (closed path), * @returns {String} returns the SVG path, * @since 0.0.0 */ - function _getMultipolyline(shape, closed) { - let path - , subpath - , i - , j - ; - - path = ''; - for (i = 0; i < shape.length; i++) { - subpath = ''; - for (j = 0; j < shape[i].length; j++) { - if (shape[i][j].x !== null && shape[i][j].y !== null) { - if (subpath === '') { - // subpath = 'M' + shape[i][j].x + ',' + shape[i][j].y; - subpath = `M${shape[i][j].x},${shape[i][j].y}`; - } else { - // subpath += 'L' + shape[i][j].x + ',' + shape[i][j].y; - subpath += `L${shape[i][j].x}, ${shape[i][j].y}`; - } - } - } - if (closed === true) { subpath += 'z'; } - path += subpath; - } - return path; - } + getMultipolyline(shape, closed) { + return _getMultipolyline(shape, closed); + }, +}; - // -- Public Methods ------------------------------------------------------- - - _.extend(Root, { - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToObj(transform) { - return _transformAttrToObj(transform); - }, - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - transformAttrToStr(tr) { - return _transformAttrToStr(tr); - }, - - /** - * Returns an arc path. - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getArc(startAngle, stopAngle, outerRadius, innerRadius) { - return _getArc(startAngle, stopAngle, outerRadius, innerRadius); - }, - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getLine(shape, closed) { - return _getLine(shape, closed); - }, - - /** - * Returns polyline paths. - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - getMultipolyline(shape, closed) { - return _getMultipolyline(shape, closed); - }, - }); -}()); +// Export +export default Static; + /* eslint-enable one-var, semi-style, no-underscore-dangle */ diff --git a/src/components/svg.js b/src/components/svg.js index 72478d1..8d76d65 100644 --- a/src/components/svg.js +++ b/src/components/svg.js @@ -1,4 +1,4 @@ -/* *************************************************************************** +/** **************************************************************************** * * Creates the SVG node. * @@ -14,90 +14,89 @@ * * * - * @namespace SV.SVG.Public + * @namespace SVG.components.svg * @dependencies none * @exports - * @author - * @since 0.0.0 * @version - - * ************************************************************************ */ + * ************************************************************************** */ /* eslint-disable one-var, semi-style, no-underscore-dangle */ -'use strict'; -(function() { - // IIFE +// -- Vendor modules - // -- Module path - const Root = SV.SVG.Public; +// -- Local modules +import w3c from './w3c'; - // -- Local modules +// -- Local constants - // -- Local constants +// -- Local variables - // -- Local variables +// -- Private Methods ---------------------------------------------------------- + +/** + * Creates the SVG node. + * + * @function (arg1) + * @private + * @param {String} the id or class selector, + * @returns {String} returns the unique id of the svg node, + * @since 0.0.0 + */ +function _create(selector) { + const sel = typeof selector === 'string' ? selector : 'body' + , el = document.querySelector(sel) + , node = el || document.querySelector('body') + ; + + let _root; + // create a unique id: + let id = `i${Math.random().toString(36).substr(2, 7)}`; + + // Check that the svg node doesn't exist: + const isSVG = node.getElementsByTagNameNS(w3c.SVG_NS, 'svg')[0]; + if (!isSVG || isSVG.length === 0) { + // Ok, it doesn't exist, we can create it: + const svg = document.createElementNS(w3c.SVG_NS, 'svg'); + svg.setAttributeNS(null, 'id', id); + svg.setAttributeNS(null, 'version', '1.1'); + svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', w3c.SVG_NS); + svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', w3c.XLINK_NS); + node.appendChild(svg); + _root = svg; + } else { + // It already exists, do not overwrite it! + id = isSVG.getAttributeNS(null, 'id'); + _root = isSVG; + } + return { id, _root }; +} - // -- Private Methods ------------------------------------------------------ + +// -- Public Static Methods ---------------------------------------------------- + +const SV = { /** * Creates the SVG node. * - * @function (arg1) - * @private - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, + * @method (arg1) + * @public + * @param {String} the id or class selector, + * @returns {String} returns the unique id of the svg node, * @since 0.0.0 */ - function _create(selector) { - const sel = typeof selector === 'string' ? selector : 'body' - , el = document.querySelector(sel) - , node = el || document.querySelector('body') - ; - - let _root; - // create a unique id: - let id = `i${Math.random().toString(36).substr(2, 7)}`; - - // Check that the svg node doesn't exist: - const isSVG = node.getElementsByTagNameNS(SVG_NS, 'svg')[0]; - if (!isSVG || isSVG.length === 0) { - // Ok, it doesn't exist, we can create it: - const svg = document.createElementNS(SVG_NS, 'svg'); - svg.setAttributeNS(null, 'id', id); - svg.setAttributeNS(null, 'version', '1.1'); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', SVG_NS); - svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', XLINK_NS); - node.appendChild(svg); - _root = svg; - } else { - // It already exists, do not overwrite it! - id = isSVG.getAttributeNS(null, 'id'); - _root = isSVG; - } - return { id, _root }; - } + create(selector) { + return _create(selector); + }, +}; +// Export +export default SV; - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Creates the SVG node. - * - * @method (arg1) - * @public - * @param {String} the id or class selector, - * @returns {String} returns the unique id of the svg node, - * @since 0.0.0 - */ - create(selector) { - return _create(selector); - }, - }); -}()); /* eslint-enable one-var, semi-style, no-underscore-dangle */ diff --git a/src/components/text.js b/src/components/text.js index 8d61f10..5a803d3 100644 --- a/src/components/text.js +++ b/src/components/text.js @@ -1,4 +1,4 @@ -/* *************************************************************************** +/** **************************************************************************** * * Implements the text methods. * @@ -14,81 +14,80 @@ * * * - * @namespace SV.Methods.Text.Public + * @namespace SVG.src.components.text * @dependencies none * @exports - * @author - * @since 0.0.0 * @version - - * ************************************************************************ */ + * ************************************************************************** */ /* eslint-disable one-var, semi-style, no-underscore-dangle */ -'use strict'; -(function() { - // IIFE +// -- Vendor modules - // -- Module path - const Root = SV.Methods.Text.Public; +// -- Local modules +import Anim from './anim'; - // -- Local modules - const Anim = SV.Anim.Public - ; - // -- Local constants +// -- Local constants - // -- Local variables +// -- Local variables - // -- Private Functions ---------------------------------------------------- +// -- Private Functions -------------------------------------------------------- + +/** + * Adds a text to the selected SVG element. + * + * @function (arg1, arg2) + * @private + * @param {Object} the SVG element, + * @param {Object} the text or the the params for the animation, + * @returns {} -, + * @since 0.0.0 + */ +function _text(el, value) { + switch (typeof value) { + case 'number': + case 'string': + /* eslint-disable-next-line no-param-reassign */ + el.textContent = value; + break; + + case 'object': + Anim.textRun(el, value); + break; + + default: + break; + } +} + + +// -- Public Static Methods ---------------------------------------------------- + +const Text = { /** * Adds a text to the selected SVG element. * - * @function (arg1, arg2) - * @private - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, + * @method (arg1, arg2) + * @public + * @param {Object} the SVG element, + * @param {Object} the text or the the params for the animation, + * @returns {} -, * @since 0.0.0 */ - function _text(el, value) { - switch (typeof value) { - case 'number': - case 'string': - /* eslint-disable-next-line no-param-reassign */ - el.textContent = value; - break; - - case 'object': - Anim.textRun(el, value); - break; - - default: - break; - } - } + text(el, value) { + _text(el, value); + }, +}; + +// Export +export default Text; - // -- Public Static Methods ------------------------------------------------ - - _.extend(Root, { - - /** - * Adds a text to the selected SVG element. - * - * @method (arg1, arg2) - * @public - * @param {Object} the SVG element, - * @param {Object} the text or the the params for the animation, - * @returns {} -, - * @since 0.0.0 - */ - text(el, value) { - _text(el, value); - }, - }); -}()); /* eslint-enable one-var, semi-style, no-underscore-dangle */ diff --git a/src/components/w3c.js b/src/components/w3c.js new file mode 100644 index 0000000..0029c7c --- /dev/null +++ b/src/components/w3c.js @@ -0,0 +1,21 @@ +/* eslint-disable one-var, semi-style, no-underscore-dangle */ + + +// -- Vendor modules + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main + +export default { + SVG_NS: 'http://www.w3.org/2000/svg', + XLINK_NS: 'http://www.w3.org/1999/xlink', +}; diff --git a/src/lib/_.js b/src/lib/_.js index 8eec845..1caad10 100644 --- a/src/lib/_.js +++ b/src/lib/_.js @@ -1,4 +1,4 @@ -/* *************************************************************************** +/** **************************************************************************** * * Provides a subset of the overslash library. * @@ -32,186 +32,186 @@ * @author - * @since 0.0.0 * @version - - * ************************************************************************ */ + * ************************************************************************** */ /* - */ -'use strict'; - -(function() { - // IIFE - - // -- Module path - - - // -- Local modules - - - // -- Local constants - - - // -- Local variables - - - // -- Public Methods ------------------------------------------------------- - - _ = { - - /** - * Extends the passed-in object with new methods. - * - * Nota: this function mutates object. - * - * @function (arg1, arg2) - * @private - * @param {Object} the object to extend, - * @param {Object} an object containing a set of methods, - * @returns {} -, - * @since 0.0.0 - */ - extend(object, methods) { - const keys = Object.keys(methods); - for (let i = 0; i < keys.length; i++) { - /* eslint-disable-next-line no-param-reassign */ - object[keys[i]] = methods[keys[i]]; - } - return object; - }, - - /** - * Is a given variable undefined? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isUndefined(obj) { - return obj === undefined; - }, - - /** - * Is a given value null? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isNull(obj) { - return obj === null; - }, - - /** - * Is a given value a boolean? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isBoolean(obj) { - return obj === true || obj === false || Object.prototype.toString.call(obj) === '[object Boolean]'; - }, - - /** - * Is a given value a string? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isString(obj) { - return Object.prototype.toString.call(obj) === '[object String]'; - }, - - /** - * Is a given value a number? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isNumber(obj) { - return Object.prototype.toString.call(obj) === '[object Number]'; - }, - - /** - * Is a given variable an object? - * (copied from: http://underscorejs.org) - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isObject(obj) { - const type = typeof obj; - return (type === 'function' || type === 'object') && !!obj; - }, - - /** - * Is a given variable a literal object? - * - * @method (arg1) - * @private - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.3 - */ - isLiteralObject(obj) { - return Object.prototype.toString.call(obj) === '[object Object]'; - }, - - /** - * Is a given variable a function? - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isFunction(obj) { - return Object.prototype.toString.call(obj) === '[object Function]'; - }, - - /** - * Is a given value an array? - * (Delegates to ECMA5's native Array.isArray.) - * (copied from: http://underscorejs.org) - * - * @method (arg1) - * @public - * @param {Object} the object to test, - * @returns {Boolean} returns true or false, - * @since 0.0.0 - */ - isArray(obj) { - return Object.prototype.toString.call(obj) === '[object Array]'; - }, - - /** - * Computes the intermediate values according to a linear progression. - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} the current time, - * @param {Number} the beginning value, - * @param {Number} the change in value, - * @param {Number} the duration, - * @returns {Number} returns the computed value, - */ - elinear(t, b, c, d) { - return (c * t) / d + b; - }, - }; -}()); + +// -- Vendor modules + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Public Methods ------------------------------------------------------- + +const _ = { + + /** + * Extends the passed-in object with new methods. + * + * Nota: this function mutates object. + * + * @function (arg1, arg2) + * @private + * @param {Object} the object to extend, + * @param {Object} an object containing a set of methods, + * @returns {} -, + * @since 0.0.0 + */ + extend(object, methods) { + const keys = Object.keys(methods); + for (let i = 0; i < keys.length; i++) { + /* eslint-disable-next-line no-param-reassign */ + object[keys[i]] = methods[keys[i]]; + } + return object; + }, + + /** + * Is a given variable undefined? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isUndefined(obj) { + return obj === undefined; + }, + + /** + * Is a given value null? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isNull(obj) { + return obj === null; + }, + + /** + * Is a given value a boolean? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isBoolean(obj) { + return obj === true || obj === false || Object.prototype.toString.call(obj) === '[object Boolean]'; + }, + + /** + * Is a given value a string? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isString(obj) { + return Object.prototype.toString.call(obj) === '[object String]'; + }, + + /** + * Is a given value a number? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isNumber(obj) { + return Object.prototype.toString.call(obj) === '[object Number]'; + }, + + /** + * Is a given variable an object? + * (copied from: http://underscorejs.org) + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isObject(obj) { + const type = typeof obj; + return (type === 'function' || type === 'object') && !!obj; + }, + + /** + * Is a given variable a literal object? + * + * @method (arg1) + * @private + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.3 + */ + isLiteralObject(obj) { + return Object.prototype.toString.call(obj) === '[object Object]'; + }, + + /** + * Is a given variable a function? + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isFunction(obj) { + return Object.prototype.toString.call(obj) === '[object Function]'; + }, + + /** + * Is a given value an array? + * (Delegates to ECMA5's native Array.isArray.) + * (copied from: http://underscorejs.org) + * + * @method (arg1) + * @public + * @param {Object} the object to test, + * @returns {Boolean} returns true or false, + * @since 0.0.0 + */ + isArray(obj) { + return Object.prototype.toString.call(obj) === '[object Array]'; + }, + + /** + * Computes the intermediate values according to a linear progression. + * + * @method (arg1, arg2, arg3, arg4) + * @public + * @param {Number} the current time, + * @param {Number} the beginning value, + * @param {Number} the change in value, + * @param {Number} the duration, + * @returns {Number} returns the computed value, + */ + elinear(t, b, c, d) { + return (c * t) / d + b; + }, +}; + + +// Export +export default _; + /* - */ diff --git a/src/svg.js b/src/svg.js index 66f2fdf..1cce354 100644 --- a/src/svg.js +++ b/src/svg.js @@ -1,4 +1,4 @@ -/* *************************************************************************** +/** **************************************************************************** * * Defines the SVG object. * @@ -32,187 +32,190 @@ * * * - * @namespace SVG + * @namespace SVG.src.svg * @dependencies none * @exports - * @author - * @since 0.0.0 * @version - - * ************************************************************************ */ + * ************************************************************************** */ +/* global root */ /* eslint-disable one-var, semi-style, no-underscore-dangle */ -'use strict'; - -(function() { - // IIFE - - // -- Module path - - - // -- Local modules - const $ = SV.Dollar.Public - , S = SV.SVG.Public - , SM = SV.Methods.Static.Public - ; - - - // -- Local constants - // Saves the previous value of the library variable, so that it can be - // restored later on, if noConflict is used. - const previousSVG = root.SVG; - - - // -- Local variables - let methods; - - - // -- Public - - /** - * Creates the SVG object. - * - * @constructor (arg1) - * @public - * @param {String} the selector id or class, - * @returns {Object} returns the SVG object, - * @since 0.0.0 - */ - SVG = function(selector) { - const obj = Object.create(_.extend(methods, $)); - const { id, _root } = S.create(selector); - obj.id = id; - obj._root = _root; - obj._SVG = SVG; - return obj; - }; - - - // -- Private & Public Static Methods -------------------------------------- - - - /** - * Returns the internal objects for testing purpose. - * - * @method () - * @private - * @param {} -, - * @returns {Object} returns TV tree, - * @since 0.0.0 - */ - SVG._setTestMode = function() { - return SV; - }; - - /** - * Returns a reference to this SVG object. - * - * Nota: - * Running SVG in noConflic mode, returns the SVG variable to its - * previous owner. - * - * @method () - * @public - * @param {} -, - * @returns {Object} returns the SVG object, - * @since 0.0.0 - */ - SVG.noConflict = function() { - /* eslint-disable-next-line no-param-reassign */ - root.SVG = previousSVG; - return this; - }; - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - SVG.transformAttrToObj = function(transform) { - return SM.transformAttrToObj(transform); - }; - - /** - * Converts a SVG transform attributes string to an object. - * - * @method (arg1) - * @public - * @param {String} the SVG transform atributes string, - * @returns {Object} returns the transform attributes, - * @since 0.0.0 - */ - SVG.transformAttrToStr = function(tr) { - return SM.transformAttrToStr(tr); - }; - - /** - * Returns an arc path. - * - * The returned path has the following format: - * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' - * - * @method (arg1, arg2, arg3, arg4) - * @public - * @param {Number} start angle in radius, - * @param {Number} Stop angle, - * @param {Number} external radius, - * @param {Number} internal radius, - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getArc = function(startAngle, stopAngle, outerRadius, innerRadius) { - return SM.getArc(startAngle, stopAngle, outerRadius, innerRadius); - }; - - /** - * Draws polygonal lines (deprecated, use multipolyline instead). - * - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn' - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of points (x, y) defining the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getLine = function(shape, closed) { - return SM.getLine(shape, closed); - }; - - /** - * Returns polyline paths. - * - * The polylines array looks like: - * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] - * The returned path has the following format: - * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' - * - * @method (arg1, arg2) - * @public - * @param {Object} a set of array of points (x, y) defining - * the polygonal line, - * @param {Boolean} true if it is a polygon (closed path), - * @returns {String} returns the SVG path, - * @since 0.0.0 - */ - SVG.getMultipolyline = function(shape, closed) { - return SM.getMultipolyline(shape, closed); - }; - - - // -- Public Methods ------------------------------------------------------- - - methods = { - // none yet! - }; - - - // Attaches a constant to View that provides the version of the lib. - SVG.VERSION = '{{lib:version}}'; -}()); + +// -- Vendor modules + + +// -- Local modules +import $ from './components/dollar'; +import S from './components/svg'; +import SM from './components/staticmethods'; + + +// -- Local constants +// Saves the previous value of the library variable, so that it can be +// restored later on, if noConflict is used. +const previousSVG = root.SVG; + + +// -- Local variables +let methods; + + +// -- Public ------------------------------------------------------------------- + +/** + * Creates the SVG object. + * + * @constructor (arg1) + * @public + * @param {String} the selector id or class, + * @returns {Object} returns the SVG object, + * @since 0.0.0 + */ +const SVG = function(selector) { + const obj = Object.create(methods); + obj.$ = $; + const { id, _root } = S.create(selector); + obj.id = id; + obj._root = _root; + obj._SVG = SVG; + return obj; +}; + + +// -- Private Static Methods --------------------------------------------------- + +/** + * Returns the internal objects for testing purpose. + * + * @method () + * @private + * @param {} -, + * @returns {Object} returns TV tree, + * @since 0.0.0 + */ +SVG._setTestMode = function() { + return {}; +}; + + +// -- Public Static Methods ---------------------------------------------------- + +/** + * Returns a reference to this SVG object. + * + * Nota: + * Running SVG in noConflic mode, returns the SVG variable to its + * previous owner. + * + * @method () + * @public + * @param {} -, + * @returns {Object} returns the SVG object, + * @since 0.0.0 + */ +SVG.noConflict = function() { + /* eslint-disable-next-line no-param-reassign */ + root.SVG = previousSVG; + return this; +}; + +/** + * Converts a SVG transform attributes string to an object. + * + * @method (arg1) + * @public + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, + * @since 0.0.0 + */ +SVG.transformAttrToObj = function(transform) { + return SM.transformAttrToObj(transform); +}; + +/** + * Converts a SVG transform attributes string to an object. + * + * @method (arg1) + * @public + * @param {String} the SVG transform atributes string, + * @returns {Object} returns the transform attributes, + * @since 0.0.0 + */ +SVG.transformAttrToStr = function(tr) { + return SM.transformAttrToStr(tr); +}; + +/** + * Returns an arc path. + * + * The returned path has the following format: + * 'Mx0,y0 Arx,ry 0 sweepflag x1,y1 L x1,y1 Arx,ry 0 sweepflag x0,y0 Z' + * + * @method (arg1, arg2, arg3, arg4) + * @public + * @param {Number} start angle in radius, + * @param {Number} stop angle, + * @param {Number} external radius, + * @param {Number} internal radius, + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ +SVG.getArc = function(startAngle, stopAngle, outerRadius, innerRadius) { + return SM.getArc(startAngle, stopAngle, outerRadius, innerRadius); +}; + +/** + * Draws polygonal lines (deprecated, use multipolyline instead). + * + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn' + * + * @method (arg1, arg2) + * @public + * @param {Object} a set of points (x, y) defining the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ +SVG.getLine = function(shape, closed) { + return SM.getLine(shape, closed); +}; + +/** + * Returns polyline paths. + * + * The polylines array looks like: + * [ [{x: n, y: n}, {}, {}, ... {}], [{...}], [{...}] ] + * The returned path has the following format: + * 'Mx0,y0 Lx1,y1 .... Lxn,yn Mx0,y0 ...' + * + * @method (arg1, arg2) + * @public + * @param {Object} a set of array of points (x, y) defining + * the polygonal line, + * @param {Boolean} true if it is a polygon (closed path), + * @returns {String} returns the SVG path, + * @since 0.0.0 + */ +SVG.getMultipolyline = function(shape, closed) { + return SM.getMultipolyline(shape, closed); +}; + + +// -- Public Methods ----------------------------------------------------------- + +methods = { + // none yet! +}; + + +// Attaches a constant to View that provides the version of the lib. +SVG.VERSION = '{{lib:version}}'; + + +// -- Export +export default SVG; + /* eslint-enable one-var, semi-style, no-underscore-dangle */ diff --git a/src/tree.js b/src/tree.js deleted file mode 100644 index 07a89cf..0000000 --- a/src/tree.js +++ /dev/null @@ -1,41 +0,0 @@ -/* *************************************************************************** - * - * Tree is an internal object that links all the internal modules. - * - * tree.js is just a literal object that contains a set of functions. It - * can't be intantiated. - * - * - * @namespace SVG - * @exports - - * @author - - * @since 0.0.0 - * @version - - * ************************************************************************ */ -/* - */ - -'use strict'; - -const SV = { - Dollar: { - Public: {}, - }, - SVG: { - Public: {}, - }, - Anim: { - Public: {}, - }, - Methods: { - Static: { - Public: {}, - }, - Attr: { - Public: {}, - }, - Text: { - Public: {}, - }, - }, -}; -/* - */ diff --git a/tasks/config.js b/tasks/config.js index 7416a45..04d85cc 100644 --- a/tasks/config.js +++ b/tasks/config.js @@ -1,46 +1,47 @@ -/* eslint */ +/* eslint one-var: 0, semi-style: 0 */ -'use strict'; + +// -- Vendor modules + + +// -- Local modules +const pack = require('../package.json'); + + +// -- Local constants +const libname = 'SVG' + , source = './src/svg.js' + , exportname = 'SVG' + ; + + +// -- Local variables + + +// -- Main module.exports = { dist: './_dist', libdir: './lib', - libname: 'SVG', - parent: 'this', - noparent: '-noparent', + libname, + // This is the entry javascript file of your library. + source, + export: exportname, index: './index.js', - // These are the Javascript files required to build the library. - /* eslint-disable no-multi-spaces */ - src: [ - // These three files (_header, tree.js and extend.js) must be declared in - // this order as they create the umd module, define the object tree and - // the function to fill the tree! - './src/_header', - './src/tree.js', - './src/svg.js', - - // Embedded libraries: - './src/lib/_.js', - - './src/components/$.js', - './src/components/anim.js', - './src/components/attr.js', - './src/components/staticmethods.js', - './src/components/svg.js', - './src/components/text.js', - - // This file must always be the last one as it closes the umd module. - './src/_footer', - ], + distlink: `./lib/${libname}.js`, + /* eslint-enable no-multi-spaces */ - license: ['/*! ****************************************************************************', - ' * {{lib:name}} v{{lib:version}}', - ' *', - ' * {{lib:description}}.', - ' * (you can download it from npm or github repositories)', - ' * Copyright (c) 2019 {{lib:author}} <{{lib:email}}> ({{lib:url}}).', - ' * Released under the MIT license. You may obtain a copy of the License', - ' * at: http://www.opensource.org/licenses/mit-license.php).', - ' * ************************************************************************** */', - ''].join('\n'), + get license() { + return ['/*! ****************************************************************************', + ` * ${libname} v${pack.version}`, + ' *', + ` * ${pack.description}.`, + ' * (you can download it from npm or github repositories)', + ` * Copyright (c) ${(new Date()).getFullYear()} ${pack.author.name} <${pack.author.email}> (${pack.author.url}).`, + ' * Released under the MIT license. You may obtain a copy of the License', + ' * at: http://www.opensource.org/licenses/mit-license.php).', + ' * Built from ES6Pakket v0.0.1-alpha.1.', + ' * ************************************************************************** */', + ''].join('\n'); + }, }; diff --git a/tasks/makedist.js b/tasks/makedist.js index 10fecf2..3183770 100644 --- a/tasks/makedist.js +++ b/tasks/makedist.js @@ -1,21 +1,18 @@ /* eslint one-var: 0, import/no-extraneous-dependencies: 0, semi-style: 0, object-curly-newline: 0 */ -'use strict'; // -- Node modules const { src, dest, series, parallel } = require('gulp') , del = require('del') , concat = require('gulp-concat') , header = require('gulp-header') - , replace = require('gulp-replace') , uglify = require('gulp-uglify-es').default ; // -- Local modules const config = require('./config') - , pack = require('../package.json') ; @@ -23,7 +20,6 @@ const config = require('./config') const { dist } = config , { libdir } = config , { libname } = config - , { noparent } = config , name = libname.replace(/\s+/g, '').toLowerCase() , { license } = config ; @@ -43,34 +39,16 @@ function deldist(done) { // Copies README and LICENSE. function doskeleton() { return src(['README.md', 'LICENSE.md']) - .pipe(dest(dist)); + .pipe(dest(dist)) + ; } // Copies the development version. function copydev() { return src(`${libdir}/${name}.js`) .pipe(header(license)) - .pipe(replace('{{lib:name}}', `${libname}`)) - .pipe(replace('{{lib:version}}', pack.version)) - .pipe(replace('{{lib:description}}', pack.description)) - .pipe(replace('{{lib:author}}', pack.author.name)) - .pipe(replace('{{lib:email}}', pack.author.email)) - .pipe(replace('{{lib:url}}', pack.author.url)) - .pipe(dest(`${dist}/lib`)); -} - -// Copies the development version without parent. -function makenoparentlib() { - return src(`${libdir}/${name}${noparent}.js`) - .pipe(header(license)) - .pipe(replace('{{lib:name}}', `${libname}`)) - .pipe(replace('{{lib:version}}', pack.version)) - .pipe(replace('{{lib:description}}', pack.description)) - .pipe(replace('{{lib:author}}', pack.author.name)) - .pipe(replace('{{lib:email}}', pack.author.email)) - .pipe(replace('{{lib:url}}', pack.author.url)) - .pipe(replace(/ {2}'use strict';\n\n/g, '')) - .pipe(dest(`${dist}/lib`)); + .pipe(dest(`${dist}/lib`)) + ; } // Creates the minified version. @@ -78,26 +56,15 @@ function makeminified() { return src(`${libdir}/${name}.js`) .pipe(uglify()) .pipe(header(license)) - .pipe(replace('{{lib:name}}', `${libname}`)) - .pipe(replace('{{lib:version}}', pack.version)) - .pipe(replace('{{lib:description}}', pack.description)) - .pipe(replace('{{lib:author}}', pack.author.name)) - .pipe(replace('{{lib:email}}', pack.author.email)) - .pipe(replace('{{lib:url}}', pack.author.url)) .pipe(concat(`${name}.min.js`)) - .pipe(dest(`${dist}/lib`)); -} - -// Copies the examples. -function copyex() { - return src('examples/**/*') - .pipe(dest(`${dist}/examples`)) + .pipe(dest(`${dist}/lib`)) ; } + // -- Gulp Public Task(s): module.exports = series( deldist, - parallel(doskeleton, copydev, makenoparentlib, makeminified, copyex), + parallel(doskeleton, copydev, makeminified), ); diff --git a/tasks/makejs.js b/tasks/makejs.js index 572d0c5..0e53fdb 100644 --- a/tasks/makejs.js +++ b/tasks/makejs.js @@ -1,31 +1,28 @@ /* eslint one-var: 0, import/no-extraneous-dependencies: 0, semi-style: 0 */ -'use strict'; // -- Node modules const { src, dest, series } = require('gulp') - , del = require('del') - , concat = require('gulp-concat') - , footer = require('gulp-footer') - , replace = require('gulp-replace') + , del = require('del') + , concat = require('gulp-concat') + , replace = require('gulp-replace') + , Pakket = require('pakket') ; // -- Local modules -const config = require('./config') - ; +const pack = require('../package.json') + , config = require('./config') + ; // -- Local constants const destination = config.libdir - , source = config.src - , lib = config.libname - , name = lib.replace(/\s+/g, '').toLowerCase() - , { parent } = config - , { noparent } = config - , head = source[0] - , core = source.slice(1, -1) - , foot = source[source.length - 1] + , { source } = config + , exportname = config.export + , { libname } = config + , name = libname.replace(/\s+/g, '').toLowerCase() + , { version } = pack ; @@ -40,46 +37,27 @@ function clean(done) { done(); } -// Creates the indented content. -function docore() { - return src(core) - // remove the extra 'use strict': - .pipe(replace(/\n'use strict';\n/, '')) - // indent the first line with 2 spaces: - .pipe(replace(/^/g, ' ')) - // indent each other lines with 2 spaces: - .pipe(replace(/\n/g, '\n ')) - // remove the indent added to the blanck lines: - // (we need to add an extra line otherwise the indent isn't removed - // from the last line!) - .pipe(footer('\n')) - .pipe(replace(/\s\s\n/g, '\n')) - .pipe(concat('core.js')) - .pipe(dest(destination)); -} - -// Creates the library without 'this'. -function dolibnoparent() { - return src([head, `${destination}/core.js`, foot]) - .pipe(replace('{{lib:name}}', lib)) - .pipe(concat(`${name}${noparent}.js`)) - .pipe(dest(destination)); -} - // Creates the library. function dolib() { - return src(`${destination}/${name}${noparent}.js`) - .pipe(replace('{{lib:parent}}', parent)) + const pakket = Pakket(source, { export: exportname }); + return pakket.bundle() + .pipe(replace('{{lib:version}}', version)) .pipe(concat(`${name}.js`)) - .pipe(dest(destination)); + .pipe(dest(destination)) + ; } -// Removes the temp file(s). -function delcore(done) { - del.sync(`${destination}/core.js`); - done(); +// Remove extra global. +// (keep the first global only) +function rmextraglob() { + return src(`${destination}/${name}.js`) + .pipe(replace(/\/\* global/, '/* gloobal')) + .pipe(replace(/\/\* global[\w$_\s,]+\*\//g, '/* - */')) + .pipe(replace(/\/\* gloobal/, '/* global')) + .pipe(dest(destination)) + ; } // -- Gulp Public Task(s) -module.exports = series(clean, docore, dolibnoparent, dolib, delcore); +module.exports = series(clean, dolib, rmextraglob); diff --git a/test/int/testanimation.js b/test/int/testanimation.js new file mode 100644 index 0000000..505bce1 --- /dev/null +++ b/test/int/testanimation.js @@ -0,0 +1,40 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG, dom) { + describe('Test SVG() methods (next):', () => { + describe('Test SVG().animate():', () => { + it('Expects SVG("#app30").$("text").animate() to attach easing and frequency to it.', () => { + SVG('#app30').$('text').animate(); + const el = dom.window.document.getElementById('app30').querySelector('text'); + expect(el.easing).to.be.a('function'); + expect(el.frequency).to.be.a('number').that.is.equal(40); + }); + + it('Expects SVG("#app30").$("text").animate(fn, 1000) to attach easing and frequency to it.', () => { + const fn = function() {}; + SVG('#app30').$('text').animate(fn, 1000); + const el = dom.window.document.getElementById('app30').querySelector('text'); + expect(el.easing).to.be.a('function'); + expect(el.frequency).to.be.a('number').that.is.equal(1); + }); + }); + }); +}; diff --git a/test/int/testattrs.js b/test/int/testattrs.js new file mode 100644 index 0000000..66e6a05 --- /dev/null +++ b/test/int/testattrs.js @@ -0,0 +1,56 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG, dom) { // append, appendhtml, replace, remove + describe('Test SVG().$() methods (next):', () => { + // + describe('Test SVG().$().alink():', () => { + it('Expects SVG("#app50").$("rect").alink(attr, url) to attach an url attribute.', () => { + expect(SVG('#app50').$('rect').alink('href', '#')).to.be.an('object'); + }); + }); + + describe('Test SVG().$().attr():', () => { + it('Expects SVG("#app51").$("rect").attr("x", "100")... to add attributes.', () => { + SVG('#app51').$('rect') + .attr('x', '100').attr('y', '100') + .attr('width', '200') + .attr('height', '200') + ; + const node = dom.window.document.getElementById('app51').firstChild.firstChild.outerHTML; + const s = ''; + expect(node).to.be.a('string').that.is.equal(s); + }); + }); + + describe('Test SVG().$().rmattr():', () => { + it('Expects SVG("#app51").$("rect").rmattr()... to remove the previously added attributes.', () => { + SVG('#app51').$('rect') + .rmattr('x').rmattr('y') + .rmattr('width') + .rmattr('height') + ; + const node = dom.window.document.getElementById('app51').firstChild.firstChild.outerHTML; + const s = ''; + expect(node).to.be.a('string').that.is.equal(s); + }); + }); + }); +}; diff --git a/test/int/testclass.js b/test/int/testclass.js new file mode 100644 index 0000000..11c285a --- /dev/null +++ b/test/int/testclass.js @@ -0,0 +1,60 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG, dom) { // append, appendhtml, replace, remove + describe('Test SVG().$() methods (next):', () => { + // + describe('Test SVG().$().addClass():', () => { + it('Expects SVG("#app70").$().append("rect").addClass("aaa") to add the class name "aaa".', () => { + SVG('#app70').$().append('rect').addClass('aaa'); + const { classList } = dom.window.document.getElementById('app70').firstChild.firstChild; + expect(classList.length).to.be.a('number').that.is.equal(1); + expect(classList[0]).to.be.a('string').that.is.equal('aaa'); + }); + + it('Expects SVG("#app70").$().addClass("bbb") to add the class name "bbb".', () => { + SVG('#app70').$().select('rect').addClass('bbb'); + const { classList } = dom.window.document.getElementById('app70').firstChild.firstChild; + expect(classList.length).to.be.a('number').that.is.equal(2); + expect(classList[0]).to.be.a('string').that.is.equal('aaa'); + expect(classList[1]).to.be.a('string').that.is.equal('bbb'); + }); + + it('Expects SVG("#app71").$().removeClass("abc") to remove the class name "abc".', () => { + SVG('#app71').$().removeClass('abc'); + const { classList } = dom.window.document.getElementById('app71').firstChild.firstChild; + expect(classList.length).to.be.a('number').that.is.equal(1); + }); + + it('Expects SVG("#app72").$().append("rect").select("rect").toggleClass("cde") to add the class name "cde".', () => { + SVG('#app72').$().append('rect').toggleClass('cde'); + const { classList } = dom.window.document.getElementById('app72').firstChild.firstChild; + expect(classList.length).to.be.a('number').that.is.equal(1); + expect(classList[0]).to.be.a('string').that.is.equal('cde'); + }); + + it('Expects SVG("#app73").$().toggleClass("def") to remove the class name "def".', () => { + SVG('#app73').$().select('rect').toggleClass('def'); + const { classList } = dom.window.document.getElementById('app73').firstChild.firstChild; + expect(classList.length).to.be.a('number').that.is.equal(0); + }); + }); + }); +}; diff --git a/test/int/testdom.js b/test/int/testdom.js new file mode 100644 index 0000000..ddc514c --- /dev/null +++ b/test/int/testdom.js @@ -0,0 +1,66 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG, dom) { // append, appendhtml, replace, remove + describe('Test SVG().$ methods (next):', () => { + // + describe('Test SVG().$().append():', () => { + it('Expects SVG("#app20").$().append("rect") to append "" as the first child.', () => { + SVG('#app20').$().append('rect'); + const el = dom.window.document.getElementById('app20'); + const firstChild = el.querySelector('rect').outerHTML; + expect(firstChild).to.be.a('string').that.is.equal(''); + }); + }); + + describe('Test SVG().$().appendHTML():', () => { + it('Expects SVG("#app21").$().appendHTML("

Hello!

") to insert this XMLString as a foreignObject.', () => { + const xmlString = '

Hello!

'; + const foreignObject = '

Hello!

'; + SVG('#app21').$().append('foreignObject').appendHTML(xmlString); + const el = dom.window.document.getElementById('app21').firstChild.firstChild.firstChild.outerHTML; + expect(el).to.be.a('string').that.is.equal(foreignObject); + }); + }); + + describe('Test SVG().$().replace():', () => { + it('Expects SVG("#app22").$().select("rect").replace("text") to append "" as the first child.', () => { + const child = SVG('#app22').$().select('rect').replace('text')[0].outerHTML; + const firstChild = dom.window.document.getElementById('app22').firstChild.firstChild.outerHTML; + expect(firstChild).to.be.a('string').that.is.equal(child); + }); + }); + + describe('Test SVG().$().remove():', () => { + it('Expects SVG("#app23").$().select("rect").remove() to return "" as the first child.', () => { + SVG('#app23').$().select('rect').remove(); + const firstChild = dom.window.document.getElementById('app23').firstChild.firstChild.outerHTML; + expect(firstChild).to.be.a('string').that.is.equal(''); + }); + }); + + describe('Test SVG().$().removeAllChilds():', () => { + it('Expects SVG("#app24").$().removeAllChilds() to return "null" as the first child.', () => { + SVG('#app24').$().removeAllChilds(); + const { firstChild } = dom.window.document.getElementById('app24').firstChild; + expect(firstChild).to.be.null; + }); + }); + }); +}; diff --git a/test/int/testevents.js b/test/int/testevents.js new file mode 100644 index 0000000..c0bfce5 --- /dev/null +++ b/test/int/testevents.js @@ -0,0 +1,41 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG) { + /** + * The test is limited to check that the methods exist. + */ + describe('Test SVG().$ methods (next):', () => { + // + describe('Test SVG().$().listen():', () => { + it('Expects SVG("#app40").$("text").listen(fn) to attach an event handler.', () => { + const fn = function() {}; + expect(SVG('#app40').$('text').listen(fn)).to.be.an('object'); + }); + }); + + describe('Test SVG().$().unlisten():', () => { + it('Expects SVG("#app40").$("text").unlisten(fn) to remove the event handler.', () => { + const fn = function() {}; + expect(SVG('#app40').$('text').unlisten(fn)).to.be.an('object'); + }); + }); + }); +}; diff --git a/test/int/testnonchainingmethods.js b/test/int/testnonchainingmethods.js new file mode 100644 index 0000000..01c6785 --- /dev/null +++ b/test/int/testnonchainingmethods.js @@ -0,0 +1,89 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG) { // append, appendhtml, replace, remove + describe('Test SVG().$() non chaining methods:', () => { + // + describe('Test SVG().createEvent():', () => { + it('Expects SVG("#app80").createEvent() to return an object.', () => { + // Not supported by JSDOM? + // expect(SVG('#app80').append('text').createEvent()).to.be.an('object'); + }); + }); + + describe('Test SVG().$().query():', () => { + it('Expects SVG("#app81").$().query("text") to return .', () => { + /* eslint-disable indent */ + const elem = SVG('#app81').$() + .append('rect') + .append('text') + .parent() + .query('text') + ; + /* eslint-enable indent */ + expect(elem.outerHTML).to.be.a('string').that.is.equal(''); + }); + }); + + describe('Test SVG().$().getElement():', () => { + it('Expects SVG("#app82").$().select("text").getElement().outerHTML to return .', () => { + const elem = SVG('#app82').$().append('text').getElement(); + expect(elem.outerHTML).to.be.a('string').that.is.equal(''); + }); + }); + + describe('Test SVG().$().getAttribute():', () => { + it('Expects SVG("#app83").[...].getAttribute("height") to return 100.', () => { + const value = SVG('#app83').$() + .append('text') + .attr('height', '100') + .getAttribute('height') + ; + expect(value).to.be.a('string').that.is.equal('100'); + }); + }); + + describe('Test SVG().$().getComputedStyle():', () => { + it('Expects SVG("#app84").[...].getComputedStyle() to return a CSSStyleDeclaration object.', () => { + const o = SVG('#app84').$().append('text').getComputedStyle(); + expect(o).to.be.an('object'); + expect(o.color).not.to.be.undefined; + }); + }); + + describe('Test SVG().$().getPropertyValue():', () => { + it('Expects getPropertyValue to return the value of the object returned by getComputedStyle.', () => { + expect(SVG('#app84').$().select('text').getPropertyValue('color')).to.be.a('string'); + }); + }); + + describe('Test SVG().$().getSize():', () => { + it('Expects SVG("#app85").[...].getSize() to return { width: 0, height: 0 }.', () => { + const o = SVG('#app85').$().append('text').getSize(); + expect(o.height).to.be.a('number').that.is.equal(0); + expect(o.width).to.be.a('number').that.is.equal(0); + }); + }); + + describe('Test SVG().trigger():', () => { + // + }); + }); +}; diff --git a/test/int/testselect.js b/test/int/testselect.js new file mode 100644 index 0000000..6f0767f --- /dev/null +++ b/test/int/testselect.js @@ -0,0 +1,38 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG) { + describe('Test SVG()$() methods:', () => { + // + describe('Test SVG().select():', () => { + it('Expects SVG("#app10").$("text") to return the SVG node "."', () => { + const node = SVG('#app10').$('text')[0].outerHTML; + expect(node).to.be.a('string').that.is.equal(''); + }); + }); + + describe('Test SVG().parent():', () => { + it('Expects SVG("#app10").$("text").parent() to return the SVG node "."', () => { + const node = SVG('#app10').$('text').parent()[0].outerHTML; + expect(node).to.be.a('string').that.is.equal(''); + }); + }); + }); +}; diff --git a/test/int/teststatic.js b/test/int/teststatic.js index 5b7b780..ab6e189 100644 --- a/test/int/teststatic.js +++ b/test/int/teststatic.js @@ -1,41 +1,23 @@ /* global describe, it */ /* eslint one-var: 0, semi-style: 0 */ -'use strict'; // -- Node modules const { expect } = require('chai') ; + // -- Local modules -const SVG = require('../../index.js') - ; + // -- Local constants // -- Local variables -/* -* . transformAttrToObj converts a SVG transform attributes string to an object, -* . transformAttrToStr converts a SVG transform attributes object to a string, -* . getArc returns an arc path, -* . multipolyline returns polyline paths, -*/ - -/* -rotate: null, - matrix: null, - skewX: null, - skewY: null } -*/ // -- Main -module.exports = function() { - -console.log(SVG.transformAttrToStr({ translate: { x: 0, y: 1 }, scale: { x: 2, y: 3 }, rotate: { a: 90 } })); - - +module.exports = function(SVG) { describe('Test SVG Static Methods:', () => { describe('Test SVG.transformAttrToObj:', () => { it('Expects SVG.transformAttrToObj to be a function.', () => { @@ -75,7 +57,6 @@ console.log(SVG.transformAttrToStr({ translate: { x: 0, y: 1 }, scale: { x: 2, y expect(tr).to.be.have.property('rotate').that.is.an('object'); }); - // { a: 90, cx: null, cy: null } it('Expects the property "rotate" to own the property "a" that is equal to 90.', () => { expect(tr.rotate).to.be.have.property('a').that.is.a('Number').that.is.equal(90); }); @@ -103,18 +84,40 @@ console.log(SVG.transformAttrToStr({ translate: { x: 0, y: 1 }, scale: { x: 2, y it('Expects SVG.getArc to be a function.', () => { expect(SVG.getArc).to.be.a('function'); }); + + it('Expects SVG.getArc(0, 360, 100, 100) to return a string starting with "M100,0A100,100 0 0,".', () => { + expect(SVG.getArc(0, 360, 100, 100)).to.be.a('string').that.contains('M100,0A100,100 0 0,'); + }); }); describe('Test SVG.getLine:', () => { it('Expects SVG.line to be a function.', () => { expect(SVG.getLine).to.be.a('function'); }); + + it('Expects SVG.getLine([{x: 0, y: 0}, {x: 100, y:100}]) to return a string that is equal to "M0, 0L100,100".', () => { + expect(SVG.getLine([{ x: 0, y: 0 }, { x: 100, y: 100 }])).to.be.a('string').that.is.equal('M0, 0L100,100'); + }); + + it('Expects SVG.getLine([{x: 0, y: 0}, {x: 100, y:100}], true) to return a string that is equal to "M0, 0L100,100Z".', () => { + expect(SVG.getLine([{ x: 0, y: 0 }, { x: 100, y: 100 }], true)).to.be.a('string').that.is.equal('M0, 0L100,100Z'); + }); }); describe('Test SVG.getMultipolyline:', () => { + const mp = [[{ x: 0, y: 0 }, { x: 100, y: 100 }], [{ x: 0, y: 0 }, { x: 100, y: 100 }]]; + it('Expects SVG.multipolyline to be a function.', () => { expect(SVG.getMultipolyline).to.be.a('function'); }); + + it('Expects SVG.multipolyline([...]) to return a string that is equal to "M0,0L100, 100M0,0L100, 100".', () => { + expect(SVG.getMultipolyline(mp)).to.be.a('string').that.is.equal('M0,0L100, 100M0,0L100, 100'); + }); + + it('Expects SVG.multipolyline([...], true) to return a string that is equal to "M0,0L100, 100zM0,0L100, 100z".', () => { + expect(SVG.getMultipolyline(mp, true)).to.be.a('string').that.is.equal('M0,0L100, 100zM0,0L100, 100z'); + }); }); }); }; diff --git a/test/int/teststatic2.js b/test/int/teststatic2.js new file mode 100644 index 0000000..6714848 --- /dev/null +++ b/test/int/teststatic2.js @@ -0,0 +1,195 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG) { + describe('Test SVG functions (next):', () => { + // + describe('Test SVG.transformAttrToObj();', () => { + it('Expects SVG.transformAttrToObj() without arguments to return an object.', () => { + expect(SVG.transformAttrToObj()).to.be.an('object'); + }); + it('Expects this object to have all its own properties with the null value.', () => { + const obj = SVG.transformAttrToObj(); + expect(obj).to.have.property('translate').that.is.null; + expect(obj).to.have.property('scale').that.is.null; + expect(obj).to.have.property('rotate').that.is.null; + expect(obj).to.have.property('matrix').that.is.null; + expect(obj).to.have.property('skewX').that.is.null; + expect(obj).to.have.property('skewY').that.is.null; + }); + it('Expects SVG.transformAttrToObj("") with an empty string to return an object.', () => { + expect(SVG.transformAttrToObj('')).to.be.an('object'); + }); + it('Expects this object to have all its own properties with the null value.', () => { + const obj = SVG.transformAttrToObj(); + expect(obj).to.have.property('translate').that.is.null; + expect(obj).to.have.property('scale').that.is.null; + expect(obj).to.have.property('rotate').that.is.null; + expect(obj).to.have.property('matrix').that.is.null; + expect(obj).to.have.property('skewX').that.is.null; + expect(obj).to.have.property('skewY').that.is.null; + }); + + // Translate: + it('Expects SVG.transformAttrToObj("translate()") to return an object.', () => { + expect(SVG.transformAttrToObj('translate()')).to.be.an('object'); + }); + it('Expects this object to have the property translate equal to {x: null, y: null}.', () => { + const obj = SVG.transformAttrToObj('translate()'); + expect(obj).to.have.property('translate'); + expect(obj.translate).to.have.property('x').that.is.null; + expect(obj.translate).to.have.property('y').that.is.null; + }); + it('Expects SVG.transformAttrToObj("translate(1)") to return an object.', () => { + expect(SVG.transformAttrToObj('translate(1)')).to.be.an('object'); + }); + it('Expects this object to have the property translate equal to {x: 1, y: 1}.', () => { + const obj = SVG.transformAttrToObj('translate(1)'); + expect(obj).to.have.property('translate'); + expect(obj.translate).to.have.property('x').that.is.equal(1); + expect(obj.translate).to.have.property('y').that.is.equal(1); + }); + it('Expects SVG.transformAttrToObj("translate(1, 2)") to return an object.', () => { + expect(SVG.transformAttrToObj('translate(1, 2)')).to.be.an('object'); + }); + it('Expects this object to have the property translate equal to {x: 1, y: 2}.', () => { + const obj = SVG.transformAttrToObj('translate(1, 2)'); + expect(obj).to.have.property('translate'); + expect(obj.translate).to.have.property('x').that.is.equal(1); + expect(obj.translate).to.have.property('y').that.is.equal(2); + }); + + // Scale: + it('Expects SVG.transformAttrToObj("scale()") to return an object.', () => { + expect(SVG.transformAttrToObj('scale()')).to.be.an('object'); + }); + it('Expects this object to have the property scale equal to {x: null, y: null}.', () => { + const obj = SVG.transformAttrToObj('scale()'); + expect(obj).to.have.property('scale'); + expect(obj.scale).to.have.property('x').that.is.null; + expect(obj.scale).to.have.property('y').that.is.null; + }); + it('Expects SVG.transformAttrToObj("scale(1)") to return an object.', () => { + expect(SVG.transformAttrToObj('scale(1)')).to.be.an('object'); + }); + it('Expects this object to have the property scale equal to {x: 1, y: 1}.', () => { + const obj = SVG.transformAttrToObj('scale(1)'); + expect(obj).to.have.property('scale'); + expect(obj.scale).to.have.property('x').that.is.equal(1); + expect(obj.scale).to.have.property('y').that.is.equal(1); + }); + it('Expects SVG.transformAttrToObj("scale(1, 2)") to return an object.', () => { + expect(SVG.transformAttrToObj('scale(1, 2)')).to.be.an('object'); + }); + it('Expects this object to have the property scale equal to {x: 1, y: 2}.', () => { + const obj = SVG.transformAttrToObj('scale(1, 2)'); + expect(obj).to.have.property('scale'); + expect(obj.scale).to.have.property('x').that.is.equal(1); + expect(obj.scale).to.have.property('y').that.is.equal(2); + }); + + // Rotate: + it('Expects SVG.transformAttrToObj("rotate()") to return an object.', () => { + expect(SVG.transformAttrToObj('rotate()')).to.be.an('object'); + }); + it('Expects this object to have the property rotate equal to {a: null, cx: null, cy: null}.', () => { + const obj = SVG.transformAttrToObj('rotate()'); + expect(obj).to.have.property('rotate'); + expect(obj.rotate).to.have.property('a').that.is.null; + expect(obj.rotate).to.have.property('cx').that.is.null; + expect(obj.rotate).to.have.property('cy').that.is.null; + }); + it('Expects SVG.transformAttrToObj("rotate(90)") to return an object.', () => { + expect(SVG.transformAttrToObj('rotate(90)')).to.be.an('object'); + }); + it('Expects this object to have the property rotate equal to {a: 90, cx: null, cy: null}.', () => { + const obj = SVG.transformAttrToObj('rotate(90)'); + expect(obj).to.have.property('rotate'); + expect(obj.rotate).to.have.property('a').that.is.equal(90); + expect(obj.rotate).to.have.property('cx').that.is.null; + expect(obj.rotate).to.have.property('cy').that.is.null; + }); + it('Expects SVG.transformAttrToObj("rotate(90, 10)") to return an object.', () => { + expect(SVG.transformAttrToObj('rotate(90, 10)')).to.be.an('object'); + }); + it('Expects this object to have the property rotate equal to {a: 90, cx: 10, cy: 10}.', () => { + const obj = SVG.transformAttrToObj('rotate(90, 10)'); + expect(obj).to.have.property('rotate'); + expect(obj.rotate).to.have.property('a').that.is.equal(90); + expect(obj.rotate).to.have.property('cx').that.is.equal(10); + expect(obj.rotate).to.have.property('cy').that.is.equal(10); + }); + it('Expects SVG.transformAttrToObj("rotate(90, 10, 20)") to return an object.', () => { + expect(SVG.transformAttrToObj('rotate(90, 10, 20)')).to.be.an('object'); + }); + it('Expects this object to have the property rotate equal to {a: 90, cx: 10, cy: 20}.', () => { + const obj = SVG.transformAttrToObj('rotate(90, 10, 20)'); + expect(obj).to.have.property('rotate'); + expect(obj.rotate).to.have.property('a').that.is.equal(90); + expect(obj.rotate).to.have.property('cx').that.is.equal(10); + expect(obj.rotate).to.have.property('cy').that.is.equal(20); + }); + + // SkewX: + it('Expects SVG.transformAttrToObj("skewX()") to return an object.', () => { + expect(SVG.transformAttrToObj('skewX()')).to.be.an('object'); + }); + it('Expects this object to have the property skewX that is null}.', () => { + expect(SVG.transformAttrToObj('skewX()')).to.have.property('skewX').that.is.null; + }); + + it('Expects SVG.transformAttrToObj("skewX(10)") to return an object.', () => { + expect(SVG.transformAttrToObj('skewX(10)')).to.be.an('object'); + }); + it('Expects this object to have the property skewX that is equal to 10}.', () => { + expect(SVG.transformAttrToObj('skewX(10)')).to.have.property('skewX').that.is.equal(10); + }); + + // SkewY: + it('Expects SVG.transformAttrToObj("skewY()") to return an object.', () => { + expect(SVG.transformAttrToObj('skewY()')).to.be.an('object'); + }); + it('Expects this object to have the property skewY that is null}.', () => { + expect(SVG.transformAttrToObj('skewY()')).to.have.property('skewY').that.is.null; + }); + + it('Expects SVG.transformAttrToObj("skewY(10)") to return an object.', () => { + expect(SVG.transformAttrToObj('skewY(10)')).to.be.an('object'); + }); + it('Expects this object to have the property skewY that is equal to 10}.', () => { + expect(SVG.transformAttrToObj('skewY(10)')).to.have.property('skewY').that.is.equal(10); + }); + + // Matrix: + it('Expects SVG.transformAttrToObj("Matrix()") to return an object.', () => { + expect(SVG.transformAttrToObj('Matrix()')).to.be.an('object'); + }); + it('Expects this object to have the property matrix that is null}.', () => { + expect(SVG.transformAttrToObj('matrix()')).to.have.property('matrix').that.is.null; + }); + + it('Expects SVG.transformAttrToObj("Matrix(1, 2, 3, 4, 5, 6)") to return an object.', () => { + expect(SVG.transformAttrToObj('Matrix(1, 2, 3, 4, 5, 6)')).to.be.an('object'); + }); + it('Expects this object to have the property matrix that is null}.', () => { + expect(SVG.transformAttrToObj('matrix(1, 2, 3, 4, 5, 6)')).to.have.property('matrix').that.is.null; + }); + }); + }); +}; diff --git a/test/int/teststatic3.js b/test/int/teststatic3.js new file mode 100644 index 0000000..87b5520 --- /dev/null +++ b/test/int/teststatic3.js @@ -0,0 +1,167 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG) { + describe('Test SVG functions:', () => { + // + describe('Text SVG.transformAttrToStr():', () => { + // Translate: + it('Expects SVG.transformAttrToStr({ translate: {} }) to return an empty string.', () => { + const tr = { translate: {} }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ translate: { x: "0", y: "0" } }) to return an empty string.', () => { + const tr = { translate: { x: '0', y: '0' } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ translate: {x: 0} }) to return the string "translate(0, 0)".', () => { + const tr = { translate: { x: 0 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('translate(0, 0)'); + }); + it('Expects SVG.transformAttrToStr({ translate: { x: 0, y: "1" } }) to return the string "translate(0, 0)".', () => { + const tr = { translate: { x: 0, y: '1' } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('translate(0, 0)'); + }); + it('Expects SVG.transformAttrToStr({ translate: { x: 1 } }) to return the string "translate(1, 0)".', () => { + const tr = { translate: { x: 1 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('translate(1, 0)'); + }); + it('Expects SVG.transformAttrToStr({ translate: { x: 1, y: 2 } }) to return the string "translate(1, 2)".', () => { + const tr = { translate: { x: 1, y: 2 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('translate(1, 2)'); + }); + + // Scale: + it('Expects SVG.transformAttrToStr({ scale: {} }) to return an empty string.', () => { + const tr = { scale: {} }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ scale: { x: "0", y: "0" } }) to return an empty string.', () => { + const tr = { scale: { x: '0', y: '0' } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ scale: { x: 0 } }) to return the string "scale(0, 0)".', () => { + const tr = { scale: { x: 0 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('scale(0, 0)'); + }); + it('Expects SVG.transformAttrToStr({ scale: { x: 0, y:"1" } }) to return the string "scale(0, 0)".', () => { + const tr = { scale: { x: 0, y: '1' } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('scale(0, 0)'); + }); + it('Expects SVG.transformAttrToStr({ scale: { x: 1 } }) to return the string "scale(1, 1)".', () => { + const tr = { scale: { x: 1 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('scale(1, 1)'); + }); + it('Expects SVG.transformAttrToStr({ scale: { x: 1, y: 2 } }) to return the string "scale(1, 2)".', () => { + const tr = { scale: { x: 1, y: 2 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('scale(1, 2)'); + }); + + // Rotate: + it('Expects SVG.transformAttrToStr({ rotate: {} }) to return an empty string.', () => { + const tr = { rotate: {} }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ rotate: { a: "90" } }) to return an empty string.', () => { + const tr = { rotate: { a: '90' } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ rotate: { a: 0 } }) to return the string "rotate(0)".', () => { + const tr = { rotate: { a: 0 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('rotate(0)'); + }); + it('Expects SVG.transformAttrToStr({ rotate: { a: 90 } }) to return the string "rotate(90)".', () => { + const tr = { rotate: { a: 90 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('rotate(90)'); + }); + + it('Expects SVG.transformAttrToStr({ rotate: { cx: 0, cy: 0 } }) to return an empty string.', () => { + const tr = { rotate: { cx: 0, cy: 0 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + + it('Expects SVG.transformAttrToStr({ rotate: { a: 90 cx: "0" } }) to return the string "rotate(90)".', () => { + const tr = { rotate: { a: 90, cx: '0' } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('rotate(90)'); + }); + it('Expects SVG.transformAttrToStr({ rotate: { a: 90 cx: 0 } }) to return the string "rotate(90, 0, 0)".', () => { + const tr = { rotate: { a: 90, cx: 0 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('rotate(90, 0, 0)'); + }); + it('Expects SVG.transformAttrToStr({ rotate: { a: 90 cx: 1 } }) to return the string "rotate(90, 1, 1)".', () => { + const tr = { rotate: { a: 90, cx: 1 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('rotate(90, 1, 1)'); + }); + it('Expects SVG.transformAttrToStr({ rotate: { a: 90 cx: 1, cy: "0" } }) to return the string "rotate(90, 1, 1)".', () => { + const tr = { rotate: { a: 90, cx: 1, cy: '0' } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('rotate(90, 1, 1)'); + }); + it('Expects SVG.transformAttrToStr({ rotate: { a: 90 cx: 1, cy: 0 } }) to return the string "rotate(90, 1, 0)".', () => { + const tr = { rotate: { a: 90, cx: 1, cy: 0 } }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('rotate(90, 1, 0)'); + }); + + // SkewX: + it('Expects SVG.transformAttrToStr({ skewX: null }) to return an empty string.', () => { + const tr = { skewX: null }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ skewX: "0" }) to return an empty string.', () => { + const tr = { skewX: '0' }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ skewX: 0 }) to return the string "skewX(0)".', () => { + const tr = { skewX: 0 }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('skewX(0)'); + }); + it('Expects SVG.transformAttrToStr({ skewX: 1 }) to return the string "skewX(1)".', () => { + const tr = { skewX: 1 }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('skewX(1)'); + }); + + // SkewY: + it('Expects SVG.transformAttrToStr({ skewY: null }) to return an empty string.', () => { + const tr = { skewY: null }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ skewY: "0" }) to return an empty string.', () => { + const tr = { skewY: '0' }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.empty; + }); + it('Expects SVG.transformAttrToStr({ skewY: 0 }) to return the string "skewY(0)".', () => { + const tr = { skewY: 0 }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('skewY(0)'); + }); + it('Expects SVG.transformAttrToStr({ skewY: 1 }) to return the string "skewY(1)".', () => { + const tr = { skewY: 1 }; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal('skewY(1)'); + }); + + // Composite: + /* eslint-disable object-curly-newline */ + it('Expects SVG.transformAttrToStr({ ...args } }) to return the string "...args".', () => { + const tr = { translate: { x: 10, y: 20 }, scale: { x: 50 }, rotate: { a: 90 }, skewX: 567 }; + const s = 'translate(10, 20) scale(50, 50) rotate(90) skewX(567)'; + expect(SVG.transformAttrToStr(tr)).to.be.a('string').that.is.equal(s); + }); + /* eslint-enable object-curly-newline */ + }); + }); +}; diff --git a/test/int/testsvg.js b/test/int/testsvg.js index cd5c01f..2189f8e 100644 --- a/test/int/testsvg.js +++ b/test/int/testsvg.js @@ -1,15 +1,14 @@ /* global describe, it */ /* eslint one-var: 0, semi-style: 0, no-underscore-dangle: 0 */ -'use strict'; // -- Node modules const { expect } = require('chai') ; + // -- Local modules -const SVG = require('../../index.js') - ; + // -- Local constants @@ -18,7 +17,7 @@ const SVG = require('../../index.js') // -- Main -module.exports = function() { +module.exports = function(SVG) { describe('Test SVG:', () => { it('Expects SVG.VERSION to return a string.', () => { expect(SVG.VERSION).to.be.a('string'); @@ -35,6 +34,10 @@ module.exports = function() { it('Expects SVG.noConflit() to return a function.', () => { expect(SVG.noConflict()).to.be.a('function'); }); + + it('Expects SVG() to return an object.', () => { + expect(SVG()).to.be.an('object'); + }); }); // describe('Test SVG():', () => { diff --git a/test/int/testtext.js b/test/int/testtext.js new file mode 100644 index 0000000..bc9f5d4 --- /dev/null +++ b/test/int/testtext.js @@ -0,0 +1,96 @@ +/* global describe, it */ +/* eslint one-var: 0, import/no-extraneous-dependencies: 1, no-unused-expressions: 0, + semi-style: 0 */ + + +// -- Node modules +const { expect } = require('chai') + ; + + +// -- Local modules + + +// -- Local constants + + +// -- Local variables + + +// -- Main +module.exports = function(SVG, dom) { // append, appendhtml, replace, remove + describe('Test SVG().$ methods (next):', () => { + // + describe('Test SVG().$().text():', () => { + it('Expects SVG("#app60").$().append("text").text("Hello!") to append this SVG element.', () => { + SVG('#app60').$().append('text').text('Hello!'); + const node = dom.window.document.getElementById('app60').firstChild.firstChild.outerHTML; + const s = 'Hello!'; + expect(node).to.be.a('string').that.is.equal(s); + }); + }); + + describe('Test SVG().$().text().animate():', () => { + it('Expects with .text({ start:0, stop: 0, d: 0 }) the animation to stop immediately.', (done) => { + SVG('#app61').$() + .append('text') + .animate() + .text(0) + .text({ start: 0, stop: 0, d: 0 }) + ; + setTimeout(() => { + const node = dom.window.document.getElementById('app61').firstChild.firstChild.innerHTML; + const value = parseInt(node, 10); + expect(value).to.be.a('number').that.is.equal(0); + done(); + }, 200); + }); + + it('Expects with .text({ start:0, stop: 0, d: 100 }) the animation to stop immediately.', (done) => { + SVG('#app62').$() + .append('text') + .animate() + .text(0) + .text({ start: 0, stop: 0, d: 100 }) + ; + setTimeout(() => { + const node = dom.window.document.getElementById('app62').firstChild.firstChild.innerHTML; + const value = parseInt(node, 10); + expect(value).to.be.a('number').that.is.equal(0); + done(); + }, 200); + }); + + it('Expects with .text({ start:0, stop: 100, d: 1000 }) the text value to be lower than 100 after 0.5s.', (done) => { + SVG('#app63').$() + .append('text') + .animate() + .text(0) + .text({ start: 0, stop: 100, d: 1000 }) + ; + setTimeout(() => { + const node = dom.window.document.getElementById('app63').firstChild.firstChild.innerHTML; + const value = parseInt(node, 10); + expect(value).to.be.a('number').that.is.above(0); + expect(value).to.be.a('number').that.is.below(100); + done(); + }, 500); + }); + + it('Expects with .text({ start:0, stop: 100, d: 1000 }) the text value to be equal to 100 after 1s.', (done) => { + SVG('#app64').$() + .append('text') + .animate() + .text(0) + .text({ start: 0, stop: 100, d: 1000 }) + ; + setTimeout(() => { + const node = dom.window.document.getElementById('app64').firstChild.firstChild.innerHTML; + const value = parseInt(node, 10); + expect(value).to.be.a('number').that.is.equal(100); + done(); + }, 1100); + }); + }); + }); +}; diff --git a/test/main.js b/test/main.js index 97db573..92afe0d 100644 --- a/test/main.js +++ b/test/main.js @@ -2,7 +2,6 @@ /* global describe, it */ /* eslint one-var: 0, no-unused-vars: 0, import/no-extraneous-dependencies: 0, semi-style: 0 */ -'use strict'; // -- Node modules const { JSDOM } = require('jsdom') @@ -12,16 +11,17 @@ const { JSDOM } = require('jsdom') const SVG = require('../index.js') , testsvg = require('./int/testsvg.js') , teststatic = require('./int/teststatic.js') - // , testfn2 = require('./int/testclassmethods2.js') - // , testfn3 = require('./int/testclassmethods3.js') - // , testselect = require('./int/testselect.js') - // , testdom = require('./int/testdom.js') - // , testanimation = require('./int/testanimation.js') - // , testevents = require('./int/testevents.js') - // , testattrs = require('./int/testattrs.js') - // , testtext = require('./int/testtext.js') - // , testclass = require('./int/testclass.js') - // , testnonchainingmethods = require('./int/testnonchainingmethods') + , teststatic2 = require('./int/teststatic2.js') + , teststatic3 = require('./int/teststatic2.js') + + , testselect = require('./int/testselect.js') + , testdom = require('./int/testdom.js') + , testanimation = require('./int/testanimation.js') + , testevents = require('./int/testevents.js') + , testattrs = require('./int/testattrs.js') + , testtext = require('./int/testtext.js') + , testclass = require('./int/testclass.js') + , testnonchainingmethods = require('./int/testnonchainingmethods') ; // -- Local constants @@ -34,22 +34,29 @@ const HTML = `
+
-
+
-
+
+
+
+
+
+
+
@@ -81,20 +88,24 @@ global.navigator = { userAgent: 'node.js' }; describe('SVG', () => { // Test SVG object: - testsvg(dom); - teststatic(dom); + testsvg(SVG, dom); + // Test Methods of class: - // testfn(dom); - // testfn2(); - // testfn3(); + teststatic(SVG, dom); + teststatic2(SVG, dom); + teststatic3(SVG, dom); + // Test Chaining Methods: - // testselect(); - // testdom(dom); - // testanimation(dom); - // testevents(); - // testattrs(dom); - // testtext(dom); - // testclass(dom); + testselect(SVG, dom); + testdom(SVG, dom); + + // testanimation(SVG, dom); + + testevents(SVG); + testattrs(SVG, dom); + // testtext(SVG, dom); + testclass(SVG, dom); + // Test Non Chaining Methods: - // testnonchainingmethods(dom); + testnonchainingmethods(SVG, dom); });