Handling events with SVG control in Enyo 2.0 (object or embed tag)

Question

I have this control for loading a SVG-document (works, the SVG displays fine)

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 are triggered, can somebody explain me what i'm doing wrong? Thanks in advance

Answer 1

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

The load handler isn't being called because you need to tell Enyo to listen for the load event on the <object> tag. You can do this with a call to enyo.makeBubble().

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

I've made a fiddle illustrating both techniques here: http://jsfiddle.net/rbWMr/

For background on the SVG-wrapping technique, see Making an svg image object clickable with onclick, avoiding absolute positioning.

Answer 2

The events aren't being triggered because you're trying to modify DOM node attributes when the DOM node for the Enyo component hasn't been created yet. DOM nodes are created when the component is rendered. Move your sourceChanged() function to the control's rendered() function or if you need it in the control's create() function, call hasNode() on the control to force it to create the DOM node first. Try this version of your 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);
    }
},