Issue in applyStyle on Firefox

Hi all,

I'm working to migrate to a recent Enyo version my Sugarizer app (currently using Enyo 2.1).

I've got an issue in applyStyle when I'm using Enyo from the git repository (currently Enyo 2.5.1-pre.4) and on Firefox (no problem with Chrome or IE).
Basically, the issue is that applyStyle method do nothing on my component - matching an icon in my app - instead of changing coordinate. Strangely the issue happen only when the method is called from a callback (here a timer callback, an AJAX callback in the real source code).

Here is the JavaScript source that I've isolated to demonstrate the issue:

// Class for a Sugar icon
enyo.kind({
name: "Sugar.Icon",
kind: enyo.Control,
published: {
icon: null,
x: -1,
y: -1
},
classes: "web-activity",
components: [
{ name: "icon", classes: "web-activity-icon"}
],

// Constructor
create: function() {
this.inherited(arguments);
this.iconChanged();
this.xChanged();
this.yChanged();
},

// Property changed
xChanged: function() {
if (this.x != -1) {
this.applyStyle("margin-left", this.x+"px");
}
},

yChanged: function() {
if (this.y != -1) {
this.applyStyle("margin-top", this.y+"px");
}
},

iconChanged: function() {
if (this.icon != null)
this.$.icon.applyStyle("background-image", "url(" + this.icon.directory+"/"+this.icon.icon + ")");
else
this.$.icon.applyStyle("background-image", null);
}
});


// Main app class
enyo.kind({
name: "TestApp",
kind: enyo.Control,
components: [
{name: "desktop", showing: true, components: [
{name: "journal", kind: "Sugar.Icon", icon: {directory:"images", icon:"activity-journal.svg"}}
]},
],

// Constructor
create: function() {
this.inherited(arguments);

this.timer = null;
//this.displayIcon(); // Uncomment this line and comment the following one and it works perfectly
this.timer = window.setInterval(enyo.bind(this, "displayIcon"), 1000);
},

// Display icon
displayIcon: function() {
if (this.timer != null) window.clearInterval(this.timer);

console.log("Move icon...");

// Nothing happen here if it come from the timer callback
this.$.journal.setX(200);
this.$.journal.setY(100);

console.log("Done");
}
});
You could download the full source code here

Note that it works perfectly on Enyo 2.4.

Regards.

Lionel.


Sign In or Register to comment.