Use the singleton instance of this class, $.svg, + to interact with the SVG functionality.
+Expects HTML like:
+<div></div>+ @module SVGManager */ +function SVGManager() { + this._settings = []; // Settings to be remembered per SVG object + this._extensions = []; // List of SVG extensions added to SVGWrapper + // for each entry [0] is extension name, [1] is extension class (function) + // the function takes one parameter - the SVGWrapper instance + this.regional = []; // Localisations, indexed by language, '' for default (English) + this.regional[''] = {errorLoadingText: 'Error loading'}; + this.local = this.regional['']; // Current localisation + this._uuid = new Date().getTime(); + this._ie = !!window.ActiveXObject; +} + +$.extend(SVGManager.prototype, { + /** Class name added to elements to indicate already configured with SVG. */ + markerClassName: 'hasSVG', + /** Name of the data property for instance settings. */ + propertyName: 'svgwrapper', + + /** SVG namespace. */ + svgNS: 'http://www.w3.org/2000/svg', + /** XLink namespace. */ + xlinkNS: 'http://www.w3.org/1999/xlink', + + /** SVG wrapper class. */ + _wrapperClass: SVGWrapper, + + /* Camel-case versions of attribute names containing dashes or are reserved words. */ + _attrNames: {class_: 'class', in_: 'in', + alignmentBaseline: 'alignment-baseline', baselineShift: 'baseline-shift', + clipPath: 'clip-path', clipRule: 'clip-rule', + colorInterpolation: 'color-interpolation', + colorInterpolationFilters: 'color-interpolation-filters', + colorRendering: 'color-rendering', dominantBaseline: 'dominant-baseline', + enableBackground: 'enable-background', fillOpacity: 'fill-opacity', + fillRule: 'fill-rule', floodColor: 'flood-color', + floodOpacity: 'flood-opacity', fontFamily: 'font-family', + fontSize: 'font-size', fontSizeAdjust: 'font-size-adjust', + fontStretch: 'font-stretch', fontStyle: 'font-style', + fontVariant: 'font-variant', fontWeight: 'font-weight', + glyphOrientationHorizontal: 'glyph-orientation-horizontal', + glyphOrientationVertical: 'glyph-orientation-vertical', + horizAdvX: 'horiz-adv-x', horizOriginX: 'horiz-origin-x', + imageRendering: 'image-rendering', letterSpacing: 'letter-spacing', + lightingColor: 'lighting-color', markerEnd: 'marker-end', + markerMid: 'marker-mid', markerStart: 'marker-start', + stopColor: 'stop-color', stopOpacity: 'stop-opacity', + strikethroughPosition: 'strikethrough-position', + strikethroughThickness: 'strikethrough-thickness', + strokeDashArray: 'stroke-dasharray', strokeDashOffset: 'stroke-dashoffset', + strokeLineCap: 'stroke-linecap', strokeLineJoin: 'stroke-linejoin', + strokeMiterLimit: 'stroke-miterlimit', strokeOpacity: 'stroke-opacity', + strokeWidth: 'stroke-width', textAnchor: 'text-anchor', + textDecoration: 'text-decoration', textRendering: 'text-rendering', + underlinePosition: 'underline-position', underlineThickness: 'underline-thickness', + vertAdvY: 'vert-adv-y', vertOriginY: 'vert-origin-y', + wordSpacing: 'word-spacing', writingMode: 'writing-mode'}, + + /* Add the SVG object to its container. */ + _attachSVG: function(container, settings) { + var svg = (container.namespaceURI === this.svgNS ? container : null); + var container = (svg ? null : container); + if ($(container || svg).hasClass(this.markerClassName)) { + return; + } + if (typeof settings === 'string') { + settings = {loadURL: settings}; + } + else if (typeof settings === 'function') { + settings = {onLoad: settings}; + } + $(container || svg).addClass(this.markerClassName); + try { + if (!svg) { + svg = document.createElementNS(this.svgNS, 'svg'); + svg.setAttribute('version', '1.1'); + if (container.clientWidth > 0) { + svg.setAttribute('width', container.clientWidth); + } + if (container.clientHeight > 0) { + svg.setAttribute('height', container.clientHeight); + } + container.appendChild(svg); + } + this._afterLoad(container, svg, settings || {}); + } + catch (e) { + $(container).html('
SVG is not supported natively on this browser
'); + } + }, + + /* Post-processing once loaded. */ + _afterLoad: function(container, svg, settings) { + var settings = settings || this._settings[container.id]; + this._settings[container ? container.id : ''] = null; + var wrapper = new this._wrapperClass(svg, container); + $.data(container || svg, $.svg.propertyName, wrapper); + try { + if (settings.loadURL) { // Load URL + wrapper.load(settings.loadURL, settings); + } + if (settings.settings) { // Additional settings + wrapper.configure(settings.settings); + } + if (settings.onLoad && !settings.loadURL) { // Onload callback + settings.onLoad.apply(container || svg, [wrapper]); + } + } + catch (e) { + alert(e); + } + }, + + /** Return the SVG wrapper created for a given container. + @param container {string|Element|jQuery} Selector for the container or + the container for the SVG object or jQuery collection where first entry is the container. + @return {SVGWrapper} The corresponding SVG wrapper element, ornull if not attached. */
+ _getSVG: function(container) {
+ return $(container).data(this.propertyName);
+ },
+
+ /** Remove the SVG functionality from a div.
+ @param container {Element} The container for the SVG object. */
+ _destroySVG: function(container) {
+ container = $(container);
+ if (!container.hasClass(this.markerClassName)) {
+ return;
+ }
+ container.removeClass(this.markerClassName).removeData(this.propertyName);
+ if (container[0].namespaceURI !== this.svgNS) {
+ container.empty();
+ }
+ },
+
+ /** Extend the SVGWrapper object with an embedded class.
+ The constructor function must take a single parameter that is + a reference to the owning SVG root object. This allows the + extension to access the basic SVG functionality.
+ @param name {string} The name of theSVGWrapper attribute to access the new class.
+ @param extClass {function} The extension class constructor. */
+ addExtension: function(name, extClass) {
+ this._extensions.push([name, extClass]);
+ },
+
+ /** Does this node belong to SVG?
+ @param node {Element} The node to be tested.
+ @return {boolean} true if an SVG node, false if not. */
+ isSVGElem: function(node) {
+ return (node.nodeType === 1 && node.namespaceURI === $.svg.svgNS);
+ }
+});
+
+/** The main SVG interface, which encapsulates the SVG element.
+ Obtain a reference from $().svg('get')
+ @module SVGWrapper */ +function SVGWrapper(svg, container) { + this._svg = svg; // The SVG root node + this._container = container; // The containing div + for (var i = 0; i < $.svg._extensions.length; i++) { + var extension = $.svg._extensions[i]; + this[extension[0]] = new extension[1](this); + } +} + +$.extend(SVGWrapper.prototype, { + + /** Retrieve the width of the SVG object. + @return {number} The width of the SVG canvas. */ + width: function() { + return (this._container ? this._container.clientWidth : this._svg.width); + }, + + /** Retrieve the height of the SVG object. + @return {number} The height of the SVG canvas. */ + height: function() { + return (this._container ? this._container.clientHeight : this._svg.height); + }, + + /** Retrieve the root SVG element. + @return {SVGElement} The top-level SVG element. */ + root: function() { + return this._svg; + }, + + /** Configure a SVG node. + @param [node] {SVGElement} The node to configure, or the SVG root if not specified. + @param settings {object} Additional settings for the root. + @param [clear=false] {boolean}true to remove existing attributes first,
+ false to add to what is already there.
+ @return {SVGWrapper} This wrapper. */
+ configure: function(node, settings, clear) {
+ if (!node.nodeName) {
+ clear = settings;
+ settings = node;
+ node = this._svg;
+ }
+ if (clear) {
+ for (var i = node.attributes.length - 1; i >= 0; i--) {
+ var attr = node.attributes.item(i);
+ if (!(attr.nodeName === 'onload' || attr.nodeName === 'version' ||
+ attr.nodeName.substring(0, 5) === 'xmlns')) {
+ node.attributes.removeNamedItem(attr.nodeName);
+ }
+ }
+ }
+ for (var attrName in settings) {
+ node.setAttribute($.svg._attrNames[attrName] || attrName, settings[attrName]);
+ }
+ return this;
+ },
+
+ /** Locate a specific element in the SVG document.
+ @param id {string} The element's identifier.
+ @return {SVGElement} The element reference, or null if not found. */
+ getElementById: function(id) {
+ return this._svg.ownerDocument.getElementById(id);
+ },
+
+ /** Change the attributes for a SVG node.
+ @param element {SVGElement} The node to change.
+ @param settings {object} The new settings.
+ @return {SVGWrapper} This wrapper. */
+ change: function(element, settings) {
+ if (element) {
+ for (var name in settings) {
+ if (settings[name] == null) {
+ element.removeAttribute($.svg._attrNames[name] || name);
+ }
+ else {
+ element.setAttribute($.svg._attrNames[name] || name, settings[name]);
+ }
+ }
+ }
+ return this;
+ },
+
+ /** Check for parent being absent and adjust arguments accordingly.
+ @private
+ @param values {string[]} The given parameters.
+ @param names {string[]} The names of the parameters in order.
+ @param optSettings {string[]} The names of optional parameters.
+ @return {object} An object representing the named parameters. */
+ _args: function(values, names, optSettings) {
+ names.splice(0, 0, 'parent');
+ names.splice(names.length, 0, 'settings');
+ var args = {};
+ var offset = 0;
+ if (values[0] != null && values[0].jquery) {
+ values[0] = values[0][0];
+ }
+ if (values[0] != null && !(typeof values[0] === 'object' && values[0].nodeName)) {
+ args['parent'] = null;
+ offset = 1;
+ }
+ for (var i = 0; i < values.length; i++) {
+ args[names[i + offset]] = values[i];
+ }
+ if (optSettings) {
+ $.each(optSettings, function(i, value) {
+ if (typeof args[value] === 'object') {
+ args.settings = args[value];
+ args[value] = null;
+ }
+ });
+ }
+ return args;
+ },
+
+ /** Add a title.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param text {string} The text of the title.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new title node. */
+ title: function(parent, text, settings) {
+ var args = this._args(arguments, ['text']);
+ var node = this._makeNode(args.parent, 'title', args.settings || {});
+ node.appendChild(this._svg.ownerDocument.createTextNode(args.text));
+ return node;
+ },
+
+ /** Add a description.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param text {string} The text of the description.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new description node. */
+ describe: function(parent, text, settings) {
+ var args = this._args(arguments, ['text']);
+ var node = this._makeNode(args.parent, 'desc', args.settings || {});
+ node.appendChild(this._svg.ownerDocument.createTextNode(args.text));
+ return node;
+ },
+
+ /** Add a definitions node.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param [id] {string} The ID of this definitions (optional).
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new definitions node. */
+ defs: function(parent, id, settings) {
+ var args = this._args(arguments, ['id'], ['id']);
+ return this._makeNode(args.parent, 'defs', $.extend((args.id ? {id: args.id} : {}), args.settings || {}));
+ },
+
+ /** Add a symbol definition.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param id {string} The ID of this symbol.
+ @param x1 {number} The left coordinate for this symbol.
+ @param y1 {number} The top coordinate for this symbol.
+ @param width {number} The width of this symbol.
+ @param height {number} The height of this symbol.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new symbol node. */
+ symbol: function(parent, id, x1, y1, width, height, settings) {
+ var args = this._args(arguments, ['id', 'x1', 'y1', 'width', 'height']);
+ return this._makeNode(args.parent, 'symbol', $.extend({id: args.id,
+ viewBox: args.x1 + ' ' + args.y1 + ' ' + args.width + ' ' + args.height}, args.settings || {}));
+ },
+
+ /** Add a marker definition.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param id {string} The ID of this marker.
+ @param refX {number} The x-coordinate for the reference point.
+ @param refY {number} The y-coordinate for the reference point.
+ @param mWidth {number} The marker viewport width.
+ @param mHeight {number} The marker viewport height.
+ @param [orient] {string|number} 'auto' or angle (degrees).
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new marker node. */
+ marker: function(parent, id, refX, refY, mWidth, mHeight, orient, settings) {
+ var args = this._args(arguments, ['id', 'refX', 'refY', 'mWidth', 'mHeight', 'orient'], ['orient']);
+ return this._makeNode(args.parent, 'marker', $.extend(
+ {id: args.id, refX: args.refX, refY: args.refY, markerWidth: args.mWidth,
+ markerHeight: args.mHeight, orient: args.orient || 'auto'}, args.settings || {}));
+ },
+
+ /** Add a style node.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param styles {string} The CSS styles.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new style node. */
+ style: function(parent, styles, settings) {
+ var args = this._args(arguments, ['styles']);
+ var node = this._makeNode(args.parent, 'style', $.extend({type: 'text/css'}, args.settings || {}));
+ node.appendChild(this._svg.ownerDocument.createTextNode(args.styles));
+ return node;
+ },
+
+ /** Add a script node.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param script {string} The JavaScript code.
+ @param [type='text/javascript'] {string} The MIME type for the code.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new script node. */
+ script: function(parent, script, type, settings) {
+ var args = this._args(arguments, ['script', 'type'], ['type']);
+ var node = this._makeNode(args.parent, 'script', $.extend(
+ {type: args.type || 'text/javascript'}, args.settings || {}));
+ node.appendChild(this._svg.ownerDocument.createTextNode(args.script));
+ if ($.svg._ie) {
+ $.globalEval(args.script);
+ }
+ return node;
+ },
+
+ /** Add a linear gradient definition.
+ Specify all of x1, y1, x2, y2 or none of them.
Specify all of cx, cy, r,
+ fx, fy or none of them.
Specify all of vx, vy, xwidth,
+ vheight or none of them.
Specify all of vx, vy,
+ vwidth, vheight or none of them.
Specify all of x, y, width, height or none of them.
Specify both of rx and ry or neither.
Specify both of x and y or neither of them.
null.
+ @param name {string} The name of the element.
+ @param [settings] {object} Additional settings for this node.
+ @return {SVGElement} The new node. */
+ _makeNode: function(parent, name, settings) {
+ parent = parent || this._svg;
+ var node = this._svg.ownerDocument.createElementNS($.svg.svgNS, name);
+ for (var name in settings) {
+ var value = settings[name];
+ if (value != null && (typeof value !== 'string' || value !== '')) {
+ node.setAttribute($.svg._attrNames[name] || name, value);
+ }
+ }
+ parent.appendChild(node);
+ return node;
+ },
+
+ /** Add an existing SVG node to the document.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param node {SVGElement|string|jQuery} The new node to add or
+ the jQuery selector for the node or the set of nodes to add.
+ @return {SVGWrapper} This wrapper. */
+ add: function(parent, node) {
+ var args = this._args((arguments.length === 1 ? [null, parent] : arguments), ['node']);
+ var svg = this;
+ args.parent = args.parent || this._svg;
+ args.node = (args.node.jquery ? args.node : $(args.node));
+ try {
+ args.parent.appendChild(args.node.cloneNode(true));
+ }
+ catch (e) {
+ args.node.each(function() {
+ var child = svg._cloneAsSVG(this);
+ if (child) {
+ args.parent.appendChild(child);
+ }
+ });
+ }
+ return this;
+ },
+
+ /** Clone an existing SVG node and add it to the document.
+ @param [parent] {SVGElement|jQuery} The parent node for the new node, or SVG root if not specified.
+ @param node {SVGEelement|string|jQuery} The new node to add or
+ the jQuery selector for the node or the set of nodes to clone.
+ @return {SVGElement[]} The collection of new nodes. */
+ clone: function(parent, node) {
+ var svg = this;
+ var args = this._args((arguments.length === 1 ? [null, parent] : arguments), ['node']);
+ args.parent = args.parent || this._svg;
+ args.node = (args.node.jquery ? args.node : $(args.node));
+ var newNodes = [];
+ args.node.each(function() {
+ var child = svg._cloneAsSVG(this);
+ if (child) {
+ child.id = '';
+ args.parent.appendChild(child);
+ newNodes.push(child);
+ }
+ });
+ return newNodes;
+ },
+
+ /** SVG nodes must belong to the SVG namespace, so clone and ensure this is so.
+ @private
+ @param node {SVGElement} The SVG node to clone.
+ @return {SVGElement} The cloned node. */
+ _cloneAsSVG: function(node) {
+ var newNode = null;
+ if (node.nodeType === 1) { // element
+ newNode = this._svg.ownerDocument.createElementNS($.svg.svgNS, this._checkName(node.nodeName));
+ for (var i = 0; i < node.attributes.length; i++) {
+ var attr = node.attributes.item(i);
+ if (attr.nodeName !== 'xmlns' && attr.nodeValue) {
+ if (attr.prefix === 'xlink') {
+ newNode.setAttributeNS($.svg.xlinkNS, attr.localName || attr.baseName, attr.nodeValue);
+ }
+ else {
+ newNode.setAttribute(this._checkName(attr.nodeName), attr.nodeValue);
+ }
+ }
+ }
+ for (var i = 0; i < node.childNodes.length; i++) {
+ var child = this._cloneAsSVG(node.childNodes[i]);
+ if (child) {
+ newNode.appendChild(child);
+ }
+ }
+ }
+ else if (node.nodeType === 3) { // text
+ if ($.trim(node.nodeValue)) {
+ newNode = this._svg.ownerDocument.createTextNode(node.nodeValue);
+ }
+ }
+ else if (node.nodeType === 4) { // CDATA
+ if ($.trim(node.nodeValue)) {
+ try {
+ newNode = this._svg.ownerDocument.createCDATASection(node.nodeValue);
+ }
+ catch (e) {
+ newNode = this._svg.ownerDocument.createTextNode(
+ node.nodeValue.replace(/&/g, '&').replace(//g, '>'));
+ }
+ }
+ }
+ return newNode;
+ },
+
+ /** Node names must be lower case and without SVG namespace prefix.
+ @private
+ @param name {string} The name to check.
+ @return {string} The corrected name. */
+ _checkName: function(name) {
+ name = (name.substring(0, 1) >= 'A' && name.substring(0, 1) <= 'Z' ? name.toLowerCase() : name);
+ return (name.substring(0, 4) === 'svg:' ? name.substring(4) : name);
+ },
+
+ /** Load an external SVG document.
+ @param url {string} The location of the SVG document or
+ the actual SVG content (starting with '<svg'.
+ @param settings {boolean|function|object} Either addTo below or onLoad below or
+ additional settings for the load with attributes below:
+ addTo {boolean} true to add to what's already there,
+ or false to clear the canvas first,
+ changeSize {boolean} true to allow the canvas size to change,
+ or false to retain the original,
+ onLoad {function} callback after the document has loaded,
+ 'this' is the container, receives SVG object and optional error message as a parameter,
+ parent {string|SVGElement|jQuery} the parent to load into,
+ defaults to top-level svg element.
+ @return {SVGWrapper} This wrapper. */
+ load: function(url, settings) {
+ settings = (typeof settings === 'boolean' ? {addTo: settings} :
+ (typeof settings === 'function' ? {onLoad: settings} :
+ (typeof settings === 'string' ? {parent: settings} :
+ (typeof settings === 'object' && settings.nodeName ? {parent: settings} :
+ (typeof settings === 'object' && settings.jquery ? {parent: settings} : settings || {})))));
+ if (!settings.parent && !settings.addTo) {
+ this.clear(false);
+ }
+ var size = [this._svg.getAttribute('width'), this._svg.getAttribute('height')];
+ var wrapper = this;
+ // Report a problem with the load
+ var reportError = function(message) {
+ message = $.svg.local.errorLoadingText + ': ' + message;
+ if (settings.onLoad) {
+ settings.onLoad.apply(wrapper._container || wrapper._svg, [wrapper, message]);
+ }
+ else {
+ wrapper.text(null, 10, 20, message);
+ }
+ };
+ // Create a DOM from SVG content
+ var loadXML4IE = function(data) {
+ var xml = new ActiveXObject('Microsoft.XMLDOM');
+ xml.validateOnParse = false;
+ xml.resolveExternals = false;
+ xml.async = false;
+ xml.loadXML(data);
+ if (xml.parseError.errorCode !== 0) {
+ reportError(xml.parseError.reason);
+ return null;
+ }
+ return xml;
+ };
+ // Load the SVG DOM
+ var loadSVG = function(data) {
+ if (!data) {
+ return;
+ }
+ if (data.documentElement.nodeName !== 'svg') {
+ var errors = data.getElementsByTagName('parsererror');
+ var messages = (errors.length ? errors[0].getElementsByTagName('div') : []); // Safari
+ reportError(!errors.length ? '???' : (messages.length ? messages[0] : errors[0]).firstChild.nodeValue);
+ return;
+ }
+ var parent = (settings.parent ? $(settings.parent)[0] : wrapper._svg);
+ var attrs = {};
+ for (var i = 0; i < data.documentElement.attributes.length; i++) {
+ var attr = data.documentElement.attributes.item(i);
+ if (!(attr.nodeName === 'version' || attr.nodeName.substring(0, 5) === 'xmlns')) {
+ attrs[attr.nodeName] = attr.nodeValue;
+ }
+ }
+ wrapper.configure(parent, attrs, !settings.parent);
+ var nodes = data.documentElement.childNodes;
+ for (var i = 0; i < nodes.length; i++) {
+ try {
+ parent.appendChild(wrapper._svg.ownerDocument.importNode(nodes[i], true));
+ if (nodes[i].nodeName === 'script') {
+ $.globalEval(nodes[i].textContent);
+ }
+ }
+ catch (e) {
+ wrapper.add(parent, nodes[i]);
+ }
+ }
+ if (!settings.keepRelativeLinks && url.match('/')) {
+ var base = url.replace(/\/[^\/]*$/, '/');
+ $('*', parent).each(function() {
+ var href = $(this).attr('xlink:href');
+ if (href && !href.match(/(^[a-z][-a-z0-9+.]*:.*$)|(^\/.*$)|(^#.*$)/i)) {
+ $(this).attr('xlink:href', base + href);
+ }
+ });
+ }
+ if (!settings.changeSize) {
+ wrapper.configure(parent, {width: size[0], height: size[1]});
+ }
+ if (settings.onLoad) {
+ settings.onLoad.apply(wrapper._container || wrapper._svg, [wrapper]);
+ }
+ };
+ if (url.match('false to leave them.
+ @return {SVGWrapper} This wrapper. */
+ clear: function(attrsToo) {
+ if (attrsToo) {
+ this.configure({}, true);
+ }
+ while (this._svg.firstChild) {
+ this._svg.removeChild(this._svg.firstChild);
+ }
+ return this;
+ },
+
+ /** Serialise the current diagram into an SVG text document.
+ @param [node] {SVGElement} The starting node, or SVG root if not specified .
+ @return {string} The SVG as text. */
+ toSVG: function(node) {
+ node = node || this._svg;
+ return (typeof XMLSerializer === 'undefined' ? this._toSVG(node) : new XMLSerializer().serializeToString(node));
+ },
+
+ /** Serialise one node in the SVG hierarchy.
+ @private
+ @param node {SVGElement} The current node to serialise.
+ @return {string} The serialised SVG. */
+ _toSVG: function(node) {
+ var svgDoc = '';
+ if (!node) {
+ return svgDoc;
+ }
+ if (node.nodeType === 3) { // Text
+ svgDoc = node.nodeValue;
+ }
+ else if (node.nodeType === 4) { // CDATA
+ svgDoc = '';
+ }
+ else { // Element
+ svgDoc = '<' + node.nodeName;
+ if (node.attributes) {
+ for (var i = 0; i < node.attributes.length; i++) {
+ var attr = node.attributes.item(i);
+ if (!($.trim(attr.nodeValue) === '' || attr.nodeValue.match(/^\[object/) ||
+ attr.nodeValue.match(/^function/))) {
+ svgDoc += ' ' + (attr.namespaceURI === $.svg.xlinkNS ? 'xlink:' : '') +
+ attr.nodeName + '="' + attr.nodeValue + '"';
+ }
+ }
+ }
+ if (node.firstChild) {
+ svgDoc += '>';
+ var child = node.firstChild;
+ while (child) {
+ svgDoc += this._toSVG(child);
+ child = child.nextSibling;
+ }
+ svgDoc += '';
+ }
+ else {
+ svgDoc += '/>';
+ }
+ }
+ return svgDoc;
+ }
+});
+
+/** Helper to generate an SVG path.
+ Obtain an instance from the SVGWrapper object.
+String calls together to generate the path and use its value:
+ @module SVGPath + @example var path = root.createPath(); + root.path(null, path.move(100, 100).line(300, 100).line(200, 300).close(), {fill: 'red'}); + // or + root.path(null, path.move(100, 100).line([[300, 100], [200, 300]]).close(), {fill: 'red'}); */ +function SVGPath() { + this._path = ''; +} + +$.extend(SVGPath.prototype, { + /** Prepare to create a new path. + @return {SVGPath} This path. */ + reset: function() { + this._path = ''; + return this; + }, + + /** Move the pointer to a position. + @param x {number|number[][]} x-coordinate to move to or x-/y-coordinates to move to. + @param [y] {number} y-coordinate to move to (omitted ifx is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ move: function(x, y, relative) {
+ relative = ($.isArray(x) ? y : relative);
+ return this._coords((relative ? 'm' : 'M'), x, y);
+ },
+
+ /** Draw a line to a position.
+ @param x {number|number[][]} x-coordinate to move to or x-/y-coordinates to move to.
+ @param [y] {number} y-coordinate to move to (omitted if x is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ line: function(x, y, relative) {
+ relative = ($.isArray(x) ? y : relative);
+ return this._coords((relative ? 'l' : 'L'), x, y);
+ },
+
+ /** Draw a horizontal line to a position.
+ @param x {number|number[]} x-coordinate to draw to or x-coordinates to draw to.
+ @param relative {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ horiz: function(x, relative) {
+ this._path += (relative ? 'h' : 'H') + ($.isArray(x) ? x.join(' ') : x);
+ return this;
+ },
+
+ /** Draw a vertical line to a position.
+ @param y {number|number[]} y-coordinate to draw to or y-coordinates to draw to.
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ vert: function(y, relative) {
+ this._path += (relative ? 'v' : 'V') + ($.isArray(y) ? y.join(' ') : y);
+ return this;
+ },
+
+ /** Draw a cubic Bézier curve.
+ @param x1 {number|number[][]} x-coordinate of beginning control point or
+ x-/y-coordinates of control and end points to draw to.
+ @param [y1] {number} y-coordinate of beginning control point (omitted if x1 is array).
+ @param [x2] {number} x-coordinate of ending control point (omitted if x1 is array).
+ @param [y2] {number} y-coordinate of ending control point (omitted if x1 is array).
+ @param [x] {number} x-coordinate of curve end (omitted if x1 is array).
+ @param [y] {number} y-coordinate of curve end (omitted if x1 is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ curveC: function(x1, y1, x2, y2, x, y, relative) {
+ relative = ($.isArray(x1) ? y1 : relative);
+ return this._coords((relative ? 'c' : 'C'), x1, y1, x2, y2, x, y);
+ },
+
+ /** Continue a cubic Bézier curve.
+ Starting control point is the reflection of the previous end control point.
+ @param x2 {number|number[][]} x-coordinate of ending control point or + x-/y-coordinates of control and end points to draw to. + @param [y2] {number} y-coordinate of ending control point (omitted ifx2 is array).
+ @param [x] {number} x-coordinate of curve end (omitted if x2 is array).
+ @param [y] {number} y-coordinate of curve end (omitted if x2 is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ smoothC: function(x2, y2, x, y, relative) {
+ relative = ($.isArray(x2) ? y2 : relative);
+ return this._coords((relative ? 's' : 'S'), x2, y2, x, y);
+ },
+
+ /** Draw a quadratic Bézier curve.
+ @param x1 {number|number[][]} x-coordinate of control point or
+ x-/y-coordinates of control and end points to draw to.
+ @param [y1] {number} y-coordinate of control point (omitted if x1 is array).
+ @param [x] {number} x-coordinate of curve end (omitted if x1 is array).
+ @param [y] {number} y-coordinate of curve end (omitted if x1 is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ curveQ: function(x1, y1, x, y, relative) {
+ relative = ($.isArray(x1) ? y1 : relative);
+ return this._coords((relative ? 'q' : 'Q'), x1, y1, x, y);
+ },
+
+ /** Continue a quadratic Bézier curve.
+ Control point is the reflection of the previous control point.
+ @param x {number|number[][]} x-coordinate of curve end or x-/y-coordinates of points to draw to. + @param [y] {number} y-coordinate of curve end (omitted ifx is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ smoothQ: function(x, y, relative) {
+ relative = ($.isArray(x) ? y : relative);
+ return this._coords((relative ? 't' : 'T'), x, y);
+ },
+
+ /** Generate a path command with (a list of) coordinates.
+ @private
+ @param cmd {string} The command for the path element.
+ @param x1 {number} The first x-coordinate.
+ @param y1 {number} The first y-coordinate.
+ @param [x2] {number} The second x-coordinate.
+ @param [y2] {number} The second y-coordinate.
+ @param [x3] {number} The third x-coordinate.
+ @param [y3] {number} The third y-coordinate.
+ @return {SVGPath} This path. */
+ _coords: function(cmd, x1, y1, x2, y2, x3, y3) {
+ if ($.isArray(x1)) {
+ for (var i = 0; i < x1.length; i++) {
+ var cs = x1[i];
+ this._path += (i === 0 ? cmd : ' ') + cs[0] + ',' + cs[1] + (cs.length < 4 ? '' :
+ ' ' + cs[2] + ',' + cs[3] + (cs.length < 6 ? '': ' ' + cs[4] + ',' + cs[5]));
+ }
+ }
+ else {
+ this._path += cmd + x1 + ',' + y1 +
+ (x2 == null ? '' : ' ' + x2 + ',' + y2 + (x3 == null ? '' : ' ' + x3 + ',' + y3));
+ }
+ return this;
+ },
+
+ /** Draw an arc to a position.
+ @param rx {number|any[][]} x-radius of arc or x-/y-coordinates and flags for points to draw to.
+ @param [ry] {number} y-radius of arc (omitted if rx is array).
+ @param [xRotate] {number} x-axis rotation (degrees, clockwise) (omitted if rx is array).
+ @param [large] {boolean} true to draw the large part of the arc,
+ false to draw the small part (omitted if rx is array).
+ @param [clockwise] {boolean} true to draw the clockwise arc,
+ false to draw the anti-clockwise arc (omitted if rx is array).
+ @param [x] {number} x-coordinate of arc end (omitted if rx is array).
+ @param [y] {number} y-coordinate of arc end (omitted if rx is array).
+ @param [relative=false] {boolean} true for coordinates relative to the current point,
+ false for coordinates being absolute.
+ @return {SVGPath} This path. */
+ arc: function(rx, ry, xRotate, large, clockwise, x, y, relative) {
+ relative = ($.isArray(rx) ? ry : relative);
+ this._path += (relative ? 'a' : 'A');
+ if ($.isArray(rx)) {
+ for (var i = 0; i < rx.length; i++) {
+ var cs = rx[i];
+ this._path += (i === 0 ? '' : ' ') + cs[0] + ',' + cs[1] + ' ' +
+ cs[2] + ' ' + (cs[3] ? '1' : '0') + ',' + (cs[4] ? '1' : '0') + ' ' + cs[5] + ',' + cs[6];
+ }
+ }
+ else {
+ this._path += rx + ',' + ry + ' ' + xRotate + ' ' +
+ (large ? '1' : '0') + ',' + (clockwise ? '1' : '0') + ' ' + x + ',' + y;
+ }
+ return this;
+ },
+
+ /** Close the current path.
+ @return {SVGPath} This path. */
+ close: function() {
+ this._path += 'z';
+ return this;
+ },
+
+ /** Return the string rendering of the specified path.
+ @return {string} The stringified path. */
+ path: function() {
+ return this._path;
+ }
+});
+
+SVGPath.prototype.moveTo = SVGPath.prototype.move;
+SVGPath.prototype.lineTo = SVGPath.prototype.line;
+SVGPath.prototype.horizTo = SVGPath.prototype.horiz;
+SVGPath.prototype.vertTo = SVGPath.prototype.vert;
+SVGPath.prototype.curveCTo = SVGPath.prototype.curveC;
+SVGPath.prototype.smoothCTo = SVGPath.prototype.smoothC;
+SVGPath.prototype.curveQTo = SVGPath.prototype.curveQ;
+SVGPath.prototype.smoothQTo = SVGPath.prototype.smoothQ;
+SVGPath.prototype.arcTo = SVGPath.prototype.arc;
+
+/** Helper to generate an SVG text object.
+ Obtain an instance from the SVGWrapper object.
+String calls together to generate the text and use its value:
+ @module SVGText + @example var text = root.createText(); + root.text(null, x, y, text.string('This is '). + span('red', {fill: 'red'}).string('!'), {fill: 'blue'}); */ +function SVGText() { + this._parts = []; // The components of the text object +} + +$.extend(SVGText.prototype, { + /** Prepare to create a new text object. + @return {SVGText} This text object. */ + reset: function() { + this._parts = []; + return this; + }, + + /** Add a straight string value. + @param value {string} The actual text. + @return {SVGText} This text object. */ + string: function(value) { + this._parts.push(['text', value]); + return this; + }, + + /** Add a separate text span that has its own settings. + @param value {string} The actual text. + @param settings {object} The settings for this text. + @return {SVGText} This text object. */ + span: function(value, settings) { + this._parts.push(['tspan', value, settings]); + return this; + }, + + /** Add a reference to a previously defined text string. + @param id {string} The ID of the actual text. + @param settings {object} The settings for this text. + @return {SVGText} This text object. */ + ref: function(id, settings) { + this._parts.push(['tref', id, settings]); + return this; + }, + + /** Add text drawn along a path. + @param id {string} The ID of the path. + @param value {string} The actual text. + @param settings {object} The settings for this text. + @return {SVGText} This text object. */ + path: function(id, value, settings) { + this._parts.push(['textpath', value, $.extend({href: id}, settings || {})]); + return this; + } +}); + +/** Attach the SVG functionality to a jQuery selection. + @param [command] {string} The command to run. + @param [options] {object} The new settings to use for these SVG instances. + @return {jQuery} For chaining further calls. */ +$.fn.svg = function(options) { + var otherArgs = Array.prototype.slice.call(arguments, 1); + if (typeof options === 'string' && options === 'get') { + return $.svg['_' + options + 'SVG'].apply($.svg, [this[0]].concat(otherArgs)); + } + return this.each(function() { + if (typeof options === 'string') { + $.svg['_' + options + 'SVG'].apply($.svg, [this].concat(otherArgs)); + } + else { + $.svg._attachSVG(this, options || {}); + } + }); +}; + +// Singleton primary SVG interface +$.svg = new SVGManager(); + +})(jQuery); diff --git a/pandora_console/include/javascript/jquery.svgdom.js b/pandora_console/include/javascript/jquery.svgdom.js new file mode 100644 index 0000000000..77658b2a9d --- /dev/null +++ b/pandora_console/include/javascript/jquery.svgdom.js @@ -0,0 +1,239 @@ +/* http://keith-wood.name/svg.html + jQuery DOM compatibility for jQuery SVG v1.5.0. + Written by Keith Wood (kbwood{at}iinet.com.au) April 2009. + Available under the MIT (http://keith-wood.name/licence.html) license. + Please attribute the author if you use it. */ + +(function($) { // Hide scope, no $ conflict + +var rclass = /[\t\r\n]/g, + rspace = /\s+/, + rwhitespace = "[\\x20\\t\\r\\n\\f]"; + +/** Retrieve the element classes. + @private + @param elem {Element} The element to examine. + @return {string} The class names. */ +function getClassNames(elem) { + return (!$.svg.isSVGElem(elem) ? elem.className : + (elem.className ? elem.className.baseVal : elem.getAttribute('class'))) || ''; +} + +/** Set the element classes. + @private + @param elem {Element} The element to update. + @param classes {string} The new class names. */ +function setClassNames(elem, classes) { + (elem.className ? elem.className.baseVal = classes : elem.setAttribute('class', classes)); +} + +/** Support adding class names to SVG nodes. + @param classNames {string} The classes to add. */ +$.fn.addClass = function(origAddClass) { + return function(classNames) { + if ($.isFunction(classNames)) { + return this.each(function(i) { + $(this).addClass(classNames.call(this, i, getClassNames(this))); + }); + } + var origArgs = arguments; + classNames = classNames || ''; + return this.each(function() { + if ($.svg.isSVGElem(this)) { + var node = this; + $.each(classNames.split(/\s+/), function(i, className) { + var classes = getClassNames(node); + if ($.inArray(className, classes.split(/\s+/)) === -1) { + setClassNames(node, classes += (classes ? ' ' : '') + className); + } + }); + } + else { + origAddClass.apply($(this), origArgs); + } + }); + }; +}($.fn.addClass); + +/** Support removing class names from SVG nodes. + @param classNames {string} The classes to remove. */ +$.fn.removeClass = function(origRemoveClass) { + return function(classNames) { + if ($.isFunction(classNames)) { + return this.each(function(i) { + $(this).removeClass(classNames.call(this, i, getClassNames(this))); + }); + } + var origArgs = arguments; + classNames = classNames || ''; + return this.each(function() { + if ($.svg.isSVGElem(this)) { + var node = this; + $.each(classNames.split(/\s+/), function(i, className) { + var classes = getClassNames(node); + classes = $.grep(classes.split(/\s+/), function(n, i) { return n !== className; }).join(' '); + setClassNames(node, classes); + }); + } + else { + origRemoveClass.apply($(this), origArgs); + } + }); + }; +}($.fn.removeClass); + +/** Support toggling class names on SVG nodes. + @param classNames {string} The classes to toggle. */ +$.fn.toggleClass = function(origToggleClass) { + return function(classNames, state) { + if ($.isFunction(classNames)) { + return this.each(function(i) { + $(this).toggleClass(classNames.call(this, i, getClassNames(this), state), state); + }); + } + var origArgs = arguments; + var hasState = (typeof state === 'boolean'); + return this.each(function() { + if ($.svg.isSVGElem(this)) { + if (typeof classNames === 'string') { + var node = $(this); + $.each(classNames.split(/\s+/), function(i, className) { + if (!hasState) { + state = !node.hasClass(className); + } + node[(state ? 'add' : 'remove') + 'Class'](className); + }); + } + else { + var classes = getClassNames(this); + if (classes) { + $._data(this, '__className__', classes); // store className if set + } + // toggle whole className + setClassNames(this, classes || classNames === false ? '' : $._data(this, '__className__') || ''); + } + } + else { + origToggleClass.apply($(this), origArgs); + } + }); + }; +}($.fn.toggleClass); + +/** Support checking class names on SVG nodes. + @param className {string} The class to check. + @return {boolean}true if this class is present, false if not. */
+$.fn.hasClass = function(origHasClass) {
+ return function(className) {
+ className = className || '';
+ var found = false;
+ this.each(function() {
+ if ($.svg.isSVGElem(this)) {
+ found = ($.inArray(className, getClassNames(this).split(/\s+/)) > -1);
+ }
+ else {
+ found = (origHasClass.apply($(this), [className]));
+ }
+ return !found;
+ });
+ return found;
+ };
+}($.fn.hasClass);
+
+/** Support attributes on SVG nodes.
+ @param name {string} The attribute name.
+ @param [value] {any} The new attribute value.
+ @param type {boolean} Internal flag.
+ @return {any} If an attribute value is requested. */
+$.fn.attr = function(origAttr) {
+ return function(name, value, type) {
+ if (typeof name === 'string' && value === undefined) { // Return attribute value
+ var val = origAttr.apply(this, arguments);
+ if (val && val.baseVal && val.baseVal.numberOfItems != null) { // Multiple values
+ value = '';
+ val = val.baseVal;
+ if (name === 'transform') {
+ for (var i = 0; i < val.numberOfItems; i++) {
+ var item = val.getItem(i);
+ switch (item.type) {
+ case 1: value += ' matrix(' + item.matrix.a + ',' + item.matrix.b + ',' +
+ item.matrix.c + ',' + item.matrix.d + ',' +
+ item.matrix.e + ',' + item.matrix.f + ')';
+ break;
+ case 2: value += ' translate(' + item.matrix.e + ',' + item.matrix.f + ')'; break;
+ case 3: value += ' scale(' + item.matrix.a + ',' + item.matrix.d + ')'; break;
+ case 4: value += ' rotate(' + item.angle + ')'; break; // Doesn't handle new origin
+ case 5: value += ' skewX(' + item.angle + ')'; break;
+ case 6: value += ' skewY(' + item.angle + ')'; break;
+ }
+ }
+ val = value.substring(1);
+ }
+ else {
+ val = val.getItem(0).valueAsString;
+ }
+ }
+ return (val && val.baseVal ? val.baseVal.valueAsString : val);
+ }
+
+ var options = name;
+ if (typeof name === 'string') {
+ options = {};
+ options[name] = value;
+ }
+ if ($.isFunction(value)) {
+ return $(this).each(function(i) {
+ $(this).attr(name, value.call(this, i, $(this).attr(name)));
+ });
+ }
+ var origArgs = arguments;
+ return $(this).each(function() {
+ if ($.svg.isSVGElem(this)) {
+ for (var n in options) {
+ (type ? this.style[n] = options[n] : this.setAttribute(n, options[n]));
+ }
+ }
+ else {
+ origAttr.apply($(this), origArgs);
+ }
+ });
+ };
+}($.fn.attr);
+
+/** Support removing attributes on SVG nodes.
+ @param names {string} The names of the attributes to remove. */
+$.fn.removeAttr = function(origRemoveAttr) {
+ return function(names) {
+ var origArgs = arguments;
+ return this.each(function() {
+ if ($.svg.isSVGElem(this)) {
+ var node = this;
+ $.each(names.split(/\s+/), function(i, name) {
+ (node[name] && node[name].baseVal ? node[name].baseVal.value = null : node.removeAttribute(name));
+ });
+ }
+ else {
+ origRemoveAttr.apply($(this), origArgs);
+ }
+ });
+ };
+}($.fn.removeAttr);
+
+/* Add numeric only properties. */
+$.extend($.cssNumber, {
+ 'stopOpacity': true,
+ 'strokeMitrelimit': true,
+ 'strokeOpacity': true
+});
+
+/* Support retrieving CSS/attribute values on SVG nodes. */
+if ($.cssProps) {
+ $.css = function(origCSS) {
+ return function(elem, name, numeric, extra) {
+ var value = (name.match(/^svg.*/) ? $(elem).attr($.cssProps[name] || name) : '');
+ return value || origCSS(elem, name, numeric, extra);
+ };
+ }($.css);
+}
+
+})(jQuery);
diff --git a/pandora_console/include/javascript/map/MapController.js b/pandora_console/include/javascript/map/MapController.js
index f59ac04438..73a34134bf 100644
--- a/pandora_console/include/javascript/map/MapController.js
+++ b/pandora_console/include/javascript/map/MapController.js
@@ -113,10 +113,6 @@ MapController.prototype.init_map = function() {
- //Runs tooltipster plugin
- $(document).ready(function() {
- $('.tooltip').tooltipster();
- });
this.init_events();
};
@@ -160,16 +156,35 @@ Return void
This function manages nodes tooltips
*/
MapController.prototype.tooltip_map = function(self, event) {
- /*------------------- PRUEBA CON TOOLTIPSTER ----------------------*/
- $(this._target + " svg").after($("