/*global define*/
define(function() {
"use strict";
var svgNS = 'http://www.w3.org/2000/svg';
var svgClassName = 'cesium-svgPath-svg';
/**
* A Knockout binding handler that creates a DOM element for a single SVG path.
* This binding handler will be registered as cesiumSvgPath.
*
*
* The parameter to this binding is an object with the following properties:
*
*
*
* - path: The SVG path as a string.
* - width: The width of the SVG path with no transformations applied.
* - height: The height of the SVG path with no transformations applied.
* - css: Optional. A string containing additional CSS classes to apply to the SVG. 'cesium-svgPath-svg' is always applied.
*
*
* @namespace
* @alias SvgPathBindingHandler
*
* @example
* // Create an SVG as a child of a div
*
*
* // parameters can be observable from the view model
*
*
* // or the whole object can be observable from the view model
*
*/
var SvgPathBindingHandler = {
register : function(knockout) {
knockout.bindingHandlers.cesiumSvgPath = {
init : function(element, valueAccessor) {
var svg = document.createElementNS(svgNS, 'svg:svg');
svg.setAttribute('class', svgClassName);
var pathElement = document.createElementNS(svgNS, 'path');
svg.appendChild(pathElement);
knockout.virtualElements.setDomNodeChildren(element, [svg]);
knockout.computed({
read : function() {
var value = knockout.unwrap(valueAccessor());
pathElement.setAttribute('d', knockout.unwrap(value.path));
var pathWidth = knockout.unwrap(value.width);
var pathHeight = knockout.unwrap(value.height);
svg.setAttribute('width', pathWidth);
svg.setAttribute('height', pathHeight);
svg.setAttribute('viewBox', '0 0 ' + pathWidth + ' ' + pathHeight);
if (value.css) {
svg.setAttribute('class', svgClassName + ' ' + knockout.unwrap(value.css));
}
},
disposeWhenNodeIsRemoved : element
});
return {
controlsDescendantBindings : true
};
}
};
knockout.virtualElements.allowedBindings.cesiumSvgPath = true;
}
};
return SvgPathBindingHandler;
});