File: /storage/v6964/avoxlive/public_html/optimum/plugins/bower_components/chartist-js/src/scripts/svg.js
/**
* Chartist SVG module for simple SVG DOM abstraction
*
* @module Chartist.Svg
*/
/* global Chartist */
(function(window, document, Chartist) {
'use strict';
/**
* Chartist.Svg creates a new SVG object wrapper with a starting element. You can use the wrapper to fluently create sub-elements and modify them.
*
* @memberof Chartist.Svg
* @constructor
* @param {String|Element} name The name of the SVG element to create or an SVG dom element which should be wrapped into Chartist.Svg
* @param {Object} attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
* @param {String} className This class or class list will be added to the SVG element
* @param {Object} parent The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child
* @param {Boolean} insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
*/
function Svg(name, attributes, className, parent, insertFirst) {
// If Svg is getting called with an SVG element we just return the wrapper
if(name instanceof Element) {
this._node = name;
} else {
this._node = document.createElementNS(Chartist.namespaces.svg, name);
// If this is an SVG element created then custom namespace
if(name === 'svg') {
this.attr({
'xmlns:ct': Chartist.namespaces.ct
});
}
}
if(attributes) {
this.attr(attributes);
}
if(className) {
this.addClass(className);
}
if(parent) {
if (insertFirst && parent._node.firstChild) {
parent._node.insertBefore(this._node, parent._node.firstChild);
} else {
parent._node.appendChild(this._node);
}
}
}
/**
* Set attributes on the current SVG element of the wrapper you're currently working on.
*
* @memberof Chartist.Svg
* @param {Object|String} attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. If this parameter is a String then the function is used as a getter and will return the attribute value.
* @param {String} ns If specified, the attribute will be obtained using getAttributeNs. In order to write namepsaced attributes you can use the namespace:attribute notation within the attributes object.
* @return {Object|String} The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.
*/
function attr(attributes, ns) {
if(typeof attributes === 'string') {
if(ns) {
return this._node.getAttributeNS(ns, attributes);
} else {
return this._node.getAttribute(attributes);
}
}
Object.keys(attributes).forEach(function(key) {
// If the attribute value is undefined we can skip this one
if(attributes[key] === undefined) {
return;
}
if (key.indexOf(':') !== -1) {
var namespacedAttribute = key.split(':');
this._node.setAttributeNS(Chartist.namespaces[namespacedAttribute[0]], key, attributes[key]);
} else {
this._node.setAttribute(key, attributes[key]);
}
}.bind(this));
return this;
}
/**
* Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.
*
* @memberof Chartist.Svg
* @param {String} name The name of the SVG element that should be created as child element of the currently selected element wrapper
* @param {Object} [attributes] An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
* @param {String} [className] This class or class list will be added to the SVG element
* @param {Boolean} [insertFirst] If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
* @return {Chartist.Svg} Returns a Chartist.Svg wrapper object that can be used to modify the containing SVG data
*/
function elem(name, attributes, className, insertFirst) {
return new Chartist.Svg(name, attributes, className, this, insertFirst);
}
/**
* Returns the parent Chartist.SVG wrapper object
*
* @memberof Chartist.Svg
* @return {Chartist.Svg} Returns a Chartist.Svg wrapper around the parent node of the current node. If the parent node is not existing or it's not an SVG node then this function will return null.
*/
function parent() {
return this._node.parentNode instanceof SVGElement ? new Chartist.Svg(this._node.parentNode) : null;
}
/**
* This method returns a Chartist.Svg wrapper around the root SVG element of the current tree.
*
* @memberof Chartist.Svg
* @return {Chartist.Svg} The root SVG element wrapped in a Chartist.Svg element
*/
function root() {
var node = this._node;
while(node.nodeName !== 'svg') {
node = node.parentNode;
}
return new Chartist.Svg(node);
}
/**
* Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper.
*
* @memberof Chartist.Svg
* @param {String} selector A CSS selector that is used to query for child SVG elements
* @return {Chartist.Svg} The SVG wrapper for the element found or null if no element was found
*/
function querySelector(selector) {
var foundNode = this._node.querySelector(selector);
return foundNode ? new Chartist.Svg(foundNode) : null;
}
/**
* Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper.
*
* @memberof Chartist.Svg
* @param {String} selector A CSS selector that is used to query for child SVG elements
* @return {Chartist.Svg.List} The SVG wrapper list for the element found or null if no element was found
*/
function querySelectorAll(selector) {
var foundNodes = this._node.querySelectorAll(selector);
return foundNodes.length ? new Chartist.Svg.List(foundNodes) : null;
}
/**
* This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
*
* @memberof Chartist.Svg
* @param {Node|String} content The DOM Node, or HTML string that will be converted to a DOM Node, that is then placed into and wrapped by the foreignObject
* @param {String} [attributes] An object with properties that will be added as attributes to the foreignObject element that is created. Attributes with undefined values will not be added.
* @param {String} [className] This class or class list will be added to the SVG element
* @param {Boolean} [insertFirst] Specifies if the foreignObject should be inserted as first child
* @return {Chartist.Svg} New wrapper object that wraps the foreignObject element
*/
function foreignObject(content, attributes, className, insertFirst) {
// If content is string then we convert it to DOM
// TODO: Handle case where content is not a string nor a DOM Node
if(typeof content === 'string') {
var container = document.createElement('div');
container.innerHTML = content;
content = container.firstChild;
}
// Adding namespace to content element
content.setAttribute('xmlns', Chartist.namespaces.xmlns);
// Creating the foreignObject without required extension attribute (as described here
// http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement)
var fnObj = this.elem('foreignObject', attributes, className, insertFirst);
// Add content to foreignObjectElement
fnObj._node.appendChild(content);
return fnObj;
}
/**
* This method adds a new text element to the current Chartist.Svg wrapper.
*
* @memberof Chartist.Svg
* @param {String} t The text that should be added to the text element that is created
* @return {Chartist.Svg} The same wrapper object that was used to add the newly created element
*/
function text(t) {
this._node.appendChild(document.createTextNode(t));
return this;
}
/**
* This method will clear all child nodes of the current wrapper object.
*
* @memberof Chartist.Svg
* @return {Chartist.Svg} The same wrapper object that got emptied
*/
function empty() {
while (this._node.firstChild) {
this._node.removeChild(this._node.firstChild);
}
return this;
}
/**
* This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure.
*
* @memberof Chartist.Svg
* @return {Chartist.Svg} The parent wrapper object of the element that got removed
*/
function remove() {
this._node.parentNode.removeChild(this._node);
return this.parent();
}
/**
* This method will replace the element with a new element that can be created outside of the current DOM.
*
* @memberof Chartist.Svg
* @param {Chartist.Svg} newElement The new Chartist.Svg object that will be used to replace the current wrapper object
* @return {Chartist.Svg} The wrapper of the new element
*/
function replace(newElement) {
this._node.parentNode.replaceChild(newElement._node, this._node);
return newElement;
}
/**
* This method will append an element to the current element as a child.
*
* @memberof Chartist.Svg
* @param {Chartist.Svg} element The Chartist.Svg element that should be added as a child
* @param {Boolean} [insertFirst] Specifies if the element should be inserted as first child
* @return {Chartist.Svg} The wrapper of the appended object
*/
function append(element, insertFirst) {
if(insertFirst && this._node.firstChild) {
this._node.insertBefore(element._node, this._node.firstChild);
} else {
this._node.appendChild(element._node);
}
return this;
}
/**
* Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.
*
* @memberof Chartist.Svg
* @return {Array} A list of classes or an empty array if there are no classes on the current element
*/
function classes() {
return this._node.getAttribute('class') ? this._node.getAttribute('class').trim().split(/\s+/) : [];
}
/**
* Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.
*
* @memberof Chartist.Svg
* @param {String} names A white space separated list of class names
* @return {Chartist.Svg} The wrapper of the current element
*/
function addClass(names) {
this._node.setAttribute('class',
this.classes(this._node)
.concat(names.trim().split(/\s+/))
.filter(function(elem, pos, self) {
return self.indexOf(elem) === pos;
}).join(' ')
);
return this;
}
/**
* Removes one or a space separated list of classes from the current element.
*
* @memberof Chartist.Svg
* @param {String} names A white space separated list of class names
* @return {Chartist.Svg} The wrapper of the current element
*/
function removeClass(names) {
var removedClasses = names.trim().split(/\s+/);
this._node.setAttribute('class', this.classes(this._node).filter(function(name) {
return removedClasses.indexOf(name) === -1;
}).join(' '));
return this;
}
/**
* Removes all classes from the current element.
*
* @memberof Chartist.Svg
* @return {Chartist.Svg} The wrapper of the current element
*/
function removeAllClasses() {
this._node.setAttribute('class', '');
return this;
}
/**
* Get element height using `getBoundingClientRect`
*
* @memberof Chartist.Svg
* @return {Number} The elements height in pixels
*/
function height() {
return this._node.getBoundingClientRect().height;
}
/**
* Get element width using `getBoundingClientRect`
*
* @memberof Chartist.Core
* @return {Number} The elements width in pixels
*/
function width() {
return this._node.getBoundingClientRect().width;
}
/**
* The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. Please refer to http://www.w3.org/TR/SVG/animate.html for a detailed specification about the available animation attributes. Additionally an easing property can be passed in the animation definition object. This can be a string with a name of an easing function in `Chartist.Svg.Easing` or an array with four numbers specifying a cubic Bézier curve.
* **An animations object could look like this:**
* ```javascript
* element.animate({
* opacity: {
* dur: 1000,
* from: 0,
* to: 1
* },
* x1: {
* dur: '1000ms',
* from: 100,
* to: 200,
* easing: 'easeOutQuart'
* },
* y1: {
* dur: '2s',
* from: 0,
* to: 100
* }
* });
* ```
* **Automatic unit conversion**
* For the `dur` and the `begin` animate attribute you can also omit a unit by passing a number. The number will automatically be converted to milli seconds.
* **Guided mode**
* The default behavior of SMIL animations with offset using the `begin` attribute is that the attribute will keep it's original value until the animation starts. Mostly this behavior is not desired as you'd like to have your element attributes already initialized with the animation `from` value even before the animation starts. Also if you don't specify `fill="freeze"` on an animate element or if you delete the animation after it's done (which is done in guided mode) the attribute will switch back to the initial value. This behavior is also not desired when performing simple one-time animations. For one-time animations you'd want to trigger animations immediately instead of relative to the document begin time. That's why in guided mode Chartist.Svg will also use the `begin` property to schedule a timeout and manually start the animation after the timeout. If you're using multiple SMIL definition objects for an attribute (in an array), guided mode will be disabled for this attribute, even if you explicitly enabled it.
* If guided mode is enabled the following behavior is added:
* - Before the animation starts (even when delayed with `begin`) the animated attribute will be set already to the `from` value of the animation
* - `begin` is explicitly set to `indefinite` so it can be started manually without relying on document begin time (creation)
* - The animate element will be forced to use `fill="freeze"`
* - The animation will be triggered with `beginElement()` in a timeout where `begin` of the definition object is interpreted in milli seconds. If no `begin` was specified the timeout is triggered immediately.
* - After the animation the element attribute value will be set to the `to` value of the animation
* - The animate element is deleted from the DOM
*
* @memberof Chartist.Svg
* @param {Object} animations An animations object where the property keys are the attributes you'd like to animate. The properties should be objects again that contain the SMIL animation attributes (usually begin, dur, from, and to). The property begin and dur is auto converted (see Automatic unit conversion). You can also schedule multiple animations for the same attribute by passing an Array of SMIL definition objects. Attributes that contain an array of SMIL definition objects will not be executed in guided mode.
* @param {Boolean} guided Specify if guided mode should be activated for this animation (see Guided mode). If not otherwise specified, guided mode will be activated.
* @param {Object} eventEmitter If specified, this event emitter will be notified when an animation starts or ends.
* @return {Chartist.Svg} The current element where the animation was added
*/
function animate(animations, guided, eventEmitter) {
if(guided === undefined) {
guided = true;
}
Object.keys(animations).forEach(function createAnimateForAttributes(attribute) {
function createAnimate(animationDefinition, guided) {
var attributeProperties = {},
animate,
timeout,
easing;
// Check if an easing is specified in the definition object and delete it from the object as it will not
// be part of the animate element attributes.
if(animationDefinition.easing) {
// If already an easing Bézier curve array we take it or we lookup a easing array in the Easing object
easing = animationDefinition.easing instanceof Array ?
animationDefinition.easing :
Chartist.Svg.Easing[animationDefinition.easing];
delete animationDefinition.easing;
}
// If numeric dur or begin was provided we assume milli seconds
animationDefinition.begin = Chartist.ensureUnit(animationDefinition.begin, 'ms');
animationDefinition.dur = Chartist.ensureUnit(animationDefinition.dur, 'ms');
if(easing) {
animationDefinition.calcMode = 'spline';
animationDefinition.keySplines = easing.join(' ');
animationDefinition.keyTimes = '0;1';
}
// Adding "fill: freeze" if we are in guided mode and set initial attribute values
if(guided) {
animationDefinition.fill = 'freeze';
// Animated property on our element should already be set to the animation from value in guided mode
attributeProperties[attribute] = animationDefinition.from;
this.attr(attributeProperties);
// In guided mode we also set begin to indefinite so we can trigger the start manually and put the begin
// which needs to be in ms aside
timeout = Chartist.quantity(animationDefinition.begin || 0).value;
animationDefinition.begin = 'indefinite';
}
animate = this.elem('animate', Chartist.extend({
attributeName: attribute
}, animationDefinition));
if(guided) {
// If guided we take the value that was put aside in timeout and trigger the animation manually with a timeout
setTimeout(function() {
// If beginElement fails we set the animated attribute to the end position and remove the animate element
// This happens if the SMIL ElementTimeControl interface is not supported or any other problems occured in
// the browser. (Currently FF 34 does not support animate elements in foreignObjects)
try {
animate._node.beginElement();
} catch(err) {
// Set animated attribute to current animated value
attributeProperties[attribute] = animationDefinition.to;
this.attr(attributeProperties);
// Remove the animate element as it's no longer required
animate.remove();
}
}.bind(this), timeout);
}
if(eventEmitter) {
animate._node.addEventListener('beginEvent', function handleBeginEvent() {
eventEmitter.emit('animationBegin', {
element: this,
animate: animate._node,
params: animationDefinition
});
}.bind(this));
}
animate._node.addEventListener('endEvent', function handleEndEvent() {
if(eventEmitter) {
eventEmitter.emit('animationEnd', {
element: this,
animate: animate._node,
params: animationDefinition
});
}
if(guided) {
// Set animated attribute to current animated value
attributeProperties[attribute] = animationDefinition.to;
this.attr(attributeProperties);
// Remove the animate element as it's no longer required
animate.remove();
}
}.bind(this));
}
// If current attribute is an array of definition objects we create an animate for each and disable guided mode
if(animations[attribute] instanceof Array) {
animations[attribute].forEach(function(animationDefinition) {
createAnimate.bind(this)(animationDefinition, false);
}.bind(this));
} else {
createAnimate.bind(this)(animations[attribute], guided);
}
}.bind(this));
return this;
}
Chartist.Svg = Chartist.Class.extend({
constructor: Svg,
attr: attr,
elem: elem,
parent: parent,
root: root,
querySelector: querySelector,
querySelectorAll: querySelectorAll,
foreignObject: foreignObject,
text: text,
empty: empty,
remove: remove,
replace: replace,
append: append,
classes: classes,
addClass: addClass,
removeClass: removeClass,
removeAllClasses: removeAllClasses,
height: height,
width: width,
animate: animate
});
/**
* This method checks for support of a given SVG feature like Extensibility, SVG-animation or the like. Check http://www.w3.org/TR/SVG11/feature for a detailed list.
*
* @memberof Chartist.Svg
* @param {String} feature The SVG 1.1 feature that should be checked for support.
* @return {Boolean} True of false if the feature is supported or not
*/
Chartist.Svg.isSupported = function(feature) {
return document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#' + feature, '1.1');
};
/**
* This Object contains some standard easing cubic bezier curves. Then can be used with their name in the `Chartist.Svg.animate`. You can also extend the list and use your own name in the `animate` function. Click the show code button to see the available bezier functions.
*
* @memberof Chartist.Svg
*/
var easingCubicBeziers = {
easeInSine: [0.47, 0, 0.745, 0.715],
easeOutSine: [0.39, 0.575, 0.565, 1],
easeInOutSine: [0.445, 0.05, 0.55, 0.95],
easeInQuad: [0.55, 0.085, 0.68, 0.53],
easeOutQuad: [0.25, 0.46, 0.45, 0.94],
easeInOutQuad: [0.455, 0.03, 0.515, 0.955],
easeInCubic: [0.55, 0.055, 0.675, 0.19],
easeOutCubic: [0.215, 0.61, 0.355, 1],
easeInOutCubic: [0.645, 0.045, 0.355, 1],
easeInQuart: [0.895, 0.03, 0.685, 0.22],
easeOutQuart: [0.165, 0.84, 0.44, 1],
easeInOutQuart: [0.77, 0, 0.175, 1],
easeInQuint: [0.755, 0.05, 0.855, 0.06],
easeOutQuint: [0.23, 1, 0.32, 1],
easeInOutQuint: [0.86, 0, 0.07, 1],
easeInExpo: [0.95, 0.05, 0.795, 0.035],
easeOutExpo: [0.19, 1, 0.22, 1],
easeInOutExpo: [1, 0, 0, 1],
easeInCirc: [0.6, 0.04, 0.98, 0.335],
easeOutCirc: [0.075, 0.82, 0.165, 1],
easeInOutCirc: [0.785, 0.135, 0.15, 0.86],
easeInBack: [0.6, -0.28, 0.735, 0.045],
easeOutBack: [0.175, 0.885, 0.32, 1.275],
easeInOutBack: [0.68, -0.55, 0.265, 1.55]
};
Chartist.Svg.Easing = easingCubicBeziers;
/**
* This helper class is to wrap multiple `Chartist.Svg` elements into a list where you can call the `Chartist.Svg` functions on all elements in the list with one call. This is helpful when you'd like to perform calls with `Chartist.Svg` on multiple elements.
* An instance of this class is also returned by `Chartist.Svg.querySelectorAll`.
*
* @memberof Chartist.Svg
* @param {Array<Node>|NodeList} nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll)
* @constructor
*/
function SvgList(nodeList) {
var list = this;
this.svgElements = [];
for(var i = 0; i < nodeList.length; i++) {
this.svgElements.push(new Chartist.Svg(nodeList[i]));
}
// Add delegation methods for Chartist.Svg
Object.keys(Chartist.Svg.prototype).filter(function(prototypeProperty) {
return ['constructor',
'parent',
'querySelector',
'querySelectorAll',
'replace',
'append',
'classes',
'height',
'width'].indexOf(prototypeProperty) === -1;
}).forEach(function(prototypeProperty) {
list[prototypeProperty] = function() {
var args = Array.prototype.slice.call(arguments, 0);
list.svgElements.forEach(function(element) {
Chartist.Svg.prototype[prototypeProperty].apply(element, args);
});
return list;
};
});
}
Chartist.Svg.List = Chartist.Class.extend({
constructor: SvgList
});
}(window, document, Chartist));