scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve handling of change events in Palette.

Browse source
This commit is contained in:
Jürg Lehni 2013-10-29 21:34:12 +01:00
parent 4e34a27da4
commit a3ec26dace
2 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/Interface/Palette.html
View file

@ -44,6 +44,7 @@
label: 'A Button', label: 'A Button',
value: 'Click Me!', value: 'Click Me!',
onClick: function() { onClick: function() {
console.log('Resetting');
palette.reset(); palette.reset();
values.text = 'You clicked!'; values.text = 'You clicked!';
} }
@ -58,7 +59,7 @@
}; };
var palette = new Palette('Values', components, values); var palette = new Palette('Values', components, values);
palette.onChange = function(component, name, value) { palette.onChange = function(component, name, value) {
console.log(component, name + ' = ' + value); console.log(name + ' = ' + value, component);
} }
values.number = 10; values.number = 10;
values.string = 'Woop woop'; values.string = 'Woop woop';

26
src/ui/Component.js
View file

@ -69,23 +69,25 @@ var Component = Base.extend(Callback, /** @lends Component# */{
: typeof obj.value; : typeof obj.value;
this._info = this._types[this._type] || { type: this._type }; this._info = this._types[this._type] || { type: this._type };
var that = this, var that = this,
fireChange = false; dontFire = true;
this._inputItem = DomElement.create(this._info.tag || 'input', { this._inputItem = DomElement.create(this._info.tag || 'input', {
type: this._info.type, type: this._info.type,
events: { events: {
change: function() { change: function() {
that.setValue( that.setValue(
DomElement.get(this, that._info.value || 'value')); DomElement.get(this, that._info.value || 'value'),
if (fireChange) { dontFire);
that._palette.fire('change', that, that.name, that._value);
that.fire('change', that._value);
}
}, },
click: function() { click: function() {
that.fire('click'); that.fire('click');
} }
} }
}); });
// Attach default 'change' even that delegates to palette
this.attach('change', function(value) {
if (!dontFire)
this._palette.fire('change', this, this.name, value);
});
this._element = DomElement.create('tr', [ this._element = DomElement.create('tr', [
this._labelItem = DomElement.create('td'), this._labelItem = DomElement.create('td'),
'td', [this._inputItem] 'td', [this._inputItem]
@ -94,8 +96,8 @@ var Component = Base.extend(Callback, /** @lends Component# */{
this[key] = value; this[key] = value;
}, this); }, this);
this._defaultValue = this._value; this._defaultValue = this._value;
// Only fire change events after we have initalized // Start firing change events after we have initalized.
fireChange = true; dontFire = false;
}, },
getType: function() { getType: function() {
@ -125,12 +127,16 @@ var Component = Base.extend(Callback, /** @lends Component# */{
return this._value; return this._value;
}, },
setValue: function(value) { setValue: function(value, _dontFire) {
var key = this._info.value || 'value'; var key = this._info.value || 'value';
DomElement.set(this._inputItem, key, value); DomElement.set(this._inputItem, key, value);
// Read back and convert from input again, to make sure we're in sync // Read back and convert from input again, to make sure we're in sync
value = DomElement.get(this._inputItem, key); value = DomElement.get(this._inputItem, key);
this._value = this._info.number ? parseFloat(value, 10) : value; if (this._info.number)
value = parseFloat(value, 10);
this._value = value;
if (!_dontFire)
this.fire('change', value);
}, },
getRange: function() { getRange: function() {