Event handling with SVG control in Enyo 2.0 (object or insert tag)

Question

I have this control to load an SVG document (works, SVG is displayed normally)

enyo.kind({ name: "SvgParser", kind:"Control", fit: true, published: { source:'' }, components:[{ tag: "object", // Or Embed name:'svgObject', classes: 'SvgObject', ontap:'click', onload:'loaded' }], create: function() { this.inherited(arguments); this.sourceChanged(); }, click: function(inSender, inEvent) { console.log('click'); // doesn't happen }, sourceChanged: function() { this.$.svgObject.attributes.type = 'image/svg+xml'; this.$.svgObject.attributes.data = this.source; }, loaded: function(inSender, inEvent) { console.log('loaded'); // doesn't happen } }); 

but the event handlers for "tap" and "load" never fire, can someone explain to me what I'm doing wrong? thanks in advance

Answer 1

You actually have two separate problems: one prevents the load handler from working, and the other prevents the tap handler from working.

The load handler is not called because you must tell Enyo to listen for the load event in the <object> . You can do this by calling enyo.makeBubble() .

The tap handler is not called because the click / tap events on the <object> tag containing the SVG image are routed to the DOM of the image itself. To intercept them in HTML, you need to wrap the <object> transparent <div> and give <object> negative z-index .

I made a fiddle illustrating both methods: http://jsfiddle.net/rbWMr/

For the background using the SVG wrapper technique, see Creating an svg image object with the ability to click using onclick, avoiding absolute positioning .

Answer 2

Events are not triggered because you are trying to change the attributes of the DOM node when the DOM node for the Enyo component has not yet been created. DOM nodes are created when the component is rendered. Move the sourceChanged () function to the rendered () function, or if you need to create create (), call hasNode () on the control to force it to first create a DOM node. Try this version of the sourceChanged () function and see if it works:

 sourceChanged: function() { var svgObj = this.$.svgObject; if (svgObj.hasNode()) { svgObj.setAttribute("type", 'image/svg+xml'); svgObj.setAttribute("data", this.source); } },