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

Implement Component#label and Palette#remove().

Browse source
This commit is contained in:
Jürg Lehni 2012-11-14 12:05:12 -08:00
parent b334c95266
commit 405198f94d
2 changed files with 40 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/ui/Component.js
View file

@ -41,22 +41,23 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
},
slider: {
type: 'range'
type: 'range',
number: true
},
list: {
tag: 'select',
options: function() {
DomElement.removeChildren(this.element);
DomElement.removeChildren(this._inputItem);
DomElement.create(Base.each(this._options, function(option) {
this.push('option', { value: option, text: option });
}, []), this.element);
}, []), this._inputItem);
},
value: function(value) {
DomElement.set(
DomElement.find('option[value="' + value + '"]', this.element),
DomElement.find('option[value="' + value + '"]', this._inputItem),
'selected', true);
}
}
@ -72,14 +73,14 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
this._info = this._types[this._type] || { type: this._type };
var that = this,
fireChange = false;
this.element = DomElement.create(this._info.tag || 'input', {
this._inputItem = DomElement.create(this._info.tag || 'input', {
type: this._info.type,
events: {
change: function() {
var key = that._info.value;
if (typeof key === 'function')
key = null;
var value = DomElement.get(that.element, key || 'value');
var value = DomElement.get(this, key || 'value');
if (fireChange) {
that.palette.fire('change', that, that.name, value);
that.fire('change', value);
@ -90,6 +91,10 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
}
}
});
this._element = DomElement.create('tr', [
this._labelItem = DomElement.create('td'),
'td', this._inputItem
]);
Base.each(obj, function(value, key) {
this[key] = value;
}, this);
@ -102,6 +107,15 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
return this._type;
},
getLabel: function() {
return this._label;
},
setLabel: function(label) {
this._label = label;
DomElement.set(this._labelItem, 'text', label + ':');
},
getOptions: function() {
return this._options;
},
@ -121,18 +135,18 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
if (typeof key === 'function')
key.call(this, value);
else
DomElement.set(this.element, key || 'value', value);
DomElement.set(this._inputItem, key || 'value', value);
this._value = value;
},
getRange: function() {
return [toFloat(DomElement.get(this.element, 'min')),
toFloat(DomElement.get(this.element, 'max'))];
return [toFloat(DomElement.get(this._inputItem, 'min')),
toFloat(DomElement.get(this._inputItem, 'max'))];
},
setRange: function(min, max) {
var range = Array.isArray(min) ? min : [min, max];
DomElement.set(this.element, { min: range[0], max: range[1] });
DomElement.set(this._inputItem, { min: range[0], max: range[1] });
},
getMin: function() {
@ -152,11 +166,11 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
},
getStep: function() {
return toFloat(DomElement.get(this.element, 'step'));
return toFloat(DomElement.get(this._inputItem, 'step'));
},
setStep: function(step) {
DomElement.set(this.element, 'step', step);
DomElement.set(this._inputItem, 'step', step);
},
reset: function() {

28
src/ui/Palette.js
View file

@ -20,35 +20,31 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
initialize: function(title, components, values) {
var parent = DomElement.find('.palettejs-panel')
|| DomElement.find('body').appendChild(
DomElement.create('div', { 'class': 'palettejs-panel' })),
table = parent.appendChild(
DomElement.create('table', { 'class': 'palettejs-pane' })),
that = this;
DomElement.create('div', { 'class': 'palettejs-panel' }));
this._element = parent.appendChild(
DomElement.create('table', { 'class': 'palettejs-pane' })),
this._title = title;
if (!values)
values = {};
this._components = Base.each(components, function(component, name) {
for (var name in (this._components = components)) {
var component = components[name];
if (!(component instanceof Component)) {
if (component.value == null)
component.value = values[name];
component.name = name;
component = components[name] = new Component(component);
}
component.palette = that;
this._element.appendChild(component._element);
component.palette = this;
// Make sure each component has an entry in values, so observers get
// installed further down.
if (values[name] === undefined)
values[name] = null;
var row = table.appendChild(
DomElement.create('tr', [
'td', { text: (component.label || name) + ':' },
'td', component.element
])
);
}
// Now replace each entry in values with a getter / setters so we can
// observe change.
});
this._values = Base.each(values, function(value, name) {
// Replace each entry with an getter / setters so we can observe
// change.
Base.define(values, name, {
enumerable: true,
configurable: true,
@ -67,5 +63,9 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
reset: function() {
for (var i in this._components)
this._components[i].reset();
},
remove: function() {
DomElement.remove(this._element);
}
});