scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -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',
value: 'Click Me!',
onClick: function() {
console.log('Resetting');
palette.reset();
values.text = 'You clicked!';
}
@ -58,7 +59,7 @@
};
var palette = new Palette('Values', components, values);
palette.onChange = function(component, name, value) {
console.log(component, name + ' = ' + value);
console.log(name + ' = ' + value, component);
}
values.number = 10;
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;
this._info = this._types[this._type] || { type: this._type };
var that = this,
fireChange = false;
dontFire = true;
this._inputItem = DomElement.create(this._info.tag || 'input', {
type: this._info.type,
events: {
change: function() {
that.setValue(
DomElement.get(this, that._info.value || 'value'));
if (fireChange) {
that._palette.fire('change', that, that.name, that._value);
that.fire('change', that._value);
}
DomElement.get(this, that._info.value || 'value'),
dontFire);
},
click: function() {
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._labelItem = DomElement.create('td'),
'td', [this._inputItem]
@ -94,8 +96,8 @@ var Component = Base.extend(Callback, /** @lends Component# */{
this[key] = value;
}, this);
this._defaultValue = this._value;
// Only fire change events after we have initalized
fireChange = true;
// Start firing change events after we have initalized.
dontFire = false;
},
getType: function() {
@ -125,12 +127,16 @@ var Component = Base.extend(Callback, /** @lends Component# */{
return this._value;
},
setValue: function(value) {
setValue: function(value, _dontFire) {
var key = this._info.value || 'value';
DomElement.set(this._inputItem, key, value);
// Read back and convert from input again, to make sure we're in sync
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() {