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

Further simplify Palette code: Directly link values to components, without a private values list, and improve values conversion.

Browse source
This commit is contained in:
Jürg Lehni 2012-11-14 12:49:03 -08:00
parent 01c936e1b9
commit 4945a45a99
2 changed files with 13 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/ui/Component.js
View file

@ -54,12 +54,6 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
DomElement.create(Base.each(this._options, function(option) { DomElement.create(Base.each(this._options, function(option) {
this.push('option', { value: option, text: option }); this.push('option', { value: option, text: option });
}, []), this._inputItem); }, []), this._inputItem);
},
value: function(value) {
DomElement.set(
DomElement.find('option[value="' + value + '"]', this._inputItem),
'selected', true);
} }
} }
}, },
@ -78,14 +72,10 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
type: this._info.type, type: this._info.type,
events: { events: {
change: function() { change: function() {
var key = that._info.value; that.setValue(
if (typeof key === 'function') DomElement.get(this, that._info.value || 'value'));
key = null;
var value = DomElement.get(this, key || 'value');
if (that._info.number)
value = Base.toFloat(value);
if (fireChange) { if (fireChange) {
that.palette.fire('change', that, that.name, value); that._palette.fire('change', that, that.name, value);
that.fire('change', value); that.fire('change', value);
} }
}, },
@ -134,12 +124,11 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
}, },
setValue: function(value) { setValue: function(value) {
var key = this._info.value; var key = this._info.value || 'value';
if (typeof key === 'function') DomElement.set(this._inputItem, key, value);
key.call(this, value); // Read back and convert from input again, to make sure we're in sync
else value = DomElement.get(this._inputItem, key);
DomElement.set(this._inputItem, key || 'value', value); this._value = this._info.number ? Base.toFloat(value) : value;
this._value = value;
}, },
getRange: function() { getRange: function() {

17
src/ui/Palette.js
View file

@ -35,32 +35,25 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
component = components[name] = new Component(component); component = components[name] = new Component(component);
} }
this._element.appendChild(component._element); this._element.appendChild(component._element);
component.palette = this; component._palette = this;
// Make sure each component has an entry in values, so observers get // Make sure each component has an entry in values, so observers get
// installed further down. // installed further down.
if (values[name] === undefined) if (values[name] === undefined)
values[name] = component.value; values[name] = component.value;
} }
// Now replace each entry in values with a getter / setters so we can // Now replace each entry in values with a getter / setters so we can
// observe change. // directly link the value to the component and observe change.
// Introduce a private _values list that actually keeps the values, and
// use change events to keep it up to date
var _values = {};
this.attach('change', function(component, name, value) {
_values[name] = value;
});
this._values = Base.each(values, function(value, name) { this._values = Base.each(values, function(value, name) {
_values[name] = value; var component = components[name];
Base.define(values, name, { Base.define(values, name, {
enumerable: true, enumerable: true,
configurable: true, configurable: true,
writable: true, writable: true,
get: function() { get: function() {
return _values[name]; return component._value;
}, },
set: function(val) { set: function(val) {
_values[name] = val; component.setValue(val);
components[name].setValue(val);
} }
}); });
}); });